<template>
  <div>
    <el-table v-loading="loading" :data="detailList" style="width: 100%;" max-height="350" height="350"
              border
              :row-style="rowStyle"
              ref="multipleTable">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column
        label="药品编码" width="150"
        prop="nameCode"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="药品名称" width="150" prop="coName" show-overflow-tooltip></el-table-column>
      <el-table-column label="规格型号" width="150" prop="spec" show-overflow-tooltip></el-table-column>
      <el-table-column label="批次号" width="150" prop="batchNo" show-overflow-tooltip></el-table-column>
      <el-table-column label="生产日期" width="120" prop="productDate" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ convertDateFun(scope.row.productDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="失效日期" width="120" prop="expireDate" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ convertDateFun(scope.row.expireDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="扫码数量" width="80" prop="count" show-overflow-tooltip></el-table-column>
      <el-table-column label="实际数量" width="80" prop="reCount" show-overflow-tooltip></el-table-column>
      <el-table-column label="价格" width="150" prop="price" show-overflow-tooltip></el-table-column>
      <el-table-column width="100" label="计量单位" prop="measname">
      </el-table-column>
      <el-table-column label="生产企业" width="150" prop="manufacturer" show-overflow-tooltip></el-table-column>
      <el-table-column label="批准文号" width="150" prop="certCode" show-overflow-tooltip></el-table-column>
    </el-table>
  </div>
</template>

<script>
import {convertDate} from "@/utils/date";
import {getDetailCodes} from "@/api/inout/orderDetailCode";

export default {
  name: "IoCreateOrderCodeDetail",
  props: {
    idQuery: {
      type: Object,
      required: true,
    },
    viewType: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      convertDateFun: convertDate,
      loading: false,
      query: {
        orderId: null,
        code: "",
        corpOrderId: "",
      },
      detailList: [],
      total: 0,
      selectRlVisible: false,
      dialogTableVisible: false,
      editCodeVisible: false,
    }
  },
  methods: {
    getOrderDetails() {
      this.loading = true;
      this.query.orderId = this.idQuery.billNo;
      getDetailCodes(this.query) //查找该单号下的所有条码
        .then((response) => {
          this.detailList = response.data.list || [];
          this.total = response.data.total || 0;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.detailList = [];
          this.total = 0;
        });
    },

    rowStyle({row, rowIndex}) {
      let rowBackground = {};
      if (this.viewType == 3 && !row.checkSuccess) {
        rowBackground.color = '#f60303';
      }
      return rowBackground;
    },

  },
  created() {
    if (this.idQuery.billNo != null)
      this.getOrderDetails();
  },
}
</script>

<style scoped>

</style>
