<template>
  <RiskAssessment
    :isView="true"
    :formalId="formalId"
    :isAnnual="true"
    @return-page="returnPage"
    v-if="showAnnual"
  />
  <div class="info-box" v-else>
    <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>
        <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="report-box">
        <div class="content-title">供应商转正资料</div>
        <div class="sub-title">转正说明</div>
        <a-card :bordered="false">
          <div class="title-info">转正理由:{{ data?.reason }}</div>
        </a-card>
        <div class="sub-title">附件</div>
        <a-card :bordered="false">
          <Upload
            v-model:value="data.filePath"
            listType="dragger"
            :style="{ width: '200px', display: 'none' }"
            :showRemoveIcon="false"
            v-if="data?.filePath"
          />
          <span style="color: #999" v-else>暂无附件</span>
        </a-card>
      </div>
      <div class="report-box">
        <div class="content-title">供应商时间轴</div>
        <a-timeline v-if="data?.timeAxisVoList?.length">
          <a-timeline-item v-for="(item, index) in data.timeAxisVoList" :key="index">
            <div class="info-span" style="color: #666">{{ item.title }}</div>
            <template v-if="item.content.length">
              <div v-for="(subItem, subIndex) in item.content" :key="subIndex" class="info-span">
                {{ subItem }}
              </div>
            </template>
            <div class="info-span">{{ item.time }}</div>
            <a-button
              type="link"
              v-if="item.formalId"
              @click="checkAnnualInfo(item.formalId)"
              style="padding-left: 0"
            >
              查看年审报告 >
            </a-button>
          </a-timeline-item>
        </a-timeline>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, computed } from 'vue';
  import RiskAssessment from './RiskAssessment.vue';
  import { getSupplierTimeInfo } from '/@/api/erp/supplier/list';
  import Upload from '/@/components/Form/src/components/Upload.vue';
  import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
  const props = defineProps({
    id: String,
  });
  const emit = defineEmits(['returnPage']);

  const isShowForm = ref(false);
  const data = ref();
  const showAnnual = ref(false);
  const formalId = ref('');
  const btnTxt = computed(() => {
    return isShowForm.value ? '收起报告' : '展开报告';
  });
  onMounted(async () => {
    data.value = await getSupplierTimeInfo(props.id!);
  });
  const showMore = () => {
    isShowForm.value = !isShowForm.value;
  };

  const checkAnnualInfo = (id) => {
    showAnnual.value = true;
    formalId.value = id;
  };

  const returnPage = () => {
    showAnnual.value = false;
    reload();
  };
</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;
        }
      }

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

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

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

  :deep(.ant-timeline) {
    margin: 0 40px;
  }

  :deep(.ant-timeline-item-tail) {
    left: 9px;
  }

  :deep(.ant-timeline-item-head) {
    width: 20px;
    height: 20px;
    border-width: 3px;
  }

  :deep(.ant-timeline-item-content) {
    margin-left: 35px;
  }

  .info-span {
    color: #999;
    margin-top: 5px;
  }
</style>
