<script setup lang="ts">
import { ref, watch } from "vue";
import { DIALOG_WIDTH, LABEL_WIDTH } from "../../../constants/ui";
import { Document, Upload } from "@element-plus/icons-vue";
import type { FormInstance, FormRules, UploadFile, UploadFiles } from "element-plus";
import { compressImageFile } from "../../../utils/compress";

const visible = defineModel<boolean>({ required: true });
const createPlatformExpertForm = defineModel<any>("createPlatformExpertForm", { required: true });

const formRef = ref<FormInstance>();
const formRules = ref<FormRules>({
  expertName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  idNo: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  titleCode: [{ required: true, message: "请选择职称", trigger: "change" }],
  hospitalCode: [{ required: true, message: "请选择医院", trigger: "change" }],
  bankName: [{ required: true, message: "请输入开户行", trigger: "blur" }],
  bankProvince: [{ required: true, message: "请输入省份", trigger: "blur" }],
  bankCity: [{ required: true, message: "请输入城市", trigger: "blur" }],
  bankBranchName: [{ required: true, message: "请输入详细开户行", trigger: "blur" }],
  bankCardNo: [{ required: true, message: "请输入银行卡号", trigger: "blur" }],
});

defineProps<{
  expertTitleOptions: any[];
  expertHospitalOptions: any[];
  createExpertIdFrontPreviewUrl: string;
  createExpertIdBackPreviewUrl: string;
  createExpertCardFrontPreviewUrl: string;
}>();

const emit = defineEmits<{
  createExpertIdFrontChange: [file: UploadFile, fileList: UploadFiles];
  createExpertIdBackChange: [file: UploadFile, fileList: UploadFiles];
  createExpertCardFrontChange: [file: UploadFile, fileList: UploadFiles];
  viewOss: [ossKey: string];
  save: [valid: boolean];
}>();

const handleSave = async () => {
  if (!formRef.value) return;
  const valid = await formRef.value.validate().catch(() => false);
  if (!valid) return;
  emit("save", valid);
};

async function onCreateExpertIdFrontChange(file: UploadFile, fileList: UploadFiles) {
  if (file.status === "ready" && file.raw && file.raw.type.startsWith("image/")) {
    try {
      file.raw = await compressImageFile(file.raw);
      file.size = file.raw.size;
    } catch (e) {
      console.warn("Image compression failed", e);
    }
  }
  emit("createExpertIdFrontChange", file, fileList);
}

async function onCreateExpertIdBackChange(file: UploadFile, fileList: UploadFiles) {
  if (file.status === "ready" && file.raw && file.raw.type.startsWith("image/")) {
    try {
      file.raw = await compressImageFile(file.raw);
      file.size = file.raw.size;
    } catch (e) {
      console.warn("Image compression failed", e);
    }
  }
  emit("createExpertIdBackChange", file, fileList);
}

async function onCreateExpertCardFrontChange(file: UploadFile, fileList: UploadFiles) {
  if (file.status === "ready" && file.raw && file.raw.type.startsWith("image/")) {
    try {
      file.raw = await compressImageFile(file.raw);
      file.size = file.raw.size;
    } catch (e) {
      console.warn("Image compression failed", e);
    }
  }
  emit("createExpertCardFrontChange", file, fileList);
}

const idCardExampleVisible = ref(false);
const bankCardExampleVisible = ref(false);

watch(
  () => createPlatformExpertForm.value.expertName,
  (name) => {
    createPlatformExpertForm.value.accountName = name ?? "";
  },
  { immediate: true }
);
  </script>
  
  <template>
    <el-dialog v-model="visible" title="新增专家" :width="DIALOG_WIDTH.lg" :close-on-click-modal="false">
      <el-form ref="formRef" :model="createPlatformExpertForm" label-position="left" :label-width="LABEL_WIDTH.lg" :rules="formRules">
      <el-form-item label=" " :label-width="LABEL_WIDTH.lg">
        <div class="id-card-upload-block">
          <div class="id-card-upload-header">
            <span class="id-card-upload-title">请上传身份证照片，确保身份证上的头像及身份信息清晰可见</span>
            <el-link type="primary" :underline="false" class="id-card-example-link" @click="idCardExampleVisible = true">
              <el-icon class="id-card-example-link-icon"><Document /></el-icon>
              查看示例
            </el-link>
          </div>
          <div class="id-card-upload-columns">
            <div class="id-card-upload-col">
              <div class="id-card-upload-col-label">身份证头像面</div>
              <div class="id-card-upload-drop-wrap">
                <el-upload
                  class="id-card-upload-dnd"
                  :class="{ 'id-card-upload-dnd--filled': !!createExpertIdFrontPreviewUrl }"
                  drag
                  :auto-upload="false"
                  :show-file-list="false"
                  :limit="1"
                  :on-change="onCreateExpertIdFrontChange"
                >
                  <div class="id-card-upload-inner">
                    <div v-if="createExpertIdFrontPreviewUrl" class="id-card-preview-wrap">
                      <el-image
                        :src="createExpertIdFrontPreviewUrl"
                        :preview-src-list="[createExpertIdFrontPreviewUrl]"
                        preview-teleported
                        fit="cover"
                        class="id-card-preview-img"
                      />
                      <!-- <el-button
                        v-if="createPlatformExpertForm.idCardFrontOssKey"
                        text
                        type="primary"
                        size="small"
                        class="id-card-view-oss"
                        @click.stop="$emit('viewOss', createPlatformExpertForm.idCardFrontOssKey)"
                      >
                        查看原图
                      </el-button> -->
                    </div>
                    <div v-else class="id-card-illus id-card-illus-front" aria-hidden="true">
                      <svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
                        <rect x="8" y="12" width="184" height="96" rx="6" fill="#e8f4fc" stroke="#d0e6f5" />
                        <rect x="22" y="28" width="72" height="8" rx="2" fill="#b8d9f0" />
                        <rect x="22" y="44" width="60" height="6" rx="2" fill="#c8e2f4" />
                        <rect x="22" y="56" width="68" height="6" rx="2" fill="#c8e2f4" />
                        <rect x="22" y="68" width="52" height="6" rx="2" fill="#c8e2f4" />
                        <circle cx="148" cy="58" r="28" fill="#d4ebf9" stroke="#b8d9f0" />
                        <ellipse cx="148" cy="54" rx="12" ry="14" fill="#a8cce8" />
                        <path d="M130 78 Q148 68 166 78" stroke="#a8cce8" fill="none" stroke-width="6" stroke-linecap="round" />
                      </svg>
                    </div>
                    <p v-if="!createExpertIdFrontPreviewUrl" class="id-card-upload-hint">
                      <span class="id-card-upload-hint-gray">请将文件拖拽至此，或</span>
                      <span class="id-card-upload-hint-blue">
                        <el-icon class="id-card-upload-hint-icon"><Upload /></el-icon>
                        点击上传
                      </span>
                    </p>
                  </div>
                </el-upload>
              </div>
            </div>
            <div class="id-card-upload-col">
              <div class="id-card-upload-col-label">身份证国徽面</div>
              <div class="id-card-upload-drop-wrap">
                <el-upload
                  class="id-card-upload-dnd"
                  :class="{ 'id-card-upload-dnd--filled': !!createExpertIdBackPreviewUrl }"
                  drag
                  :auto-upload="false"
                  :show-file-list="false"
                  :limit="1"
                  :on-change="onCreateExpertIdBackChange"
                >
                  <div class="id-card-upload-inner">
                    <div v-if="createExpertIdBackPreviewUrl" class="id-card-preview-wrap">
                      <el-image
                        :src="createExpertIdBackPreviewUrl"
                        :preview-src-list="[createExpertIdBackPreviewUrl]"
                        preview-teleported
                        fit="cover"
                        class="id-card-preview-img"
                      />
                      <!-- <el-button
                        v-if="createPlatformExpertForm.idCardBackOssKey"
                        text
                        type="primary"
                        size="small"
                        class="id-card-view-oss"
                        @click.stop="$emit('viewOss', createPlatformExpertForm.idCardBackOssKey)"
                      >
                        查看原图
                      </el-button> -->
                    </div>
                    <div v-else class="id-card-illus id-card-illus-back" aria-hidden="true">
                      <svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
                        <rect x="8" y="12" width="184" height="96" rx="6" fill="#e8f4fc" stroke="#d0e6f5" />
                        <circle cx="48" cy="60" r="22" fill="#f5e4dc" stroke="#e8b4a0" />
                        <circle cx="48" cy="60" r="14" fill="#e8a090" opacity="0.45" />
                        <rect x="82" y="30" width="96" height="8" rx="2" fill="#b8d9f0" />
                        <rect x="82" y="46" width="88" height="6" rx="2" fill="#c8e2f4" />
                        <rect x="82" y="60" width="92" height="6" rx="2" fill="#c8e2f4" />
                        <rect x="82" y="82" width="100" height="8" rx="2" fill="#b8d9f0" />
                      </svg>
                    </div>
                    <p v-if="!createExpertIdBackPreviewUrl" class="id-card-upload-hint">
                      <span class="id-card-upload-hint-gray">请将文件拖拽至此，或</span>
                      <span class="id-card-upload-hint-blue">
                        <el-icon class="id-card-upload-hint-icon"><Upload /></el-icon>
                        点击上传
                      </span>
                    </p>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="姓名" required prop="expertName">
        <el-input v-model="createPlatformExpertForm.expertName" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="身份证号" required prop="idNo">
        <el-input v-model="createPlatformExpertForm.idNo" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="手机号" required prop="phone">
        <el-input v-model="createPlatformExpertForm.phone" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="职称" required prop="titleCode">
        <el-select v-model="createPlatformExpertForm.titleCode" clearable filterable placeholder="请选择职称" class="w-full">
          <el-option v-for="item in expertTitleOptions" :key="item.dictCode" :label="item.dictName" :value="item.dictCode" />
        </el-select>
      </el-form-item>
      <el-form-item label="医院" required prop="hospitalCode">
        <el-select v-model="createPlatformExpertForm.hospitalCode" clearable filterable placeholder="请选择医院" class="w-full">
          <el-option v-for="item in expertHospitalOptions" :key="item.dictCode" :label="item.dictName" :value="item.dictCode" />
        </el-select>
      </el-form-item>
      <el-divider content-position="left">银行卡信息</el-divider>
      <el-form-item label=" " :label-width="LABEL_WIDTH.lg">
        <div class="id-card-upload-block">
          <div class="id-card-upload-header">
            <span class="id-card-upload-title">请上传银行卡照片，确保卡号清晰可见</span>
            <el-link type="primary" :underline="false" class="id-card-example-link" @click="bankCardExampleVisible = true">
              <el-icon class="id-card-example-link-icon"><Document /></el-icon>
              查看示例
            </el-link>
          </div>
          <div class="id-card-upload-columns id-card-upload-columns--single">
            <div class="id-card-upload-col">
              <div class="id-card-upload-col-label">银行卡</div>
              <div class="id-card-upload-drop-wrap">
                <el-upload
                  class="id-card-upload-dnd"
                  :class="{ 'id-card-upload-dnd--filled': !!createExpertCardFrontPreviewUrl }"
                  drag
                  :auto-upload="false"
                  :show-file-list="false"
                  :limit="1"
                  :on-change="onCreateExpertCardFrontChange"
                >
                  <div class="id-card-upload-inner">
                    <div v-if="createExpertCardFrontPreviewUrl" class="id-card-preview-wrap">
                      <el-image
                        :src="createExpertCardFrontPreviewUrl"
                        :preview-src-list="[createExpertCardFrontPreviewUrl]"
                        preview-teleported
                        fit="cover"
                        class="id-card-preview-img"
                      />
                      <!-- <el-button
                        v-if="createPlatformExpertForm.bankCardFrontOssKey"
                        text
                        type="primary"
                        size="small"
                        class="id-card-view-oss"
                        @click.stop="$emit('viewOss', createPlatformExpertForm.bankCardFrontOssKey)"
                      >
                        查看原图
                      </el-button> -->
                    </div>
                    <div v-else class="id-card-illus id-card-illus-bank" aria-hidden="true">
                      <svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
                        <rect x="8" y="12" width="184" height="96" rx="8" fill="#e8f0f8" stroke="#c8d8e8" />
                        <rect x="20" y="32" width="28" height="22" rx="3" fill="#d4a574" stroke="#c4956a" />
                        <rect x="56" y="36" width="120" height="6" rx="2" fill="#b8d0e8" />
                        <rect x="56" y="48" width="100" height="5" rx="2" fill="#c8d8e8" />
                        <rect x="56" y="60" width="108" height="5" rx="2" fill="#c8d8e8" />
                        <rect x="20" y="78" width="90" height="5" rx="2" fill="#a8c0d8" />
                        <rect x="120" y="76" width="60" height="14" rx="2" fill="#b8d0e8" />
                      </svg>
                    </div>
                    <p v-if="!createExpertCardFrontPreviewUrl" class="id-card-upload-hint">
                      <span class="id-card-upload-hint-gray">请将文件拖拽至此，或</span>
                      <span class="id-card-upload-hint-blue">
                        <el-icon class="id-card-upload-hint-icon"><Upload /></el-icon>
                        点击上传
                      </span>
                    </p>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="开户行" required prop="bankName">
        <el-input v-model="createPlatformExpertForm.bankName" placeholder="请输入开户行" />
      </el-form-item>
      <el-form-item label="开户行省份" required prop="bankProvince">
        <el-input v-model="createPlatformExpertForm.bankProvince" placeholder="请输入省" />
      </el-form-item>
      <el-form-item label="开户行城市" required prop="bankCity">
        <el-input v-model="createPlatformExpertForm.bankCity" placeholder="请输入城" />
      </el-form-item>
      <el-form-item label="详细开户行" required prop="bankBranchName">
        <el-input v-model="createPlatformExpertForm.bankBranchName" placeholder="请输入详细开户行" />
      </el-form-item>
      <el-form-item label="银行卡号" required prop="bankCardNo">
        <el-input v-model="createPlatformExpertForm.bankCardNo" placeholder="请输入银行卡" />
      </el-form-item>
      <el-form-item label="开户名" required prop="accountName">
        <el-input :model-value="createPlatformExpertForm.expertName" disabled placeholder="与上方姓名一致，不可修改" />
      </el-form-item>
    </el-form>
    <el-dialog v-model="idCardExampleVisible" title="身份证上传示例" :width="DIALOG_WIDTH.sm" append-to-body>
      <p class="id-card-example-desc">头像面需含人像与证件信息；国徽面需含国徽与签发机关等信息，四角完整、文字清晰</p>
      <div class="id-card-example-row">
        <div class="id-card-example-item">
          <div class="id-card-upload-col-label">身份证头像面</div>
          <div class="id-card-example-box id-card-illus-front">
            <svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
              <rect x="8" y="12" width="184" height="96" rx="6" fill="#e8f4fc" stroke="#d0e6f5" />
              <rect x="22" y="28" width="72" height="8" rx="2" fill="#b8d9f0" />
              <rect x="22" y="44" width="60" height="6" rx="2" fill="#c8e2f4" />
              <rect x="22" y="56" width="68" height="6" rx="2" fill="#c8e2f4" />
              <rect x="22" y="68" width="52" height="6" rx="2" fill="#c8e2f4" />
              <circle cx="148" cy="58" r="28" fill="#d4ebf9" stroke="#b8d9f0" />
              <ellipse cx="148" cy="54" rx="12" ry="14" fill="#a8cce8" />
              <path d="M130 78 Q148 68 166 78" stroke="#a8cce8" fill="none" stroke-width="6" stroke-linecap="round" />
            </svg>
          </div>
        </div>
        <div class="id-card-example-item">
          <div class="id-card-upload-col-label">身份证国徽面</div>
          <div class="id-card-example-box id-card-illus-back">
            <svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
              <rect x="8" y="12" width="184" height="96" rx="6" fill="#e8f4fc" stroke="#d0e6f5" />
              <circle cx="48" cy="60" r="22" fill="#f5e4dc" stroke="#e8b4a0" />
              <circle cx="48" cy="60" r="14" fill="#e8a090" opacity="0.45" />
              <rect x="82" y="30" width="96" height="8" rx="2" fill="#b8d9f0" />
              <rect x="82" y="46" width="88" height="6" rx="2" fill="#c8e2f4" />
              <rect x="82" y="60" width="92" height="6" rx="2" fill="#c8e2f4" />
              <rect x="82" y="82" width="100" height="8" rx="2" fill="#b8d9f0" />
            </svg>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="bankCardExampleVisible" title="银行卡上传示例" :width="DIALOG_WIDTH.sm" append-to-body>
      <p class="id-card-example-desc">请拍摄银行卡正面，保证卡号信息完整清晰，避免反光与模糊</p>
      <div class="id-card-upload-col-label">银行卡正</div>
      <div class="id-card-example-box id-card-illus-bank">
        <svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
          <rect x="8" y="12" width="184" height="96" rx="8" fill="#e8f0f8" stroke="#c8d8e8" />
          <rect x="20" y="32" width="28" height="22" rx="3" fill="#d4a574" stroke="#c4956a" />
          <rect x="56" y="36" width="120" height="6" rx="2" fill="#b8d0e8" />
          <rect x="56" y="48" width="100" height="5" rx="2" fill="#c8d8e8" />
          <rect x="56" y="60" width="108" height="5" rx="2" fill="#c8d8e8" />
          <rect x="20" y="78" width="90" height="5" rx="2" fill="#a8c0d8" />
          <rect x="120" y="76" width="60" height="14" rx="2" fill="#b8d0e8" />
        </svg>
      </div>
    </el-dialog>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.id-card-upload-block {
  width: 100%;
}

.id-card-upload-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.id-card-upload-title {
  font-size: 14px;
  color: #303133;
  line-height: 1.5;
  flex: 1;
}

.id-card-example-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 14px;
}

.id-card-example-link-icon {
  font-size: 16px;
}

.id-card-upload-columns {
  display: flex;
  gap: 16px;
  width: 100%;
}

.id-card-upload-columns--single {
  justify-content: center;
}

.id-card-upload-columns--single .id-card-upload-col {
  flex: 1;
  max-width: 100%;
}

.id-card-upload-col {
  flex: 1;
  min-width: 0;
}

.id-card-upload-col-label {
  text-align: center;
  font-size: 13px;
  color: #909399;
  margin-bottom: 8px;
}

.id-card-upload-drop-wrap {
  width: 100%;
}

.id-card-upload-dnd {
  width: 100%;
}

.id-card-upload-dnd :deep(.el-upload) {
  width: 100%;
}

.id-card-upload-dnd :deep(.el-upload-dragger) {
  width: 100%;
  padding: 16px 12px 14px;
  border-radius: 8px;
  border: 1px dashed #c0d8ec;
  background: #f3f9fd;
  transition: border-color 0.2s, background 0.2s;
}

.id-card-upload-dnd :deep(.el-upload-dragger:hover) {
  border-color: var(--el-color-primary);
  background: #ecf5ff;
}

/* 已有预览时避免整块区域仍触发选文件；缩略图保留点击预览*/
.id-card-upload-dnd--filled :deep(.el-upload-dragger) {
  pointer-events: none;
}
.id-card-upload-dnd--filled :deep(.el-image) {
  pointer-events: auto;
}

.id-card-upload-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.id-card-illus {
  width: 100%;
  max-width: 220px;
}

.id-card-illus svg {
  display: block;
  width: 100%;
  height: auto;
}

.id-card-preview-wrap {
  position: relative;
  width: 100%;
  max-width: 220px;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.id-card-preview-img {
  width: 100%;
  height: 120px;
  display: block;
}

.id-card-preview-img :deep(.el-image__inner) {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.id-card-view-oss {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(255, 255, 255, 0.92) !important;
  padding: 2px 8px;
  border-radius: 4px;
}

.id-card-upload-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.id-card-upload-hint-gray {
  color: #909399;
}

.id-card-upload-hint-blue {
  color: var(--el-color-primary);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

.id-card-upload-hint-icon {
  font-size: 14px;
  vertical-align: middle;
}

.id-card-example-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
}

.id-card-example-row {
  display: flex;
  gap: 16px;
}

.id-card-example-item {
  flex: 1;
  min-width: 0;
}

.id-card-example-box {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  background: #f3f9fd;
  padding: 12px;
}

.id-card-example-box svg {
  display: block;
  width: 100%;
  height: auto;
}
</style>
