<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 width="100" label="计量单位" prop="measname"></el-table-column>
      <el-table-column label="实际数量" width="80" prop="reCount" show-overflow-tooltip></el-table-column>
      <el-table-column label="扫码数量" width="80" prop="count" 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="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-column label="操作" width="160" fixed="right"
                       v-if="curAction.mainAction=='WareHouseIn' && curAction.corpType==2">
        <template slot-scope="scope">
          <el-button type="text" size="small" v-if="scope.row.index == selectedIndex" @click.stop="true"
                     @click.native="saveChange(scope.row)">保存
          </el-button>
          <el-button type="text" size="small" v-if="scope.row.index != selectedIndex" @click.stop="true"
                     @click.native="rowChange(scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--<el-row>-->
    <!--  <el-col v-for="(info, index)  in detailList"  :key="index" :xs="12" :sm="6" :md="6" :lg="8" >-->
    <!--    <el-card :body-style="{margin:'20px'}"-->
    <!--             style="margin:20px 20px 20px 20px;;background-color: #e1f3fb;border-radius: 12px; position: relative;">-->
    <!--      <div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" >-->
    <!--        <p>产品名称：</p> <p style="font-size: 20px;background-color: #e1f3fb;font-weight: bold;">{{ info.coName }}</p>-->
    <!--      </div>-->
    <!--      <div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" >-->
    <!--        <p>包装规格：</p><p style="font-size: 16px;background-color: #e1f3fb;font-weight: bold;">{{ info.spec }}</p>-->
    <!--      </div>-->
    <!--      <div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" >-->
    <!--        <p>扫码数量：</p><p style="font-size: 16px;background-color: #e1f3fb;font-weight: bold;">{{ info.count }}</p>-->
    <!--      </div>-->
    <!--      <div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */"  v-if="info.batchNo != null">-->
    <!--        <p>批次号：</p><p style="font-size: 16px;background-color: #e1f3fb;font-weight: bold;">{{ info.batchNo }}</p>-->
    <!--      </div>-->
    <!--      <div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" v-if="info.productDate != null">-->
    <!--        <p>生产日期：</p><p style="font-size: 16px;background-color: #e1f3fb;font-weight: bold;"> <span>{{ convertDateFun(info.productDate) }}</span></p>-->
    <!--      </div>-->
    <!--      <div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */"  v-if="info.expireDate != null">-->
    <!--        <p>失效日期：</p><p style="font-size: 16px;background-color: #e1f3fb;font-weight: bold;"> <span>{{ convertDateFun(info.expireDate) }}</span></p>-->
    <!--      </div>-->
    <!--      <div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" >-->
    <!--        <p>计量单位：</p><p style="font-size: 16px;background-color: #e1f3fb;font-weight: bold;">{{ info.measname }}</p>-->
    <!--      </div>-->
    <!--      <div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" >-->
    <!--        <p>层级标识：</p><p style="font-size: 16px;background-color: #e1f3fb;font-weight: bold;">{{ info.nameCode }}</p>-->
    <!--      </div>-->
    <!--      &lt;!&ndash;<div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" >&ndash;&gt;-->
    <!--      &lt;!&ndash;  <p>实际数量：</p><p style="font-size: 16px;color: red;font-weight: bold;">{{ info.reCount }}</p>&ndash;&gt;-->
    <!--      &lt;!&ndash;</div>&ndash;&gt;-->

    <!--      &lt;!&ndash;<div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" >&ndash;&gt;-->
    <!--      &lt;!&ndash;  <p>包装规格：</p><p style="font-size: 16px;background-color: #e1f3fb;font-weight: bold;">{{ info.spec }}</p>&ndash;&gt;-->
    <!--      &lt;!&ndash;</div>&ndash;&gt;-->
    <!--      &lt;!&ndash;<div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" >&ndash;&gt;-->
    <!--      &lt;!&ndash;  <p>使用单位：</p><p style="font-size: 16px;background-color: #e1f3fb;font-weight: bold;">{{ info.measureUnit }}</p>&ndash;&gt;-->
    <!--      &lt;!&ndash;</div>   v-if="curAction.mainAction=='WareHouseIn' && curAction.corpType==2"&ndash;&gt;-->
    <!--      <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 20px;"   >-->
    <!--        <span><h1 :style="{ 'font-size': '45px', 'color':  '#F56C6C' }">{{ info.reCount }}</h1></span>-->
    <!--      </div>-->
    <!--      <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 20px;"  v-if="curAction.mainAction=='WareHouseIn' && curAction.corpType==2">-->
    <!--        <el-button type="primary" style="position: absolute; bottom: 20px; right: 20px;"  @click.native="saveChange(info)"  v-if="info.index == selectedIndex" @click.stop="true">保存</el-button>-->
    <!--        <el-button  type="primary" style="position: absolute; bottom: 20px;right: 100px;" @click.native="rowChange(info)"  v-if="info.index != selectedIndex" @click.stop="true">编辑</el-button>-->
    <!--      </div>-->

    <!--    </el-card>-->
    <!--  </el-col>-->
    <!--</el-row>-->

  </div>
</template>

<script>
import {convertDate} from "@/utils/date";
import { getCheckDetailCodes, getDetailCodes, updateBizProduct, updateCodeProduct } from '@/api/inout/orderDetailCode'


export default {
  name: "IoCreateOrderCodeDetail",
  props: {
    idQuery: {
      type: Object,
      required: true,
    },
    viewType: {
      type: Object,
      required: true,
    },
    curAction: {
      type: Object,
      required: true,
    },
    status: {
      type: Object,
      required: true,
    },

  },
  data() {
    return {
      convertDateFun: convertDate,
      loading: false,
      query: {
        orderId: null,
        code: "",
        corpOrderId: "",
      },
      detailList: [],
      total: 0,
      selectRlVisible: false,
      dialogTableVisible: false,
      editCodeVisible: false,
      orderDetail:null,

    }
  },

  watch: {
    "curAction": {
      handler(newVal, oldVal) {

      },
      immediate: true
    }
  },
  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;
          if (this.detailList.length > 0 && this.status == false){
            this.orderDetail = this.detailList[0]
            this.$emit('getOrderData',  this.orderDetail)
          }
          this.$emit('clearBillNo', this.detailList.length > 0? false : true);
          let count = 0;
          if (this.detailList && this.detailList.length > 0) {
            this.detailList.forEach(item => {
              count += item.reCount;
            });
            this.$emit('getCount', count);
          }
        })
        .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;
    },


    saveChange(row) {
      if (row.batchNo == '') {
        row.batchNo = null;
      }
      updateCodeProduct(row)
        .then((response) => {
          this.loading = false;
          if (response.code === 20000) {
            this.$message.success("保存成功！");
            this.selectedIndex = null;
            this.refreshPanel();

          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
          this.dataList = [];
          this.pageTotal = 0;
        });
    },
    rowChange(val) {
      this.currentRow = val;
      if (this.currentRow.batchNo == '')
        this.currentRow.batchNo = null;
      this.selectedIndex = val.index;
    },

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

<style scoped>
.scan-count-item .el-descriptions__content {
  float: right;
  color: red;
}
</style>
