<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="24">
        <el-alert
          title="重要提醒：必须在当天的23：30分之前，在系统中排好拜访线路，否则第二天不生效。"
          type="error"
          :closable="false">
        </el-alert>
      </el-col>
    </el-row>
    <el-form :model="queryParams" size="mini" ref="queryForm" :inline="true" :rules="queryRules" v-show="showSearch" label-width="78px">
      <el-form-item class="treeselectForm" label="组织架构" prop="orgIds">
        <tree @treeselectFn="treeselectFn" :treeval="queryParams.orgIds" :ismultiple="true"></tree>
      </el-form-item>
      <el-form-item label="销售员" prop="personName">
        <user :userId="queryParams.userId" :orgIds="queryParams.orgIds" @userIdFn="userIdFn"></user>
      </el-form-item>
<!--      <el-form-item label="拜访强度" prop="storeName">-->
<!--        <el-select size="mini" clearable v-model="value" placeholder="请选择拜访强度">-->
<!--          <el-option-->
<!--            v-for="item in storeOptions"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery('queryForm')">搜索</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>
<!--      <el-col :span="1.5">-->
<!--        <el-select size="mini" v-model="value" placeholder="排序方式" style="width: 100px;">-->
<!--          <el-option-->
<!--            v-for="item in storeOptions"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-col>-->

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="routeList">
      <el-table-column label="线路编号" align="center" prop="description" />
      <el-table-column label="销售员工号" align="center" prop="workCode" />
      <el-table-column label="域账号" align="center" prop="userName" />
      <el-table-column label="销售员" align="center" prop="personName" />
      <el-table-column label="拜访店数" align="center" prop="visitStoreNum" />
<!--      <el-table-column label="平均拜访店数" align="center" prop="description" />-->
<!--      <el-table-column label="平均拜访路程(KM)" align="center" prop="routeForce" />-->
<!--      <el-table-column label="拜访强度" align="center" prop="routeForce" />-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <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-edit"
            @click="changeFn(scope.row)"
          >交换</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-location-information"
            @click="mapDialog(scope.row)"
            :disabled="scope.row.visitStoreNum<=0"
          >地图预览</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="添加线路" :visible.sync="addRouteVisible" width="500px" append-to-body>
      <el-form ref="formAdd" size="mini" :model="formAdd" :rules="addRouteRules" label-width="80px">
        <el-form-item label="线路名称" prop="routeNumber">
          <el-select size="mini" clearable v-model="formAdd.routeNumber" placeholder="线路名称">
            <el-option
              v-for="item in routeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="拜访人员" prop="userId">
          <user :userId="formAdd.userId" @userIdFn="userIdFnAdd"></user>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addRouteSubmit">确 定</el-button>
        <el-button @click="addRouteVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 交换线路线路对话框 -->
    <el-dialog title="交换线路" :visible.sync="changeRouteVisible" width="500px" append-to-body>
      <el-form ref="formChange" :model="formChange" :rules="changeRouteRules" label-width="80px">
        <el-form-item label="线路名称" prop="routeNumber">
          <el-select size="mini" clearable v-model="formChange.routeNumber" placeholder="线路名称">
            <el-option
              v-for="item in routeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="24">
          <el-alert
            title="提醒：交换线路后，请检查生效时间，是否需要修改！"
            type="error"
            :closable="false">
          </el-alert>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeRouteSubmit">确 定</el-button>
        <el-button @click="changeRouteVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑线路对话框 -->
    <el-dialog :title="routeListTitle" :visible.sync="editRouteVisible" width="95%" append-to-body @close="editRouteClose">
<!--      <el-form ref="editForm" :model="editForm" :inline="true" v-show="showSearchEdit" label-width="80px">-->
<!--        <el-form-item label="线路名称" prop="routeNumber">-->
<!--          <el-select size="mini" clearable v-model="editForm.routeNumber" placeholder="线路名称">-->
<!--            <el-option-->
<!--              v-for="item in routeOptions"-->
<!--              :key="item.dictValue"-->
<!--              :label="item.dictLabel"-->
<!--              :value="item.dictValue">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryEdit">搜索</el-button>-->
<!--          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryEdit">重置</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="addStoreFn"
          >添加</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multipleRoute"
            @click="routeDelete"
          >批量删除</el-button>
        </el-col>
<!--        <el-col :span="1.5">-->
<!--          <el-select size="mini" v-model="value" placeholder="排序方式" style="width: 100px;">-->
<!--            <el-option-->
<!--              v-for="item in storeOptions"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-col>-->
<!--        <right-toolbar :showSearch.sync="showSearchEdit" @queryTable="handleQueryEdit"></right-toolbar>-->
      </el-row>
      <el-table v-loading="loadingEdit" :data="routeListEdit" height="380" @selection-change="handleSelectionChangeRoute">
        <el-table-column type="selection" width="55" align="center" />
<!--        <el-table-column label="负责人员" align="center" prop="nickName" />-->
<!--        <el-table-column label="线路编号" align="center" prop="description" />-->
        <el-table-column label="门店编号" align="center" prop="storeCode" width="100"/>
        <el-table-column label="门店名称" align="center" prop="storeName" :show-overflow-tooltip="true" width="200" />
        <el-table-column label="门店地址" align="center" prop="addressLine" :show-overflow-tooltip="true" width="200"/>
        <el-table-column label="拜访顺序" align="center" prop="sort" width="74" />
        <el-table-column label="拜访频次" align="center" prop="frequence" width="130">
          <template slot-scope="scope">
            <el-select size="mini" v-model="scope.row.frequence" placeholder="拜访频次" @change="routeForceChange(scope.row)">
              <el-option
                v-for="item in routeForceOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="生效日期" align="center" prop="startTime" width="130">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.startTime"
              type="date"
              size="mini"
              @change="startTimeFn(scope.row)"
              value-format="yyyy-MM-dd"
              placeholder="选择生效日期"
              style="width: 120px;">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="联系人" align="center" prop="contactName" width="70" />
        <el-table-column label="电话" align="center" prop="telephone" width="110"/>
        <el-table-column label="创建人" align="center" prop="createByName" width="180"/>
        <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="260" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="routeDelete(scope.row)"
              class="text-danger"
            >删除</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-top"
              :disabled="scope.$index == 0"
              @click="moveUserRoute(scope.row,scope.$index,1)"
            >上移</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-bottom"
              @click="moveUserRoute(scope.row,scope.$index,2)"
              :disabled="scope.$index == routeListEdit.length-1"
            >下移</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-location-information"
              @click="mapPreview(scope.row)"
            >地图预览</el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="editRouteVisible = false">确 定</el-button>-->
<!--        <el-button @click="editRouteVisible = false">取 消</el-button>-->
<!--      </div>-->
    </el-dialog>
    <!-- 添加门店对话框 -->
    <el-dialog title="门店列表" :visible.sync="addStoreVisible" width="90%" append-to-body>
      <el-form ref="storeForm" :model="storeForm" :inline="true" v-show="showSearchStore" label-width="90px">
<!--        <el-form-item label="门店编号" prop="storeNum">-->
<!--          <el-input size="mini" v-model="storeForm.storeNum" placeholder="请输入门店编号" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="经销商编号" prop="chainCode">-->
<!--          <el-input size="mini" v-model="storeForm.chainCode" placeholder="请输入经销商编号" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="分配类型" prop="isDistribution">-->
<!--          <el-select size="mini"  v-model="storeForm.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="storeForm.storeCategory" clearable placeholder="请选择门店类型">
            <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 size="mini" v-model="storeForm.storeName" clearable @input="onInput()" placeholder="请输入门店名称" />
        </el-form-item>
        <el-form-item label="经销商名称" prop="chainName">
          <el-input size="mini" v-model="storeForm.chainName" clearable @input="onInput()" placeholder="请输入经销商名称" />
        </el-form-item>
<!--        <el-form-item label="省(州)" prop="province">-->
<!--          <el-select size="mini" v-model="storeForm.province" clearable placeholder="请选择省(州)" @change="provinceChange">-->
<!--            <el-option-->
<!--              v-for="item in provinceOptions"-->
<!--              :key="item.regionId"-->
<!--              :label="item.regionName"-->
<!--              :value="item.regionId">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="市" prop="city">-->
<!--          <el-select size="mini" v-model="storeForm.city" clearable placeholder="请选择市" @change="cityChange">-->
<!--            <el-option-->
<!--              v-for="item in cityOptions"-->
<!--              :key="item.regionId"-->
<!--              :label="item.regionName"-->
<!--              :value="item.regionId">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item size="mini" label="县(区)" prop="district">-->
<!--          <el-select v-model="storeForm.district" clearable placeholder="请选择县(区)" @change="districtChange">-->
<!--            <el-option-->
<!--              v-for="item in districtOptions"-->
<!--              :key="item.regionId"-->
<!--              :label="item.regionName"-->
<!--              :value="item.regionId">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryStore">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryStore">重置</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="addStoreSubmit"
          >批量添加拜访门店</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearchStore" @queryTable="handleQueryStore"></right-toolbar>
      </el-row>
      <el-table v-loading="loadingStore" :data="storeList" @selection-change="handleSelectionChange" height="360">
        <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" :show-overflow-tooltip="true" 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" prop="storeCategory" width="120" >
          <template slot-scope="scope">
            {{storeCategoryFormatter(scope.row,scope.column)}}
          </template>
        </el-table-column>
        <el-table-column label="线路详情" align="center" prop="routeDetail" width="100" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-plus"
              @click="addStoreSubmit(scope.row)"
            >添加拜访门店</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="totalStore>0"
        :total="totalStore"
        :page.sync="storeForm.pageNum"
        :limit.sync="storeForm.pageSize"
        @pagination="getSelectVisitStoreListData"
      />
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="addStoreVisible = false">确 定</el-button>-->
<!--        <el-button @click="addStoreVisible = false">取 消</el-button>-->
<!--      </div>-->
    </el-dialog>

    <!--    地图预览-->
    <el-dialog title="地图预览" :visible.sync="mapVisible" width="90%" append-to-body>
      <mymap :mapdata="mapdata" :mapVisible="mapVisible" :currentMarker="currentMarker"></mymap>
    </el-dialog>
  </div>
</template>

<script>
    import tree from "@/views/components/sfa/treeselectParent";
    import user from "@/views/components/sfa/user";
    import { listRoute, getSelectUserRouteList , postAddRoute, postExchangeRoute, getEditRouteList, getSelectVisitStoreList,postAddRouteStore,postDeleteUserRoute,postMoveUserRoute,postUpdatFrequence,postUpdatStartTime } from "@/api/sfa/routeList";
    import mymap from '@/views/components/sfa/map'
    export default {
        name: "RouteList",
        components: { tree,user,mymap },
        data() {
            return {
                // 遮罩层
                loading: false,
                loadingEdit: false,
                loadingStore: false,
                // 选中数组
                ids: [],
                idsRoute: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                multipleRoute:true,
                // 显示搜索条件
                showSearch: true,
                showSearchEdit: true,
                showSearchStore: true,
                // 总条数
                total: 0,
                totalStore: 0,
                // 线路表格数据
                routeList: [],
                routeListEdit: [],
                storeList: [],
                // 是否显示弹出层
                editRouteVisible: false,
                changeRouteVisible:false,
                addRouteVisible:false,
                addStoreVisible:false,
                routeListTitle:'排线列表',
                formChange:{
                    routeNumber:'',
                },
                formAdd:{
                    routeNumber:'',
                    description:'',
                    userId:'',
                },
                changeRouteRules:{
                    routeNumber: [ { required: true, message: '请选择线路名称', trigger: 'change' }],
                },
                addRouteRules:{
                    routeNumber: [ { required: true, message: '请选择线路名称', trigger: 'change' }],
                    userId: [ { required: true, message: '请输入拜访人员姓名', trigger: 'change' }],
                },
                editForm:{},
                storeForm:{
                    pageNum: 1,
                    pageSize: 10,
                },
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    orgIds:[],
                },
                queryRules:{
                    // orgIds: [ { required: true, message: '请选择组织架构', trigger: 'blur' }],
                },
                personNameOptions:[],
                personLoading:false,
                personList:[],
                // 表单参数
                form: {},
                // 菜单树选项
                menuOptions: [],
                value:[],
                storeOptions:[],
                routeOptions:[],
                // 表单校验
                rules: {
                },
                // 门店类型
                storeCategoryOptions:[],
                // 分配类型
                isDistributionOptions:[
                    {
                        label:'已分配',
                        code:1
                    },
                    {
                        label:'未分配',
                        code:2
                    },
                ],
                // 省
                provinceOptions:[],
                // 市
                cityOptions:[],
                // 区
                districtOptions:[],
                // 拜访频次
                routeForceOptions:[],
                // 地图
                mapVisible:false,
                mapdata:[],
                currentMarker:'',
            };
        },
      watch:{
        "queryParams.orgIds": {
          handler:function(newValue, oldValue) {
            // if(newValue.length > 0){
            //     // this.getSelectUserRouteListData();、
            // }
            // this.userIdFocus();
          },
          immediate: true,
          deep: true
        },
      },
        created() {
            this.routeOptionData();
            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.getDicts("sfa_visit_frequency").then(response => {
                this.routeForceOptions = response.data;
            });
            // this.getSelectUserRouteListData();
            this.getList();
        },
        methods: {
            onInput(){
                this.$forceUpdate();
            },
            treeselectFn(val){
                this.queryParams.orgIds = val;
            },
            userIdFn(val){
                this.queryParams.userId = val;
            },
            userIdFnAdd(val){
                this.formAdd.userId = val;
            },
            // 门店类型
            storeCategoryFormatter(row,column){
                return this.selectDictLabel(this.storeCategoryOptions, row.storeCategory);
            },
            /** 查询线路列表 */
            getList() {
                this.loading = true;
                listRoute(this.queryParams).then(response => {
                    this.routeList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                }).catch((err)=>{
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            resetAddForm() {
                this.resetForm("formAdd");
            },
            /** 搜索按钮操作 */
            handleQuery(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.queryParams.pageNum = 1;
                        this.getList();
                    }
                })

            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 线路字典
            routeOptionData(){
                this.getDicts("sfa_week_info").then(response => {
                    this.routeOptions = response.data;
                });
            },
            /** 新增按钮操作 */
            handleAdd() {
                // if(this.queryParams.orgIds.length > 0){
                    this.resetAddForm();
                    this.addRouteVisible = true;
                // }else{
                //     this.$modal.msgWarning("请先选择组织架构");
                // }
            },
            addRouteSubmit(){
                this.$refs['formAdd'].validate((valid) => {
                    this.formAdd.description = this.selectDictLabel(this.routeOptions, this.formAdd.routeNumber);
                    if (valid) {
                        postAddRoute(this.formAdd).then(response => {
                            if(response.code == 200 ){
                                this.$modal.msgSuccess("添加成功");
                                this.addRouteVisible = false;
                                this.getList();
                            }

                        });
                    }
                })
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.storeId)
                this.multiple = !selection.length
            },
            handleSelectionChangeRoute(selection){
                this.idsRoute = selection.map(item => item.routeStoreId)
                this.multipleRoute = !selection.length
            },
            // 排线列表
            getEditRouteListData(){
                this.loadingEdit = true;
                getEditRouteList(this.editForm).then(response => {
                    this.routeListEdit = response.data;
                    this.loadingEdit = false;
                });
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.resetForm("editForm");
                this.editForm.userId = row.userId;
                this.editForm.routeNumber = row.routeNumber;
                this.storeForm.userId = row.userId;
                this.storeForm.routeNumber = row.routeNumber;
                this.editRouteVisible = true;
                this.routeListTitle = `排线列表【${row.description}】`;
                this.getEditRouteListData();
            },
            // 编辑弹窗关闭
            editRouteClose(){
              this.getList();
            },
            // 编辑弹窗中的搜索
            handleQueryEdit(){
                this.getEditRouteListData();
            },
            resetQueryEdit(){
                this.resetForm("editForm");
            },
            // 拜访频次修改
            routeForceChange(row){
              let obj = {
                  frequence:row.frequence,
                  routeStoreId:row.routeStoreId
              }
              postUpdatFrequence(obj).then(response => {
                  if(response.code ==200){
                      this.$modal.msgSuccess("修改成功");
                  }
              });
            },
            // 生效日期修改
            startTimeFn(row){
                let obj = {
                    routeStoreId:row.routeStoreId,
                    startTime:row.startTime
                };
                postUpdatStartTime(obj).then(response => {
                    if(response.code ==200){
                        this.$modal.msgSuccess("修改成功");
                    }
                });
            },
            changeFn(row){
                this.resetForm("formChange");
                this.changeRouteVisible = true;
                this.formChange.userId = row.userId;
                this.formChange.routeId = row.routeId;
            },
            changeRouteSubmit(){
                this.$refs['formChange'].validate((valid) => {
                    this.routeOptions.forEach((item)=>{
                        if( item.dictValue == this.formChange.routeNumber ){
                            this.formChange.description = item.dictLabel;
                            postExchangeRoute(this.formChange).then(response => {
                              if(response.code==200){
                                this.$modal.msgSuccess("交换成功");
                                this.changeRouteVisible = false;
                                this.handleQuery('queryForm')}
                            });
                        }
                    })
                })

            },
            // 删除人员排线
            routeDelete(row){
                let storeArr = [];
                row.routeStoreId ? storeArr.push(row.routeStoreId) : storeArr = this.idsRoute;
                let obj = {
                    routeStoreIds:storeArr,
                };
                postDeleteUserRoute(obj).then(response => {
                    if(response.code==200){
                    this.$modal.msgSuccess("删除成功");
                    this.getEditRouteListData();}
                });
            },
            moveUserRoute(row,index,type){
                let msg = '';
                if(type == 1){
                    let upData = this.routeListEdit[index - 1];
                    this.routeListEdit.splice(index - 1, 1);
                    this.routeListEdit.splice(index, 0, upData);
                    msg =  '上移成功';
                }else{
                    let downData = this.routeListEdit[index + 1];
                    this.routeListEdit.splice(index + 1, 1);
                    this.routeListEdit.splice(index, 0, downData);
                    msg =  '下移成功';
                }
                let routeStoreIdArr = [];
                this.routeListEdit.forEach((item,index)=>{
                    routeStoreIdArr.push(item.routeStoreId);
                })
                let obj = {
                    routeStoreIds:routeStoreIdArr.join(',')
                };
                postMoveUserRoute(obj).then(response => {
                    this.$modal.msgSuccess(msg);
                });
            },
            addStoreFn(){
                this.addStoreVisible = true;
                // this.getSelectRegionsListData("","");
                this.resetForm("storeForm");
                this.storeForm.pageNum = 1;
                this.getSelectVisitStoreListData();
            },
            // 查询省市区（县）
            getSelectRegionsListData(val,type){
                let that = this;
                getSelectRegionsList({parentId:val}).then(response => {
                    if(type == 'province'){
                        if(val != ''){
                            that.cityOptions = response.data;
                        }else{
                            that.cityOptions = [];
                            that.districtOptions = [];
                            that.storeForm.city = '';
                            that.storeForm.district = '';
                        }
                    }else if(type == 'city'){
                        if(val != ''){
                            that.districtOptions = response.data;
                        }else {
                            that.districtOptions = [];
                            that.storeForm.district = '';
                        }
                    }else if(type == ''){
                        that.provinceOptions = response.data;
                    }
                });
            },
            provinceChange(val){
                this.getSelectRegionsListData(val,'province');
                if(this.storeForm.province ==''){
                    this.cityOptions = [];
                    this.districtOptions = [];
                }
            },
            cityChange(val){
                this.getSelectRegionsListData(val,'city');
                if(this.storeForm.city ==''){
                    this.districtOptions = [];
                }
            },
            districtChange(val){
                this.getSelectRegionsListData(val,'district');
            },
            // 门店列表数据
            getSelectVisitStoreListData(){
                this.loadingStore = true;
                getSelectVisitStoreList(this.storeForm).then(response => {
                  this.storeList = response.rows;
                  this.totalStore = response.total;
                    this.loadingStore = false;
                });
            },
            // 添加门店列表的搜索
            handleQueryStore(){
                this.storeForm.pageNum = 1;
              this.getSelectVisitStoreListData();
            },
            resetQueryStore(){
                this.resetForm("storeForm");
                this.handleQueryStore();
            },
            // 点击添加拜访门店
            addStoreSubmit(row){
                let storeArr = [];
                row.storeId ? storeArr.push(row.storeId) : storeArr = this.ids;
                let obj = {
                    routeNumber:this.storeForm.routeNumber,
                    storeIds:storeArr,
                    userId:this.storeForm.userId
                };
                postAddRouteStore(obj).then(response => {
                    if(response.code==200){
                    this.$modal.msgSuccess("添加成功");
                    this.getSelectVisitStoreListData();
                    this.getEditRouteListData();}
                });
            },
            mapDialog(row){
                let obj = {
                    userId: row.userId,
                    routeNumber: row.routeNumber,
                };
                // this.mapVisible = true;
                // this.$router.push({path: '/route/map', query: obj});
                getEditRouteList(obj).then(response => {
                  if(response.code==200){
                    this.mapVisible = true;
                    this.mapdata = response.data;
                    this.currentMarker = '';
                  }
                });
            },
            mapPreview(row){
                // this.$router.push({path: '/route/map', query: obj});
                getEditRouteList(this.editForm).then(response => {
                  if(response.code==200){
                    this.mapVisible = true;
                    this.mapdata = response.data;
                    this.currentMarker = row.storeId;
                  }
                });
            },
        }
    };
</script>

<style lang="scss">
  .el-input--suffix .el-input__inner{
    padding-right: 15px;
  }
  .map-marker {
    position: absolute;
    font-size: 16px;
    color: dodgerblue;
    font-weight: 500;
      div {
        position: absolute;//改变定位
        img {
           height: 10px;
           width: 10px;
        }
    }
  }
  .tips{
    color: #666;
  }
</style>
