<template>
  <div class="city-box">
    <a-radio-group v-model:value="activeName">
      <a-radio-button value="noLimit">不限</a-radio-button>
      <a-radio-button value="city">按省市</a-radio-button>
      <a-radio-button value="county">按区县</a-radio-button>
    </a-radio-group>
    <!-- 按省市搜索 -->
    <!-- 联想搜索框开始 -->
    <el-row
      class="demo-autocomplete"
      v-if="activeName === 'city'"
      style="margin-top: 10px"
    >
      <!-- <div class="notfound" v-if="searchFlag"><img src="./../../assets/image/notfound.png" alt="暂无相关数据"></div> -->
      <el-col :span="12">
        <el-autocomplete
          class="inline-input"
          v-model="searchState"
          :fetch-suggestions="querySearch"
          placeholder="暂不支持拼音或字母查询"
          :trigger-on-focus="false"
          @select="handleSelect"
          @blur="searchFlag = false"
        ></el-autocomplete>
        <el-button type="primary" icon="el-icon-search" class="searchBtn"
          >搜索</el-button
        >
      </el-col>
    </el-row>

    <!-- 省市划分选项卡 -->
    <el-tabs
      v-model="activeDivide"
      @tab-click="handleDivideClick"
      v-if="activeName === 'city'"
    >
      <!-- <el-tab-pane label="地理划分" name="area"> -->
      <div class="areaContainer">
        <!-- 省份盒子 -->
        <div class="provinceBox" v-bind:class="clickProvince">
          <div class="provinceBoxHeader">
            <span>省份</span>
          </div>
          <div class="provinceList">
            <!-- 省份复选框 -->
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              class="provinceCheckAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <el-checkbox-group
              ref="provinceGroup"
              v-model="checkedProvinces"
              @change="handleCheckedProvincesChange"
            >
              <el-checkbox
                :id="province.value"
                ref="provinceSingle"
                class="listItem"
                v-for="province in provinces"
                @change="checkProvinceEvent(province)"
                :label="province.value"
                :key="province.value"
                :indeterminate="province.isIndeterminate"
                :v-model="province.checkAll"
              >
                <!-- 普通省份 -->
                <p
                  v-bind:id="itemClick"
                  class="provinceP"
                  style="z-index: 2222; display: block"
                  @click.self.prevent="provinceClick(province)"
                  v-if="
                    [
                      '北京',
                      '天津',
                      '上海',
                      '重庆',
                      '香港',
                      '澳门',
                      '台湾',
                    ].indexOf(province.label) < 0
                  "
                >
                  {{ province.label
                  }}<i
                    @click.self.prevent="provinceClick(province)"
                    class="el-icon-arrow-right"
                  ></i>
                </p>
                <!-- 直辖市 -->
                <p
                  v-if="
                    [
                      '北京',
                      '天津',
                      '上海',
                      '重庆',
                      '香港',
                      '澳门',
                      '台湾',
                    ].indexOf(province.label) > -1
                  "
                >
                  {{ province.label }}
                </p>
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>

        <!-- 城市盒子 -->
        <div class="provinceBox cityBox" v-bind:class="cityFlag">
          <div class="provinceBoxHeader">
            <span>城市</span>
          </div>
          <div class="provinceList">
            <!-- 城市复选框 -->
            <!-- <el-checkbox :indeterminate="isIndeterminateCity" v-model="checkAllCity" @change="handleCheckAllChangeCity" class="provinceCheckAll">全选</el-checkbox> -->
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                class="listItem"
                v-for="city in provinceToCity"
                :label="city.value"
                :key="city.value"
                >{{ city.label }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <!-- 已选中城市 -->
      <div class="selectedBox">
        <div class="selectedBoxHeader">
          <span>已选({{ finnalCityList.length }})</span
          ><span
            style="margin-left: 80px"
            class="empty"
            v-if="finnalCityList.length !== 0"
            @click="emptyCity"
            >清空</span
          >
        </div>
        <div class="selectedItem">
          <p v-for="city in finnalCityShowList" :key="city.value">
            {{ city.label
            }}<i
              class="deleteCity el-icon-close"
              style="margin-top: 3px"
              @click="deleteCity(city)"
            ></i>
          </p>
          <!-- <img
            src="./../../assets/image/empty.png"
            alt="empty"
            v-if="finnalCityList.length === 0"
            style="display: block; margin: 50px auto 0"
          /> -->
          <span v-if="finnalCityList.length === 0">暂无数据</span>
        </div>
      </div>
      <!-- </el-tab-pane> -->
    </el-tabs>
    <!-- 区县 -->
    <el-tabs label="按区县" name="county" v-if="activeName === 'county'">
      <!-- 按区县选择 -->
      <div class="areaContainer" ref="countyScroll">
        <!-- 省份盒子 -->
        <div class="provinceBox" v-bind:class="clickProvince">
          <div class="provinceBoxHeader">
            <span>省份</span>
          </div>
          <div class="provinceList provinceTarget">
            <p
              class="listItem"
              :id="'pro' + province.value"
              v-for="province in provinces"
              :key="province.value"
              @click="getCityListInCounty(province)"
            >
              {{ province.label
              }}<i
                class="el-icon-arrow-right"
                style="
                  display: block;
                  float: right;
                  margin-right: 10px;
                  margin-top: 8px;
                "
              ></i>
            </p>
          </div>
        </div>

        <!-- 城市盒子 -->
        <div class="provinceBox cityBox" v-bind:class="cityFlag">
          <div class="provinceBoxHeader">
            <span>城市</span>
          </div>
          <div class="provinceList cityTarget">
            <p
              class="listItem"
              :id="'city' + city.value"
              v-for="city in provinceToCity"
              :key="city.value"
              @click="getCountyList(city)"
            >
              {{ city.label
              }}<i
                class="el-icon-arrow-right"
                style="
                  display: block;
                  float: right;
                  margin-right: 10px;
                  margin-top: 8px;
                "
              ></i>
            </p>
          </div>
        </div>

        <!-- 区县盒子 -->
        <div class="provinceBox cityBox" v-bind:class="countyFlag">
          <div class="provinceBoxHeader">
            <span>区县</span>
          </div>
          <div class="provinceList">
            <!-- 区县复选框 -->
            <!-- <el-checkbox :indeterminate="isIndeterminateCounty" v-model="checkAllCounty" @change="handleCheckAllChangeCounty" class="provinceCheckAll">全选</el-checkbox> -->
            <el-checkbox-group
              v-model="checkedCounties"
              @change="handleCheckedCountiesChange"
            >
              <el-checkbox
                class="listItem"
                v-for="county in cityToCounty"
                :label="county"
                :key="county.value"
                >{{ county.label }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <!-- 已选中区县 -->
      <div class="selectedBox">
        <div class="selectedBoxHeader">
          <span>已选</span
          ><span
            class="empty"
            v-if="checkedCounties.length !== 0"
            @click="emptyCounty"
            >清空</span
          >
        </div>
        <div class="selectedItem">
          <p v-for="item in checkedCounties" :key="index">{{ item.label}}<i
              class="deleteCity el-icon-close"
              @click="deleteCounty(item)"
              style="margin-top: 3px"
            ></i>
          </p>
          <span v-if="checkedCounties.length === 0">暂无数据</span>
        </div>
      </div>
    </el-tabs>
  </div>
</template>
<script>
import cityData from "./city.json";
export default {
  props: ["checkedCity"],
  data() {
    return {
      dataList: [],
      // 主选项卡
      activeName: "noLimit",
      // auto搜索框
      cityAutoList: [],
      searchState: "",
      // 省市划分选项卡
      activeDivide: "area",
      // 省份复选框数据
      checkAll: false,
      checkedProvinces: [],
      isIndeterminate: false,
      // 城市复选框数据
      isIndeterminateCity: false,
      checkAllCity: false,
      checkedCities: [],
      // 区县复选框数据
      isIndeterminateCounty: false, //
      checkAllCounty: false, //
      checkedCounties: [], //
      // 所有城市
      allCities: [], //
      // 所有省份
      provinces: [],
      provinceList: [], //
      dataObj: {}, //
      // 搜索无数据状态标签
      searchFlag: false,
      // 点击更改宽度
      clickProvince: "",
      // 根据省份获得城市数组
      provinceToCity: [],
      // 根据城市获得区县数组
      cityToCounty: [],
      // 点击控制城市框的显隐
      cityFlag: "cityHidden",
      // 点击控制区县框的显隐
      countyFlag: "countyHidden",
      radio: 1,
      // 最终渲染的选中的城市列表 和区县列表
      finnalCityList: [],
      // finnalCityList: [],
      finnalCityShowList: [], // 渲染最终城市列表
      // 当前选中的省份
      curProvince: "",
      // 传给后端的数据
      finnalData: "",
      // 当前省
      cur: "",
      itemClick: "",
      // 点击改变字体颜色
      clickColor: "",
      municipalityList: [], //直辖市
    };
  },
  mounted() {
    this.getProvinceList();
    if (JSON.parse(this.checkedCity).length == 0) {
      // 回显为空 不限
      this.activeName = "noLimit";
    } else {
      this.activeName = "city";
      // this.finnalCityList = this.checkedCity.split(',')
      this.finnalCityList = JSON.parse(this.checkedCity);
    }
    if (this.finnalCityList.length > 0) {
      this.getFinnalCityShowList();
      this.finnalCityList.forEach((item) => {
        this.dataList.forEach((province) => {
          if (province.value == item) {
            // 省份回显
            this.checkedProvinces.push(item);
            // 省份下的所有城市
            if (this.municipalityList.indexOf(province) < 0) {
              province.children.forEach((city) => {
                this.checkedCities.push(city.value);
              });
            }
          } else {
            // 单独市
            if (province.children && province.children.length > 0) {
              province.children.forEach((city) => {
                if (city.value == item) {
                  this.checkedCities.push(item);
                  province.isIndeterminate = true;
                  province.checkAll = false;
                }
              });
            }
          }
        });
      });
    }
    // 省份全选状态
    this.provinceCheckAllState();
  },
  watch: {
    // 监视最终选择城市的变化
    finnalCityList() {
      let district = "NONE";
      if (this.activeName == "city") {
        district = "CITY";
      }
      if (this.activeName == "noLimit") {
        district = "NONE";
      }
      this.$emit(
        "getCheckedCity",
        JSON.stringify(this.finnalCityList),
        district
      );
    },
  },
  methods: {
    // 1.获取总数据/省份列表/直辖市列表
    getProvinceList() {
      // 获取总数据
      this.dataList = cityData.rtnData;
      var testJson = []; // 自动搜索相关
      this.dataList.forEach((item) => {
        // item.label 省份名 item.children.lable 城市名 item.children.children.lable 区县名
        // 香港澳门无children 北京上海天津重庆台湾一级children 其余二级children
        item.isIndeterminate = false;
        item.checkAll = false;
        // 获得省份列表
        this.provinces.push(item);
        // 获取直辖市列表
        if (
          ["北京", "天津", "上海", "重庆", "香港", "澳门", "台湾"].indexOf(
            item.label
          ) > -1
        ) {
          this.municipalityList.push(item);
        }
        if (["上海", "天津", "重庆", "北京", "台湾"].indexOf(item.label) > -1) {
          testJson.push(item);
        }
        if (
          item.children &&
          ["上海", "天津", "重庆", "北京", "台湾"].indexOf(item.label) < 0
        ) {
          item.children.forEach((cityItem) => {
            this.allCities.push(cityItem.label); // 获得直辖市和港澳台外的所有城市
            testJson.push(cityItem);
          });
        }
      });
      var str1 = JSON.stringify(testJson).replace(/value/g, "id");
      var str2 = str1.replace(/label/g, "value");
      this.cityAutoList = JSON.parse(str2);
    },
    // 2.省份点击事件：省份变色 非直辖市市级出现 赋值当前省份 获取城市列表
    provinceClick(province) {
      this.curProvince = province;
      this.provinceToCity = []; // 置空
      //点击正常省份
      // 点击改变省份盒子宽度和city框显示
      this.clickProvince = "changeProvinceWidth";
      this.itemClick = "itemWidth";
      this.cityFlag = "";
      this.dataList.forEach((item) => {
        if (item.label === province.label) {
          item.children.forEach((itm) => {
            this.provinceToCity.push(itm);
          });
        }
      });
      // if (this.checkedProvinces.indexOf(province) > -1) {
      //   this.provinceToCity.forEach((item) => {
      //     if (this.checkedCities.indexOf(item) < 0) {
      //       this.checkedCities.push(item)
      //     }
      //   })
      // }
      // 点击省份 省份颜色变蓝
      this.provinces.forEach((item) => {
        if (item.label === province.label) {
          var target = document
            .getElementById(item.value)
            .getElementsByClassName("provinceP")[0];
          var targets = document.getElementsByClassName("provinceP");
          for (var n = 0; n < targets.length; n++) {
            targets[n].removeAttribute("style");
          }
          target.setAttribute("style", "color:blue;");
        }
      });
    },
    // 3.省份选择事件
    checkProvinceEvent(province) {
      this.curProvince = province;
      // 置空当前省份下城市列表
      this.provinceToCity = [];
      if (this.municipalityList.indexOf(province) < 0) {
        //点击正常省份 获取城市列表
        // 点击改变省份盒子宽度和city框显示
        this.clickProvince = "changeProvinceWidth";
        this.cityFlag = "";
        this.dataList.forEach((item, val) => {
          if (item === province) {
            item.children.forEach((itm) => {
              this.provinceToCity.push(itm);
            });
          }
        });
        // 选择 取消选择 修改选中城市列表
        if (this.checkedProvinces.indexOf(province.value) > -1) {
          // 选中
          this.provinceToCity.forEach((item) => {
            if (this.checkedCities.indexOf(item.value) < 0) {
              this.checkedCities.push(item.value);
            }
          });
        } else {
          // 取消选中
          this.provinceToCity.forEach((item) => {
            if (this.checkedCities.indexOf(item.value) > -1) {
              var n = this.checkedCities.indexOf(item.value);
              this.checkedCities.splice(n, 1);
            }
          });
        }
      } else {
        // 点击特殊城市隐藏城市框
        this.clickProvince = "";
        this.itemClick = "";
        this.cityFlag = "cityHidden";
      }
      province.isIndeterminate = false;
      this.checkAllCity = true; //
      // 最终数组处理
      this.getFinnalCityList();
    },
    // 4.省份选择状态修改
    handleCheckedProvincesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.provinces.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.provinces.length;
      // this.getFinnalCityList()
    },
    // 5.省份全选事件
    handleCheckAllChange(val) {
      let arr = [];
      this.provinces.forEach((item) => {
        arr.push(item.value);
      });
      this.checkedProvinces = val ? arr : [];
      this.isIndeterminate = false;
      // 选中所有 将选中城市清空 然后塞满
      if (val) {
        this.checkedCities = [];
        this.dataList.forEach((item) => {
          if (this.municipalityList.indexOf(item) < 0) {
            item.children.forEach((city) => {
              this.checkedCities.push(city.value);
            });
          }
        });
      } else {
        this.checkedCities = [];
      }
      // this.getFinnalCityList()
      if (this.checkedProvinces.length < this.provinces.length) {
        this.checkAll = false;
      }
      // 全部省份选中状态
      this.provinces.forEach((item) => {
        item.isIndeterminate = false;
      });
      // 最终数组处理
      this.getFinnalCityList();
    },
    // 6.城市的选择事件
    handleCheckedCitiesChange(value) {
      // let checkedCount = value.length;
      // this.checkAllCity = checkedCount === this.provinceToCity.length; //false
      // this.isIndeterminateCity = checkedCount > 0 && checkedCount < this.provinceToCity.length; //true
      var count = 0; // 当前城市列表中被选中的数量
      this.provinceToCity.forEach((item) => {
        if (this.checkedCities.indexOf(item.value) > -1) {
          count++;
        }
      });
      // var cur = {}
      // this.provinces.forEach((item) => {
      //     if (['北京','上海','天津','重庆','香港','澳门','台湾'].indexOf(item.label) < 0) {
      //       var arr = []
      //       item.children.forEach((cityItem)=> {
      //         arr.push(cityItem)
      //       })
      //       if(arr.indexOf(this.provinceToCity[0]) > -1){
      //         this.cur = item
      //       }
      //     }
      //   })
      if (count === this.provinceToCity.length) {
        // 全选
        if (this.checkedProvinces.indexOf(this.curProvince.value) < 0) {
          this.checkedProvinces.push(this.curProvince.value);
        }
        // this.dataList.forEach(item => {
        //   if(item.value == this.curProvince.value) {
        //     item.isIndeterminate = false;
        //     item.checkAll = true;
        //   }
        // })
        this.curProvince.isIndeterminate = false;
        this.curProvince.checkAll = true;
      } else if (count < this.provinceToCity.length && count > 0) {
        // 为全选
        if (this.checkedProvinces.indexOf(this.curProvince.value) > -1) {
          var num = this.checkedProvinces.indexOf(this.curProvince.value);
          this.checkedProvinces.splice(num, 1);
        }
        this.curProvince.isIndeterminate = true;
        this.curProvince.checkAll = false;
      } else if (count == 0) {
        this.curProvince.isIndeterminate = false;
        this.curProvince.checkAll = false;
      }
      // finnalCityList 函数生成方法
      // this.getFinnalCityList()
      // this.changeState ()
      // 省级状态框改变
      // var aidProvince = document.getElementById(this.cur.value).getElementsByTagName("span")[0];
      // // provinceSingle.setAttribute('class','el-checkbox listItem is-checked');
      // aidProvince.setAttribute('aria-checked','mixed');
      // aidProvince.setAttribute('class','el-checkbox__input is-indeterminate');
      // 省份全选框状态:
      if (this.checkedCities) {
        this.isIndeterminate = true;
      }
      if (
        this.checkedCities.length === 0 &&
        this.checkedProvinces.length === 0
      ) {
        this.isIndeterminate = false;
      }
      if (this.checkedProvinces.length == cityData.rtnData.length) {
        this.isIndeterminate = false;
      }
      // 最终数组处理
      this.getFinnalCityList();
    },
    // 7.联想框选择事件
    handleSelect(item) {
      if (
        ["北京", "天津", "重庆", "上海", "台湾", "香港", "澳门"].indexOf(
          item.value
        ) > -1
      ) {
        if (this.checkedProvinces.indexOf(item.id) > -1) {
          this.$message.warning("本城市已经被选中了~");
        } else {
          // this.checkedCities.push(city.id);

          this.checkedProvinces.push(item.id);
          // 省份全选状态
          this.provinceCheckAllState();
          // 最终数组处理
          this.getFinnalCityList();
        }
        return;
      }
      if (this.checkedCities.length > 0) {
        if (this.checkedCities.indexOf(item.id) < 0) {
          // 原本未选中
          this.checkedCities.push(item.id);
          this.changeProvinceState(item);
        } else {
          this.$message.warning("本城市已经被选中了~");
        }
      } else {
        this.checkedCities.push(item.id);
        this.changeProvinceState(item);
      }
    },
    // 8.选中的城市改变后改变对应省份选择状态
    changeProvinceState(city) {
      let targetProvince = {}; // 目标省份
      this.dataList.forEach((province) => {
        if (province.children && province.children.length > 0) {
          province.children.forEach((item) => {
            if (item.value == city.id) {
              targetProvince = province;
            }
          });
        }
      });
      // 目标省份下的城市有几个被选中
      let count = 0;
      targetProvince.children.forEach((item) => {
        if (this.checkedCities.indexOf(item.value) > -1) {
          count++;
        }
      });
      if (count == targetProvince.children.length && count > 0) {
        // 全被选中
        targetProvince.isIndeterminate = false;
        if (this.checkedProvinces.indexOf(targetProvince.value) < 0) {
          this.checkedProvinces.push(targetProvince.value);
        }
      } else if (count > 0 && count < targetProvince.children.length) {
        if (this.checkedProvinces.indexOf(targetProvince.value) > -1) {
          this.checkedProvinces.splice(
            this.checkedProvinces.indexOf(targetProvince.value),
            1
          );
        }
        targetProvince.isIndeterminate = true;
        targetProvince.checkAll = false;
      } else if (count == 0) {
        targetProvince.isIndeterminate = false;
        targetProvince.checkAll = false;
      }
      // 省份全选状态
      this.provinceCheckAllState();
      // 最终数组处理
      this.getFinnalCityList();
    },
    // 9. 最终数组 -将选中省份融化获得对应的选中省份城市集中营，总已选城市数组-已选省份城市数组=选中省份以外的城市数组
    getFinnalCityList() {
      var arrProToCity = []; // 已选省份城市数组
      if (this.checkedProvinces.length > 0) {
        this.checkedProvinces.forEach((item) => {
          this.dataList.forEach((province) => {
            if (
              this.municipalityList.indexOf(province) < 0 &&
              province.children &&
              province.value == item
            ) {
              province.children.forEach((city) => {
                arrProToCity.push(city.value);
              });
            }
          });
        });
      }
      var transformArr = []; // 减法结果 获得选中省份以外的城市
      this.checkedCities.forEach((item) => {
        if (arrProToCity.indexOf(item) < 0) {
          transformArr.push(item);
        }
      });
      var finnalArr = [];
      this.checkedProvinces.forEach((item) => {
        finnalArr.push(item);
      });
      transformArr.forEach((item) => {
        finnalArr.push(item);
      });
      this.finnalCityList = finnalArr;
      // console.log('最终数组',this.finnalCityList)
      // 最终数组为id数组 转化出渲染数组
      this.getFinnalCityShowList();
    },
    // 10.最终id数组转换渲染数组
    getFinnalCityShowList() {
      this.finnalCityShowList = [];
      this.finnalCityList.forEach((item) => {
        this.dataList.forEach((itm) => {
          if (itm.value == item) {
            this.finnalCityShowList.push(itm);
          } else {
            if (itm.children && itm.children.length > 0) {
              itm.children.forEach((city) => {
                if (city.value == item) {
                  this.finnalCityShowList.push(city);
                }
              });
            }
          }
        });
      });
      // console.log('最终城市渲染列表', this.finnalCityShowList)
    },
    // 11.删除单个城市 --
    deleteCity(item) {
      // 判断删除的是省还是市
      if (this.checkedProvinces.indexOf(item.value) > -1) {
        // 删除省
        this.checkedProvinces.splice(
          this.checkedProvinces.indexOf(item.value),
          1
        );
        // 改变省份全选状态
        this.provinceCheckAllState();
        // 删除省下所有的市
        this.dataList.forEach((province) => {
          if (this.municipalityList.indexOf(province) < 0) {
            if (province.value == item.value) {
              province.children.forEach((city) => {
                if (this.checkedCities.indexOf(city.value) > -1) {
                  this.checkedCities.splice(
                    this.checkedCities.indexOf(city.value),
                    1
                  );
                }
              });
            }
          }
        });
      } else {
        // 删除市
        this.checkedCities.splice(this.checkedCities.indexOf(item.value), 1);
        this.changeProvinceState({ id: item.value, value: item.label }); // 改变对应省的状态
      }
      // this.finnalCityList.splice(this.finnalCityList.indexOf(item.value), 1);
      // this.finnalCityShowList.splice(this.finnalCityShowList.indexOf(item), 1);
      this.getFinnalCityList();
      if (this.finnalCityList.length == 0) {
        this.isIndeterminate = false;
      }
    },
    // 12.清空所有城市
    emptyCity() {
      this.finnalCityShowList = [];
      this.finnalCityList = [];
      this.checkedProvinces = [];
      this.checkedCities = [];
      this.checkAll = false;
      this.isIndeterminate = false;
      this.provinces.forEach((item) => {
        item.isIndeterminate = false;
      });
    },
    // 13.省份全选状态
    provinceCheckAllState() {
      if (
        this.checkedCities.length > 0 &&
        this.checkedProvinces.length < this.provinces.length
      ) {
        this.isIndeterminate = true;
        this.checkAll = false;
      } else if (
        this.checkedCities.length == 0 &&
        this.checkedProvinces.length == 0
      ) {
        this.isIndeterminate = false;
        this.checkAll = false;
      } else if (this.checkedProvinces.length == this.provinces.length) {
        this.isIndeterminate = false;
        this.checkAll = true;
      } else if (
        this.checkedProvinces.length > 0 &&
        this.checkedProvinces.length < this.provinces.length
      ) {
        this.isIndeterminate = true;
        this.checkAll = false;
      }
    },

    // 主选项卡点击事件 所有状态重置
    handleClick() {
      let district = "NONE";
      if (this.activeName == "city") {
        district = "CITY";
      }
      if (this.activeName == "noLimit") {
        this.emptyCity();
        district = "NONE";
      }
      this.$emit("getCheckedCity", this.finnalCityList.join(","), district);
      // this.cityFlag = 'cityHidden'
      // this.countyFlag = 'countyHidden'
      // this.checkedCounties = []
      // this.checkedCities = []
      // this.checkedProvinces = []
      // this.finnalCityList = []
      // this.checkAll = false
      // this.isIndeterminate = false
      // this.clickProvince=''
      // this.itemClick=''
    },
    // 按省市划分选项卡点击事件
    handleDivideClick(tab, event) {
      console.log(tab, event);
    },
    // 联想搜索框事件
    querySearch(queryString, cb) {
      var cityAutoList = this.cityAutoList;
      var results = queryString
        ? cityAutoList.filter(this.createFilter(queryString))
        : cityAutoList;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },

    // 城市复选框事件
    handleCheckAllChangeCity(val) {
      let arr = [];
      this.provinceToCity.forEach((item) => {
        arr.push(item);
      });
      this.checkedCities = val ? arr : [];
      this.isIndeterminateCity = false;
    },

    // 最终数据赋值
    getPostData() {
      // 传值

      if (this.finnalCityList.length > 0) {
        this.finnalData = this.finnalCityList;
      }
      if (this.checkedCounties.length > 0) {
        this.finnalData = this.checkedCounties;
      }
      this.$emit("getArea", this.finnalData);
    },
    // 区县复选框事件
    handleCheckAllChangeCounty(val) {
      let arr = [];
      this.cityToCounty.forEach((item) => {
        arr.push(item);
      });
      this.checkedCounties = val ? arr : [];
      this.isIndeterminateCounty = false;
    },
    handleCheckedCountiesChange(value) {
      let checkedCount = value.length;
      this.checkAllCounty = checkedCount === this.cityToCounty.length;
      this.isIndeterminateCounty =
        checkedCount > 0 && checkedCount < this.cityToCounty.length;

      this.getPostData();
    },

    // 省份列表change事件 根据省份查找城市  按县区选择00000
    getCityListInCounty(province) {
      console.log(province);
      console.log(cityData.rtnData);
      this.provinceToCity = []; // 置空
      this.countyFlag = "countyHidden";
      if (
        ["北京", "上海", "天津", "重庆", "香港", "澳门", "台湾"].indexOf(
          province.label
        ) < 0
      ) {
        // 点击改变省份盒子宽度和city框显示
        this.clickProvince = "changeProvinceWidth";
        this.cityFlag = "";
        cityData.rtnData.forEach((item) => {
          if (item.value === province.value) {
            item.children.forEach((itm) => {
              this.provinceToCity.push(itm);
            });
          }
        });
      } else {
        this.clickProvince = "changeProvinceWidth";
        this.cityFlag = "";
        this.provinceToCity.push(province);
      }
      // 点击省份变蓝
      var targets = document
        .getElementsByClassName("provinceTarget")[0]
        .getElementsByClassName("listItem");
      var target = document.getElementById("pro" + province.value);
      for (var n = 0; n < targets.length; n++) {
        targets[n].removeAttribute("style");
      }
      target.setAttribute("style", "color:#337aff;");
    },
    // 按区县查找 点击城市获取当前区县
    getCountyList(city) {
      console.log("生成区县");
      // this.$refs.countyScroll.scrollLeft=205
      this.$refs.countyScroll.scrollLeft = this.$refs.countyScroll.scrollWidth;
      this.cityToCounty = []; // 置空
      this.countyFlag = true;
      if (["香港", "澳门"].indexOf(city.label) > -1) {
        // this.checkedCounties.push(city)
        this.cityToCounty.push(city);
      }
      cityData.rtnData.forEach((item) => {
        if (
          ["北京", "上海", "天津", "重庆", "香港", "澳门", "台湾"].indexOf(
            item.label
          ) < 0
        ) {
          if (item.children) {
            item.children.forEach((cityItm) => {
              if (cityItm.value === city.value) {
                cityItm.children.forEach((countyItm) => {
                  this.cityToCounty.push(countyItm);
                });
              }
            });
          }
        } else {
          if (["香港", "澳门"].indexOf(city.label) < 0) {
            let arr = [];
            arr.push(item);
            arr.forEach((itm) => {
              if (itm.value === city.value) {
                itm.children.forEach((countyItm) => {
                  this.cityToCounty.push(countyItm);
                });
              }
            });
          }
        }
      });
      // 点击城市变蓝
      var targets = document
        .getElementsByClassName("cityTarget")[0]
        .getElementsByClassName("listItem");
      var target = document.getElementById("city" + city.value);
      for (var n = 0; n < targets.length; n++) {
        targets[n].removeAttribute("style");
      }
      target.setAttribute("style", "color:#337aff;");
    },

    // 删除单个区县
    deleteCounty(county) {
      let n = this.checkedCounties.indexOf(county);
      this.checkedCounties.splice(n, 1);

      if (this.checkedCounties.length === 0) {
        this.finnalData = [];
      } else {
        this.getPostData();
      }
    },
    // 删除所有区县
    emptyCounty() {
      this.checkedCounties = [];
      this.getPostData();
    },
    // 返回给父组件数据
    backData() {
      let type = "",
        list = [];
      if (this.activeName === "city") {
        type = "CITY";
        if (this.finnalCityList.length > 0) {
          this.finnalCityList.forEach((item) => {
            list.push(Number(item));
          });
        }
      } else if (this.activeName === "county") {
        type = "COUNTY";
        if (this.checkedCounties.length > 0) {
          this.checkedCounties.forEach((item) => {
            list.push(Number(item.value));
          });
        }
      } else {
        type = "NONE";
        list = [];
      }
      console.log("最终数据-city", this.finnalCityList);
      console.log("最终数据-county", this.checkedCounties);
      let data = {
        type,
        list,
      };
      return data;
    },
  },
};
</script>
<style lang="scss" scope>
// @import "@/assets/common-style/scroll-bar.scss";

.city-box {
  width: 1000px;
  .el-tabs__nav-scroll {
    padding-left: 0px !important;
  }
  ::-webkit-scrollbar {
    width: 4px;
  }
  .list-box::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 2px;
  }
  ::-webkit-scrollbar {
    width: 4px;
  }
  ::-webkit-scrollbar-thumb {
    background: #e4e4e4;
    border-radius: 8px;
  }
  ::-webkit-scrollbar-track-piece {
    background: transparent;
  }
}
// 省市搜索框
.inline-input {
  width: 250px;
  float: left;
}
// 省市搜索按钮
.searchBtn {
  background: #fafafa;
  border-color: #e0e0e0;
  color: rgb(190, 167, 167);
  border-top-left-radius: 0%;
  border-bottom-left-radius: 0%;
  width: 80px;
  float: left;
  color: black;
}
.el-tabs__nav-wrap::after {
  display: none;
}
.areaContainer {
  display: flex;
  overflow: auto;
  width: 403px;
  height: 250px;
  float: left;
  .provinceBox {
    flex-shrink: 0;
    width: 400px;
    height: 231px;
    border: 1px solid #e0e0e0;
    float: left;
    .provinceBoxHeader {
      border-bottom: 1px solid #e0e0e0;
      background: #fafafa;
      // width: calc(100% - 24px);
      width: 100%;
      height: 36px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      span {
        font-weight: bold;
      }
    }
    .provinceList {
      width: 100%;
      height: 195px;
      overflow: auto;
      .provinceCheckAll {
        padding-left: 12px;
        height: 30px;
        line-height: 30px;
        width: calc(100% - 12px);
      }
      .provinceCheckAll:hover {
        background: #ece8e8;
      }
      .listItem {
        cursor: pointer;
        width: calc(100% - 12px);
        padding-left: 12px;
        display: block;
        height: 30px;
        line-height: 30px;
        .provinceP {
          width: 348px;
          height: 30px;
          position: relative;
          line-height: 30px;
          i {
            margin-top: 8px;
            float: right;
            margin-right: 10px;
          }
        }
      }
      .listItem:hover {
        background: #ece8e8;
      }
    }
  }
  .cityBox {
    width: 200px;
    border-left: none;
    // display: none;
  }
  .changeProvinceWidth {
    width: 200px;
  }
}
.selectedBox {
  margin-left: 40px;
  width: 198px;
  height: 233px;
  border: 1px solid #e0e0e0;
  float: left;
  .selectedBoxHeader {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    // width: calc(100% - 24px);
    // height: 36px - 16px;
    height: 36px;
    width: 100%;
    padding: 8px 12px;
    span {
      font-weight: bold;
    }
    .empty {
      display: inline-block;
      margin-left: 110px;
      color: #337aff;
      font-weight: normal;
      cursor: pointer;
    }
  }
  .selectedItem {
    // width: calc(100% - 24px);
    width: 100%;
    height: 197px;
    padding: 0px 12px;
    overflow: auto;
    p {
      cursor: pointer;
      // width: calc(100% - 20px);
      background: #f0f0f0;
      height: 22px;
      margin-top: 10px;
      line-height: 22px;
      padding: 0 10px;
      .deleteCity {
        float: right;
        color: rgb(172, 179, 187);
        display: block;
        line-height: 22px;
        position: relative;
        top: -2px;
      }
    }
  }
}
.demo-autocomplete {
  position: relative;
  overflow: visible;
  .notfound {
    overflow: visible;
    width: 380px;
    height: 150px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 40px;
    z-index: 100;
    background: white;
    box-shadow: 0px 2px 3px -1px #888888;
    border: 1px solid rgb(224, 221, 221);
    border-radius: 3px;
    img {
      width: 100px;
    }
  }
}
.cityHidden {
  display: none;
}
.countyHidden {
  display: none;
}
#itemWidth {
  width: 148px;
}
.clickColor {
  color: cornflowerblue;
}
</style>
