<template>
  <div class="info-box">
    <div>
      <a-button @click="emit('returnPage')">返回</a-button>
      <span class="text-base font-bold pl-5">转正申请</span>
    </div>
    <a-divider />
    <div class="content-box">
      <div class="report-box">
        <div class="content-title">供应商评估报告</div>
        <div v-if="isAssess">
          <RiskAssessment :isView="true" :id="id" :isShowTitle="false" :isShowForm="isShowForm" />
          <div class="text-center">
            <a-button @click="showMore">
              <template #icon>
                <DownOutlined v-if="isShowForm === false" />
                <UpOutlined v-else />
              </template>
              {{ btnTxt }}
            </a-button>
          </div>
        </div>
        <div class="assess-info" v-else>请先完成供应商评估才可以进行转正申请！</div>
      </div>
      <a-form
        :model="applicateForm"
        :label-col="{ span: 2 }"
        :wrapper-col="{ span: 8 }"
        autocomplete="off"
        :rules="rules"
        @finish="handleSubmit"
      >
        <div class="sub-title">转正说明</div>
        <a-card :bordered="false">
          <div class="title-info">
            <a-form-item label="转正理由" name="reason">
              <a-textarea v-model:value="applicateForm.reason" />
            </a-form-item>
          </div>
        </a-card>
        <div class="sub-title">附件上传</div>
        <a-card :bordered="false">
          <div class="title-info">
            <a-form-item name="filePath">
              <Upload
                v-model:value="applicateForm.filePath"
                listType="dragger"
                :maxNumber="6"
                :accpet="fileAccpet"
                :tip="fileTip"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </div>
        </a-card>
        <a-form-item :wrapper-col="{ span: 24 }" class="submit-btn">
          <a-button type="primary" html-type="submit" :disabled="!isAssess">提交转正申请</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { addApplication } from '/@/api/erp/supplier/list';
  import RiskAssessment from './RiskAssessment.vue';
  import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
  import Upload from '/@/components/Form/src/components/Upload.vue';
  import type { Rule } from 'ant-design-vue/es/form';
  interface FormState {
    filePath: string;
    reason: string;
  }
  const props = defineProps({
    id: String,
    isAssess: Boolean,
  });
  const emit = defineEmits(['returnPage']);
  const applicateForm = ref<FormState>({
    filePath: '',
    reason: '',
  });

  const fileAccpet = '.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.pdf';
  const fileTip = '支持扩展名：.doc  .docx  .xls  .xlsx  .jpg  .jpeg  .png  .pdf;最多上传6个文件;';

  const rules: Record<string, Rule[]> = {
    reason: [{ required: true, message: '请填写转正理由', trigger: 'change' }],
  };
  const isShowForm = ref(false);
  const btnTxt = computed(() => {
    return isShowForm.value ? '收起报告' : '展开报告';
  });
  const showMore = () => {
    isShowForm.value = !isShowForm.value;
  };
  const handleSubmit = async (values) => {
    values.supplierId = props.id;
    await addApplication(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);

      .report-box {
        border: 1px solid #ddd;
        padding: 15px;
        margin-bottom: 18px;

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

        .assess-info {
          color: #999;
          text-align: center;
          margin: 20px 0;
        }
      }

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

      .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;
  }
</style>
