<template>
    <div>
        <el-card>
            <div>
                <p class="form-title">配送企业资质设置</p>
            </div>
            <div style=" float: right; text-align: right; margin-bottom: 8px;">
                <el-button type="primary" size="mini" icon="search" @click="addCert" style="text-align:right">添加设置</el-button>
            </div>
            <el-table v-loading="loading" :data="list" style="width: 100%"  border highlight-current-row>
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column label="证书名称" prop="name"></el-table-column>
                <el-table-column label="是否必传" prop="require" s>
                    <template slot-scope="scope">
                        <span>{{ enableMap[scope.row.need] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="说明" prop="remark"></el-table-column>
                <el-table-column label="操作"  width="200">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click="handleEdit(scope.row)"
                        >编辑
                        </el-button>

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

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

            <el-dialog
                :title="formMap[formName]"
                :visible.sync="addDialogVisible"
                width="60%"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                v-if="addDialogVisible"
            >

                <el-form :model="currentSup" :rules="formRules" label-width="100px" ref="dataForm">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item  label="证书名称:" prop="name">
                                <el-input v-model="currentSup.name"  style="width: 90%" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="11">
                            <el-form-item label="是否必传:"  prop="need">
                                <el-select style="width: 90%"  v-model="currentSup.need">
                                    <el-option label="是" :value=true></el-option>
                                    <el-option label="否" :value=false></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="备注:"  prop="remark">
                                <el-input v-model="currentSup.remark" style="width: 95.5%" auto-complete="off" type="textarea"
                                          autosize></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div style="text-align: center">
                    <el-button type="primary" size="small" icon="search" @click="onAddSubmit"
                    >提交
                    </el-button
                    >
                    <el-button type="primary" size="small" icon="search" @click="cancelDialog"
                    >取消
                    </el-button
                    >
                </div>

            </el-dialog>

        </el-card>

        <el-card>
            <div>
                <p class="form-title">生产企业资质设置</p>
            </div>
            <div style=" float: right;
                        text-align: right;
                        margin-bottom: 8px;">
                <el-button type="primary" size="mini" icon="search" @click="addManufacturerCert" style="text-align:right">添加设置</el-button>
            </div>

            <el-table v-loading="loading" :data="manufacturerList" style="width: 100%"  border highlight-current-row>
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column label="证书名称" prop="name"></el-table-column>
                <el-table-column label="产地" prop="foreign">
                    <template slot-scope="scope">
                        <span>{{ foreignMap[scope.row.foreign] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="说明" prop="remark"></el-table-column>
                <el-table-column label="操作"  width="200">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click="handleManufacturerEdit( scope.row)"
                        >编辑
                        </el-button>

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

          <pagination
            v-show="manufacturerTotal>0"
            :total="manufacturerTotal"
            :page.sync="manufacturerQuery.page"
            :limit.sync="manufacturerQuery.limit"
            @pagination="handleManufacturerChange"
          ></pagination>

            <el-dialog
                :title="formManufacturerMap[formManufacturerName]"
                :visible.sync="addManufacturerDialogVisible"
                width="60%"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                v-if="addManufacturerDialogVisible"
                :isShow="false"
            >

                <el-form :model="currentManufacturer" label-width="100px"  :rules="formManufactureRules" ref="dataManufacturerForm">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="证书名称:" prop="name">
                                <el-input v-model="currentManufacturer.name" auto-complete="off" :disabled="currentManufacturer.need"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="11">
                            <el-form-item label="产地:" prop="foreign">
                                <el-select v-model="currentManufacturer.foreign" style="width: 100%" :disabled="currentManufacturer.need">
                                    <el-option label="全部" :value="1"></el-option>
                                    <el-option label="国外" :value="2"></el-option>
                                    <el-option label="国内" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11"  v-if="isShow">
                            <el-form-item label="是否禁用:" prop="need">
                                <el-select v-model="currentManufacturer.need" style="width: 100%">
                                    <el-option label="是" :value=true></el-option>
                                    <el-option label="否" :value=false></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item  label="备注:" prop="remark">
                                <el-input v-model="currentManufacturer.remark" auto-complete="off" type="textarea"
                                          autosize></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div style="text-align: center">
                    <el-button type="primary" size="small" icon="search" @click="onAddManufacturerSubmit"
                    >提交
                    </el-button
                    >
                    <el-button type="primary" size="small" icon="search" @click="cancelDialog"
                    >取消
                    </el-button
                    >
                </div>

            </el-dialog>

        </el-card>

        <el-card>
            <div>
                <p class="form-title">产品资质设置</p>
            </div>
            <div style="float:right;
                        text-align: right;
                        margin-bottom: 8px;">
                <el-button type="primary" size="mini" icon="search" @click="addProductCert" style="text-align:right">添加设置</el-button>
            </div>

            <el-table v-loading="productLoading" :data="productList" style="width: 100%"  border highlight-current-row>
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column label="证书名称" prop="name"></el-table-column>
                <el-table-column label="产地" prop="imports">
                    <template slot-scope="scope">
                        <span>{{ foreignMap[scope.row.imports] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="产品类型" prop="cplx">
                </el-table-column>
                <el-table-column label="产品类别" prop="hchzsb">
                </el-table-column>

                <el-table-column label="分类编码" prop="flbm">
                </el-table-column>

                <el-table-column label="说明" prop="remark"></el-table-column>
                <el-table-column label="操作"  width="200">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click="handleProductEdit( scope.row)"
                        >编辑

                        </el-button>

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

          <pagination
            v-show="productTotal>0"
            :total="productTotal"
            :page.sync="productQuery.page"
            :limit.sync="productQuery.limit"
            @pagination="handleProductChange"
          ></pagination>


            <el-dialog
                :title="formProductMap[formProductName]"
                :visible.sync="addProductDialogVisible"
                width="60%"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                v-if="addProductDialogVisible"
                :isShow="false"
            >

                <el-form :model="currentProduct" label-width="100px" :rules="formRules" ref="dataForm">
                    <el-row>
                        <el-col   :span="11">
                            <el-form-item label="证书名称" prop="name">
                                <el-input v-model="currentProduct.name" style="width: 90%" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="11"  v-if="isShow" >
                            <el-form-item label="是否禁用:" prop="need">
                                <el-select v-model="currentProduct.need"  style="width: 90%">
                                    <el-option label="禁用" :value=true></el-option>
                                    <el-option label="启用" :value=false></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="器械类别：" prop="require">
                                <el-select v-model="currentProduct.cplx" style="width: 90%">
                                    <el-option label="全部"  key="全部" value="全部"></el-option>
                                    <el-option label="器械"  key="器械" value="器械"></el-option>
                                    <el-option label="试剂"  key="试剂" value="试剂"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="11">
                            <el-form-item label="产品类别：" prop="require">
                                <el-select v-model="currentProduct.hchzsb" style="width: 90%">
                                    <el-option label="全部" value="全部"></el-option>
                                    <el-option label="耗材" value="耗材"></el-option>
                                    <el-option label="设备" value="设备"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                    </el-row>

                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="产地：" prop="require">
                                <el-select v-model="currentProduct.imports" style="width: 90%">
                                    <el-option label="全部" value="1"></el-option>
                                    <el-option label="国外" value="2"></el-option>
                                    <el-option label="国内" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="11">
                            <el-form-item label="备注：" prop="remark">
                                <el-input v-model="currentProduct.remark" style="width: 90%" auto-complete="off" type="textarea"
                                          autosize></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="分类编码：" prop="require">
                                <el-select
                                    v-model="currentProduct.flbmList"
                                    filterable
                                    remote
                                    clearable="true"
                                    style="width: 90%"
                                    multiple
                                    reserve-keyword
                                    placeholder="请选择"
                                    :remote-method="classifySearch"
                                    :loading="loading"
                                >
                                    <el-option
                                        v-for="item in classifyList"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.code">
                                        <span>{{ item.code }}</span>
                                        <span>{{ item.name }}</span>
                                    </el-option>
                                </el-select>


                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div style="text-align: center">
                    <el-button type="primary" size="small" icon="search" @click="onAddProductSubmit"
                    >提交
                    </el-button
                    >
                    <el-button type="primary" size="small" icon="search" @click="cancelDialog"
                    >取消
                    </el-button
                    >
                </div>

            </el-dialog>

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

<script>
import {filterCertSet, delSupCertCert, modifySupCertSet, addSupCertSet} from "@/api/purchase/supCertSet";
import {filterClassify} from "@/api/purchase/classifyCode"

export default {
    data() {
        return {
            /**--------配送企业资质设置--------------*/
            query: {
                type: 1,
                page: 1,
                limit: 20
            },
            list: [],
            total: 0,
            loading: false,
            enableMap: {
                true: "是",
                false: "否",
            },
            addDialogVisible: false,
            currentSup: {},
            formName: "add",
            formMap: {
                add: "新增配送企业资质设置",
                update: "编辑配送企业资质设置",
            },

            formRules: {
                name: [
                    {required: true, message: "证书名称", trigger: "blur"}
                ],
                need: [
                {required: true, message: "是否必传", trigger: "blur"}
                ],

            },

            /**--------生产企业资质设置  --------------*/
            manufacturerList: [],
            manufacturerQuery: {
                type: 2,
                page: 1,
                limit: 20
            },
            statusMap: {
                true: "禁用",
                false: "启用",
            },
            foreignMap: {
                "1": "全部",
                "2": "国外",
                "3": "国内",

            },
            manufacturerTotal: 0,
            manufacturerLoading: false,
            addManufacturerDialogVisible: false,
            currentManufacturer: {},
            formManufacturerName: "add",
            formManufacturerMap: {
                add: "新增生产企业资质设置",
                update: "编辑生产企业资质设置",
            },

            formManufactureRules: {
                name: [
                    {required: true, message: "请输入证书名称", trigger: "blur"}
                ],

            },

            /**--------产品资质设置--------------*/
            productList: [],
            productQuery: {
                type: 3,
                page: 1,
                limit: 20
            },
            productTotal: 0,
            productLoading: false,
            addProductDialogVisible: false,
            currentProduct: {},
            formProductName: "add",
            formProductMap: {
                add: "新增产品资质设置",
                update: "编辑产品资质设置",
            },

            classifyList: [],
            mutilData: [],
            inputKey: null,

        };
    },
    methods: {

        /**--------配送企业资质设置--------------*/
        handleCurrentChange(val) {
            this.query.page = val.page;
            this.getList();
        },
        getList() {
            this.loading = true;
            filterCertSet(this.query)
                .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;
                });
        },


        handleEdit(row) {
            this.formName = "update";
            this.currentSup = row;
            this.addDialogVisible = true;

        },
        handleDel(row) {
            let query = {
                id: row.id,
            }
            delSupCertCert(query)
                .then((response) => {
                    this.getList();
                })
                .catch(() => {
                });
        },
        addCert() {
            this.formName = "add";
            this.currentSup = {};
            this.addDialogVisible = true;
        },
        onAddSubmit() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    this.addDialogVisible = false;
                    if (this.formName == "add") {
                        this.currentSup.type = 1;
                        addSupCertSet(this.currentSup)
                            .then((response) => {
                                if(response.code==20000){
                                    this.getList();
                                }else{
                                    this.$message.error(response.message);
                                }
                            })
                            .catch(() => {
                            });
                    } else {
                        modifySupCertSet(this.currentSup).then((res) => {
                            if (res.code == 20000) {
                                this.getList();
                                this.$message.success("保存成功！");
                            } else {
                                this.getList();
                                this.$message.error(res.message);
                            }
                        })
                    }
                }
            });


        },
        cancelDialog() {
            this.getList();
            this.getManufacturerList();
            this.getProductList();
            this.addDialogVisible = false;
            this.addManufacturerDialogVisible = false;
            this.addProductDialogVisible = false;
        },


        /**--------生产企业资质设置--------------*/
        handleManufacturerChange(val) {
            this.manufacturerQuery.page = val.page;
            this.getManufacturerList();
        },
        getManufacturerList() {
            this.manufacturerLoading = true;
            filterCertSet(this.manufacturerQuery)
                .then(response => {
                    this.manufacturerLoading = false;
                    this.manufacturerList = response.data.list || [];
                    this.manufacturerTotal = response.data.total || 0;
                })
                .catch(() => {
                    this.manufacturerLoading = false;
                    this.manufacturerList = [];
                    this.manufacturerTotal = 0;
                });
        },
        handleManufacturerEdit(row) {
            this.formManufacturerName = "update";
            this.currentManufacturer = row;
            this.addManufacturerDialogVisible = true;

        },
        handleManufacturerDel(row) {
            let query = {
                id: row.id,
            }
            delSupCertCert(query)
                .then((response) => {
                    this.getManufacturerList();
                })
                .catch(() => {
                });
        },
        addManufacturerCert() {
            this.formManufacturerName = "add";
            this.currentManufacturer = {};
            this.addManufacturerDialogVisible = true;
        },
        onAddManufacturerSubmit() {

            this.$refs["dataManufacturerForm"].validate(valid => {
                if (valid) {
                    this.addManufacturerDialogVisible = false;
                    if (this.formManufacturerName == "add") {
                        this.currentManufacturer.type = 2;
                        addSupCertSet(this.currentManufacturer)
                            .then((response) => {
                                if(response.code==20000){
                                    this.getManufacturerList();
                                  }else{
                                      this.$message.error(response.message);
                                }

                            })
                            .catch(() => {
                            });
                    } else {
                        modifySupCertSet(this.currentManufacturer).then((res) => {
                            if (res.code == 20000) {
                                this.getManufacturerList();
                                this.$message.success("保存成功！");
                            } else {
                                this.getManufacturerList();
                                this.$message.error(res.message);
                            }
                        })
                    }
                }
            });

        },


        /**--------产品资质设置--------------*/
        handleProductChange(val) {
            this.productQuery.page = val.page;
            this.getProductList();
        },
        getProductList() {
            this.productLoading = true;
            filterCertSet(this.productQuery)
                .then(response => {
                    this.productLoading = false;
                    this.productList = response.data.list || [];
                    this.productTotal = response.data.total || 0;
                })
                .catch(() => {
                    this.productLoading = false;
                    this.productList = [];
                    this.productTotal = 0;
                });
        },
        handleProductEdit(row) {
            this.formProductName = "update";
            this.currentProduct = row;
            this.addProductDialogVisible = true;

            this.classifyFirstSearch(this.currentProduct.flbm);

        },
        handleProductDel(row) {
            let query = {
                id: row.id,
            }
            delSupCertCert(query)
                .then((response) => {
                    this.getProductList();
                })
                .catch(() => {
                });
        },
        addProductCert() {
            this.formProductName = "add";
            this.currentProduct = {};
            this.addProductDialogVisible = true;
        },
        onAddProductSubmit() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    this.addProductDialogVisible = false;
                    if (this.formProductName == "add") {
                        this.currentProduct.type = 3;
                        addSupCertSet(this.currentProduct)
                            .then((response) => {
                                if(response.code==20000){
                                    this.getProductList();
                                  }else{
                                      this.$message.error(response.message);
                                }
                            })
                            .catch(() => {
                            });
                    } else {
                        modifySupCertSet(this.currentProduct).then((res) => {
                            if (res.code == 20000) {
                                this.getProductList();
                                this.$message.success("保存成功！");
                            } else {
                                this.getProductList();
                                this.$message.error(res.message);
                            }
                        })
                    }
                }
            })

        },


        classifyFirstSearch(key) {
            let query = {
                inFilter: key,
            }
            filterClassify(query)
                .then(response => {
                    this.loading = false;
                    this.classifyList = response.data.list || [];
                })
                .catch(() => {
                    this.loading = false;
                    this.classifyList = [];
                });
        },

        classifySearch(key) {
            let query = {
                key: key,
            }
            filterClassify(query)
                .then(response => {
                    this.loading = false;
                    this.classifyList = response.data.list || [];
                })
                .catch(() => {
                    this.loading = false;
                    this.classifyList = [];
                });
        },
    },
    filters: {},
    mounted() {
    },
    created() {
        // 加载表格数据
        this.getList();
        this.getManufacturerList();
        this.getProductList();
    }
};
</script>

<style scoped
>
.form-title {
    font-size: 16px;
    font-family: Noto Sans SC;
    font-weight: bold;
    color: #303133;
}
</style>

