<template>
  <div class="app-container">
    <el-form :model="queryParams" size="mini" ref="queryParams" :inline="true" :rules="queryRules" v-show="showSearch" label-width="78px">
      <el-form-item :class="['treeselectForm',{borderRed:!validTree}]" label="组织架构" prop="orgIds">
        <tree @treeselectFn="treeselectFn" :treeval="queryParams.orgIds" :ismultiple="true"></tree>
      </el-form-item>
      <el-form-item label="销售员" prop="userId">
        <user :userId="queryParams.userId" :orgIds="queryParams.orgIds" @userIdFn="userIdFn"></user>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="listQuery('queryParams')">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="listRresetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <div class="info">门店覆盖列表，待分配门店数【{{waitStoreCount}}】</div>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="listQuery('queryParams')"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="storeList">
      <el-table-column label="销售员" align="center" prop="personName" />
      <el-table-column label="公司" align="center" prop="gsName" />
      <el-table-column label="大区" align="center" prop="dqName" />
      <el-table-column label="销售部" align="center" prop="xsbName" />
      <el-table-column label="门店数量" align="center" prop="storeNum" />
      <el-table-column label="排线门店数量" align="center" prop="pxStoreNum" />
      <el-table-column label="排线率" align="center" prop="pxRate" >
        <template slot-scope="scope">
          <div>{{scope.row.pxRate+'%'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            v-hasPermi="['sfa:storeCoverage:edit']"
          >编辑</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('queryParams')"
    />

    <!-- 门店覆盖编辑弹窗 -->
    <el-dialog title="已分配门店列表" :visible.sync="coverageEditVisible" width="90%" append-to-body>
      <el-row class="mb8">
        <el-col :span="24">
          <div class="info">门店列表 -- 【{{personName}}】</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form :model="distributionStoreParams" ref="distributionStoreParams" :inline="true" label-width="88px">
            <el-form-item label="门店名称" prop="storeName">
              <el-input
                v-model="distributionStoreParams.storeName"
                placeholder="请输入门店名称"
                clearable
                size="mini"
                @input="onInput()"
              />
            </el-form-item>
            <el-form-item label="门店编号" prop="storeCode">
              <el-input
                v-model="distributionStoreParams.storeCode"
                placeholder="请输入门店编号"
                clearable
                size="mini"
                @input="onInput()"
              />
            </el-form-item>
<!--            <el-form-item label="经销商名称" prop="chainName">-->
<!--              <el-input-->
<!--                v-model="distributionStoreParams.chainName"-->
<!--                placeholder="经销商名称"-->
<!--                clearable-->
<!--                size="mini"-->
<!--                @input="onInput()"-->
<!--              />-->
<!--            </el-form-item>-->
            <el-form-item label="经销商编号" prop="chainCode">
              <el-input
                v-model="distributionStoreParams.chainCode"
                placeholder="请输入经销商编号"
                clearable
                size="mini"
                @input="onInput()"
              />
            </el-form-item>
            <el-form-item label="省(州)" prop="province">
              <el-select size="mini" v-model="distributionStoreParams.province" clearable placeholder="请选择省(州)" @change="provinceStoreChange">
                <el-option
                  v-for="item in provinceStoreOptions"
                  :key="item.provinceCode"
                  :label="item.provinceName"
                  :value="item.provinceCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="市" prop="city">
              <el-select size="mini" v-model="distributionStoreParams.city" clearable placeholder="请选择市" @change="cityStoreChange">
                <el-option
                  v-for="item in cityStoreOptions"
                  :key="item.cityCode"
                  :label="item.cityName"
                  :value="item.cityCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="县(区)" prop="district">
              <el-select size="mini" v-model="distributionStoreParams.district" clearable placeholder="请选择县(区)" @change="districtStoreChange">
                <el-option
                  v-for="item in districtStoreOptions"
                  :key="item.countyCode"
                  :label="item.countyName"
                  :value="item.countyCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="queryDistributionStore">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetDistributionStore">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multipleCancel"
            @click="cancelFPFn(null)"
          >批量取消</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addStore"
          >添加</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading2" :data="distributionStoreList" @selection-change="handleSelectionChangeStore">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="门店编号" align="center" prop="storeCode" width="100" />
        <el-table-column label="门店名称" align="center" prop="storeName"/>
        <el-table-column label="经销商名称" align="center" prop="chainName" />
<!--        <el-table-column label="经销商编号" align="center" prop="chainCode" />-->
<!--        <el-table-column label="组织架构" align="center" prop="xsbName" />-->
        <el-table-column label="省(州)" align="center" prop="province" width="80" >
        </el-table-column>
        <el-table-column label="市" align="center" prop="city" width="80" >
        </el-table-column>
        <el-table-column label="县(区)" align="center" prop="district" width="130" >
        </el-table-column>
        <el-table-column label="门店类型" align="center" prop="storeCategory" width="130">
            <template slot-scope="scope">
              {{storeCategoryFormatter(scope.row,scope.column)}}
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="cancelFPFn(scope.row)"
            >取消分配</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="distributionStoreTotal>0"
        :total="distributionStoreTotal"
        :page.sync="distributionStoreParams.pageNum"
        :limit.sync="distributionStoreParams.pageSize"
        @pagination="getDistributionStoreListData"
      />
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="coverageEditVisible = false">确 定</el-button>-->
<!--        <el-button @click="coverageEditVisible = false">取 消</el-button>-->
<!--      </div>-->
    </el-dialog>

    <!-- 门店覆盖添加弹窗 -->
    <el-dialog title="添加分配门店" :visible.sync="coverageAddVisible" width="90%" append-to-body>
      <el-form :model="queryParamsAdd" ref="queryParamsAdd" :inline="true" v-show="showSearchAdd" label-width="88px">
<!--        <el-form-item label="门店编号" prop="storeCode">-->
<!--          <el-input-->
<!--            v-model="queryParamsAdd.storeCode"-->
<!--            placeholder="请输入门店编号"-->
<!--            clearable-->
<!--            size="mini"-->
<!--            @keyup.enter.native="handleQueryAdd"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="分配类型" prop="isDistribution">-->
<!--          <el-select size="mini"  v-model="queryParamsAdd.isDistribution" clearable placeholder="请选择分配类型">-->
<!--            <el-option-->
<!--              v-for="item in isDistributionOptions"-->
<!--              :key="item.code"-->
<!--              :label="item.label"-->
<!--              :value="item.code">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="门店类型" prop="storeCategory">
          <el-select size="mini" v-model="queryParamsAdd.storeCategory" clearable placeholder="请选择门店类型" @change="onInput()">
            <el-option
              v-for="item in storeCategoryOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店名称" prop="storeName">
          <el-input
            v-model="queryParamsAdd.storeName"
            placeholder="请输入门店名称"
            clearable
            size="mini"
            @input="onInput()"
            @keyup.enter.native="handleQueryAdd"
          />
        </el-form-item>
        <el-form-item label="门店编号" prop="storeCode">
          <el-input
            v-model="queryParamsAdd.storeCode"
            placeholder="请输入门店编号"
            clearable
            size="mini"
            @keyup.enter.native="handleQueryAdd"
            @input="onInput()"
          />
        </el-form-item>
        <el-form-item label="经销商名称" prop="chainName">
          <el-input
            v-model="queryParamsAdd.chainName"
            placeholder="请输入经销商名称"
            clearable
            @input="onInput()"
            size="mini"
            @keyup.enter.native="handleQueryAdd"
          />
        </el-form-item>
        <el-form-item label="经销商编号" prop="chainCode">
          <el-input
            v-model="queryParamsAdd.chainCode"
            placeholder="请输入经销商编号"
            clearable
            size="mini"
            @keyup.enter.native="handleQueryAdd"
            @input="onInput()"
          />
        </el-form-item>
        <el-form-item label="省(州)" prop="province">
          <el-select size="mini" v-model="queryParamsAdd.province" clearable placeholder="请选择省(州)" @change="provinceChange">
            <el-option
              v-for="item in provinceOptions"
              :key="item.provinceCode"
              :label="item.provinceName"
              :value="item.provinceCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="city">
          <el-select size="mini" v-model="queryParamsAdd.city" clearable placeholder="请选择市" @change="cityChange">
            <el-option
              v-for="item in cityOptions"
              :key="item.cityCode"
              :label="item.cityName"
              :value="item.cityCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="县(区)" prop="district">
          <el-select size="mini" v-model="queryParamsAdd.district" clearable placeholder="请选择县(区)" @change="districtChange">
            <el-option
              v-for="item in districtOptions"
              :key="item.countyCode"
              :label="item.countyName"
              :value="item.countyCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryAdd">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryAdd">重置</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"
            :disabled="multiple"
            @click="handleAddM(null)"
          >批量添加</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearchAdd" @queryTable="handleQueryAdd"></right-toolbar>
      </el-row>
      <el-table v-loading="loading3" :data="addDistributionStoreList" height="360" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label=" 门店编号" align="center" prop="storeCode" width="100" />
        <el-table-column label="门店名称" align="center" prop="storeName" :show-overflow-tooltip="true" />
        <el-table-column label="经销商名称" align="center" prop="chainName" :show-overflow-tooltip="true" />
<!--        <el-table-column label="经销商编号" align="center" prop="chainCode" width="100" />-->
<!--        <el-table-column label="组织架构" align="center" prop="xsbName" width="100" />-->
        <el-table-column label="省(州)" align="center" prop="province" />
        <el-table-column label="市" align="center" prop="city" />
        <el-table-column label="县(区)" align="center" prop="district" />
        <el-table-column label="门店类型" align="center" width="100">
          <template slot-scope="scope">
            {{storeCategoryFormatter(scope.row,scope.column)}}
          </template>
        </el-table-column>
<!--        <el-table-column label="当前所属销售员" align="center" prop="personName" />-->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleAddM(scope.row)"
            >分配门店</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="addDistributionStoreTotal>0"
        :total="addDistributionStoreTotal"
        :page.sync="queryParamsAdd.pageNum"
        :limit.sync="queryParamsAdd.pageSize"
        @pagination="getAddDistributionStoreListData"
      />
<!--      <div slot="footer" class="dialog-footer">-->
<!--&lt;!&ndash;        @click="submitForm"&ndash;&gt;-->
<!--        <el-button type="primary" @click="handleAddM(null)" :disabled="multiple">确 定</el-button>-->
<!--        <el-button @click="coverageAddVisible = false">取 消</el-button>-->
<!--      </div>-->
    </el-dialog>
  </div>
</template>

<script>
import tree from "@/views/components/sfa/treeselectParent";
import treeSingle from "@/views/components/sfa/treeselectSingle";
import user from "@/views/components/sfa/user";
import { listStore, getWaitStoreCount, getDistributionStoreList, getCancelDistributionStore,getAddDistributionStoreList,getSelectRegionsList,getBatchDistributionStore } from "@/api/sfa/storeCoverage";
import { getSelectUserRouteList  } from "@/api/sfa/routeList";
export default {
  name: "StoreCoverage",
  components: { treeSingle,user,tree},
  data() {
    return {
      // 遮罩层
      loading: true,
      loading2: true,
      loading3: true,
      // 非多个禁用
      multiple: true,
      multipleCancel: true,
        cancelStoreIds:[],
        cancelUserId:'',
      // 显示搜索条件
      showSearch: true,
      showSearchAdd: true,
      // 总条数
      total: 0,
        // 人员已分配门店列表 总数
     distributionStoreTotal: 0,
        // 添加分配门店列表总数
      addDistributionStoreTotal: 0,
      // 门店表格数据
      storeList: [],
        // 人员已分配门店列表
      distributionStoreList: [],
      //  添加分配门店列表
      addDistributionStoreList:[],
        // 门店列表人员姓名
      personName:'',
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      coverageEditVisible: false,
      coverageAddVisible: false,
      value:[],
        validTree:true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orgIds:null,
          userId:null,
      },
      distributionStoreParams: {
          userId:'',
          pageNum: 1,
          pageSize: 10,
      },
      queryRules:{
          orgIds: [ { required: true, message: '请选择组织架构', trigger: 'blur' }],
          // userId: [ { required: true, message: '请选择姓名', trigger: 'blur' }],
      },
      // 查询参数
      queryParamsAdd: {
          orgId:null,
          pageNum: 1,
          pageSize: 10,
      },
      // 菜单树选项
      menuOptions: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      // 待分配门店数
      waitStoreCount:0,
        // 门店类型
        storeCategoryOptions:[],
        // 分配类型
        isDistributionOptions:[
            {
                label:'已分配',
                code:1
            },
            {
                label:'未分配',
                code:2
            },
        ],
        // 省
        provinceOptions:[],
        // 市
        cityOptions:[],
        // 区
        districtOptions:[],
      // 省
      provinceStoreOptions:[],
      // 市
      cityStoreOptions:[],
      // 区
      districtStoreOptions:[],
        assignStoresQueryParams:{
            personName:'',
            storeIds:[],
            userId:''
        },
        personLoading:false,
        personList:[],
        personNameOptions:[],
    };
  },
  watch:{
      "queryParams.orgIds": {
          handler:function(newValue, oldValue) {
              // if(newValue.length > 0){
              //     // this.getSelectUserRouteListData();、
              // }
              // this.userIdFocus();
          },
          immediate: true,
          deep: true
      },
  },
  created() {
    this.loading = false;
    if(this.$store.state.user.type == '2'){
        this.getDicts("ysl_store_type").then(response => {
            this.storeCategoryOptions = response.data;
        });
    }else{
        this.getDicts("sfa_store_type").then(response => {
            this.storeCategoryOptions = response.data;
        });
    }
    this.getSelectRegionsListData();
  },
  methods: {
      onInput(){
          this.$forceUpdate();
      },
    /** 查询门店列表 */
    getList(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                this.loading = true;
                listStore(this.queryParams).then(response => {
                    this.storeList = response.rows;
                    this.total = response.total;
                  this.loading = false;
                });
            }
        })
    },
      // 待分配门店数
    getWaitStoreCountFn(){
        getWaitStoreCount(this.queryParams).then(response => {
            this.waitStoreCount = response.data;
        });
    },
    treeselectFn(val){
        this.queryParams.orgIds = val;
        this.$refs['queryParams'].validate((valid) => {
            console.log(valid)
        })
    },
    userIdFn(val){
        this.queryParams.userId = val;
    },
    userIdFocus(){
        if(this.queryParams.orgIds == null){
            this.$refs['queryParams'].validate((valid) => {
                if (valid) {
                    this.validTree = true;
                }else{
                    if(this.queryParams.orgIds==null){
                        this.validTree = false;
                    }else{
                        this.validTree = true;
                    }
                }
            })
        }else{
            this.validTree = true;
        }
     },
    // 查询
    listQuery(formName){
        this.userIdFocus();
        this.queryParams.pageNum = 1;
        this.getList(formName);
        this.getWaitStoreCountFn();
    },
    // 重置
    listRresetQuery(){
        this.queryParams = {
            pageNum: 1,
            pageSize: 10,
            orgIds:null,
            personName:''
        };
    },
      // 人员已分配门店列表
      getDistributionStoreListData(){
          this.loading2 = true;
          getDistributionStoreList(this.distributionStoreParams).then(response => {
              this.distributionStoreList = response.rows;
              this.distributionStoreTotal = response.total;
              this.loading2 = false;
          });
      },
    // 点击门店覆盖列表中的编辑
    handleEdit(row){
      this.coverageEditVisible = true;
      this.distributionStoreParams.storeName = '';
      this.distributionStoreParams.storeCode = '';
      this.distributionStoreParams.chainCode = '';
      this.cityStoreOptions=[];
      this.districtStoreOptions=[];
      this.distributionStoreParams.district="";
      this.distributionStoreParams.district="";
      this.distributionStoreParams.city="";
      this.personName = row.personName;
      this.distributionStoreParams.userId = row.userId ;
      this.distributionStoreParams.pageNum = 1 ;
      this.distributionStoreParams.pageSize =10 ;
      this.queryParamsAdd.orgId = row.orgId;
      this.queryParamsAdd.userId = row.userId;
      this.assignStoresQueryParams.userId = row.userId ;
      this.assignStoresQueryParams.personName = row.personName ;
      this.getDistributionStoreListData();
      this.getSelectRegionsListData("","Store")
    },
    queryDistributionStore(){
        this.distributionStoreParams.pageNum = 1 ;
        this.distributionStoreParams.pageSize =10 ;
        this.getDistributionStoreListData();
    },
    resetDistributionStore(){
        this.distributionStoreParams.storeName = '';
        this.distributionStoreParams.storeCode = '';
        this.distributionStoreParams.chainCode = '';
        this.resetForm("distributionStoreParams");
        this.$forceUpdate();
    },
    storeCategoryFormatter(row,column){
        return this.selectDictLabel(this.storeCategoryOptions, row.storeCategory);
    },
      handleSelectionChangeStore(selection){
        console.log(selection)
          let storeIdArr = selection.map(item => item.storeId);
          this.cancelStoreIds = storeIdArr;
          if(selection.length>0){
              this.cancelUserId = selection[0].userId;
          }
          this.multipleCancel = !selection.length
      },
    // 取消分配
    cancelFPFn(row){
        if(row){
            this.cancelStoreIds = [row.storeId];
            this.cancelUserId = row.userId;
        }
        let obj = {
            storeIds:this.cancelStoreIds,
            userId:this.cancelUserId
        };
        getCancelDistributionStore(obj).then(response => {
            console.log(response)
            this.$modal.msgSuccess("取消成功");
            this.getDistributionStoreListData();
        });
    },
      // 查询省市区（县）
      getSelectRegionsListData(val,type){
        let that = this;
        if(type == 'province'){
          if(val != ''){
            getSelectRegionsList({provinceCode:val}).then(response => {
              that.cityOptions = response.rows;
              that.districtOptions = [];
              that.townOptions = [];
              that.queryParamsAdd.city = '';
              that.queryParamsAdd.district = '';
              that.queryParamsAdd.townName = '';
            })
          }else{
            that.cityOptions = [];
            that.districtOptions = [];
            that.queryParamsAdd.city = '';
            that.queryParamsAdd.district = '';
          }
        }else if(type == 'city'){
          if(val != ''){
            getSelectRegionsList({cityCode:val}).then(response => {
              that.districtOptions = response.rows;
              that.townOptions = [];
              that.queryParamsAdd.townName = '';
            })
          }else {
            // that.districtOptions = [];
            // that.townOptions = [];
            // that.queryParamsAdd.district = '';
            // that.queryParamsAdd.townName = '';
          }
        }else if(type == ''){
          getSelectRegionsList().then(response => {
            that.provinceOptions = response.rows;
            that.cityOptions = [];
            that.districtOptions = [];
          })
        }else if(type == 'provinceStore'){
          if(val != ''){
            getSelectRegionsList({provinceCode:val}).then(response => {
              that.cityStoreOptions = response.rows;
              that.districtStoreOptions = [];
              that.townOptions = [];
              that.distributionStoreParams.city = '';
              that.distributionStoreParams.district = '';
            })
          }else{
            that.cityStoreOptions = [];
            that.districtStoreOptions = [];
            that.distributionStoreParams.city = '';
            that.distributionStoreParams.district = '';
          }
        }else if(type == 'cityStore'){

          if(val != ''){
            getSelectRegionsList({cityCode:val}).then(response => {
              that.districtStoreOptions = response.rows;
            })
          }else {
            that.districtOptions = [];
            // that.townOptions = [];

          }
        }else if(type == 'Store'){
          getSelectRegionsList().then(response => {
            that.provinceStoreOptions = response.rows;
            that.cityStoreOptions = [];
            that.districtStoreOptions = [];
          })
        }
      },
      provinceChange(val){
          this.getSelectRegionsListData(val,'province');
          if(this.queryParamsAdd.province ==''){
              this.cityOptions = [];
              this.districtOptions = [];
          }
      },
      cityChange(val){
          this.getSelectRegionsListData(val,'city');
           this.queryParamsAdd.district = '';
          if(this.queryParamsAdd.city ==''){
              this.districtOptions = [];
          }
      },
      districtChange(val){
        console.log(val)
        console.log(this.queryParamsAdd)
        this.$forceUpdate();
          // this.getSelectRegionsListData(val,'district');
      },
    provinceStoreChange(val){
      this.getSelectRegionsListData(val,'provinceStore');
      if(this.distributionStoreParams.province ==''){
        this.cityStoreOptions = [];
        this.districtStoreOptions = [];
      }
    },
    cityStoreChange(val){
      this.getSelectRegionsListData(val,'cityStore');
      this.distributionStoreParams.district = '';
      if(this.distributionStoreParams.city ==''){
        this.districtStoreOptions = [];
      }
    },
    districtStoreChange(val){
      // console.log(val)
      // console.log(this.queryParamsAdd)
      this.$forceUpdate();
      // this.getSelectRegionsListData(val,'district');
    },
      // 添加分配门店列表查询
      handleQueryAdd(){
        this.getAddDistributionStoreListData();
      },
      resetQueryAdd(){
          this.queryParamsAdd.storeCategory = '';
          this.queryParamsAdd.storeName = '';
          this.queryParamsAdd.storeCode = '';
          this.queryParamsAdd.chainName = '';
          this.queryParamsAdd.chainCode = '';
          this.resetForm("queryParamsAdd");
          this.$forceUpdate();
      },
      // 添加分配门店列表
    getAddDistributionStoreListData(){
        this.loading3 = true;
        getAddDistributionStoreList(this.queryParamsAdd).then(response => {
            this.addDistributionStoreList = response.rows;
            this.addDistributionStoreTotal = response.total;
            this.loading3 = false;
        });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
        let selectionArr = selection.map(item => item.storeId);
        this.assignStoresQueryParams.storeIds = selectionArr.join(',');
        this.multiple = !selection.length
    },
      // 批量分配门店
      handleAddM(row) {
          let that = this;
          console.log(row)
          if(row){
              this.assignStoresQueryParams.storeIds = row.storeId;
          }
          // that.$modal.confirm('是否确认添加门店编号为"' + this.assignStoresQueryParams.storeIds + '"的数据项？').then(function() {
          that.$modal.confirm('是否确认添加选中信息？').then(function() {
              that.assignStores();
          });
      },
      assignStores(){
          getBatchDistributionStore(this.assignStoresQueryParams).then(response => {
              this.getAddDistributionStoreListData();
              this.getDistributionStoreListData();
              this.$modal.msgSuccess("添加门店成功");
          });
      },
      // 添加门店
    addStore(){
        this.queryParamsAdd.storeCategory = '';
        this.queryParamsAdd.storeName = '';
        this.queryParamsAdd.storeCode = '';
        this.queryParamsAdd.chainName = '';
        this.queryParamsAdd.chainCode = '';
        this.queryParamsAdd.district = '';
        this.resetForm("queryParamsAdd");
        this.$forceUpdate();
      this.coverageAddVisible = true;
      this.getSelectRegionsListData("","");
      this.getAddDistributionStoreListData();
    },
    submitForm(){

    },
    /** 导出按钮操作 */
    handleExport() {
        this.download('sfa/store/cover/coverExport', {
            ...this.queryParams
        }, `门店覆盖_${new Date().getTime()}.xlsx`)
    },
  }
};
</script>
<style lang="scss" scoped>
  .info{
    font-size:14px;
    color:#333;
    line-height: 30px;
  }
</style>
<style lang="scss">

</style>
