<template>
  <div>
    <el-form
      :model="editQuery"
      :rules="rules"
      ref="editQuery"
      border
      label-width="120px"
    >
      <el-card>
        <el-table :data="sysList" style="width: 100%;   margin-bottom: 8px" key="2" border>
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="系统名称" prop="sysName" show-overflow-tooltip></el-table-column>
          <el-table-column label="产品编码" prop="thirdId" show-overflow-tooltip></el-table-column>
          <el-table-column label="产品名称" prop="thirdName" show-overflow-tooltip></el-table-column>
          <el-table-column label="规格型号" prop="spec" show-overflow-tooltip></el-table-column>
          <el-table-column label="注册/备案凭证号" prop="registerNo" show-overflow-tooltip></el-table-column>
          <el-table-column label="生产厂家" prop="manufactory" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="addSelectErp(scope.row)" :disabled="scope.row.thirdId==editQuery.nameCode">
                关联
              </el-button>
              <el-button type="text" @click.native.stop="removeErp(scope.row)"
                         :disabled="editQuery.flbm==null || scope.row.thirdId==null || scope.row.thirdId==''">解绑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card>
        <div style=" float: left;
                        text-align: left;
                        font-weight: bold;
                        margin-bottom: 8px">
          <span>产品标识:</span>
        </div>
        <div style=" float: right;
                        text-align: right;
                        margin-bottom: 8px;">
          <el-button type="primary" size="mini" icon="search" @click="removeDi" v-if="productType!=1"
                     style="text-align:right">解绑DI器械信息
          </el-button>
        </div>
        <el-table v-loading="loading" :data="detailList" style="width: 100%; " border key="3" highlight-current-row
                  @current-change="handleDetail">
          <el-table-column label="产品标识" prop="nameCode" show-overflow-tooltip></el-table-column>
          <el-table-column label="产品通用名" prop="cpmctymc" show-overflow-tooltip></el-table-column>
          <el-table-column label="包装级别" prop="packLevel" show-overflow-tooltip></el-table-column>
          <el-table-column label="包装单位" prop="packUnit" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="180px">
            <template slot-scope="scope">
              <el-button type="text" @click.native.stop="singleDiEdit">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-row type="flex" class="edit-row" style="margin-top: 20px">
        <el-col :span="12">
          <el-form-item label="计量单位:">
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              v-model="editQuery.measname"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产厂家:">
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              v-model="editQuery.manufactory"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" class="edit-row">
        <el-col :span="12">
          <el-form-item label="商品名称:">
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              v-model="editQuery.spmc"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品描述:">
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              v-model="editQuery.cpms"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" class="edit-row">
        <el-col :span="12" v-if="productRemarkSet.remarkEnable1">
          <el-form-item :label="productRemarkSet.remarkTitle1+':'" +>
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              v-model="editQuery.basicPrductRemak1"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="productRemarkSet.remarkEnable2">
          <el-form-item :label="productRemarkSet.remarkTitle2+':'" +>
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              v-model="editQuery.basicPrductRemak2"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" class="edit-row">
        <el-col :span="12" v-if="productRemarkSet.remarkEnable3">
          <el-form-item :label="productRemarkSet.remarkTitle3+':'" +>
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              v-model="editQuery.basicPrductRemak3"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="productRemarkSet.remarkEnable4">
          <el-form-item :label="productRemarkSet.remarkTitle4+':'" +>
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              v-model="editQuery.basicPrductRemak4"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" class="edit-row">
        <el-col :span="12" v-if="productRemarkSet.remarkEnable5">
          <el-form-item :label="productRemarkSet.remarkTitle5+':'" +>
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              v-model="editQuery.basicPrductRemak5"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="productRemarkSet.remarkEnable6">
          <el-form-item :label="productRemarkSet.remarkTitle6+':'" +>
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              v-model="editQuery.basicPrductRemak6"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" class="edit-row">
        <el-col :span="12" v-if="productRemarkSet.remarkEnable7">
          <el-form-item :label="productRemarkSet.remarkTitle7+':'" +>
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              v-model="editQuery.basicPrductRemak7"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="productRemarkSet.remarkEnable8">
          <el-form-item :label="productRemarkSet.remarkTitle8+':'" +>
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              v-model="editQuery.basicPrductRemak8"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" class="edit-row">
        <el-col :span="12">
          <el-form-item label="医保编码:">
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              v-model="editQuery.ybbm"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="使用周期(天):">
            <el-input
              style="width: 80%"
              size="small"
              type="number"
              splaceholder="请输入内容"
              v-model="editQuery.useExpireTime"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="最小包装可使用次数:">
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              :disabled="this.useNumEnable"
              type="number"
              v-model="editQuery.useNum"
            ></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <div style="margin-bottom: 18px;margin-left: 25px">
            <el-checkbox v-model="editQuery.isDisable"
                         @change="diableChange"
                         style="width: 180px"
                         border
            >是否禁用
            </el-checkbox>
            <el-checkbox v-model="editQuery.isAdavence"
                         border
                         style="width: 180px"
            >是否寄售
            </el-checkbox>
            <el-checkbox v-model="editQuery.allowNoBatch"
                         border
                         style="width: 180px"
            >允许无批次号
            </el-checkbox>
            <el-checkbox v-model="editQuery.allowNoExpire"
                         border
                         style="width: 180px"
            >允许无失效日期
            </el-checkbox>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="el-row" type="flex">
        <el-col :span="24" class="el-col">
          <div style="margin-bottom: 18px;margin-left: 25px">

            <el-checkbox v-model="editQuery.allowNoProduct"
                         border
                         style="width: 180px"
            >允许无生产日期
            </el-checkbox>
            <el-checkbox v-model="checked"
                         :disabled="!isUseDyCheck  || editQuery.useMuti==true "
                         @change="useDyCheckChange"
                         style="width: 180px"
                         border
            >启用使用单元
            </el-checkbox>
            <el-checkbox v-model="editQuery.useMuti"
                         :disabled="checked"
                         @change="useMutiChange"
                         style="width: 180px"
                         border
            >多次/重复使用耗材
            </el-checkbox>


            <el-checkbox v-model="editQuery.dispatch"
                         style="width: 180px"
                         border
            >是否可配送
            </el-checkbox>


          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="el-row" type="flex">
        <el-col :span="24" class="el-col">
          <div style="margin-bottom: 18px;margin-left: 25px">
            <el-checkbox v-model="editQuery.groupBuy"
                         style="width: 180px"
                         @change="groupBuyChange"
                         border
            >是否集采产品
            </el-checkbox>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </el-form>

    <el-dialog
      title="耗材字典-从指定系统添加器械信息"
      :visible.sync="selectErpDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="85%"
      append-to-body
      v-if="selectErpDialogVisible"
    >
      <selectErp
        :closeDialog="closeDialog"
        :uuid="uuid"
        :relId="relId"
        :isImport="isImport"
        :data="thisData"
        :defaultSys="defaultSys"
        @closeUdi="closeUdi"
        :supEnable="false"
      ></selectErp>
    </el-dialog>
    <el-dialog
      title="耗材字典-编辑"
      :visible.sync="editSingleDiDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="45%"
      v-if="editSingleDiDialogVisible"
      append-to-body
    >
      <product-single-edit
        :editQuery="editSingleFormat"
      ></product-single-edit>

      <div style="text-align: center;margin-top: 12px">
        <el-button type="primary" size="small" icon="search" @click="onAddSingleSubmit(false)"
        >提交
        </el-button>
        <el-button type="primary" size="small" icon="search" @click="cancelDialog"
        >取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {disableUdi, removeDiRl, removeRl, thirdSysDetail, updatetSingleUdiInfo} from "@/api/basic/product/udiRelevance";
import {isBlank} from "@/utils/strUtil";
import {filterByUuid} from "@/api/basic/product/udiInfo";
import ProductSingleEdit from "@/views/basic/product/productSingleEdit";
import selectErp from "./udiInfoselectErpUdi";


export default {
  name: "productEdit",
  props: {
    editQuery: {
      type: Object,
      required: true,
    },
    uuid: {
      type: Object,
      required: true,
    },
    relId: {
      type: Object,
      required: true,
    },
    thisData: {
      type: Object,
      required: true,
    },
    productRemarkSet: {
      type: Object,
      required: true,
    },
    relevanceEdit: {
      type: Object,
      required: true,
    },
    productType: {
      type: Object,
      required: true,
    },
    closePre: {
      type: Function,
      required: true,
    },
  },

  data() {
    return {
      isUseDyCheck: true,
      useNumEnable: true,
      sysList: [],
      detailList: [],
      defaultSys: null,
      isImport: false,
      selectErpDialogVisible: false,  //选入ERP产品
      editSingleDiDialogVisible: false,
      editSingleFormat: {
        uuid: null,
        relId: null,
        sptm: null,
        packUnit: null,
        measname: null,
        nameCode: null
      },
    }
  },
  components: {
    selectErp,
    ProductSingleEdit
  },
  created() {
    this.useMutiChange(true)
    this.getThirdSysDetail();
    let ttquery = {
      id: this.relevanceEdit.id
    }
    this.getDetailList(ttquery);
  },
  methods: {
    diableChange() {
      let query = {
        relId: this.pId
      }
      disableUdi(query)
        .then((response) => {
          if (response.code != 20000) {
            this.editQuery.isDisable = false;
            this.$message.error(response.message);
          }

        })
        .catch(() => {
          this.loading = false;
          this.detailList = [];
        });
    },
    addSelectErp(row) {
      this.defaultSys = row.sysId;
      this.isImport = false;
      this.selectErpDialogVisible = true;
    },
    removeDi() {
      this.$confirm("此操作将解除该绑定DI器械信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let query = {
            relId: this.editQuery.id,
          };
          removeDiRl(query)
            .then((response) => {
              if (response.code == 20000) {
                this.$message({
                  type: "success",
                  message: "解绑成功！",
                });
                this.$emit("closePre", true);
                this.cancelDialog();
              } else {
                this.$message.error(response.message);
              }
            })
            .catch(() => {
            });
        })
        .catch(() => {
        });
    },
    cancelDialog() {
      this.editSingleDiDialogVisible = false;
    },
    singleDiEdit() {
      let temp = JSON.parse(JSON.stringify(this.editQuery));
      this.editSingleFormat.uuid = temp.uuid;
      this.editSingleFormat.id = temp.id;
      this.editSingleFormat.sptm = temp.sptm;
      this.editSingleFormat.packUnit = temp.packUnit;
      this.editSingleFormat.measname = temp.measname;
      this.editSingleFormat.nameCode = temp.nameCode;
      this.editSingleDiDialogVisible = true;
    },
    onAddSingleSubmit() {
      updatetSingleUdiInfo(this.editSingleFormat)
        .then((response) => {
          if (response.code == 20000) {
            this.$emit("closePre", true);
            this.editSingleDiDialogVisible = false;
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.cancelDialog();
        });
    },
    removeErp(row) {
      this.$confirm("此操作将解除该绑定产品信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let query = {
            relId: this.relId,
            thirdSys: row.sysId
          };
          removeRl(query)
            .then((response) => {
              if (response.code == 20000) {
                this.$message({
                  type: "success",
                  message: "删除成功！",
                });
                this.getThirdSysDetail();
              } else {
                this.$message.error(response.message);
              }
            })
            .catch(() => {
            });
        })
        .catch(() => {
        });
    },
    useDyCheckChange(val) {
      this.editQuery.useNum = 0;
    },
    useDyCountChange(val) {
      if (val) {
        this.editQuery.useNum = this.editQuery.zxxsbzbhsydysl;
      } else {
        this.editQuery.useNum = 0;
      }
    },
    getThirdSysDetail() {
      let query = {
        id: this.relevanceEdit.id,
      };
      thirdSysDetail(query)
        .then((response) => {
          this.loading = false;
          this.sysList = response.data.list || [];
        })
        .catch(() => {
          this.loading = false;
          this.sysList = [];
        });
    },
    getDetailList(detailQuery) {
      this.loading = true;
      filterByUuid(detailQuery)
        .then((response) => {
          this.loading = false;
          this.detailList = response.data || [];
        })
        .catch(() => {
          this.loading = false;
          this.detailList = [];
        });
    },
    useMutiChange(val) {
      if (val) {
        this.useNumEnable = false;
        // this.editQuery.useNum = this.editQuery.zxxsbzbhsydysl;
        if (!isBlank(this.editQuery.zxxsbzbhsydysl)) {
          if (this.editQuery.zxxsbzbhsydysl > 0) {
            this.isUseDyCheck = true;
          }
        }
      } else {
        this.useNumEnable = true;
        this.editQuery.useNum = 0;
      }
    },
    closeDialog() {
      this.selectErpDialogVisible = false;
    },
    closeUdi(val) {
      this.selectErpDialogVisible = false;
      this.getThirdSysDetail();
    },
    groupBuyChange() {
      if (this.editQuery.groupBuy == true) {
        this.editQuery.dispatch = true;
      } else {
        this.editQuery.dispatch = false;
      }
    },
  }
}
</script>

<style scoped>

</style>
