<template>
    <div>
        <el-card class="el-card">
            <el-form :inline="true" :model="productQuery" class="query-form" size="mini">
                <el-row style="width: 100%">
                    <el-form-item class="query-form-item">
                        <el-input
                            v-model="productQuery.cpmctymc"
                            placeholder="产品名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="query-form-item">
                        <el-input
                            v-model="productQuery.ggxh"
                            placeholder="规格型号"
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="query-form-item">
                        <el-input
                            v-model="productQuery.ylqxzcrbarmc"
                            placeholder="生产厂家"
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="query-form-item">
                        <el-select v-model="productQuery.auditStatus" placeholder="审核状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="通过" value='1'></el-option>
                            <el-option label="不通过" value='2'></el-option>
                            <el-option label="反审" value='3'></el-option>
                            <el-option label="申请反审" value='4'></el-option>
                            <el-option label="拒绝反审" value='5'></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button-group>
                            <el-button
                                type="primary"
                                icon="el-icon-refresh"
                                @click="productOnReset"
                            ></el-button>
                            <el-button type="primary" icon="search" @click="productOnSubmit"
                            >查询
                            </el-button
                            >
                            <el-button
                                type="primary"
                                icon="search"
                                @click="selectProduct()"
                            >添加产品
                            </el-button
                            >
                        </el-button-group>
                    </el-form-item>

                    <el-form-item style="margin: 0 100px 0 auto;">
                        <el-button-group>
                        </el-button-group>
                    </el-form-item>
                </el-row>
            </el-form>

            <el-table v-loading="productLoading"
                      :data="productList"
                      style="width: 100%; height: 500px">
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column label="产品名称" prop="cpmctymc"></el-table-column>
                <el-table-column label="规格型号" prop="ggxh"></el-table-column>
                <el-table-column label="注册/备案凭证号" prop="zczbhhzbapzbh"></el-table-column>
                <el-table-column label="生产厂家" prop="ylqxzcrbarmc"></el-table-column>
                <el-table-column label="审核状态" prop="auditStatus" width="120">
                    <template slot-scope="scope">
                        <span>{{ auditStatusMap[scope.row.auditStatus] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="250">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click.native="selectProduct(scope.row)"
                        >详情
                        </el-button
                        >
                        <el-button
                            type="text"
                            size="small"
                            @click.native="deleteCompanyProductRelevance(scope.row)"
                        >删除
                        </el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :page-size="productQuery.limit"
                @current-change="salesmanHandleCurrentChange"
                layout="prev, pager, next"
                :total="productTotal"
            >
            </el-pagination>
        </el-card>

        <el-dialog
            title="医疗器械信息"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible.sync="selectLocalVisible"
            width="85%"
            v-if="selectLocalVisible"
        >
            <selectProduct
                :closeDialog="closeDialog"
                :uuid="uuid"
            ></selectProduct>
        </el-dialog>

    </div>
</template>

<script>
    import {getCompany, modifyCompany} from "../../api/warehouse/company";
    import store from "../../store/index";
    import {
        provinceAndCityData,
        regionData,
        provinceAndCityDataPlus,
        regionDataPlus,
        CodeToText,
        TextToCode,
    } from "element-china-area-data";
    import {BASE_URL} from "../../config/app";
    import {
        deleteCompanyProductRelevance,
        filterCompanyProductRelevance
    } from "../../api/warehouse/companyProductRelevance";
    import companyAddCert from "../warehouse/companyAddCert";
    import companyAddSalesman from "../warehouse/companyAddSalesman";
    import selectProduct from "../warehouse/selectProduct";
    import draggable from "vuedraggable";
    export default {
        data() {
            return {
                classesDisplay: false,
                selectedOptions: [],
                options: regionDataPlus,
                rules: {
                    companyName: [
                        {
                            required: true,
                            message: "请输入企业名称",
                            trigger: "blur"
                        }
                    ],
                    creditNum: [
                        {
                            required: true,
                            message: "请输入统一社会信用代码",
                            trigger: "blur"
                        }
                    ],
                    classes: [
                        {
                            required: true,
                            message: "请选择企业类别",
                            trigger: "change"
                        }
                    ],
                    area: [
                        {
                            required: true,
                            message: "请选择所属地区",
                            trigger: "change"
                        }
                    ],
                    detailAddr: [
                        {
                            required: true,
                            message: "请输入详细地址",
                            trigger: "change"
                        }
                    ],
                    contacts: [
                        {
                            required: true,
                            message: "请输入联系人",
                            trigger: "change"
                        }
                    ],
                    mobile: [
                        {
                            required: true,
                            message: "请输入联系电话",
                            trigger: "change"
                        }
                    ],
                    email: [
                        {
                            required: true,
                            message: "请输入邮箱",
                            trigger: "change"
                        }
                    ],
                },
                uploadUrl: "",
                fileList: [],
                fileUrl: "",
                certFileUrl: "",
                url: 'http://127.0.0.1:9996/udiwms/image/register/file/getImage?type=image1&name=t11111.jpg',
                certQuery: {
                    page: 1,
                    limit: 20
                },
                certList: [],
                certTotal: 0,
                certLoading: false,
                addCertVisible: false,
                idQuery: {
                    id: "",
                },
                salesmanQuery: {
                    name: "",
                    page: 1,
                    limit: 20
                },
                salesmanList: [],
                salesmanTotal: 0,
                salesmanLoading: false,
                addSalesmanVisible: false,
                certTypeMap: {
                    1: '身份证'
                },
                auditStatusMap: {
                    1: '通过',
                    2: '不通过',
                    3: '反审',
                    4: '申请反审',
                    5: '拒绝反审',
                },
                selectLocalVisible: false,
                productQuery: {
                    ylqxzcrbarmc: "",
                    cpmctymc: "",
                    ggxh: "",
                    auditStatus: null,
                    page: 1,
                    limit: 20
                },
                productList: [],
                productTotal: 0,
                productLoading: false,
                uuid: null,
            };
        },
        created() {
            this.getProductRelevanceList();
            if (store.getters.customerId === 110) {
                this.classesDisplay = true;
            }
            this.uploadUrl = BASE_URL + "/udiwms/upload/register/file";
            this.fileUrl = BASE_URL + "/udiwms/image/register/file/getImage?type=image1&name=";
            this.certFileUrl = BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name=";
        },
        components: {
            draggable,
            companyAddCert,
            companyAddSalesman,
            selectProduct,
        },
        methods: {
            onModifySubmit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.inputQuery.customerId = store.getters.customerId;
                        modifyCompany(this.inputQuery).then(response => {
                            this.getData();
                            this.loading = false;
                            this.$message.success("修改成功");
                        });
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            getData() {
                this.loading = true;
                let tquery = {
                    customerId: store.getters.customerId,
                };
                getCompany(tquery).then((response) => {
                    console.log(response)
                    this.loading = false;
                    this.inputQuery = response.data;
                    this.inputQuery.bussinessStatus = this.inputQuery.bussinessStatus + "";
                    this.selectedOptions = this.inputQuery.areaCode.split(",");
                });
            },
            salesmanOnReset() {
                this.salesmanQuery = {
                    name: "",
                    page: 1,
                    limit: 20
                };
                this.getCompanySalesmanList();
            },
            salesmanOnSubmit() {
                this.getCompanySalesmanList();
            },
            productOnReset() {
                this.productQuery = {
                    ylqxzcrbarmc: "",
                    cpmctymc: "",
                    ggxh: "",
                    auditStatus: "",
                    page: 1,
                    limit: 20
                };
                this.getProductRelevanceList();
            },
            productOnSubmit() {
                this.getProductRelevanceList();
            },
            openFile() {
                window.open(this.fileUrl + this.inputQuery.filePath);
            },
            selectProduct(row) {
                this.uuid = null;
                if (this.$isNotBlank(row)) {
                    this.uuid = row.uuid;
                }
                this.selectLocalVisible = true;
            },
            certHandleCurrentChange(val) {
                this.certQuery.page = val;
                this.getCompanyCertList();
            },
            salesmanHandleCurrentChange(val) {
                this.salesmanQuery.page = val;
                this.getCompanySalesmanList();
            },
            productHandleCurrentChange(val) {
                this.productQuery.page = val;
                this.getProductRelevanceList();
            },
            getProductRelevanceList() {
                this.erpDisplay = false;
                this.productLoading = true;
                this.productQuery.customerId = store.getters.customerId;
                filterCompanyProductRelevance(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;
                    });
            },
            toViewCompanyCert(row) {
                window.open(this.certFileUrl + row.filePath);
            },
            deleteCompanyProductRelevance(row) {
                this.$confirm("是否删除?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    this.productLoading = true;
                    let tquery = {
                        id: row.id,
                    };
                    deleteCompanyProductRelevance(tquery)
                        .then((response) => {
                            this.productLoading = false;
                            if (response.code === 20000) {
                                this.getProductRelevanceList();
                                this.$message({
                                    type: "success",
                                    message: "删除成功！",
                                });
                            } else {
                                this.$message.error(response.message);
                            }
                        })
                        .catch(() => {
                            this.productLoading = false;
                        });
                }).catch(() => {
                });
            },
            closeDialog(type) {
                this.addCertVisible = false;
                this.addSalesmanVisible = false;
                this.selectLocalVisible = false;
                this.getProductRelevanceList();
            },
            handleChange(value) {
                this.inputQuery.area =
                    CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
                this.inputQuery.areaCode = value.toString();
            },
            submitUpload() {
                this.$refs["inputQuery"].validate(valid => {
                    if (valid) {
                        if (this.$refs.upload.uploadFiles.length > 0) {
                            this.$refs.upload.submit();
                        } else {
                            this.onModifySubmit('inputQuery');
                        }
                    }
                });
            },
            uploadHandleRemove(file, fileList) {
                console.log(file, fileList);
            },
            uploadHandlePreview(file) {
                console.log(file);
                console.log(this.fileList);
            },
            uploadHandleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            uploadOnchange(file, fileList) {
                let fileName = file.name;
                let uid = file.uid
                let pos = fileName.lastIndexOf(".");
                let lastName = fileName.substring(pos, fileName.length);
                if (lastName.toLowerCase() !== ".jpg" && lastName.toLowerCase() !== ".png") {
                    this.$message.error("上传文件只能是 .jpg,.png 格式");
                    for (let i = 0; i < fileList.length; i++) {//从list删除
                        if (fileList[i].uid === uid) {
                            fileList.splice(i, 1)
                        }
                    }
                    return;
                }
                // 限制上传文件的大小
                const isLt = file.size / 1024 / 1024 / 2 <= 1;
                if (!isLt) {
                    this.$message.error("上传文件大小不能超过 2MB");
                    for (let i = 0; i < fileList.length; i++) {
                        if (fileList[i].uid === uid) {
                            fileList.splice(i, 1)
                        }
                    }
                }
                return isLt;
            },
            uploadHandleSuccess(response, file, fileList) {
                console.log(response)
                if (response.code === 20000) {
                    this.inputQuery.newFilePath = response.data.name;
                    this.onModifySubmit('inputQuery');
                } else {
                    this.$message.error("文件上传失败：" + response.message);
                }
            },
            uploadHandleError() {

            },
        }
    };
</script>
<style>
    .itemTag {
        float: left;
        text-align: left;
        margin-top: 10px;
        width: 120px;
    }

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

    .el-card {
        margin-right: 20px;
        margin-top: 15px;
        /*transition: all .5s;*/
    }

    .el-row {
        display: flex;
        flex-wrap: wrap;
    }

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