<template>
  <div class="padding" style="height: 700px; overflow: auto">
    <div style="color: red; font-weight: 600; font-size: 24px; text-align: center"
      >来料异常报告</div
    >
    <div class="padding">
      <!-- <div style="font-weight: bold; font-size: 16px">基本信息</div> -->
      <div class="back_color padding marginTop" v-if="formData">
        <a-descriptions title="" :column="3">
          <a-descriptions-item :label="'异常报告编码'">{{ formData.errorNo }}</a-descriptions-item>

          <a-descriptions-item label="不良类别">
            {{ getOptionsValueArr(errorTypeOptions, formData.errorType) }}
            <!-- <span v-if="formData.errorType">
              <span v-for="item in errorTypeOptions" :key="item.key">
                <span v-if="item.value == formData.errorType">{{ item.label }}</span>
              </span>
            </span> -->
          </a-descriptions-item>
          <a-descriptions-item label="不良数">{{ formData.errorNum }}</a-descriptions-item>
          <a-descriptions-item label="不良率">{{ formData.errorRate }}</a-descriptions-item>
          <a-descriptions-item label="判定依据">
            <span v-if="formData.judgeResult">
              <span v-for="item in judgeResultOptions" :key="item.key">
                <span v-if="item.value == formData.judgeResult">{{ item.label }}</span>
              </span>
            </span>
          </a-descriptions-item>

          <a-descriptions-item label="异常报告创建人">{{
            formData.createUserName
          }}</a-descriptions-item>
          <a-descriptions-item label="异常报告创建时间">{{
            formData.createDate
          }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
    <div class="padding">
      <div class="back_color padding marginTop" v-if="formData">
        <a-descriptions title="" :column="2">
          <a-descriptions-item :label="'异常描述'">{{ formData.remark }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
    <hr />
    <div class="padding" v-if="formData && formData.reportId">
      <div style="font-weight: 600; font-size: 24px; text-align: center">来料检验报告</div>
      <div>
        <viewModal :rowData="{ id: formData.reportId, height: auto }"></viewModal>
      </div>
    </div>
    <a-divider />
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, watch, onMounted, createVNode } from 'vue';
  // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import viewModal from '../../mesincheckreport/components/viewModal.vue';
  // import SelectUser from '/@/components/Form/src/components/SelectUser.vue';
  // import { getMesQlIncheckreport } from '/@/api/mes/mesincheckreport';
  import { getMesQbCheckstandardList, getDicItem, getOptionsValueArr } from '/@/api/mes/common';
  import { getMesQlIncheckerror } from '/@/api/mes/mesqlincheckerror';
  // import SelectUser from '/@/components/Form/src/components/SelectUser.vue';
  // import AutoCodeRule from '/@/components/Form/src/components/AutoCodeRule.vue';
  // import Upload from '/@/components/Form/src/components/Upload.vue';
  // import { useModal } from '/@/components/Modal';
  // import { useMessage } from '/@/hooks/web/useMessage';
  // import { useI18n } from '/@/hooks/web/useI18n';
  // import { Modal } from 'ant-design-vue';
  // const { notification } = useMessage();
  // const { t } = useI18n();
  let props = defineProps(['rowData']);
  const rowData: {
    id: string;
    reportId: string;
    isUpdate: boolean;
    flag: string;
  } = reactive({
    id: '',
    reportId: '',
    isUpdate: false,
    flag: '',
  });

  const baseData1 = ref<any>({});

  // const format = ref('YYYY-MM-DD HH:mm:ss');

  const formData = ref<any>({
    errorNo: '',
    isSysNum: '',
    isSysNumBoolean: true,
    errorNum: '',
    errorRate: '',
    errorType: [],
    remark: '',
  });

  const emit = defineEmits(['cancel', 'success']);
  const formRef = ref();
  onMounted(async () => {
    rowData.id = props.rowData.id;
    rowData.reportId = props.rowData.reportId;
    rowData.isUpdate = props.rowData.isUpdate;
    rowData.flag = props.rowData.flag;
    console.log('row===', rowData);
    getDetailData();
    errorTypeOptions.value = await getDicItem('1686641031350390786');
    judgeResultOptions.value = await getMesQbCheckstandardList();
  });

  watch(
    () => props.rowData,
    (val) => {
      console.log('监听', val);
      if (val) {
        rowData.id = props.rowData.id;
        rowData.reportId = props.rowData.reportId;
        rowData.isUpdate = props.rowData.isUpdate;
        rowData.flag = props.rowData.flag;
        getDetailData();
      }
    },
  );
  const errorTypeOptions = ref<any[]>([]);
  const judgeResultOptions = ref<any[]>([]);

  const getDetailData = async () => {
    const res = await getMesQlIncheckerror(rowData.id);
    if (res) {
      formData.value = res;
      if (res.errorType) formData.value.errorType = res.errorType.split(',');
    }
  };

  function handleClose() {
    emit('cancel');
  }
</script>

<style lang="less" scoped>
  .padding {
    padding: 12px;
  }

  .back_color {
    background-color: hsl(0, 0%, 98%);
    position: relative;
  }

  .marginTop {
    margin-top: 12px;
  }
</style>
