<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
            <el-form-item label="供应商名称" prop="supplierName">
                <el-input 
                    v-model="queryParams.supplierName"
                    placeholder="请输入供应商名称"
                    clearable maxlength="30"
                    style="width: 240px" 
                />
            </el-form-item> 
            <el-form-item label="供应类别" prop="categoryIdList"> 
                <el-cascader
                    v-model="queryParams.categoryIdList"
                    :options="treeTypeOptions"
                    :props="{  
                        multiple:true,
                        emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
                        checkStrictly: false,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
                        value:'id',label:'categoryName'
                    }"
                    placeholder="请选择供应类别" collapse-tags
                    clearable style="width: 240px;" 
                />
            </el-form-item>
            <el-form-item label="所属区域" prop="areaId">
                <el-cascader v-model="queryParams.areaId"
                    :options="treeOptions" :filterable="true" style="width: 240px;" :show-all-levels="false"
                    :props="{ 
                    emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
                    checkStrictly: false,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
                    value:'id',label:'label'
                    }" clearable>
                </el-cascader>
            </el-form-item>
            <el-form-item label="状态" prop="status"> 
                <el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 240px;">
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="禁用" :value="2"></el-option> 
                </el-select> 
            </el-form-item>  
            <el-form-item label="主要联系人" prop="linkman">
                <el-input 
                    v-model="queryParams.linkman"
                    placeholder="请输入主要联系人"
                    clearable maxlength="30"
                    style="width: 240px" 
                />
            </el-form-item>  
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >新增</el-button>
        </el-col>  
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="tableListData" height="800">
            <el-table-column label="序号" align="center" width="80" type="index" fixed="left">
                <template slot-scope="scope">
                <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                </template>
            </el-table-column>
        <el-table-column label="供应商编号" align="center" prop="supplierNum" :show-overflow-tooltip="true" width="120"/>
        <el-table-column label="供应商名称" align="center" prop="supplierName" :show-overflow-tooltip="true" width="120" />
        <el-table-column label="所属区域" align="center" prop="areaName" :show-overflow-tooltip="true" width="120"/>
        <el-table-column label="供应商评分" align="center" prop="supplierScore" :show-overflow-tooltip="true" width="120"/>
        <el-table-column label="主要联系人" align="center" prop="linkman" :show-overflow-tooltip="true" width="120"/>
        <el-table-column label="用户手机号" align="center" prop="telephone" :show-overflow-tooltip="true" width="150"/>
        <el-table-column label="营业执照编号" align="center" prop="" :show-overflow-tooltip="true" width="150"/>
        <el-table-column label="食品经营许可证编号" align="center" prop="" :show-overflow-tooltip="true" width="180"/>
        <el-table-column label="供应类别" align="center" prop="" :show-overflow-tooltip="true" width="150"/>
        <el-table-column label="地址" align="center" prop="address" :show-overflow-tooltip="true" width="120"/>
        <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true" width="120">
            <template slot-scope="scope">
                <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
                            @change="handleStatusChange(scope.row)"
                ></el-switch>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
            <template slot-scope="scope"> 
            <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)" 
            >编辑</el-button>
            <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)" 
            >删除</el-button>
            </template>
        </el-table-column>
        </el-table>

        <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        />

        <!-- 添加或修改参数配置对话框 -->
        <el-dialog :title="title+'供应商'" :visible.sync="open" width="1000px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="140px"> 
                <el-tabs v-model="activeName">
                    <el-tab-pane label="基础信息" name="baseInfo">
                        <el-row style="height: 550px;overflow-y: auto;">
                            <el-col :span="12">
                                <el-form-item label="供应商全称" prop="supplierName">
                                    <el-input  v-model="form.supplierName" placeholder="请输入供应商全称" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="供应商简称" prop="supplierSimpleName">
                                    <el-input  v-model="form.supplierSimpleName" placeholder="请输入供应商简称" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="供应商电话" prop="telephone">
                                    <el-input  v-model="form.telephone" placeholder="请输入供应商电话" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="公司网站" prop="companyWeb">
                                    <el-input  v-model="form.companyWeb" placeholder="请输入公司网站" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="供应商地址" prop="regionProvince">
                                    <el-input  v-model="form.regionProvince" placeholder="请输入供应商地址" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="详细地址" prop="address">
                                    <el-input  v-model="form.address" placeholder="请输入详细地址" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="所属区域" prop="areaId">
                                    <el-cascader v-model="form.areaId"
                                        :options="treeOptions" :filterable="true" style="width: 100%;" :show-all-levels="false"
                                        :props="{ 
                                        emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
                                        checkStrictly: false,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
                                        value:'id',label:'label'
                                        }" clearable>
                                    </el-cascader>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="主要供应类别" prop="categoryIdList">
                                    <el-cascader
                                        v-model="form.categoryIdList"
                                        :options="treeTypeOptions"
                                        :props="{
                                            multiple:true,
                                            emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
                                            checkStrictly: false,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
                                            value:'id',label:'categoryName'
                                        }"
                                        collapse-tags
                                        :show-all-levels="false"
                                        placeholder="请选择供应类别"
                                        clearable style="width: 100%;" 
                                    />
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="开户行" prop="openingBank">
                                    <el-input  v-model="form.openingBank" placeholder="请输入开户行" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="银行账号" prop="bankAccount">
                                    <el-input  v-model="form.bankAccount" placeholder="请输入银行账号" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="税率" prop="taxRate">
                                    <el-select v-model="form.taxRate" placeholder="请选择税率" style="width: 100%;">
                                        <el-option label="3%" :value="1"></el-option>
                                        <el-option label="6%" :value="2"></el-option> 
                                        <el-option label="13%" :value="3"></el-option> 
                                    </el-select>  
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="账期" prop="paymentDays">
                                    <el-select v-model="form.paymentDays" placeholder="请选择账期" style="width: 100%;">
                                        <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-option label="半年" :value="6"></el-option> 
                                        <el-option label="年" :value="7"></el-option> 
                                    </el-select>   
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="主要联系人" prop="linkman">
                                    <el-input  v-model="form.linkman" placeholder="请输入主要联系人" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="主要联系人手机号" prop="linkmanNumber">
                                    <el-input  v-model="form.linkmanNumber" placeholder="请输入主要联系人手机号" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="微信号" prop="wechat">
                                    <el-input  v-model="form.wechat" placeholder="请输入微信号" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="邮箱" prop="email">
                                    <el-input  v-model="form.email" placeholder="请输入邮箱" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="备用联系人" prop="standbyLinkman">
                                    <el-input  v-model="form.standbyLinkman" placeholder="请输入备用联系人" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="备用联系人手机号" prop="standbyPhone">
                                    <el-input  v-model="form.standbyPhone" placeholder="请输入备用联系人手机号" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="微信号" prop="standbyWechat">
                                    <el-input  v-model="form.standbyWechat" placeholder="请输入微信号" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="邮箱" prop="standbyEmail">
                                    <el-input  v-model="form.standbyEmail" placeholder="请输入邮箱" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            
                            <el-col :span="12">
                                <el-form-item label="企业法人身份证复印件(正面)" prop="">
                                     <el-upload
                                        :http-request="(obj) => imgUpLoad(obj, 'fileUrl')"
                                        action="#"
                                        :limit="1"
                                        :show-file-list="true"
                                        :file-list="fileList1"
                                        list-type="picture-card"
                                        accept=".png, .jpg, .jpeg" 
                                        :class="{ disabled: uploadDisabled }"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove"
                                    >
                                        <i
                                            class="el-icon-plus avatar-uploader-icon"
                                        ></i>
                                    </el-upload>
                                </el-form-item> 
                            </el-col> 
                            <el-col :span="12">
                                <el-form-item label="企业法人身份证复印件(反面)" prop="">
                                      <el-upload
                                        :http-request="(obj) => imgUpLoad2(obj, 'fileUrl')"
                                        action="#"
                                        :limit="1"
                                        :show-file-list="true"
                                        :file-list="fileList2"
                                        list-type="picture-card"
                                        accept=".png, .jpg, .jpeg" 
                                        :class="{ disabled: uploadDisabled2 }"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove2"
                                    >
                                        <i
                                            class="el-icon-plus avatar-uploader-icon"
                                        ></i>
                                    </el-upload>
                                </el-form-item> 
                            </el-col> 
                        </el-row> 
                    </el-tab-pane>
                    <el-tab-pane label="主要经营情况" name="baseForm">
                        <el-row style="height: 550px;overflow-y: auto;">
                            <el-col :span="12">
                                <el-form-item label="注册资金(万元)" prop="registFund">
                                    <el-input  v-model.number="form.registFund" placeholder="请输入注册资金" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="成立时间" prop="establishDate"> 
                                    <el-date-picker v-model="form.establishDate" 
                                        type="date" align="right" clearable 
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                                        style="width: 100%">
                                    </el-date-picker> 
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="职工人数" prop="workersNum">
                                    <el-input  v-model.number="form.workersNum" placeholder="请输入供应商电话" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="目前服务的客户数量" prop="clientNum">
                                    <el-input  v-model.number="form.clientNum" placeholder="请输入目前服务的客户数量" maxlength="30" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="去年度营业收入" prop="lastYearOperatingIncome">
                                    <el-input  v-model="form.lastYearOperatingIncome" placeholder="请输入去年度营业收入" maxlength="30" clearable 
                                    @input="(v)=>(form.lastYearOperatingIncome=v.replace(/[^\d.]/g,''))"/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="前年度营业收入" prop="beforeYearOperatingIncome">
                                    <el-input  v-model="form.beforeYearOperatingIncome" placeholder="请输入前年度营业收入" maxlength="30" clearable 
                                    @input="(v)=>(form.beforeYearOperatingIncome=v.replace(/[^\d.]/g,''))"/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="营业范围(工商信息)" prop="businessScope">
                                    <el-input  v-model="form.businessScope" placeholder="请输入营业范围" type="textarea" row="3" maxlength="150" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="前五大客户" prop="topFiveClient">
                                    <el-input  v-model="form.topFiveClient" placeholder="请输入前五大客户" type="textarea" row="3" maxlength="150" clearable/>
                                </el-form-item> 
                            </el-col>
                           
                            <el-col :span="24">
                                <el-form-item label="前五大供应商" prop="topFiveSupplier">
                                    <el-input  v-model="form.topFiveSupplier" placeholder="请输入前五大供应商" type="textarea" row="3" maxlength="150" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="公司简介" prop="companyIntroduction">
                                    <el-input v-model="form.companyIntroduction" placeholder="请输入公司简介" type="textarea" row="3" maxlength="150" clearable/>
                                </el-form-item> 
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="主要优势" prop="mainAdvantage">
                                    <el-input  v-model="form.mainAdvantage" placeholder="请输入主要优势" maxlength="50" clearable/>
                                </el-form-item> 
                            </el-col> 
                        </el-row> 
                    </el-tab-pane>
                    <el-tab-pane label="主要资质" name="qualification">
                        <el-row style="height: 550px;overflow-y: auto;">
                            <div v-for="(item,index) in mainQualificationList" :key="index">  
                                <el-col :span="24">
                                    <div>{{ item.qualificationName }}</div>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="证书编号">
                                        <el-input  v-model="item.qualificationNum" placeholder="请输入供应商全称" maxlength="30" clearable/>
                                    </el-form-item> 
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="有效期" prop="">
                                        <el-date-picker v-model="item.validity" 
                                            type="date" align="right" clearable 
                                            format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                                            style="width: 100%">
                                        </el-date-picker> 
                                    </el-form-item> 
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item :label="item.qualificationName+'照片'" prop="">
                                        <el-upload
                                            :http-request="(obj) => imgUpLoadMain(obj,index)"
                                            action="#" 
                                            :limit="1"
                                            :show-file-list="true"
                                            :file-list="item.fileList"
                                            list-type="picture-card"
                                            accept=".png, .jpg, .jpeg" 
                                            :class="{ disabled: item.imgUrl!=''}"
                                            :on-preview="handlePictureCardPreview"
                                            :on-remove="handleRemoveMain(index)"
                                        >
                                            <i
                                                class="el-icon-plus avatar-uploader-icon"
                                            ></i>
                                        </el-upload>
                                    </el-form-item> 
                                </el-col> 
                            </div>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="附件管理" name="attachment">
                        <el-row style="height: 550px;overflow-y: auto;">
                            <el-col :span="12">
                                <el-form-item label="附件上传">
                                    <el-upload
                                        ref="upload"
                                        :http-request="fileUpLoad"
                                        action="#"
                                        accept=".xlsx, .xls" 
                                        :show-file-list="true" 
                                        :file-list="fileList3"
                                        :on-remove="handleRemoveFile"
                                    >
                                        <el-button
                                            type="text"
                                            size="mini"  
                                            >上传
                                        </el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="账户通知配置" name="notice">

                    </el-tab-pane>
                </el-tabs> 
            </el-form>
            
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

         <el-dialog
            :visible.sync="dialogVisible"
            title="预览"
            width="800"
            append-to-body
            >
            <img
                :src="dialogImageUrl"
                style="display: block; max-width: 100%; margin: 0 auto"
            />
        </el-dialog>
    </div>
</template>

<script>
import { systemAreaTreeApi } from "@/api/base/stall";
import { systemMaterialTreeApi } from "@/api/dish/material";
import { imgUpLoadTwo } from '@/api/system/upload'
import { supplierPageApi,addSupplierApi, editSupplierApi, removeSupplierApi, editStatusSupplierApi } from "@/api/supplierManage/index";

export default {
    name: "",
    dicts: [],
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            //表格数据
            tableListData: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false, 
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,    
                supplierName: undefined,
                areaId: undefined, 
                linkman: undefined, 
                status: undefined, 
                categoryIdList: []
            },
            treeTypeOptions:[],//类别树
            treeOptions:[],//区域树
            activeName:'baseInfo',
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                supplierName: [
                    { required: true, message: "供应商名称不能为空", trigger: "blur" }
                ], 
                linkman: [
                    { required: true, message: "主要联系人不能为空", trigger: "blur" }
                ],  
                linkmanNumber: [
                    { required: true, message: "主要联系人手机号不能为空", trigger: "blur" }
                ],  
                areaId: [
                    { required: true, message: "所属区域不能为空", trigger: "change" }
                ],
                categoryIdList: [
                    { required: true, message: "主要供应类别不能为空", trigger: "change" }
                ]
            },
            fileList1: [],
            idCardImgZ: [],//身份证正图片 
            idCardImgZNameList: [],//身份证正图片
            fileList2: [],
            idCardImgF: [],//身份证反图片 
            idCardImgFNameList: [],//身份证反图片
            mainQualificationList:[
                // {
                //     "qualificationNum": "",
                //     "qualificationName": "营业执照",
                //     "validity": "",
                //     "imgUrl": "",  
                //     "mainFlag": 1,
                // },
                // {
                //     "qualificationNum": "",
                //     "qualificationName": "ISO9001国际质量体系认证",
                //     "validity": "",
                //     "imgUrl": "", 
                //     "mainFlag": 1,
                // },
                // {
                //     "qualificationNum": "",
                //     "qualificationName": "食品经营许可证",
                //     "validity": "",
                //     "imgUrl": "", 
                //     "mainFlag": 1,
                // },
                // {
                //     "qualificationNum": "",
                //     "qualificationName": "烟草经营许可证",
                //     "validity": "",
                //     "imgUrl": "", 
                //     "mainFlag": 1,
                // },
                // {
                //     "qualificationNum": "",
                //     "qualificationName": "HACCP认证",
                //     "validity": "",
                //     "imgUrl": "", 
                //     "mainFlag": 1,
                // }
            ],
            fileList3:[],
            attachmentList:[],
            dialogVisible:false,//图片弹窗
            dialogImageUrl:"",//图片弹窗  
        };
    },
    computed: {
        //图片上传1张后，隐藏上传框
        uploadDisabled() {
            return this.idCardImgZ.length > 0
        },
        uploadDisabled2() {
            return this.idCardImgF.length > 0
        }, 
    },
    created() { 
          this.getTypeTreeData();
          this.getTreeData();
          this.getList(); 
    },
    
    methods: { 
        //类型树
        getTypeTreeData() {
            let param = {
                // categoryType:1,
            }
            systemMaterialTreeApi(param).then((response) => {
                this.treeTypeOptions = response.data;
            });
        },
        //区域树
        getTreeData() {
            systemAreaTreeApi({}).then((response) => {
                this.treeOptions = response.data;  
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() { 
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            let param = {
                "pageNum": this.queryParams.pageNum, 
                "pageSize": this.queryParams.pageSize,
                "supplierName": this.queryParams.supplierName,  
                "categoryIdList": this.queryParams.categoryIdList,  
                "areaId": this.queryParams.areaId,  
                "linkman": this.queryParams.linkman,  
                "status": this.queryParams.status
            }
            supplierPageApi(param).then(response => {
                this.tableListData = response.rows;
                this.total = Number(response.total);
                this.loading = false;
            });
        },  
        // 状态修改
        handleStatusChange(row) {
            // let text = row.status === '0' ? '启用' : '停用'
            // this.$modal.confirm('确认要"' + text + '吗？').then(function() {
            //     return updateSysIpWhitelistStatus(row.id, row.status)
            // }).then(() => {
            //     this.$modal.msgSuccess(text + '成功')
            // }).catch(function() {
            //     row.status = row.status === '0' ? '1' : '0'
            // })
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "新增";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset(); 
            if(row.idCardImgZ){
                this.fileList1=[{url:row.idCardImgZ}]
                this.idCardImgZ=[row.idCardImgZ]
            }else{
                this.fileList1=[]
                this.idCardImgZ=[]
            }
            if(row.idCardImgF){
                this.fileList2=[{url:row.idCardImgF}]
                this.idCardImgF=[row.idCardImgF]
            }else{
                this.fileList2=[]
                this.idCardImgF=[]
            }
            this.form = Object.assign({}, row)
            this.form.mainQualificationList.forEach(item=>{
                if(item.imgUrl&&item.imgUrl!=''){
                    item.fileList = [{url:item.imgUrl}]
                }else{
                    item.fileList=[]
                }
            })
            this.mainQualificationList = this.form.mainQualificationList;
            this.open = true;
            this.title = "修改"; 
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.activeName='baseInfo'
            this.fileList1=[]
            this.idCardImgZ=[]
            this.idCardImgZNameList=[]
            this.fileList2=[]
            this.idCardImgF=[]
            this.idCardImgFNameList=[] 
            this.mainQualificationList=[
                {
                    "qualificationNum": "",
                    "qualificationName": "营业执照",
                    "validity": "",
                    "imgUrl": "",
                    fileList:[],
                    "mainFlag": 1,
                },
                {
                    "qualificationNum": "",
                    "qualificationName": "ISO9001国际质量体系认证",
                    "validity": "",
                    "imgUrl": "",
                    fileList:[],
                    "mainFlag": 1,
                },
                {
                    "qualificationNum": "",
                    "qualificationName": "食品经营许可证",
                    "validity": "",
                    "imgUrl": "",
                    fileList:[],
                    "mainFlag": 1,
                },
                {
                    "qualificationNum": "",
                    "qualificationName": "烟草经营许可证",
                    "validity": "",
                    "imgUrl": "",
                    fileList:[],
                    "mainFlag": 1,
                },
                {
                    "qualificationNum": "",
                    "qualificationName": "HACCP认证",
                    "validity": "",
                    "imgUrl": "",
                    fileList:[],
                    "mainFlag": 1,
                }
            ]
            this.fileList3=[]
            this.attachmentList=[]
            this.form = {
                mainQualificationList:[],
                otherQualificationList:[],
                attachmentList:[],
                deliverVOList:[]
            };
            this.resetForm("form");
        }, 
        /** 提交按钮 */
        submitForm: function() {
            this.$refs["form"].validate(valid => {
            if (valid) {
                if(this.idCardImgZ.length>0){
                    this.form.idCardImgZ = this.idCardImgZ[0]
                }else{
                    this.form.idCardImgZ = null
                }
                if(this.idCardImgF.length>0){
                    this.form.idCardImgF = this.idCardImgF[0]
                }else{
                    this.form.idCardImgF = null
                }
                this.form.mainQualificationList = this.mainQualificationList
                this.form.attachmentList = this.attachmentList
                if (this.form.supplierId != undefined) {
                    editSupplierApi(this.form).then(response => {
                        this.$modal.msgSuccess("修改成功");
                        this.open = false;
                        this.getList();
                    });
                } else {
                    addSupplierApi(this.form).then(response => {
                        this.$modal.msgSuccess("新增成功");
                        this.open = false;
                        this.getList();
                    });
                }
            }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) { 
            this.$modal.confirm('是否确认删除数据项？').then(function() {
                return removeSupplierApi({supplierId:row.supplierId});
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
        }, 
        // 图片上传
        imgUpLoad(param, name, index) {
            param.type = 'canteen'
            imgUpLoadTwo(param).then((res) => {
                if (res.code == 200) { 
                    this.idCardImgZ.push(res.data.url)
                    this.idCardImgZNameList.push(res.data.name)
                } else { 
                    this.$modal.msgError(res.msg)
                }
            })
            .catch((error) => { 
                this.$modal.msgError(error)
            })
        },  
        handleRemove(file, fileList) {
            let sum = 0
            this.idCardImgZNameList.forEach((item, index) => {
                if (item == file.name) {
                    sum = index
                }
            })
            this.idCardImgZ.splice(sum, 1) 
            this.idCardImgZNameList.splice(sum, 1) 
        },
        imgUpLoad2(param, name, index) {
            param.type = 'canteen'
            imgUpLoadTwo(param).then((res) => {
                if (res.code == 200) { 
                    this.idCardImgF.push(res.data.url)
                    this.idCardImgFNameList.push(res.data.name)
                } else { 
                    this.$modal.msgError(res.msg)
                }
            })
            .catch((error) => { 
                this.$modal.msgError(error)
            })
        },  
        handleRemove2(file, fileList) {
            let sum = 0
            this.idCardImgFNameList.forEach((item, index) => {
                if (item == file.name) {
                    sum = index
                }
            })
            this.idCardImgF.splice(sum, 1) 
            this.idCardImgFNameList.splice(sum, 1) 
        },
        //主要资质
        imgUpLoadMain(param,index){
            param.type = 'canteen'
            imgUpLoadTwo(param).then((res) => {
                if (res.code == 200) {
                    console.log(index)
                    this.mainQualificationList[index].imgUrl = res.data.url  
                } else { 
                    this.$modal.msgError(res.msg)
                }
            })
            .catch((error) => { 
                this.$modal.msgError(error)
            })
        },
        handleRemoveMain(index) { 
            this.mainQualificationList[index].imgUrl=""; 
        },

        //附件上传
        fileUpLoad(param){
            param.type = 'canteen'
            imgUpLoadTwo(param).then((res) => {
              if (res.code == 200) {
                this.attachmentList.push(res.data)
                console.log(this.attachmentList)
              } else {
                this.$modal.msgError(res.msg);
              }
          }).catch((error) => { 
            
              this.$modal.msgError(error)
          })
        }, 
        handleRemoveFile(file, fileList){
            let sum = 0
            this.attachmentList.forEach((item, index) => {
                if (item.name == file.name) {
                    sum = index
                }
            })
            this.attachmentList.splice(sum, 1)  
        }, 
        //图片点击查看
        handlePictureCardPreview(file) {
            console.log(file)
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        }
    }
};
</script>
  <style lang="scss" scoped>
  //隐藏图片上传框的css
  ::v-deep.disabled {
      .el-upload--picture-card {
          display: none;
      }
  }
</style>