<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="所属区域" prop="areaIds">
          <el-cascader 
            v-model="queryParams.areaIds" :show-all-levels="false" :filterable="true"
            :options="treeOptions" :props="treeProps" collapse-tags clearable
            @change="handleTreeChange"></el-cascader>
        </el-form-item>
        <el-form-item label="食堂名称" prop="canteenName">
          <el-input 
            v-model="queryParams.canteenName"
            placeholder="请输入食堂名称"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </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" prop="canteenNum" :show-overflow-tooltip="true" width="100" fixed="left"/>
        <el-table-column label="食堂名称" align="center" prop="canteenName" :show-overflow-tooltip="true" width="150" fixed="left"/>
        <el-table-column label="所属区域" align="center" prop="areaNameStr" :show-overflow-tooltip="true" width="180"/>
        <el-table-column label="负责人" align="center" prop="custName" :show-overflow-tooltip="true" width="80"/>
        <el-table-column label="联系电话" align="center" prop="contactTel" :show-overflow-tooltip="true" width="100"/>
        <el-table-column label="食堂标签" align="center" prop="labelNameStr" :show-overflow-tooltip="true" width="80"/>
        <el-table-column label="食堂状态" align="center" prop="businessState" :show-overflow-tooltip="true" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.businessState==1">休息</span>
            <span v-if="scope.row.businessState==2">营业</span>
          </template> 
        </el-table-column>
        <el-table-column label="主营项目" align="center" prop="mainProject" :show-overflow-tooltip="true" width="80"/>
        <el-table-column label="营业时间" align="center" prop="startBusinessTime" :show-overflow-tooltip="true" width="180">
          <template slot-scope="scope">
            {{ scope.row.startBusinessTime }}-{{ scope.row.endBusinessTime }}
          </template> 
        </el-table-column> 
        <el-table-column label="预订餐" align="center" prop="ifReserve" :show-overflow-tooltip="true" width="140">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.ifReserve"
              active-text="开启"
              inactive-text="关闭"
              :active-value="1"
              :inactive-value="2"
              @change="changeIfReserve(scope.row)"
              >
            </el-switch>
          </template>
        </el-table-column>
        <!-- <el-table-column label="报餐" align="center" prop="ifBook" :show-overflow-tooltip="true" width="140">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.ifBook"
              active-text="开启"
              inactive-text="关闭"
              :active-value="1"
              :inactive-value="2"
              >
            </el-switch>
          </template>
        </el-table-column> -->
        <el-table-column label="最大容纳人数" align="center" prop="capacity" :show-overflow-tooltip="true" width="100"/>
        <!-- <el-table-column label="客流统计" align="center" prop="" :show-overflow-tooltip="true" width="80">
          <template slot-scope="scope">
            <span style="color: #4b80fd;">详情</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="区域人数统计" align="center" prop="" :show-overflow-tooltip="true" width="80">
          <template slot-scope="scope">
            <span style="color: #4b80fd;">详情</span>
          </template>
        </el-table-column> -->
        <el-table-column label="食堂图片" align="center" prop="imgUrl" width="100">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl" alt="" style="width: 80px;height: 40px;" @click="openImg(scope.row)">
          </template>
        </el-table-column>
        <!-- <el-table-column label="支付设置" align="center" prop="canteenName" :show-overflow-tooltip="true" width="80">
          <template slot-scope="scope">
            <span style="color: #4b80fd;">详情</span>
          </template>
        </el-table-column>
        <el-table-column label="配送设置" align="center" prop="canteenName" :show-overflow-tooltip="true" width="80">
          <template slot-scope="scope">
            <span style="color: #4b80fd;">详情</span>
          </template>
        </el-table-column>
        <el-table-column label="预订/点餐/报餐设置" align="center" prop="" :show-overflow-tooltip="true" width="140">
          <template slot-scope="scope">
            <span style="color: #4b80fd;">详情</span>
          </template>
        </el-table-column> -->
        <el-table-column label="收款码" align="center" prop="payCodeUrl" :show-overflow-tooltip="true" width="80">
          <template slot-scope="scope">
            <span>未开启</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="crtime" :show-overflow-tooltip="true" width="160"/>
        <el-table-column label="更新时间" align="center" prop="uptime" :show-overflow-tooltip="true" width="160"/>
        <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text" v-if="scope.row.businessState==2"
              @click="handleRest(scope.row)" 
            >休息</el-button>
            <el-button
              size="mini"
              type="text" v-if="scope.row.businessState==1"
              @click="handleBuss(scope.row)" 
            >营业</el-button>
            <el-button
              size="mini"
              type="text" 
              @click="handleUpdate(scope.row)" 
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              style="color: red;"
              @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-tabs v-model="activeName" @tab-click="handleTabClick">
          <!-- 基础设置 -->
          <el-tab-pane label="基础设置" name="baseSetting" style="height: 600px;overflow-y: auto;">
            <el-form ref="baseForm" :model="baseForm" :rules="baseFormRules" label-width="80px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="食堂编号" prop="canteenNum">
                    <el-input  v-model="baseForm.canteenNum" placeholder="请输入食堂编号" maxlength="30" disabled clearable/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="食堂名称" prop="canteenName">
                    <el-input  v-model="baseForm.canteenName" placeholder="请输入食堂名称" maxlength="30" clearable/>
                  </el-form-item> 
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="所属区域" prop="areaId">
                    <el-cascader v-model="baseForm.areaId"
                      :options="treeOptions" :filterable="true" style="width: 400px;" :show-all-levels="false"
                      :props="{ 
                        emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
                        checkStrictly: true,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
                        value:'id',label:'treeName'
                      }"
                      clearable @change="handleTreeChange2" >
                    </el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="营业时间">
                    <el-time-picker
                      is-range
                      v-model="rangeTime"
                      value-format="HH:mm:ss"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      placeholder="选择时间范围">
                    </el-time-picker>
                  </el-form-item> 
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="食堂标签" prop="labelNameList"> 
                    <el-select v-model="baseForm.labelNameList" multiple placeholder="请选择食堂标签" style="width: 100%;"> 
                        <el-option
                          v-for="dict in dict.type.stall_tag"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.label"
                        />
                        <!-- <el-option v-for="item in labelOptions"
                            :key="item.labelName"
                            :label="item.labelName"
                            :value="item.labelName" 
                        ></el-option> -->
                    </el-select> 
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="食堂最大容纳人数" prop="capacity">
                      <el-input v-model="baseForm.capacity" placeholder="请输入食堂最大容纳人数" maxlength="9" clearable 
                                @input="(v)=>(baseForm.capacity=v.replace(/[^\d]/g,''))"/>
                  </el-form-item> 
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="负责人" prop="custId"> 
                    <!-- <el-select v-model="baseForm.custName" placeholder="请选择负责人" style="width: 100%;" @focus="openChosenCharger"></el-select>  -->
                    <el-select v-model="baseForm.custId" placeholder="请选择负责人" style="width: 100%;" clearable @change="chosenUser">
                        <el-option v-for="item in userOptions"
                            :key="item.userId" 
                            :label="item.nickName"
                            :value="item.userId" 
                        ></el-option>
                    </el-select> 
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系电话" prop="contactTel">
                      <el-input v-model="baseForm.contactTel" placeholder="请输入联系电话" maxlength="11" clearable 
                                @input="(v)=>(baseForm.contactTel=v.replace(/[^\d]/g,''))"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否开启预订餐" prop="ifReserve">
                    <el-switch
                      v-model="baseForm.ifReserve"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="2">
                    </el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否开启报餐" prop="ifBook">
                    <el-switch
                      v-model="baseForm.ifBook"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="2">
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <!-- <el-col :span="12">
                  <el-form-item label="是否开启收款码" prop="ifEnablePayCode">
                    <el-switch
                      v-model="baseForm.ifEnablePayCode"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="2">
                    </el-switch>
                  </el-form-item>
                </el-col> -->
                <el-col :span="12">
                  <el-form-item label="食堂图片">
                    <el-upload
                          :http-request="
                              (obj) => imgUpLoad(obj, 'fileUrl')
                          "
                          action="#"
                          :limit="1"
                          :file-list="fileList"
                          :show-file-list="true"
                          list-type="picture-card"
                          accept=".png, .jpg, .jpeg"
                          :on-success="handleAvatarSuccess"
                          :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-row> 
           
            </el-form>
          </el-tab-pane>
          <!-- 支付设置 -->
          <!-- <el-tab-pane label="支付设置" name="paySetting" style="height: 600px;overflow-y: auto;">
            <div style="width: 100%;height: auto;">
              <div>
                <span style="font-weight: bold;">启用本食堂独立规则</span>
                <el-switch v-model="payDTO.ifEnablePay"
                  active-text="开启" inactive-text="关闭"
                  :active-value="1" :inactive-value="2"></el-switch>
              </div>
              <div style="color: red;">
                *提示：需勾选对应的支付方式后配置方可生效（只针对下层的设备生效，小程序不生效）
              </div>
              <div style="margin: 10px;">
                <el-checkbox-group v-model="payTypeList" size="small">
                  <el-checkbox label="1" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;margin-left: 10px;">支付宝</el-checkbox>
                  <el-checkbox label="2" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">微信</el-checkbox>
                  <el-checkbox label="3" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">云闪付</el-checkbox>
                  <el-checkbox label="4" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">农业银行</el-checkbox>
                  <el-checkbox label="5" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">工商银行</el-checkbox>
                  <el-checkbox label="6" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">兴业银行</el-checkbox>
                  <el-checkbox label="7" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">建设银行</el-checkbox>
                  <el-checkbox label="8" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">苏州农商银行</el-checkbox>
                  <el-checkbox label="9" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">银联支付</el-checkbox>
                  <el-checkbox label="10" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">富友支付</el-checkbox>
                  <el-checkbox label="11" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">太仓农商行</el-checkbox>
                  <el-checkbox label="12" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">宁波银行</el-checkbox>
                  <el-checkbox label="13" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">南京银行</el-checkbox>
                  <el-checkbox label="14" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">无锡农商行</el-checkbox>
                  <el-checkbox label="15" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">扫呗支付</el-checkbox>
                  <el-checkbox label="16" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">甘肃农信社</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-tab-pane> -->
          <!-- 配送设置 -->
          <!-- <el-tab-pane label="配送设置" name="deliverySetting" style="height: 600px;overflow-y: auto;"> 
            <div style="width: 100%;height: auto;">
              <div>
                <span style="font-weight: bold;">启用本食堂独立规则</span>
                <el-switch v-model="deliveryModel.ifEnableDelivery"
                  active-text="开启" inactive-text="关闭"
                  :active-value="1" :inactive-value="2"></el-switch>
              </div>
              <div style="margin: 10px;">
                <el-checkbox-group v-model="deliveriesList" size="small">
                  <el-checkbox label="1" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">自取堂食</el-checkbox>
                  <el-checkbox label="2" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">商家配送</el-checkbox>
                  <el-checkbox label="3" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">取餐柜配送</el-checkbox><br>
                  <el-checkbox label="4" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">生鲜柜配送</el-checkbox>
                  <el-checkbox label="5" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">自取外带</el-checkbox>
                  <el-checkbox label="6" border style="width: 180px;background: #e8f0ff;margin-bottom: 10px;">取餐点自取</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-tab-pane> -->
          <!-- 预订/点餐/报餐设置 -->
          <!-- <el-tab-pane label="预订/点餐/报餐设置" name="orderSetting" style="height: 600px;overflow-y: auto;">


          </el-tab-pane> -->
        </el-tabs>

        <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 title="选择负责人" :visible.sync="openJob" width="800px" append-to-body>
        <el-form :model="dialogQueryParams" ref="dialogQueryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="" prop="keyword">
            <el-input v-model="dialogQueryParams.keyword" placeholder="请输入姓名，编号，手机号" clearable style="width: 240px"/>
          </el-form-item>
          <el-form-item label="" prop="job">
            <el-select v-model="dialogQueryParams.job" placeholder="请选择职位" style="width: 100%;">
                <el-option v-for="item in jobOptions"
                    :key="item.jobId"
                    :label="item.jobName"
                    :value="item.jobCode" 
                ></el-option>
            </el-select> 
          </el-form-item> 
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDialogQuery">搜索</el-button> 
          </el-form-item>
        </el-form>
        <el-table :data="jobTableData" height="500" highlight-current-row @current-change="handleCurrentChange">
          <el-table-column label="负责人姓名" align="center" prop="custName" :show-overflow-tooltip="true"/>
          <el-table-column label="负责人编号" align="center" prop="custNum" :show-overflow-tooltip="true"/>
          <el-table-column label="负责人手机号" align="center" prop="mobile" :show-overflow-tooltip="true"/>
          <el-table-column label="职位" align="center" prop="job" :show-overflow-tooltip="true"/>
          <el-table-column label="所属组织" align="center" prop="orgFullName" :show-overflow-tooltip="true"/>
        </el-table> 
        <pagination
          v-show="dialogTotal>0"
          :total="dialogTotal"
          :page.sync="dialogQueryParams.pageNum"
          :limit.sync="dialogQueryParams.pageSize"
          @pagination="queryCustJobPage"
        />

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirmChosenCharger">确 定</el-button>
          <el-button @click="openJob=false">取 消</el-button>
        </div>
      </el-dialog>
 
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>





    </div>
  </template>
  
  <script>
  import { systemAreaTreeApi } from "@/api/base/area";
  import { getPageCanteenApi, getCanteenNumApi, addCanteenApi, getCanteenInfoModifyApi, updateCanteenApi, removeCanteenApi } from "@/api/base/canteen";
  import { getCanteenLabelApi, queryAllCustJobApi, queryCustJobPageApi, getMealtimeListApi,changeIfReserveApi,changeBusinessStateApi,userListByRoleApi } from "@/api/base/canteen";
  import { imgUpLoadTwo } from '@/api/system/upload'
  export default {
    name: "",
    dicts: ['stall_tag'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 字典表格数据
        tableListData: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        treeOptions:[],//区域树
        treeProps:{
          multiple: true,
          value:"id",
          label:"treeName",
          children:"children",
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          canteenName: undefined,
          areaIds: [], 
        },
        activeName:"baseSetting",
        canteenId:"",//食堂数据-编辑
        canteenData:{},//食堂数据-编辑
        baseForm: {
          "areaId": "",
          "canteenName": "",
          "canteenNum": "",
          "capacity": "",
          "contactTel": "",
          "custId": "379497835516661760",
          "endBusinessTime": "",
          "startBusinessTime": "",
          "ifBook": 2,
          "ifEnablePayCode": 2,
          "ifReserve": 2,
          "imgUrl": "",
          "labelNameList": []
        },//基础设置
        rangeTime:["08:00:00", "18:00:00"],//营业时间
        // 表单校验
        baseFormRules: {
          canteenName: [
            { required: true, message: "食堂名称不能为空", trigger: "blur" }
          ],
          areaId: [
            { required: true, message: "所属区域不能为空", trigger: "blur" }
          ],
          contactTel: [
            {
                pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                message: '请输入正确的手机号码',
                trigger: 'blur',
            }
          ]
        },
        labelOptions:[],//食堂标签下拉
        userOptions:[],//负责人下拉
        //选择负责人弹窗
        openJob: false,
        jobOptions:[],//职位标签下拉
        dialogQueryParams:{//负责人查询条件
          pageNum: 1,
          pageSize: 10, 
        },
        jobTableData:[],//负责人弹窗
        // 总条数
        dialogTotal: 0,
        currentCustRow:{},//选中的负责人数据
        fileList: [],//食堂图片
        checkUrlList: [],//食堂图片
        checkUrlNameList: [],//食堂图片
        dialogVisible:false,//图片弹窗
        dialogImageUrl:"",//图片弹窗
        payDTO:{
            "ifEnablePay": "2",
            "payMap": {},
            "payTypes": ""
        },//支付设置
        payTypeList:[],//支付类型
        deliveryModel:{//配送设置
          "ifEnableDelivery": "2",
          "deliveries": "",
          "minDeliveryFeeOnOff": 1,
          "deliveryList": [
                      {
                        "deliveryEndTime": "23:59:59",
                        "deliveryStartTime": "00:00:00",
                        "deliveryType": 2
                      },
                      {
                        "deliveryEndTime": "23:59:59",
                        "deliveryStartTime": "00:00:00",
                        "deliveryType": 3
                      },
                      {
                        "deliveryEndTime": "23:59:59",
                        "deliveryStartTime": "00:00:00",
                        "deliveryType": 4
                      },
                      {
                        "deliveryEndTime": "23:59:59",
                        "deliveryStartTime": "00:00:00",
                        "deliveryType": 5
                      },
                      {
                        "deliveryEndTime": "23:59:59",
                        "deliveryStartTime": "00:00:00",
                        "deliveryType": 6
                      }
          ],
        },
        deliveriesList:[],//配送类型

        orderDTO:{},//订单设置
        mealtimeList:[],//餐次列表

      };
    },
    created() {
      this.getTreeData();
      this.getList();
      this.getCanteenLabel()
      this.queryAllCustJob()
      this.mgruserListByRole()
    },
    computed: {
        //图片上传1张后，隐藏上传框
        uploadDisabled() {
            return this.checkUrlList.length > 0
        },
    },
    methods: {
        //区域树
        getTreeData() {
          systemAreaTreeApi({}).then((response) => {
            this.treeOptions = response;
            console.log(this.treeOptions) 
          });
        },
        handleTreeChange(e){
          console.log(e) 
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() { 
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            let arr=[]
            if(this.queryParams.areaIds.length>0){
              this.queryParams.areaIds.forEach(item=>{
                arr.push(item[item.length - 1])
              })
            }
            let param = {
              "current": this.queryParams.pageNum, 
              "size": this.queryParams.pageSize,
              "canteenName": this.queryParams.canteenName,
              "areaIdList":arr
            }
            getPageCanteenApi(param).then(response => {
                this.tableListData = response.records;
                this.total = Number(response.total);
                this.loading = false;
            });
        },

        //修改食堂是否支持预订餐
        changeIfReserve(row){ 
          let param = {
            "canteenId": row.canteenId,
            "ifReserve": row.ifReserve
          }
          changeIfReserveApi(param).then((response) => {
             this.getList()
          }); 
        }, 

        handleTabClick(tab, event) {
          console.log(tab, event);
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.canteenId=""
            this.reset();
            this.getMealtimeList()
            this.open = true;
            this.title = "新增";
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.fileList=[]
            this.checkUrlList=[]
            this.baseForm = {};
            this.rangeTime=["08:00:00", "18:00:00"]
            this.resetForm("baseForm");
        }, 
        /** 修改按钮操作 */
        handleUpdate(row) {
          console.log(row)
            this.reset(); 
            getCanteenInfoModifyApi({"canteenId":row.canteenId}).then(response => { 
                console.log(response)
                this.canteenId = response.canteenId;
                this.baseForm = response.canteenSaveDTO;
                this.getCanteenNum()
                if(response.canteenSaveDTO.imgUrl){
                  this.fileList=[{url:response.canteenSaveDTO.imgUrl}]
                  this.checkUrlList=[response.canteenSaveDTO.imgUrl]
                }else{
                  this.fileList=[]
                  this.checkUrlList=[]
                } 
                this.deliveryModel = response.deliveryModel;
                this.orderDTO = response.orderDTO;
                this.payDTO = response.payDTO; 
                this.mealtimeList = response.mealtimeList;
                this.open = true;
                this.title = "修改";
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) { 
            this.$modal.confirm('是否确认删除数据项？').then(function() {
                return removeCanteenApi({"canteenId":row.canteenId});
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
        },
        /** 休息按钮操作 */
        handleRest(row) { 
            let param = {
              "businessState": 1,
              "canteenTreeType": 1,
              "modifyId": row.canteenId
            }
            this.$modal.confirm('是否确认休息？').then(function() {
                return changeBusinessStateApi(param);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("操作成功");
            }).catch(() => {});
        },
        /** 营业按钮操作 */
        handleBuss(row) { 
            let param = {
              "businessState": 2,
              "canteenTreeType": 1,
              "modifyId": row.canteenId
            }
            this.$modal.confirm('是否确认营业？').then(function() {
                return changeBusinessStateApi(param);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("操作成功");
            }).catch(() => {});
        },
        /** 提交按钮 */
        submitForm: function() {
            console.log(this.baseForm)
            console.log(this.rangeTime)
            this.$refs["baseForm"].validate(valid => {//基本设置表单校验
            if (valid) {
              this.baseForm.startBusinessTime=this.rangeTime[0]
              this.baseForm.endBusinessTime=this.rangeTime[1]
              this.baseForm.imgUrl = this.checkUrlList[0]
              let param ={
                "canteenSaveDTO": this.baseForm,
                "payDTO": {//支付设置
                  "ifEnablePay": "2",
                  "payMap": {},
                  "payTypes": ""
                },
                "deliveryModel": {//配送设置
                  "deliveries": "",
                  "deliveryList": [
                      {
                        "deliveryEndTime": "23:59:59",
                        "deliveryStartTime": "00:00:00",
                        "deliveryType": 2
                      },
                      {
                        "deliveryEndTime": "23:59:59",
                        "deliveryStartTime": "00:00:00",
                        "deliveryType": 3
                      },
                      {
                        "deliveryEndTime": "23:59:59",
                        "deliveryStartTime": "00:00:00",
                        "deliveryType": 4
                      },
                      {
                        "deliveryEndTime": "23:59:59",
                        "deliveryStartTime": "00:00:00",
                        "deliveryType": 5
                      },
                      {
                        "deliveryEndTime": "23:59:59",
                        "deliveryStartTime": "00:00:00",
                        "deliveryType": 6
                      }
                  ],
                  "ifEnableDelivery": "2",
                  "minDeliveryFeeOnOff": 1
                },
                "orderDTO": {//订单设置
                  "reportMealLimitDay": 0,
                  "reserveLimitDay": 0
                },
                "mealtimeList":this.mealtimeList
              } 
              if (this.canteenId != "") {
                param.canteenId = this.canteenId
                updateCanteenApi(param).then(response => {
                      this.$modal.msgSuccess("修改成功");
                      this.open = false;
                      this.getList();
                  });
              } else {
                  addCanteenApi(param).then(response => {
                      this.$modal.msgSuccess("新增成功");
                      this.open = false;
                      this.getList();
                  });
              }
            }
            });
        },
        //基础设置-选择区域
        handleTreeChange2(val){
          if(val){
            setTimeout(()=>{
              this.getCanteenNum()
            },500)
          }
        },
        //获取食堂编号
        async getCanteenNum() {
          let params= {
            "superId":this.baseForm.areaId,
            "canteenTreeType":1
          } 
          const res = await getCanteenNumApi(params);
          this.$set(this.baseForm,"canteenNum",res.data)
        },
        //查询食堂标签下拉
        getCanteenLabel() {
          // let param = { "current": 1,"size": -1}
          // getCanteenLabelApi(param).then((response) => {
          //   this.labelOptions = response.records; 
          // });
        },
        //商户类用户
        mgruserListByRole(){
          let param = {
            "roleKey": "ROLE_MERCHANT"
          }
          userListByRoleApi(param).then(response => {
            this.userOptions = response.rows
          });
        },
        //选中
        chosenUser(e){
          let obj = {}
          this.userOptions.forEach(item=>{
            if(item.userId == e){
              obj=item
            }
          })
          this.$set(this.baseForm,"custName",obj.userName)
          this.$set(this.baseForm,"contactTel",obj.phonenumber)
        },
        //选择负责人
        openChosenCharger(){ 
          this.queryCustJobPage()
          this.currentCustRow = {}
          this.openJob=true
        },
        //人员职位职称下拉
        queryAllCustJob() {
          queryAllCustJobApi({}).then((response) => {
            this.jobOptions = response.data
            console.log(response) 
          });
        },
        //负责人弹窗-查询按钮
        handleDialogQuery(){
          this.dialogQueryParams.pageNum=1
          this.queryCustJobPage()
        },
        //负责人弹窗-人员分页查询接口
        queryCustJobPage() {
          let param = {
            "current": this.dialogQueryParams.pageNum,
            "ifQueryJob": 1,
            "size": this.dialogQueryParams.pageSize,
            "job": this.dialogQueryParams.job,
            "keyword": this.dialogQueryParams.keyword
          }
          queryCustJobPageApi(param).then((response) => {
            this.jobTableData = response.records
            this.dialogTotal = Number(response.total);
            console.log(response) 
          });
        },
        handleCurrentChange(val) {
          console.log(val)
          this.currentCustRow = val;
        },
        confirmChosenCharger(){
          if(this.currentCustRow != {}){
            this.baseForm.custName = this.currentCustRow.custName;
            this.baseForm.custId = this.currentCustRow.custId;
            this.$set(this.baseForm,"contactTel",this.currentCustRow.mobile)
          }else{
            this.baseForm.custName = this.baseForm.custName||""
            this.baseForm.custId = this.baseForm.custId||""
            this.$set(this.baseForm,"contactTel",this.baseForm.contactTel||"") 
          }
          this.openJob=false
        },
        // 食堂图片上传
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        openImg(row) {
          this.dialogImageUrl = row.imgUrl;
          this.dialogVisible = true;
        },
        // 图片上传
        imgUpLoad(param, name, index) {
            // console.log(param,'image')
            param.type = 'canteen'
            imgUpLoadTwo(param).then((res) => {
                if (res.code == 200) {
                    this.checkUrlList.push(res.data.url)
                    this.checkUrlNameList.push(res.data.name)
                } else { 
                    this.$modal.msgError(res.msg)
                }
            })
            .catch((error) => { 
                this.$modal.msgError(error)
            })
        },
        handleAvatarSuccess(res, file) {
            console.log('success')
        },
        handleExceed(files, fileList) {
            this.$message.warning('最多只可以上传一张图片')
        },
        handleRemove(file, fileList) {
            let sum = 0
            this.checkUrlNameList.forEach((item, index) => {
                if (item == file.name) {
                    sum = index
                }
            })
            this.checkUrlNameList.splice(sum, 1)
            this.checkUrlList.splice(sum, 1)
        },
        //图片点击查看
        handlePictureCardPreview(file) {
            console.log(file)
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        }, 
        //查询餐次时段列表
        getMealtimeList() {
          getMealtimeListApi({}).then((response) => {
            this.mealtimeList = response
            console.log(response) 
          });
        },







        
    }
  };
  </script>
  <style lang="scss" scoped>
  //隐藏图片上传框的css
  ::v-deep.disabled {
      .el-upload--picture-card {
          display: none;
      }
  }
</style>
  