<template>
  <div class="custom-info">
    <avue-crud ref="crudRef" :table-loading="state.loading" :data="state.list" :option="state.options">
      <template #header>
        <h5 class="custom-form__title">质检记录</h5>
      </template>
      <template #qualityReportUrl="{ row: item }">
        <el-button
          v-if="item.qualityReportUrl"
          type="primary"
          text
          @click="downloadFile(item.qualityReportUrl, `${item.productName}-质检报告.png`, 'image')"
        >
          下载
        </el-button>
        <span v-else>暂无</span>
      </template>
    </avue-crud>
  </div>
</template>
<script setup>
import { reactive, ref, watch } from 'vue';
import { useApp } from '@/hooks';
import { CRUD_VIEW_OPTIONS } from '@/config';
import { downloadFile } from '@/utils';
import { GetEntity } from '@/apis/trace/coding';

const props = defineProps({
  row: {
    type: Object,
    default: () => {},
  },
});

const app = useApp();
const crudRef = ref(null);
const state = reactive({
  loading: false,
  options: {
    ...CRUD_VIEW_OPTIONS,
    column: [
      // {
      //   label: '序号',
      //   prop: 'id',
      //   width: 200,
      //   fixed: true,
      // },
      {
        label: '采收批次',
        prop: 'harvestBatch',
        width: 200,
      },
      {
        label: '产品名称',
        prop: 'productName',
        width: 200,
      },
      {
        label: '质检结果',
        prop: 'qualityResultType',
        type: 'select',
        dicData: [
          {
            label: '合格',
            value: 0,
          },
          {
            label: '不合格',
            value: 1,
          },
        ],
      },
      {
        label: '质检类型',
        prop: 'qualityType',
        type: 'select',
        dicData: [
          {
            label: '检测机构',
            value: 0,
          },
          {
            label: '自检',
            value: 1,
          },
        ],
      },
      {
        label: '质检机构',
        prop: 'department',
        width: 200,
        overHidden: true,
      },
      {
        label: '质检项目',
        prop: 'qualityProject',
      },
      {
        label: '质检报告',
        prop: 'qualityReportUrl',
        slot: true,
      },
      {
        label: '质检人',
        prop: 'qualityPerson',
      },
      {
        label: '质检时间',
        prop: 'qualityTime',
        width: 200,
      },
      {
        label: '检测说明',
        prop: 'qualityDescribe',
        type: 'textarea',
        overHidden: true,
        resize: 'none',
        width: 200,
      },
    ],
  },
  data: {},
  list: [],
});

const loadData = () => {
  state.loading = true;
  GetEntity({ id: props.row.id })
    .then((res) => {
      if (res.code === 200) {
        state.data = res.data;
        state.list = res.data?.productInfo ?? [];
      }
    })
    .catch((err) => {
      app.$message.error(err.msg);
    })
    .finally(() => {
      state.loading = false;
    });
};

watch(
  () => props.row,
  (val) => {
    val?.id && loadData();
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
.custom-info {
  :deep(.avue-crud__header) {
    display: none !important;
  }
}
</style>
