<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="88px"
    >
      <el-form-item label="检疫证号" prop="animalCertNo">
        <el-input
          v-model="queryParams.animalCertNo"
          placeholder="请输入检疫证号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="供应商" prop="supplierName">
        <el-input
          v-model="queryParams.supplierName"
          placeholder="请输入供应商"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="肉商" prop="purchaserName">
        <el-input
          v-model="queryParams.purchaserName"
          placeholder="请输入肉商"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="血码" prop="slaughterCode">
        <el-input
          v-model="queryParams.slaughterCode"
          placeholder="请输入血码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div>
      <el-descriptions
        class="mb20"
        title="基本信息"
        direction="horizontal"
        :column="5"
        :label-style="{ width: '120px' }"
        border
      >
        <el-descriptions-item label="检疫证号">{{ basicInfo.animalCertNo }}</el-descriptions-item>
        <el-descriptions-item label="进场日期">{{ basicInfo.entranceTime }}</el-descriptions-item>
        <el-descriptions-item label="货主(供应商)">{{ basicInfo.cargoOwner }}</el-descriptions-item>
        <el-descriptions-item label="主体识别号">{{ basicInfo.companyNo }}</el-descriptions-item>
        <el-descriptions-item label="货主联系电话">{{ basicInfo.cargoOwnerPhone }}</el-descriptions-item>
        <el-descriptions-item label="动物种类">{{ basicInfo.animalCategory }}</el-descriptions-item>
        <el-descriptions-item label="品种">{{ basicInfo.variety }}</el-descriptions-item>
        <el-descriptions-item label="数量及单位">{{ basicInfo.amount }}{{ basicInfo.units }}</el-descriptions-item>
        <el-descriptions-item label="承运人">{{ basicInfo.carrier }}</el-descriptions-item>
        <el-descriptions-item label="承运人联系电话">{{ basicInfo.carrierPhone }}</el-descriptions-item>
        <el-descriptions-item label="启运地点" :span="5">{{ basicInfo.fromPlace }}</el-descriptions-item>
        <el-descriptions-item label="到达地点" :span="5">{{ basicInfo.toPlace }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        class="mb20"
        title="检验检疫信息"
        direction="horizontal"
        :column="4"
        :label-style="{ width: '160px' }"
        border
      >
        <el-descriptions-item label="精神检查结果"><dict-tag :options="dict.type.app_inspection_res" :value="inspectionInfo.spirit"/></el-descriptions-item>
        <el-descriptions-item label="外貌检查结果"><dict-tag :options="dict.type.app_inspection_res" :value="inspectionInfo.appearance"/></el-descriptions-item>
        <el-descriptions-item label="呼吸检查结果"><dict-tag :options="dict.type.app_inspection_res" :value="inspectionInfo.breathe"/></el-descriptions-item>
        <el-descriptions-item label="排泄物检查结果"><dict-tag :options="dict.type.app_inspection_res" :value="inspectionInfo.metabolite"/></el-descriptions-item>
        <el-descriptions-item label="其他检查情况" :span="4">{{inspectionInfo.otherRemark}}</el-descriptions-item>
        <template v-for="(item,i) in inspectionInfo.inspectionDetail">
        <el-descriptions-item label="检验检疫项目" :key="i" :span="1">{{ item.itemName }}</el-descriptions-item>
        <el-descriptions-item label="检验检疫结果" :key="i" :span="3">{{ item.result }}</el-descriptions-item>
        </template>
      </el-descriptions>
      <el-descriptions
        class="mb20"
        title="无害化处理信息"
        direction="horizontal"
        :column="4"
        :label-style="{ width: '160px' }"
        border
      >
        <el-descriptions-item label="病死头数">{{ harmlessTreatment.illnessDeadAmount }}</el-descriptions-item>
        <el-descriptions-item label="病害头数">{{ harmlessTreatment.illnessDiseaseAmount }}</el-descriptions-item>
        <el-descriptions-item label="急宰头数">{{ harmlessTreatment.snapKillAmount }}</el-descriptions-item>
        <el-descriptions-item label="不合格产品重量(kg)">{{ harmlessTreatment.unqualifiedWeight }}</el-descriptions-item>
        <el-descriptions-item label="处理方式" :span="4">{{ harmlessTreatment.dealWay }}</el-descriptions-item>
      </el-descriptions>
      <div class="table-title">销售信息</div>
      <el-table :data="slaughterBatchs" border style="width: 100%">
        <el-table-column prop="slaughterCode" label="血码" width="180" />
        <el-table-column prop="purchaserName" label="肉商名称" width="180" />
        <el-table-column prop="amount" label="数量(头)"/>
        <el-table-column prop="beforeWeight" label="宰前重量(kg)"/>
        <el-table-column prop="sideWeight" label="白条重量(kg)"/>
        <el-table-column prop="headWeight" label="猪头重量(kg)"/>
        <el-table-column prop="redWeight" label="红脏重量(kg)"/>
        <el-table-column prop="whiteWeight" label="白脏重量(kg)"/>
        <el-table-column prop="animalCert" label="动物检疫合格证号"/>
        <el-table-column prop="meatCert" label="肉品品质检验合格证号"/>
        <el-table-column prop="salePlace" label="销售去向">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.app_origin_type" :value="scope.row.salePlace"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getTrace } from "@/api/app/productTrace";

export default {
  name: "ProductTrace",
  dicts: ["app_origin_type","app_inspection_res"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      slaughterBatchs: [],
      // 查询参数
      queryParams: {
        animalCertNo:null,
        // supplierName: null,
        // purchaserName: null,
        // slaughterCode: null,
      },
      //基本信息
      basicInfo:{
        animalCertNo:null,
        entranceTime:null,
        cargoOwner:null,
        companyNo:null,
        cargoOwnerPhone:null,
        animalCategory:null,
        variety:null,
        amount:null,
        units:null,
        carrier:null,
        carrierPhone:null,
        fromPlace:null,
        toPlace:null,
      },
      inspectionInfo:{
        spirit:null,
        appearance:null,
        breathe:null,
        metabolite:null,
        otherRemark:null,
        inspectionDetail:null,
      },
      harmlessTreatment:{
        illnessDeadAmount:null,
        illnessDiseaseAmount:null,
        snapKillAmount:null,
        unqualifiedWeight:null,
        dealWay:null,
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      getTrace(this.queryParams).then((response) => {
        //this.reportList = response.rows;
        if(response.data && response.data.length>0){
          let data = response.data[0]
            this.basicInfo = {
              animalCertNo:data.animalCertNo,
              entranceTime:data.entranceTime,
              cargoOwner:data.cargoOwner,
              companyNo:data.companyNo,
              cargoOwnerPhone:data.cargoOwnerPhone,
              animalCategory:data.animalCategory,
              variety:data.variety,
              amount:data.amount,
              units:data.units,
              carrier:data.carrier,
              carrierPhone:data.carrierPhone,
              fromPlace:data.fromPlace,
              toPlace:data.toPlace,
            }
            this.inspectionInfo = {
              spirit:data.spirit,
              appearance:data.appearance,
              breathe:data.breathe,
              metabolite:data.metabolite,
              otherRemark:data.otherRemark,
              inspectionDetail:data.inspectionDetail?JSON.parse(data.inspectionDetail):[],
            }
            this.harmlessTreatment = {
              illnessDeadAmount:data.illnessDeadAmount,
              illnessDiseaseAmount:data.illnessDiseaseAmount,
              snapKillAmount:data.snapKillAmount,
              unqualifiedWeight:data.unqualifiedWeight,
              dealWay:data.dealWay,
            }
            this.slaughterBatchs = data.slaughterBatchs?data.slaughterBatchs:[];
        }else{
          this.$modal.msgWarning("未查询到相关追溯信息");
        }

        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
<style>
.table-title{
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
</style>
