<template>
    <div>
        <div style="display: flex; margin-top: -30px" v-if="hiddenAdd === true">
            <el-button  style="margin: 0 20px 0 auto"type="primary" size="small" @click.native="updateAuditStatus(1)">通过</el-button>
            <el-button  style="margin: 0 20px 0 0"type="primary" size="small" @click.native="updateAuditStatus(2)">不通过</el-button>
            <el-button style="margin: 0 20px 0 0" @click="centerDialogVisible = false">取消</el-button>
        </div>

        <el-card class="el-card">
            <div>
                <el-form :inline="true" :model="unionQuery" class="query-form" size="mini" v-if="this.uuid === null">
                    <el-row>
                        <el-form-item class="query-form-item">
                            <el-input
                                v-model="unionQuery.nameCode"
                                size="mini"
                                placeholder="最小单元销售标识"
                                @keyup.enter.native="keyup_submit($event)"
                            ></el-input>
                        </el-form-item>
                        <el-form-item class="query-form-item">
                            <el-input
                                v-model="unionQuery.cpmctymc"
                                size="mini"
                                placeholder="产品通用名"
                            ></el-input>
                        </el-form-item>
                        <el-form-item class="query-form-item">
                            <el-input
                                v-model="unionQuery.ylqxzcrbarmc"
                                size="mini"
                                placeholder="医疗器械注册人"
                            ></el-input>
                        </el-form-item>
                        <el-form-item class="query-form-item">
                            <el-input
                                v-model="unionQuery.ggxh"
                                placeholder="规格型号"
                                size="mini"
                            ></el-input>
                        </el-form-item>

                        <el-form-item class="query-form-item">
                            <el-button-group>
                                <el-button type="primary" icon="search" @click="getList" size="mini"
                                >查询
                                </el-button
                                >
                                <el-button type="primary" size="mini" icon="search" @click="combine"
                                >确定
                                </el-button
                                >
                            </el-button-group>
                        </el-form-item>
                    </el-row>
                </el-form>

                <el-table
                    :data="udidlList"
                    style="width: 100%"
                    @row-click="intentDetail"
                    v-loading="loading"
                    highlight-current-row="true"
                    :row-class-name="tableRowClassName"
                    @current-change="handleErpChange"
                >
                    <!-- <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"
                        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="ylqxzcrbarmc"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="注册证编号"
                        prop="zczbhhzbapzbh"
                        show-overflow-tooltip
                    ></el-table-column>
                </el-table>
                <el-pagination
                    :page-size="unionQuery.limit"
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="total"
                    :current-page="filterQuery.page"
                ></el-pagination>

            </div>
        </el-card>
        <el-card class="el-card">
            <div>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="12" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>产品名称:&nbsp;</span>
                            </div>
                            <el-input
                                style="width: 60%"
                                size="small"
                                splaceholder="请输入内容"
                                :disabled="true"
                                v-model="data.cpmctymc"
                            ></el-input>
                        </div>
                    </el-col>
                    <el-col :span="12" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>产品标识:&nbsp;</span>
                            </div>
                            <el-input
                                style="width: 60%"
                                :disabled="true"
                                size="small"
                                splaceholder="请输入内容"
                                v-model="data.nameCode"
                            ></el-input>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="12" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>规格型号:&nbsp;</span>
                            </div>
                            <el-input
                                style="width: 60%"
                                :disabled="true"
                                size="small"
                                splaceholder="请输入内容"
                                v-model="data.ggxh"
                            ></el-input>
                        </div>
                    </el-col>
                    <el-col :span="12" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>医疗器械注册人:&nbsp;</span>
                            </div>
                            <el-input
                                style="width: 60%"
                                :disabled="true"
                                size="small"
                                splaceholder="ylqxzcrbarmc"
                                v-model="data.ylqxzcrbarmc"
                            ></el-input>
                        </div>
                    </el-col>

                </el-row>
                <el-row :gutter="20" class="el-row" type="flex">

                    <el-col :span="12" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>注册人英文名称:&nbsp;</span>
                            </div>
                            <el-input
                                style="width: 60%"
                                :disabled="true"
                                size="small"
                                splaceholder="请输入内容"
                                v-model="data.ylqxzcrbarywmc"
                            ></el-input>
                        </div>
                    </el-col>
                    <el-col :span="12" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>器械类别:&nbsp;</span>
                            </div>
                            <el-input
                                style="width: 60%"
                                :disabled="true"
                                size="small"
                                splaceholder="请输入内容"
                                v-model="data.qxlb"
                            ></el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="12" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>产品类别:&nbsp;</span>
                            </div>
                            <el-input
                                style="width: 60%"
                                :disabled="true"
                                size="small"
                                splaceholder="请输入内容"
                                v-model="data.cplb"
                            ></el-input>
                        </div>
                    </el-col>
                    <el-col :span="12" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>分类编码:&nbsp;</span>
                            </div>
                            <el-input
                                style="width: 60%"
                                :disabled="true"
                                size="small"
                                splaceholder="请输入内容"
                                v-model="data.flbm"
                            ></el-input>
                        </div>
                    </el-col>

                </el-row>

                <el-row :gutter="20" class="el-row" type="flex">

                    <el-col :span="12" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>商品条码:&nbsp;</span>
                            </div>
                            <el-input
                                style="width: 60%"
                                :disabled="true"
                                size="small"
                                splaceholder="请输入内容"
                                v-model="data.sptm"
                            ></el-input>
                        </div>
                    </el-col>
                    <el-col :span="12" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>医保编码:&nbsp;</span>
                            </div>
                            <el-input
                                style="width: 60%"
                                :disabled="true"
                                size="small"
                                splaceholder="请输入内容"
                                v-model="data.ybbm"
                            ></el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row" type="flex">

                    <el-col :span="12" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>统一社会信用号:&nbsp;</span>
                            </div>
                            <el-input
                                style="width: 60%"
                                :disabled="true"
                                size="small"
                                splaceholder="请输入内容"
                                v-model="data.tyshxydm"
                            ></el-input>
                        </div>
                    </el-col>
                    <el-col :span="12" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>注册证/备案号:&nbsp;</span>
                            </div>
                            <el-input
                                style="width: 60%"
                                :disabled="true"
                                size="small"
                                splaceholder="请输入内容"
                                v-model="data.zczbhhzbapzbh"
                            ></el-input>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script>
import {getBasicInstrumentMaintains, getBasicInstrumentMaintainsFilterProduct} from "../../../api/supplier/basicInstrumentMaintain";
import store from "../../../store";
import {insertCompanyProductRelevance, updateCompanyProductRelevance} from "../../../api/supplier/companyProductRelevance";

export default {
    name: "closeDialog",
    props: {
        closeDialog: {
            type: Function,
            required: true,
        },
        uuid: {
            type: String,
            required: true,
        },
        hid: {
            type: String,
            required: true,
        },
    },

    data() {
        return {
            unionQuery: {
                page: 1,
                limit: 10,
                nameCode: "",
                cpmctymc: "",
                ylqxzcrbarmc: "",
                ggxh: "",
            },
            combineQuery: {
            },
            checked: true,
            udidlList: [],
            erpList: [],
            pageTotal: 1,
            total: 1,
            currentRow: null,
            loading: false,
            erpLloading: false,
            multipleUdiSelection: [],
            data: {},
            hiddenAdd: false,
        };
    },
    created() {
        if (this.$isNotBlank(this.uuid)) {
            this.unionQuery.uuid = this.uuid;
            this.getList();
            if (this.$isNotBlank(this.hid)) {
                this.hiddenAdd = true;
            } else {
                this.hiddenAdd = false;
            }
        }
    },
    methods: {
        getList() {
            if (
                this.unionQuery.nameCode === "" &&
                this.unionQuery.cpmctymc === "" &&
                this.unionQuery.ylqxzcrbarmc === "" &&
                this.unionQuery.ggxh === "" &&
                this.unionQuery.uuid === ""
            ) {
                this.$message.warning("请输入查询条件");
                return;
            }
            this.loading = true;
            getBasicInstrumentMaintainsFilterProduct(this.unionQuery)
                .then((response) => {
                    console.log(response)
                    this.loading = false;
                    this.udidlList = response.data.list || [];
                    this.total = response.data.total || 0;
                    console.log(this.total)
                })
                .catch(() => {
                    this.loading = false;
                    this.udidlList = [];
                    this.total = 0;
                });
        },
        intentDetail(row) {
            this.data = row;
        },
        keyup_submit(event) {
            console.log("全选----");
            this.getList();
            event.target.select();
        },

        checkSelectable(row, index) {
            return !row.check;
        },
        handleCurrentChange(val) {
            this.unionQuery.page = val;
            this.getList();
        },
        tableRowClassName({row, rowIndex}) {
            if (row.checked) return "warning-row";
            return "";
        },
        handleErpChange(val) {
            console.log(val);
            this.currentRow = val;
        },
        intentBack() {
            this.closeDialog();
        },
        updateAuditStatus(num) {
            let tQuery = {
                auditStatus: num,
                id: this.hid,
            }
            updateCompanyProductRelevance(tQuery).then(response => {
                this.loading = false;
                if (response.code === 20000) {
                    this.$message.success("成功");
                    this.closeDialog(true);
                } else {
                    this.$message.error(response.message);
                }
            });
        },
        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);
                }
            });
        },

        handleSelectionUdiChange(val) {
            console.log("----" + val);
            this.multipleUdiSelection = val;
        },
    },
};
</script>

<style scoped>
.checkitemTag {
    float: left;
    text-align: left;
    margin-top: 5px;
    width: 100%;
}

div /deep/ .el-table .warning-row {
    background: #bebebe;
}

div /deep/ .el-table .success-row {
    background: #ffffff;
}
</style>
