<template>
  <div>
    <el-row>
      <div style="margin: 0px 60px 10px auto; height: 35px;  float: right;">
        <el-button-group>
          <el-button
            type="primary"
            ref="mainTable"
            @click.native.stop="selectProductFunction()"
            :loading="loading"
          >产品录入
          </el-button
          >
        </el-button-group>
      </div>

    </el-row>

    <el-table v-loading="loading" :data="detailList" style="width: 100%;"
              :row-class-name="tableRowClassName"
              border
              :row-style="rowStyle"
              max-height="350" height="350" ref="multipleTable">
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column width="150"
                       label="产品通用名"
                       prop="coName"
                       show-overflow-tooltip
      ></el-table-column>
      <el-table-column width="150"
                       label="规格型号"
                       prop="spec"
                       show-overflow-tooltip
      ></el-table-column>
      <el-table-column width="150" label="批次号">
        <template slot-scope="scope">
          <el-input v-model="scope.row.batchNo"
                    :disabled="scope.row.index !== selectedIndex"
                    @input="scope.row.batchNo =scope.row.batchNo.replace(/[\W]/g, '')"
                    ref='inputBatchNoRef'
                    placeholder="请输入批次号"></el-input>
        </template>
      </el-table-column>
      <el-table-column width="180" label="生产日期(yyMMdd)">
        <template slot-scope="scope">

          <el-input v-model="scope.row.productDate" auto-complete="off"
                    oninput="if(value.length>6)value=value.slice(0,6)"
                    :disabled="scope.row.index !== selectedIndex"
                    type="number"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column width="180" label="失效日期(yyMMdd)">
        <template slot-scope="scope">

          <el-input v-model="scope.row.expireDate" auto-complete="off"
                    oninput="if(value.length>6)value=value.slice(0,6)"
                    :disabled="scope.row.index !== selectedIndex"
                    type="number"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column width="120" label="单据数量">
        <template slot-scope="scope">
          <el-input v-model="scope.row.count"
                    type='number'
                    :disabled="scope.row.index !== selectedIndex"
                    oninput="value=value.replace(/[^\d]/g,'')"></el-input>
        </template>
      </el-table-column>

      <el-table-column width="80"
                       label="扫码数量"
                       prop="scanCount"
                       v-if="viewType!=2"
                       show-overflow-tooltip
      ></el-table-column>
      <el-table-column width="150" label="价格">
        <template slot-scope="scope">
          <el-input v-model="scope.row.price"
                    type='number'
                    :disabled="scope.row.index !== selectedIndex"
                    placeholder="请输入价格"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column width="160"
                       label="注册/备案凭证号"
                       prop="certCode"
                       show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column width="150"
                       label="生产厂家"
                       prop="manufacturer"
                       show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" width="250">
        <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
          >
          <el-button
            type="text"
            size="small"
            @click.stop="true"
            @click.native="copyDetail(scope.row)"
          >复制
          </el-button
          >

          <el-button
            type="text"
            size="small"
            v-if="scope.row.bindRlFk==null"
            @click.native.stop="bindRl(scope.row)"
          >绑定产品
          </el-button
          >
          <el-button
            type="text"
            size="small"
            v-if="scope.row.supId==null"
            @click.native.stop="handleUnitClick(scope.row)"
          >绑定供应商
          </el-button
          >

          <el-button
            type="text"
            size="small"
            @click.stop="true"
            @click.native="deleteDetail(scope.row)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="业务详情-产品录入"
      :visible.sync="selectProductVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="85%"
      v-if="selectProductVisible"
      :append-to-body='true'
    >
      <stockOrderNewSelectProduct
        :closeDialog="closeDialog"
        :data="thisData"
      ></stockOrderNewSelectProduct>
    </el-dialog>
    <el-dialog
      title="库存产品录入"
      :visible.sync="selectInvProductVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="85%"
      v-if="selectInvProductVisible"
      :append-to-body='true'
    >
      <dialogInvProduct
        :closeDialog="closeDialogC2"
        :invQueryData="invQueryData"
        :orderQuery="thisData"
        :type="2"
      ></dialogInvProduct>
    </el-dialog>


    <!--    绑定产品-->
    <el-dialog
      title="绑定产品"
      :visible.sync="selectRlVisible"
      width="80%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="selectRlVisible"
      append-to-body
    >
      <selectRlDialog
        :curRow="curRow"
        :type="bizType"
        v-on:selectBindRl="selectBindRl"
        v-on:closeBindDialog="closeBindDialog"
      ></selectRlDialog>
    </el-dialog>


    <!--    绑定供应商-->
    <el-dialog
      title="绑定供应商"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="dialogTableVisible"
      width="80%"
      append-to-body
    >
      <DialogSelectUnit
        :codeId="curRow"
        :type="bizType"
        v-on:selectSupUnit="selectSupUnit"
        v-on:closeBindDialog="closeBindDialog"
      ></DialogSelectUnit>
    </el-dialog>


  </div>
</template>

<script>
import stockOrderNewSelectProduct from "./DialogSelectProduct";
import dialogInvProduct from "./DialogSelectInvProduct";
import {addBizProduct, getDetailBizs, updateBizProduct, delBizProduct} from "@/api/inout/orderDetailCode";
import {updateBizBind} from "@/api/inout/order";
import selectRlDialog from "@/views/inout/DialogSelectRl";
import DialogSelectUnit from "@/views/inout/DialogSelectUnit";

export default {
  name: "IoCreateOrderBizDetail",
  props: {
    idQuery: {
      type: Object,
      required: true,
    },
    refreshPanel: {
      type: Function,
      required: true,
    },
    refreshOrder: {
      type: Function,
      required: true,
    },
    viewType: {
      type: Object,
      required: true,
    },
    curBustype: {
      type: Object,
      required: true,
    },

  },
  data() {
    return {
      bizType: 1,
      loading: false,
      query: {
        orderId: null,
        code: "",
        corpOrderId: "",
      },
      detailList: [],
      total: 0,
      iCount: 0,
      selectProductVisible: false,
      selectInvProductVisible: false,
      thisData: {},
      selectedIndex: null,
      invQueryData: {
        invCode: null,
      },
      selectRlVisible: false,
      dialogTableVisible: false,
      curRow: null,
    };
  },
  components: {
    selectRlDialog, DialogSelectUnit,
    stockOrderNewSelectProduct,
    dialogInvProduct,
  },
  methods: {
    getOrderDetails() {
      this.loading = true;
      this.query.orderId = this.idQuery.billNo;
      getDetailBizs(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;
        });
    },

    rowChange(val) {
      this.currentRow = val;
      this.selectedIndex = val.index;
    },

    closeDialog(rData) {
      this.selectProductVisible = false;
      this.selectInvProductVisible = false;
      this.idQuery = rData;
      this.getOrderDetails();
    },

    closeDialogC2(rData) {
      this.idQuery = rData;
      this.selectInvProductVisible = false;
      this.getOrderDetails();
    },

    rowStyle({row, rowIndex}) {
      let rowBackground = {};
      if (!this.$isNotBlank(row.supId) || !this.$isNotBlank(row.bindRlFk)) {
        rowBackground.color = '#f60303';
        return rowBackground;
      }

      if (this.viewType == 1)
        return null;

      if (!row.checkSuccess) {
        rowBackground.color = '#f60303';
      }
      return rowBackground;
    },

    tableRowClassName({row, rowIndex}) {
      row.index = rowIndex;
    },

    selectProductFunction() {
      this.thisData = this.idQuery;
      if (this.$isBlank(this.idQuery.action)) {
        this.$message.error("单据类型不能为空！")
        return;
      }
      if (this.$isBlank(this.idQuery.invCode)) {
        this.$message.error("当前仓库不能为空！");
        return;
      }

      if (this.$isBlank(this.idQuery.fromCorp) && this.$isBlank(this.idQuery.fromInvCode)) {
        this.$message.error("往来信息不能为空！");
        return;
      }
      if (this.curBustype.corpType == 3) {//内部科室
        this.invQueryData.invCode = this.idQuery.invCode;
        this.selectInvProductVisible = true;
      } else if (this.curBustype.corpType == 2)//供应商信息
      {
        this.selectProductVisible = true;
      }

    },

    saveChange(row) {
      updateBizProduct(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;
        });
    },

    copyDetail(row) {
      let data = {
        relId: row.bindRlFk,
        supId: row.supId,
        zczbhhzbapzbh: row.zczbhhzbapzbh,
        orderEntity: this.idQuery,
      }
      this.loading = true;
      addBizProduct(data)
        .then((response) => {
          this.loading = false;
          if (response.code === 20000) {
            this.getOrderDetails();
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
          this.dataList = [];
          this.pageTotal = 0;
        });
    },

    deleteDetail(row) {
      let data = {
        id: row.id,
      }
      this.loading = true;
      delBizProduct(data)
        .then((response) => {
          this.loading = false;
          if (response.code === 20000) {
            this.getOrderDetails();
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
          this.dataList = [];
          this.pageTotal = 0;
        });
    },
    bindRl(val) {
      this.curRow = val;
      this.selectRlVisible = true;
    },

    handleUnitClick(row) {
      this.curRow = row;
      this.dialogTableVisible = true;
    },

    selectBindRl(row) {
      let query = {
        id: this.curRow.id,
        bindRlFk: row.id,
      };
      updateBizBind(query).then((response) => {
          if (response.code == 20000) {
            this.$message.success("绑定成功");
            this.getOrderDetails();
          } else
            this.$message.error(response.message);
        }
      ).catch(() => {

      });
    },

    selectSupUnit(row) {
      let query = {
        id: this.curRow.id,
        supId: row.erpId,
      };
      updateBizBind(query).then((response) => {
        if (response.code == 20000) {
          this.$message.success("绑定成功");
          this.getOrderDetails();
        } else {
          this.$message.error(response.message);
        }
      }).catch(() => {
      });
    }
    ,


    closeBindDialog() {
      this.selectRlVisible = false;
      this.dialogTableVisible = false;
      this.refreshPanel();
    }
    ,
  }
  ,
  filters: {}
  ,

  watch: {
    'idQuery.billNo':
      {
        handler() {
          this.refreshOrder(this.idQuery);
        }
        ,
      }
  }
  ,

  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  }
  ,
  created() {
    if (this.idQuery.billNo != null)
      this.getOrderDetails();
  }
  ,
}
;
</script>
<style scoped>
.el-table_fixed, el-table__fixed-right {
  height: 80% !important;
}

.el-table__fixed-body-wrapper {
  height: 80% !important;
}


.ao-text {
  width: 100%;
  font-size: 13px;
  font-family: "Microsoft YaHei";
  float: right;
  text-align: right;
  margin-top: 10px;
}

/**
解决el-input输入框 type=number时，输入中文光标上移问题
 */
.el-input__inner {
  line-height: 1px !important;
}

</style>



