<template>
  <div>
    <el-card>
      <el-form label-width="120px" v-show="showSearch" size="mini">
        <el-row type="flex" >
          <el-col type="flex" >
            <el-form-item label="记录号:" prop="recordCode" class="query-form-item">
              <el-input v-model="filterQuery.recordCode"
                        style="width: 200px"
                        placeholder="请输入记录号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col type="flex" >
            <el-form-item label="注册企业:" prop="companyName" class="query-form-item">
              <el-input v-model="filterQuery.companyName"
                        style="width: 200px"
                        placeholder="请输入注册企业"
                        @keyup.native="onSubmit"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col type="flex" >
            <el-form-item label="DI标识:" prop="nameCode" class="query-form-item">
              <el-input v-model="filterQuery.nameCode"
                        style="width: 200px"
                        placeholder="请输入DI标识"
              ></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row type="flex" >
          <el-col type="flex" >
            <el-form-item label="产品名称:" prop="cpmctymc" class="query-form-item">
              <el-input v-model="filterQuery.cpmctymc"
                        style="width: 200px"
                        placeholder="请输入产品名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col type="flex" >
            <el-form-item label="规格型号:" prop="ggxh" class="query-form-item">
              <el-input v-model="filterQuery.ggxh"
                        style="width: 200px"
                        placeholder="请输入规格型号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col type="flex" >
            <el-form-item label="医疗器械注册人:" prop="ylqxzcrbarmc" class="query-form-item">
              <el-input v-model="filterQuery.ylqxzcrbarmc"
                        style="width: 200px"
                        placeholder="请输入医疗器械注册人"
              ></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row type="flex" >
          <el-col type="flex" >
            <el-form-item label="注册备案号:" prop="zczbhhzbapzbh" class="query-form-item">
              <el-input v-model="filterQuery.zczbhhzbapzbh"
                        style="width: 200px"
                        placeholder="请输入注册备案号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="top-right-btn" style="display:flex;">
        <el-button-group>
          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏
          </el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit" size="mini"
          >查询
          </el-button
          >
        </el-button-group>
      </div>
      <el-divider style="margin: 15px"></el-divider>

      <el-table v-loading="loading" :data="listOrder"
                style="width: 100%"
                @row-click="handleSelectionChange"
                highlight-current-row border>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="查询记录号" prop="recordCode" width="180"></el-table-column>
        <el-table-column label="生产订单号" prop="billNo" width="220"></el-table-column>
        <el-table-column label="订单日期" prop="billDate" width="180"></el-table-column>
        <el-table-column label="DI标识" prop="nameCode" width="120"></el-table-column>
        <el-table-column label="产品名称" prop="cpmctymc" width="180"></el-table-column>
        <el-table-column label="规格型号" prop="ggxh" width="180"></el-table-column>
        <el-table-column label="医疗器械注册人" prop="ylqxzcrbarmc" width="180"></el-table-column>
        <el-table-column label="注册/备案号" prop="zczbhhzbapzbh" width="180"></el-table-column>
        <el-table-column label="批次号" prop="batchNo" width="180"></el-table-column>
        <el-table-column label="查询人" prop="createUser" width="180"></el-table-column>
        <el-table-column label="所属企业" prop="companyName" width="180"></el-table-column>
        <el-table-column label="查询方式" prop="traceType" width="120" :formatter="formaterTraceType"></el-table-column>
        <el-table-column label="备注" prop="remark" width="220"></el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click.native="handleView(scope.row,scope.index)"
            >详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :limit.sync="filterQuery.limit"
        :page.sync="filterQuery.page"
        @pagination="getManuOrderList"
      ></pagination>
    </el-card>
    <el-dialog
      title="单据-详情"
      :visible.sync="openManuOrder"
      class="dialog-two"
      width="60%"
      top="5vh"
    >
      <el-form :model="formView" :rules="formRules" ref="dataForm" label-width="100px">
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="生产订单号" prop="billNo">
              <el-input v-model="formView.billNo" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="el-col">
            <el-form-item label="订单日期" prop="billDate">
              <el-input v-model="formView.billDate" size="small"
                        style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="产品名称" prop="cpmctymc">
              <el-input v-model="formView.cpmctymc" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="el-col">
            <el-form-item label="规格型号" prop="ggxh">
              <el-input v-model="formView.ggxh" size="small"
                        style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="产品描述" prop="cpms">
              <el-input v-model="formView.cpms" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="el-col">
            <el-form-item label="注册/备案证号" prop="zczbhhzbapzbh">
              <el-input v-model="formView.zczbhhzbapzbh" size="small"
                        style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="DI产品标识" prop="nameCode">
              <el-input v-model="formView.nameCode" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="el-col">
            <el-form-item label="国家库UUID" prop="uuid">
              <el-input v-model="formView.uuid" size="small"
                        style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="批次号" prop="batchNo">
              <el-input v-model="formView.batchNo" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="el-col">
            <el-form-item label="生产企业" prop="manufactory">
              <el-input v-model="formView.manufactory" size="small"
                        style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="更新时间" prop="updateTime">
              <el-input v-model="formView.updateTime" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="el-col">
            <el-form-item label="所属企业" prop="companyName">
              <el-input v-model="formView.companyName" size="small"
                        style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="查询记录号" prop="recordCode">
              <el-input v-model="formView.recordCode" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="el-col">
            <el-form-item label="查询人" prop="createUser">
              <el-input v-model="formView.createUser" size="small"
                        style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="医疗器械注册人" prop="ylqxzcrbarmc">
              <el-input v-model="formView.ylqxzcrbarmc" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="el-col">
            <el-form-item label="查询方式" prop="traceType">
              <el-input v-model="this.formateTraceType" size="small"
                        style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formView.remark" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="openManuOrder = false" size="small">关闭</el-button>
      </div>
    </el-dialog>
    <el-tabs type="border-card" style="margin: 15px">
      <el-tab-pane>
        <span slot="label">单据 {{ currentRow == null ? '' : currentRow.billNo }}-业务扫码校验结果</span>
        <el-table v-loading="manuCodeRelLoading" :data="listCodeRel"
                  style="width: 100%"
                  highlight-current-row border>
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="DI标识" prop="nameCode" width="180"></el-table-column>
          <el-table-column label="产品名称" prop="cpmctymc" width="220"></el-table-column>
          <el-table-column label="规格型号" prop="ggxh" width="180"></el-table-column>
          <el-table-column label="UDI码" prop="code" width="120"></el-table-column>
          <el-table-column label="父码" prop="pcode" width="180"></el-table-column>
          <el-table-column label="批次号" prop="batchNo" width="180"></el-table-column>
          <el-table-column label="生产日期" prop="produceDate" width="180"></el-table-column>
          <el-table-column label="失效日期" prop="expireDate" width="180"></el-table-column>
          <el-table-column label="序列号" prop="serialNo" width="180"></el-table-column>
          <el-table-column label="包装层级" prop="bzcj" width="180"></el-table-column>
          <el-table-column label="包装状态" prop="packState" width="180" :formatter="formaterPackState"></el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click.native="handleViewCoderel(scope.row,scope.index)"
              >详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="单据-详情"
      :visible.sync="openManuCodeRel"
      class="dialog-two"
      width="60%"
      top="5vh"
    >
      <el-form :model="formViewCodeRel" :rules="formRules" ref="dataForm" label-width="100px">
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="UDI码" prop="code">
              <el-input v-model="formViewCodeRel.code" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="el-col">
            <el-form-item label="父码" prop="pcode">
              <el-input v-model="formViewCodeRel.pcode" size="small"
                        style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="批次号" prop="batchNo">
              <el-input v-model="formViewCodeRel.batchNo" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="el-col">
            <el-form-item label="生产日期" prop="produceDate">
              <el-input v-model="formViewCodeRel.produceDate" size="small"
                        style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="失效日期" prop="expireDate">
              <el-input v-model="formViewCodeRel.expireDate" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="el-col">
            <el-form-item label="序列号" prop="serialNo">
              <el-input v-model="formViewCodeRel.serialNo" size="small"
                        style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="包装状态" prop="packState">
              <el-input v-model="this.formatePackState" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="el-col">
            <el-form-item label="包装层级" prop="bzcj">
              <el-input v-model="formViewCodeRel.bzcj" size="small"
                        style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="DI产品标识" prop="nameCode">
              <el-input v-model="formViewCodeRel.nameCode" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="el-col">
            <el-form-item label="产品名称" prop="cpmctymc">
              <el-input v-model="formViewCodeRel.cpmctymc" size="small"
                        style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="11" type="flex">
            <el-form-item label="规格型号" prop="ggxh">
              <el-input v-model="formViewCodeRel.ggxh" size="small" style="width: 90%" :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="openManuCodeRel = false" size="small">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {isBlank} from "@/utils/strUtil";
import {getTraceManuOrderList,getManuCodeRelList} from "@/api/udi/udiTrace";

export default {
  data() {
    return {
      filterQuery: {
        recordCode: null,
        companyName: null,
        nameCode: null,
        cpmctymc: null,
        ggxh: null,
        ylqxzcrbarmc: null,
        zczbhhzbapzbh: null,
        page: 1,
        limit: 10,
      },
      manuCodeRelQuery: {
        manuOrderNo: null,
        page: 1,
        limit: 10,
      },
      options: [
        {value: 'A', label: 'UDI码查询(源头查询)'},
        {value: 'B', label: '按产品信息组合查询'},
        {value: 'C', label: '现场检查查询'}
      ],
      currentRow: {
        billNo: ""
      },
      total: 0,
      codeRelTotal: 0,
      loading: true,
      manuCodeRelLoading: false,
      listOrder: [],
      listCodeRel: [],
      openManuOrder: false,
      openManuCodeRel: false,
      formView: {},
      formViewCodeRel: {},
      showSearch: true,
      formateTraceType: null,
      formatePackState: null
    }
  },
  methods: {
    formaterPackState(row){
      if (row.packState == 1) {
        this.formatePackState = "满箱"
        return "满箱"
      }else if (row.packState == 2){
        this.formatePackState = "零箱"
        return "零箱"
      }else if (row.packState == 3){
        this.formatePackState = "拼箱满箱"
        return "拼箱满箱"
      }else {
        this.formatePackState = "拼箱零箱"
        return "拼箱零箱"
      }
    },
    formaterTraceType(row){
      if (row.traceType == 1) {
        this.formateTraceType = "源头查询"
        return "源头查询"
      }else {
        this.formateTraceType = "现场检查查询"
        return "现场检查查询"
      }

    },
    hideSearch() {
      this.showSearch = !this.showSearch;
    },
    handleSelectionChange(val) {
      this.currentRow = val;
      this.getManuCodeRel();
    },
    getManuCodeRel(){
      if (this.currentRow == null || isBlank(this.currentRow.billNo)) {
        this.$message.error("请先选择需要查询的单据！")
        return;
      }
      this.manuCodeRelLoading = true;
      this.manuCodeRelQuery.manuOrderNo = this.currentRow.billNo;
      getManuCodeRelList(this.manuCodeRelQuery).then((res) => {
        this.manuCodeRelLoading = false;
        if (res.code === 20000) {
          this.listCodeRel = res.data.list || [];
          this.codeRelTotal = res.data.total || 0;
          console.log(this.listCodeRel)
        } else {
          this.$message.error(res.message);
          this.listCodeRel = [];
          this.codeRelTotal = 0;
        }
      }).catch((error) => {
        this.manuCodeRelLoading = false;
        this.$message.error(error.message);
        this.listCodeRel = [];
        this.codeRelTotal = 0;
      })
    },
    handleView(row){
      this.listOrder.forEach(obj => {
        if (row.id == obj.id) {
          this.formView = obj
        }
      })
      console.log(this.formView)
      this.openManuOrder = true
    },
    handleViewCoderel(row){
      this.listCodeRel.forEach(obj => {
        if (this.listCodeRel[0]) {
          this.formViewCodeRel = obj
        }
      })
      console.log(this.formViewCodeRel)
      this.openManuCodeRel = true
    },
    onReset(){
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        recordCode: null,
        companyName: null,
        nameCode: null,
        cpmctymc: null,
        ggxh: null,
        ylqxzcrbarmc: null,
        zczbhhzbapzbh: null,
        page: 1,
        limit: 10,
      };
      this.currentRow.billNo = null
      this.listCodeRel = null,
      this.getManuOrderList();
    },
    onSubmit(){
      this.currentRow.billNo = null
      this.filterQuery.page = 1;
      this.getManuOrderList()
    },
    getManuOrderList() {
      //清空校验结果表
      this.listCodeRel = null;
      this.loading = true;
      getTraceManuOrderList(this.filterQuery).then((res) => {
        this.loading = false;
        if (res.code === 20000) {
          this.listOrder = res.data.list || [];
          this.total = res.data.total || 0;
          console.log(this.listOrder)
        } else {
          this.$message.error(res.message);
          this.listOrder = [];
          this.total = 0;
        }
      }).catch((error) => {
        this.loading = false;
        this.$message.error(error.message);
        this.listOrder = [];
        this.total = 0;
      })
    },
  },
  created() {
    this.getManuOrderList()
  }
}
</script>

<style scoped>
.el-col {
  border-radius: 4px;
  flex-wrap: wrap;
}
.query-form-item {
  display: block !important;
  margin-right: 10px;
  margin-bottom: 5px;
}

</style>
