<!--
地区三级联动组件
v-mode 绑定的数据格式：
selectArea: {
  province: {code:'',name:''},
  city: {},
  district: {},
},
例：<area v-mode='selectArea' :clearable="true" level="city" width='300'/>
// selectArea 关联对象
// clearable 是否可清除 (默认false)
// level 显示层级: 'province':显示一级,'city':显示二级,'district':显示三级 (默认 'district')
// width 设置 组件宽度 (默认 200px)
// placeholder (默认 '所属地区, 必须市或区')
-->
<template>
  <div class="form-group">
    <div class="form-section" style="display: flex">
      <span
        :class="[{ 'city-picker-span': true }, { focus: true }]"
        :style="setWidth"
        tabindex="1"
        @click="clkOpen"
      >
        <span
          v-show="Object.keys(selectArea.province).length !== 0"
          class="placeholder"
        >
          <span
            v-for="(value, key, index) in selectArea"
            :key="index"
            class="hover"
            @click.stop="clkSpanAreaName(index)"
          >
            {{ value.name }}
          </span>
        </span>
        <span
          v-show="Object.keys(selectArea.province).length === 0"
          class="placeholder"
        >
          {{ placeholder }}
        </span>
        <span :class="[{ arrow: true }, { open: isOpen }]"></span>
      </span>
      <span v-if="showClear" class="btn-single" @click="reset"></span>
    </div>
    <div
      class="city-picker-dropdown"
      :style="{ display: isOpen ? 'block' : 'none' }"
    >
      <div class="city-select-wrap">
        <div class="city-select-tab">
          <a :class="[{ selTab: curTabIndex === 0 }]" @click="selectTab(0)">
            省份
          </a>
          <a
            v-if="level === 'city' || level === 'district'"
            :class="[{ selTab: curTabIndex === 1 }]"
            @click="selectTab(1)"
          >
            城市
          </a>
          <a
            v-if="level === 'district'"
            :class="[{ selTab: curTabIndex === 2 }]"
            @click="selectTab(2)"
          >
            县区
          </a>
        </div>
        <div class="city-select-content">
          <div v-show="curTabIndex === 0" class="city-select province">
            <dl
              v-for="(provinces, key, index) in chineseDistricts[86]"
              :key="index"
              class="clearfix"
            >
              <dt>{{ key }}</dt>
              <dd>
                <a
                  v-for="province in provinces"
                  :key="province.code"
                  :class="[
                    {
                      active:
                        String(selectArea.province.code) ===
                        String(province.code),
                    },
                  ]"
                  @click="clkAreaName(0, province.code, province.address)"
                >
                  {{ province.address }}
                </a>
              </dd>
            </dl>
          </div>
          <div v-show="curTabIndex === 1" class="city-select city">
            <dl class="clearfix">
              <dd>
                <a
                  v-for="(cityName, cityKey) in chineseDistricts[
                    selectArea.province.code
                  ]"
                  :key="cityKey"
                  :class="[
                    {
                      active: String(selectArea.city.code) === String(cityKey),
                    },
                  ]"
                  @click="clkAreaName(1, cityKey, cityName)"
                >
                  {{ cityName }}
                </a>
              </dd>
            </dl>
          </div>
          <div v-show="curTabIndex === 2" class="city-select district">
            <dl class="clearfix">
              <dd>
                <a
                  v-for="(districtName, districtKey) in chineseDistricts[
                    selectArea.city.code
                  ]"
                  :key="districtKey"
                  :class="[
                    {
                      active:
                        String(selectArea.district.code) ===
                        String(districtKey),
                    },
                  ]"
                  @click="clkAreaName(2, districtKey, districtName)"
                >
                  {{ districtName }}
                </a>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { ChineseDistricts } from './city-picker.data'
  export default {
    name: 'Area',
    model: {
      prop: 'selectArea',
      event: 'change',
    },
    props: {
      selectArea: {
        type: Object,
        required: true,
        default: function () {
          return { province: {}, city: {}, district: {} }
        },
      },
      clearable: {
        type: Boolean,
        default: function () {
          return false
        },
      },
      level: {
        type: String, // 'province':显示一级,'city':显示二级,'district':显示三级
        default: function () {
          return 'district'
        },
      },
      width: {
        type: String,
        default: function () {
          return '166'
        },
      },
      placeholder: {
        type: String,
        default: function () {
          return '所属地区, 必须市或区'
        },
      },
    },
    data() {
      return {
        active: '',
        chineseDistricts: {}, // 省份城市数据
        isOpen: false,
        curTabIndex: 0, //当前选中的tab 0:省份, 1:城市, 2:区县（默认0）
        // 组件最终返回对象
        // selectArea: {
        //   province: {},
        //   city: {},
        //   district: {},
        // },
      }
    },
    computed: {
      showClear() {
        return this.clearable
      },
      setWidth() {
        return { width: this.width + 'px' }
      },
    },
    mounted() {
      // 点击其它区域关闭tab
      document.addEventListener('click', (e) => {
        if (!this.$el.contains(e.target)) {
          this.isOpen = false
        }
      })
    },
    created() {
      this.chineseDistricts = ChineseDistricts
      // this.initProvince()
    },
    methods: {
      clkOpen() {
        this.isOpen = !this.isOpen
        this.curTabIndex = 0
      },
      blurEvent() {
        this.isOpen = false
      },
      // tab 点击事件
      selectTab(tabIndex) {
        this.curTabIndex = tabIndex
      },
      // 地区名称点击事件
      clkAreaName(tabIndex, code, areaName) {
        // 给selectArea 赋值
        switch (tabIndex) {
          case 0:
            this.$emit('change', {
              province: {
                code: code,
                name: areaName,
              },
              city: {},
              district: {},
            })
            break
          case 1:
            this.$emit('change', {
              province: this.selectArea.province,
              city: {
                code: code,
                name: areaName,
              },
              district: {},
            })
            break
          case 2:
            this.$emit('change', {
              province: this.selectArea.province,
              city: this.selectArea.city,
              district: {
                code: code,
                name: areaName,
              },
            })
            break
        }
        // 如果最后的tab（index ：2） 关闭
        if (tabIndex === 2 || this.isCloseTab(tabIndex)) {
          this.isOpen = false
          return
        }
        // tab 切换
        this.tabSwitch()
      },
      tabSwitch() {
        // 切换tab
        const index = this.curTabIndex
        if (index < 2) {
          this.curTabIndex++
        }
      },
      // 重置选中数据
      reset() {
        const selectArea = {
          province: {},
          city: {},
          district: {},
        }
        this.$emit('change', selectArea)
        this.isOpen = false
      },
      clkSpanAreaName(tabIndex) {
        this.isOpen = true
        this.curTabIndex = tabIndex
      },
      isCloseTab(tabIndex) {
        if (this.level === 'province' && tabIndex === 0) return true
        if (this.level == 'city' && tabIndex === 1) return true
      },
    },
  }
</script>
<style scoped lang="scss">
  ::v-deep {
    .clearfix {
      font-size: 13px!important;
    }
  }

  .form-group {
    position: relative;
    background-color: #fff;
    display: inline-block;
  }
  .city-picker-span {
    /*width: 200px;*/
    height: 30px;
    line-height: 29px;
    display: inline-block;
    padding: 0 10px;
    position: relative;
    background-color: #fff;
    color: #ccc;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: top;
  }
  .form-section {
    display: inline-block;
    border: 1px solid #dcdfe6;

    height: 32px;
    line-height: 32px;
  }
  .btn-single {
    height: 30px;
    cursor: pointer;
    display: inline-block;
    line-height: 30px;
    padding: 0 10px;
    border-left: 1px solid #dcdfe6;
  }
  div .btn-single::before {
    content: '\2716';
  }

  .arrow {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 10px;
    margin-top: -3px;
    height: 5px;
    background: url(./image/drop-arrow.png) -10px -25px no-repeat;
  }
  .focus:focus {
    border-bottom: 1px solid #46a4ff;
  }
  span .open {
    background: url(./image/drop-arrow.png) -10px -10px no-repeat;
  }
  .city-select-wrap .city-select-tab > a {
    color: #4c4c4c;
    display: inline-block;
    padding: 8px 22px;
    border-left: 1px solid #ccc;
    /*border-bottom: 1px solid transparent;*/
    text-align: center;
    outline: 0;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: -1px;
  }
  .city-select-tab {
    /*border-bottom: 1px solid #ccc;*/
    background: #f0f0f0;
    font-size: 13px;
  }

  .city-picker-dropdown {
    top: 40px;
    position: absolute;
    width: 315px;
    outline: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    z-index: 2100;
    min-width: 330px;
    margin-bottom: 20px;
  }
  .city-select-content {
    width: 100%;
    min-height: 10px;
    background-color: #fff;
    padding: 10px 15px;
    box-sizing: border-box;
  }
  .city-select-tab a.selTab {
    color: #1890ff;
    background-color: #fff;
  }
  .city-select-wrap {
    line-height: 20px;
    box-shadow: 0 1px 5px rgb(0 0 0 / 50%);
  }
  .city-select {
    font-size: 13px;
  }
  .city-select dl {
    line-height: 2;
    clear: both;
    padding: 3px 0;
    margin: 0;
  }
  .city-select dt {
    position: absolute;
    width: 2.5em;
    font-weight: 500;
    text-align: right;
    line-height: 2;
  }
  .city-select a {
    display: inline-block;
    padding: 0 10px;
    outline: 0;
    text-decoration: none;
    white-space: nowrap;
    margin-right: 2px;
    color: #333 !important;
    cursor: pointer;
  }
  dd {
    display: block;
  }
  dt {
    display: inline-block;
  }
  .placeholder{
    line-height: 31px;
    font-size: 12px;
  }

  .placeholder > span {
    color: #333;
  }
  .placeholder > span:hover,
  .city-select a:hover {
    background-color: #46a4ff;
    border-radius: 2px;
    color: #fff !important;
  }

  .clearfix .active {
    background-color: #46a4ff;
    color: #fff !important;
    border-radius: 2px;
  }
  .city-select {
    font-size: 13px;
  }
  .form-group .btn {
  }
  .btn-single:hover {
    background-color: #e6e6e6;
  }
  .btn-single:active {
    box-shadow: inset 0 0 5px 2px rgb(0 0 0 / 8%);
  }
  .province dd {
    margin-inline-start: 40px;
  }
  .city dd,
  .district dd {
    margin-inline-start: 20px;
  }
</style>
