<template>
    <div>
      <el-card>
        <el-form :model="filterQuery" label-width="120px" v-show="showSearch">
          <el-row>
            <el-col :span="6">
              <el-form-item label="产品编码:">
                <el-input v-model="filterQuery.unionCode"  style="width:90%" placeholder="请输入DI/医保编码/商品条码" clearable="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产品通用名:">
                <el-input v-model="filterQuery.cpmctymc"  style="width:90%" placeholder="请输入产品通用名" clearable="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="规格型号:">
                <el-input v-model="filterQuery.ggxh"  style="width: 90%" placeholder="请输入规格型号" clearable="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="生产企业:">
                <el-input v-model="filterQuery.ylqxzcrbarmc"  style="width: 90%" placeholder="请输入生产企业/注册备案人" clearable="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="配送企业:">
                <el-input v-model="filterQuery.supName"  style="width: 90%" placeholder="请输入配送企业" clearable="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="第三方产品编码:">
                <el-input v-model="filterQuery.thrPiId" style="width: 90%" placeholder="请输入第三方产品编码" clearable="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="top-right-btn">
          <el-button-group style="display:flex;">
            <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="submitSearch">查询</el-button>
            <el-button type="primary" icon="el-icon-upload2" @click="selectExport">选中导入</el-button>
          </el-button-group>
        </div>
        <el-divider style="margin: 15px"></el-divider>
        <el-table v-loading="loading" :data="list" style="width: 100%" @selection-change="handleSelectionChange"  border highlight-current-row>
          <el-table-column type="selection" width="55" :selectable="checkSelectable"></el-table-column>
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="最小销售产品标识" prop="nameCode" width="140"></el-table-column>
          <el-table-column label="产品编码" prop="thirdId" show-overflow-tooltip></el-table-column>
          <el-table-column label="生产企业" prop="ylqxzcrbarmc" show-overflow-tooltip></el-table-column>
          <el-table-column label="产品通用名" prop="cpmctymc" show-overflow-tooltip></el-table-column>
          <el-table-column label="规格型号" prop="ggxh" show-overflow-tooltip></el-table-column>
          <el-table-column label="注册/备案凭证" prop="zczbhhzbapzbh" show-overflow-tooltip></el-table-column>
          <el-table-column label="器械类别" prop="qxlb" show-overflow-tooltip></el-table-column>
          <el-table-column width="60" label="操作" >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click.native.stop="handleModifyClick(scope.row)"
              >详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="产品信息详情"
          :visible.sync="editDialogVisible"
          width="70%"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          append-to-body
          v-if="editDialogVisible"
        >
          <el-table :data="sysList" style="width: 100%" border highlight-current-row>
            <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="thirdName" show-overflow-tooltip></el-table-column>
            <el-table-column label="第三方产品ID" prop="thirdId" show-overflow-tooltip></el-table-column>
          </el-table>

          <el-table v-loading="loading" :data="detailList" style="width: 100%; margin-top: 20px" border @current-change="handleDetail" border highlight-current-row>
            <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="bzcj" show-overflow-tooltip></el-table-column>
          </el-table>

          <el-form :model="editQuery" :rules="rules" ref="editQuery" label-width="190px" style="margin-top: 20px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="产品名称" prop="cpmctymc">
                  <el-input style="width: 90%" size="small" splaceholder="请输入产品名称" :disabled="true" v-model="editQuery.cpmctymc"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="产品标识" prop="nameCode">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入产品标识" v-model="editQuery.nameCode"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="规格型号" prop="ggxh">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.ggxh"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12" class="el-col">
                <el-form-item label="器械类别" prop="qxlb">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入器械类别" v-model="editQuery.qxlb"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="产品类别" prop="cplb">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入产品类别" v-model="editQuery.cplb"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="分类编码" prop="flbm">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入分类编码" v-model="editQuery.flbm"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="商品条码" prop="sptm">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入商品条码" v-model="editQuery.sptm"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="医保编码" prop="ybbm">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入医保编码" v-model="editQuery.ybbm"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="医疗器械注册人" prop="ylqxzcrbarmc">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入医疗器械注册人" v-model="editQuery.ylqxzcrbarmc"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="注册人英文名称" prop="ylqxzcrbarywmc">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入注册人英文名称" v-model="editQuery.ylqxzcrbarywmc"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="统一社会信用号" prop="tyshxydm">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入统一社会信用号" v-model="editQuery.tyshxydm"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="注册证/备案号" prop="zczbhhzbapzbh">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入注册证/备案号" v-model="editQuery.zczbhhzbapzbh"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="上级产品编码" prop="sjcpbm">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入上级产品编码" v-model="editQuery.sjcpbm"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12" class="el-col">
                <el-form-item label="包装级别" prop="packLevel">
                  <el-input style="width: 90%" size="small" splaceholder="请输入包装级别" :disabled="true" v-model="editQuery.packLevel"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="包装层级" prop="bzcj">
                  <el-input style="width: 90%" size="small" splaceholder="请输入包装层级" v-model="editQuery.bzcj" :disabled="true"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12" class="el-col">
                <el-form-item label="包含下级包装数量" prop="bhxjsl">
                  <el-input style="width: 90%" size="small" splaceholder="请输入包含下级包装数量" :disabled="true" v-model="editQuery.bhxjsl"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="包含下级产品编码" prop="bhxjcpbm">
                  <el-input style="width: 90%" size="small" :disabled="true" splaceholder="请输入包含下级产品编码" v-model="editQuery.bhxjcpbm"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12" class="el-col">
                <el-form-item label="包含最小销售包装数量" prop="bhzxxsbzsl">
                  <el-input style="width: 90%" size="small" :disabled="true" splaceholder="请输入包含最小销售包装数量" v-model="editQuery.bhzxxsbzsl"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="是否包含批号" prop="scbssfbhph">
                  <el-input style="width: 90%" :disabled="true" size="small"  v-model="editQuery.scbssfbhph"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="是否包含序列号" prop="scbssfbhxlh">
                  <el-input style="width: 90%" :disabled="true" size="small" v-model="editQuery.scbssfbhxlh" splaceholder="请输入内容"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="是否包含生产日期" prop="scbssfbhscrq">
                  <el-input style="width: 90%" :disabled="true" size="small" v-model="editQuery.scbssfbhscrq"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="是否包含失效日期" prop="scbssfbhsxrq">
                  <el-input style="width: 90%" :disabled="true" v-model="editQuery.scbssfbhsxrq" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="产品描述" prop="cpms">
                  <el-input style="width: 90%" :disabled="false" size="small"  v-model="editQuery.cpms"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="计量单位" prop="measname">
                  <el-input style="width: 90%" size="small" splaceholder="请输入内容" v-model="editQuery.measname"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12" class="el-col">
                <el-form-item label="使用单元数量" prop="zxxsbzbhsydysl">
                  <el-input style="width: 90%" :disabled="!checked" size="small" splaceholder="请输入内容" v-model="editQuery.zxxsbzbhsydysl"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

        </el-dialog>

        <pagination
          v-show="total>0"
          :total="total"
          :limit.sync="filterQuery.limit"
          :page.sync="filterQuery.page"
          @pagination="handleCurrentChange"
        ></pagination>

      </el-card>
    </div>
</template>

<script>
import {updateErpProduct, thirdSysDetail, getSmUdiInfos} from "../../../api/basic/udiRelevance";
import {filterByUuid} from "../../../api/basic/udiInfo";
import {insertCompanyProductRelevance, insertFilter} from "../../../api/basic/companyProductRelevance";
import store from "../../../store";

export default {
    name: "basicSelectSingleProducts",
    props: {
        selectType: {
            type: Object,
            required: true,
        },
        closeSelDialog: {
            type: Function,
            required: true,
        },
    },
    data() {
        return {
            radioCheck: null,
            filterQuery: {
                customerId: null,
                ylqxzcrbarmc: "",
                supName: null,
                cpmctymc: "",
                nameCode: "",
                page: 1,
                limit: 10,
                addType: 1,
                isDisable: false,

            },


            postQuery: {
                customerId: null,
                uuids: [],
                rlIds: [],
                supplementRequest: null,
            },
            loading: false,
            editQuery: null,
            repEditQuery: {},
            relevanceEdit: {
                id: null,
                thirdId: "",
                isUseDy: false,
            },

            replTitle: "产品信息补齐:",
            isImport: false,
            isImportUdi: false,
            isUploadSmp: false,
            isImportFile: false,
            uploadFileUrl: null,
            checked: false,
            list: [],
            detailList: [],
            sysList: [],
            total: 0,
            thirdNo: "",
            uuid: "111",
            thirdId: null,
            relId: "",
            thisData: {
                nameCode: null,
                cpmctymc: null,
                ggxh: null
            },
            currentRow: null,
            multipleSelection: [],
            editDialogVisible: false,
            selectUdiDialogVisible: false,
            selectErpDialogVisible: false,
            selectLocalVisible: false,
            productRemarkSet: {},
            supplementRequest: null,
        };
    },

    methods: {
        onReset() {
            this.radioCheck = null;
            this.$router.push({
                path: "",
            });
            this.filterQuery = {
                customerId: null,
                ylqxzcrbarmc: "",
                supName: null,
                cpmctymc: "",
                nameCode: "",
                page: 1,
                limit: 10,
                addType: 1,
            };
            this.getList();
        },


        submitSearch() {
            this.filterQuery.page = 1;
            this.getList();
        },
        getList() {
            this.loading = true;
            this.filterQuery.customerId = store.getters.customerId;
            getSmUdiInfos(this.filterQuery)
                .then((response) => {
                    this.loading = false;
                    this.list = response.data.list || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },

        getDetailList(detailQuery) {
            this.loading = true;
            filterByUuid(detailQuery)
                .then((response) => {
                    this.loading = false;
                    this.detailList = response.data || [];
                })
                .catch(() => {
                    this.loading = false;
                    this.detailList = [];
                });
        },

        handleDetail(row) {
            this.editQuery = row;
        },

        combine() {
            this.combineQuery.productUuid = this.currentRow.uuid;
            this.combineQuery.customerId = store.getters.customerId;
            insertCompanyProductRelevance(this.combineQuery).then(response => {
                this.loading = false;
                if (response.code === 20000) {
                    this.$message.success("添加成功");
                    this.closeDialog(true);
                } else {
                    this.$message.error(response.message);
                }
            });
        },

        cellClass(row) {
            if (row.columnIndex === 0) {
                return 'disabledCheck'
            }
        },
        selectExport() {
            var selectData = this.multipleSelection;
            if (selectData == null || selectData.length == 0) {
                this.$message.warning("请先选入产品！");
                return;
            }
            this.closeSelDialog(selectData[0].id);

        },
        allExport() {
            this.postQuery.customerId = store.getters.customerId;
            this.postQuery.supplementRequest = this.repEditQuery;
            insertFilter(this.postQuery).then(response => {
                this.loading = false;
                if (response.code == 20000) {
                    this.$message.success(response.data);
                    this.$emit("closeSelDialog", true);
                    this.closeSelDialog();
                } else {
                    this.$message.error(response.message);
                }
            });
        },

        intentDetail() {
            this.isImportUdi = false;
            this.selectUdiDialogVisible = true;
        },

        intentImportErp(val) {
            this.uuid = val.uuid;
            this.relId = val.id;
            this.isImport = true;
            this.thisData = val;
            this.selectErpDialogVisible = true;
        },
        handleSelectionChange(selection) {
            this.radioCheck = selection.id;
            this.curSelectDi = selection;
            if (selection.length > 1) {
                this.$refs.diList.clearSelection();
                this.$refs.diList.toggleRowSelection(selection.pop());
            }

            this.multipleSelection = selection
            this.currentRow = selection;
            this.replTitle = "(" + this.currentRow.cpmctymc + ")" + "产品信息补齐:";
        },
        handleErpChange(val) {
            this.currentRow = val;
        },
        handleCurrentChange(val) {
            this.filterQuery.page = val;
            this.getList();
        },
        handleModifyClick(row) {
            this.editDialogVisible = true;
            this.editQuery = row;
            this.relevanceEdit = {
                id: row.id,
                thirdId: row.thirdId,
                isUseDy: row.isUseDy,
            };
            this.checked = row.isUseDy == 1;

            let ttquery = {
                uuid: row.uuid,
                page: 1,
                limit: 10,
            };

            this.getDetailList(ttquery);
            this.getThirdSysDetail();
        },
        closeUdi(val) {
            this.selectUdiDialogVisible = false;
            this.selectErpDialogVisible = false;
            this.selectLocalVisible = false;
            if (val) {
                this.getList();
            }
        },
        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 = [];
                });
        },
        checkSelectable(row) {
            return !row.isSelect;
        },

        closeDialog() {
            this.selectErpDialogVisible = false;
            this.selectLocalVisible = false;
        },

    },
    mounted() {
    },
    components: {},
    created() {
    },
};
</script>
<style scoped>

.el-table .disabledCheck .cell .el-checkbox .el-checkbox__input {
    display: none !important;
}

.itemTag {
    float: left;
    text-align: left;
    margin-top: 10px;
    width: 25%;
}

.query-form-item {
    display: block !important;
    margin-right: 10px;
    margin-bottom: 5px;
}

.text {
    font-size: 13px;
    font-family: "Microsoft YaHei";
}

.el-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.el-col {
    border-radius: 4px;
    flex-wrap: wrap;
}
</style>
