<template>
  <div class="info-box">
    <div v-if="isShowTitle">
      <a-button @click="emit('returnPage')">返回</a-button>
      <span class="text-base font-bold pl-5">{{ isAnnual ? '供应商年审' : '风险评估' }}</span>
    </div>
    <a-divider v-if="isShowTitle" />
    <div class="content-box">
      <div class="content-title" v-if="isAnnual">
        {{ `${baseInfo?.createDate?.split('-')[0]}供应商年审` }}
      </div>
      <div class="sub-title" style="margin-top: 0">基本信息</div>
      <a-card :bordered="false">
        <div class="title-info">
          <span>供应商编码：{{ baseInfo?.number }}</span>
          <span>供应商名称：{{ baseInfo?.name }}</span>
          <span>供应商负责人：{{ baseInfo?.person }}</span>
          <span>手机号：{{ baseInfo?.phone }}</span>
          <span>经营范围：{{ baseInfo?.scope }}</span>
          <span>添加时间：{{ baseInfo?.createDate }}</span>
          <span>添加人：{{ baseInfo?.createUserName }}</span>
          <span>供应商类型：{{ baseInfo?.typeName }}</span>
        </div>
      </a-card>
      <a-form
        :model="formState"
        :label-col="{ span: 2 }"
        :wrapper-col="{ span: 8 }"
        autocomplete="off"
        :rules="isView ? [] : rules"
        @finish="handleSubmit"
        v-show="isShowForm"
      >
        <div class="sub-title">供货能力评估</div>
        <a-card :bordered="false" class="card-box">
          <div class="title-info">
            <a-form-item label="等级选择" name="capacityLevel">
              <a-radio-group
                v-if="!isView"
                v-model:value="formState.capacityLevel"
                :options="levelOptions"
              />
              <a-tag :color="getLevel(formState.capacityLevel, false)" v-else>
                {{ getLevel(formState.capacityLevel, true) }}
              </a-tag>
            </a-form-item>
            <a-form-item label="评估理由" name="capacityReason">
              <a-textarea v-if="!isView" v-model:value="formState.capacityReason" />
              <span v-else>{{ formState.capacityReason }}</span>
            </a-form-item>
            <a-form-item :label="isView ? '附件' : '附件上传'" name="capacityFilePath">
              <Upload
                v-model:value="formState.capacityFilePath"
                listType="dragger"
                :maxNumber="6"
                :accpet="fileAccpet"
                :tip="fileTip"
                :style="{ width: '200px' }"
                v-if="!isView"
              />
              <Upload
                v-model:value="formState.capacityFilePath"
                listType="dragger"
                :style="{ width: '200px', display: 'none' }"
                :showRemoveIcon="false"
                v-else-if="formState.capacityFilePath"
              />
              <span style="color: #999" v-else>暂无数据</span>
            </a-form-item>
          </div>
        </a-card>
        <div class="sub-title">供货质量评估</div>
        <a-card :bordered="false" class="card-box">
          <div class="title-info">
            <a-form-item label="等级选择" name="qualityLevel">
              <a-radio-group
                v-if="!isView"
                v-model:value="formState.qualityLevel"
                :options="levelOptions"
              />
              <a-tag :color="getLevel(formState.qualityLevel, false)" v-else>
                {{ getLevel(formState.qualityLevel, true) }}
              </a-tag>
            </a-form-item>
            <a-form-item label="评估理由" name="qualityReason">
              <a-textarea v-if="!isView" v-model:value="formState.qualityReason" />
              <span v-else>{{ formState.qualityReason }}</span>
            </a-form-item>
            <a-form-item :label="isView ? '附件' : '附件上传'" name="qualityFilePath">
              <Upload
                v-model:value="formState.qualityFilePath"
                listType="dragger"
                :maxNumber="6"
                :accpet="fileAccpet"
                :tip="fileTip"
                :style="{ width: '200px' }"
                v-if="!isView"
              />
              <Upload
                v-model:value="formState.qualityFilePath"
                listType="dragger"
                :style="{ width: '200px', display: 'none' }"
                :showRemoveIcon="false"
                v-else-if="formState.qualityFilePath"
              />
              <span style="color: #999" v-else>暂无数据</span>
            </a-form-item>
          </div>
        </a-card>
        <div class="sub-title">环境与安全评估</div>
        <a-card :bordered="false" class="card-box">
          <div class="title-info">
            <a-form-item label="等级选择" name="safetyLevel">
              <a-radio-group
                v-if="!isView"
                v-model:value="formState.safetyLevel"
                :options="levelOptions"
              />
              <a-tag :color="getLevel(formState.safetyLevel, false)" v-else>
                {{ getLevel(formState.safetyLevel, true) }}
              </a-tag>
            </a-form-item>
            <a-form-item label="评估理由" name="safetyReason">
              <a-textarea v-if="!isView" v-model:value="formState.safetyReason" />
              <span v-else>{{ formState.safetyReason }}</span>
            </a-form-item>
            <a-form-item :label="isView ? '附件' : '附件上传'" name="safetyFilePath">
              <Upload
                v-model:value="formState.safetyFilePath"
                listType="dragger"
                :maxNumber="6"
                :accpet="fileAccpet"
                :tip="fileTip"
                :style="{ width: '200px' }"
                v-if="!isView"
              />
              <Upload
                v-model:value="formState.safetyFilePath"
                listType="dragger"
                :style="{ width: '200px', display: 'none' }"
                :showRemoveIcon="false"
                v-else-if="formState.safetyFilePath"
              />
              <span style="color: #999" v-else>暂无数据</span>
            </a-form-item>
          </div>
        </a-card>
        <div class="sub-title">最终评估结果</div>
        <a-card :bordered="false" class="card-box">
          <div class="title-info">
            <a-form-item :label="isView ? '' : '等级选择'" name="finalState">
              <a-radio-group
                v-model:value="formState.finalState"
                :options="levelOptions"
                v-if="!isView"
              />
              <a-tag class="final-tag" :color="getLevel(formState.finalState, false)" v-else>
                <template #icon>
                  <Icon icon="majesticons:user" />
                </template>
                {{ getLevel(formState.finalState, true) }}
              </a-tag>
            </a-form-item>
            <a-form-item label="评估理由" name="finalReason">
              <a-textarea v-if="!isView" v-model:value="formState.finalReason" />
              <span v-else>{{ formState.finalReason }}</span>
            </a-form-item>
          </div>
        </a-card>
        <a-form-item v-if="!isView" :wrapper-col="{ span: 24 }" class="submit-btn">
          <a-button type="primary" html-type="submit">保存提交</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import {
    getSupplierInfo,
    addRisk,
    getRiskInfo,
    getAnnualInfo,
    getDetailAnnualInfo,
  } from '/@/api/erp/supplier/list';
  import { getDicDetailList } from '/@/api/system/dic';
  import Icon from '/@/components/Icon/index';
  import Upload from '/@/components/Form/src/components/Upload.vue';
  import type { Rule } from 'ant-design-vue/es/form';
  interface FormState {
    capacityFilePath: string;
    capacityLevel: string;
    capacityReason: string;
    finalReason: string;
    finalState: string;
    qualityFilePath: string;
    qualityLevel: string;
    qualityReason: string;
    safetyFilePath: string;
    safetyLevel: string;
    safetyReason: string;
  }
  const props = defineProps({
    id: String,
    formalId: String,
    isView: Boolean,
    isShowTitle: {
      type: Boolean,
      default: true,
    },
    isShowForm: {
      type: Boolean,
      default: true,
    },
    isAnnual: {
      type: Boolean,
      default: false,
    },
  });
  const emit = defineEmits(['returnPage']);
  const formState = ref<FormState>({
    capacityFilePath: '',
    capacityLevel: '',
    capacityReason: '',
    finalReason: '',
    finalState: '',
    qualityFilePath: '',
    qualityLevel: '',
    qualityReason: '',
    safetyFilePath: '',
    safetyLevel: '',
    safetyReason: '',
  });

  const rules: Record<string, Rule[]> = {
    capacityLevel: [{ required: true, message: '请选择供货能力等级', trigger: 'change' }],
    capacityReason: [{ required: true, message: '请选择供货能力评估理由', trigger: 'change' }],
    qualityLevel: [{ required: true, message: '请选择供货质量等级', trigger: 'change' }],
    qualityReason: [{ required: true, message: '请选择供货质量评估理由', trigger: 'change' }],
    safetyLevel: [{ required: true, message: '请选择环境与安全等级', trigger: 'change' }],
    safetyReason: [{ required: true, message: '请选择环境与安全评估理由', trigger: 'change' }],
    finalState: [{ required: true, message: '请选择最终等级', trigger: 'change' }],
    finalReason: [{ required: true, message: '请选择最终评估理由', trigger: 'change' }],
  };
  const baseInfo = ref();
  const levelOptions = ref<Recordable[]>([]);

  const fileAccpet = '.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.pdf';
  const fileTip = '支持扩展名：.doc  .docx  .xls  .xlsx  .jpg  .jpeg  .png  .pdf;最多上传6个文件;';
  onMounted(async () => {
    if (props.isView) {
      let info;
      if (props.isAnnual) {
        info = props.id
          ? await getAnnualInfo(props.id!)
          : await getDetailAnnualInfo(props.formalId!);
      } else {
        info = await getRiskInfo(props.id!);
      }
      baseInfo.value = info.caseErpSupplierInfoVo;
      formState.value = info.caseErpSupplierRisk;
    } else {
      baseInfo.value = await getSupplierInfo(props.id!);
    }
    const data = (await getDicDetailList({
      itemId: '1676831752869834753',
    })) as unknown as Recordable[];
    levelOptions.value = data.filter((x) => x.value !== '4');
    levelOptions.value.map((x) => {
      x.label = x.name;
      x.value = x.id;
    });
  });

  const getLevel = (level, isText) => {
    const data = levelOptions.value.filter((x) => x.id === level);
    if (!data.length) return '';
    if (isText) return data[0].name;
    switch (data[0].name) {
      case '优秀':
        return 'processing';
      case '良好':
        return 'success';
      case '及格':
        return 'warning';
      case '不及格':
        return 'error';
    }
  };

  const handleSubmit = async (values) => {
    values.type = props.isAnnual ? 1 : 0;
    values.supplierId = props.id;
    await addRisk(values);
    emit('returnPage');
  };
</script>
<style lang="less" scoped>
  .info-box {
    background-color: #fff;
    width: 100%;
    height: 100%;
    padding: 16px;
    margin-right: 8px;

    .content-box {
      overflow: auto;
      height: calc(100% - 80px);

      .content-title {
        font-size: 24px;
        font-weight: 700;
        color: #444;
        padding-bottom: 15px;
        text-align: center;
      }

      .title-info > span {
        margin-right: 40px;
      }

      .final-tag {
        width: 100px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        font-size: 14px;
        margin-left: 50px;
      }

      .sub-title {
        color: #333;
        font-weight: 700;
        margin: 18px;
      }

      .card-box {
        :deep(.ant-card-body) {
          padding: 24px 0;
        }
      }

      .submit-btn {
        :deep(.ant-form-item-control-input-content) {
          text-align: center;
          margin-top: 20px;
        }
      }
    }
  }

  :deep(.ant-divider) {
    height: 1px;
    background-color: #dcdfe6;
  }

  :deep(.ant-card-body) {
    background-color: #f8f8f8;
  }

  :deep(.ant-image) {
    width: 100px;
    height: 75px;
    padding: 5px;
    border: 1px solid silver;
    border-radius: 4px;
    margin-right: 10px;
  }

  :deep(.ant-image-img) {
    height: 100%;
  }
</style>
