<template>
  <div
    class="city-input"
    v-clickoutside="closePanel">
    <div @click="togglePanel">
      <el-input
        v-model="text"
        readonly
        placeholder="请选择">
        <template slot="suffix">
          <i :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"></i>
        </template>
      </el-input>
    </div>
    <div
      class="panel"
      v-show="panelVisible">
      <div class="half-list">
        <p class="title">
          省份
        </p>
        <div
          class="list-item"
          v-for="province in provinceList"
          :key="province.id">
          <el-checkbox
            :indeterminate="isIndeterminate(province)"
            v-model="province.checked"
            @change="changeProvince($event, province)"></el-checkbox>
          <span
            class="name"
            :class="{'active-province': activeProvince === province}"
            @click="clickProvince(province.name)">
            {{ province.name }}
            <span
              v-show="province.checkNum"
              class="check-num">
              ({{ province.checkNum }})
            </span>
          </span>
        </div>
      </div>
      <div class="half-list">
        <p class="title">
          {{ activeProvince.name }}
        </p>
        <div
          class="list-item"
          v-for="city in activeProvince.children"
          :key="city.id">
          <el-checkbox
            v-model="city.checked"
            @change="isProvinceCheckAll(activeProvince)"></el-checkbox>
          <span>{{ city.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cityData from '@/assets/cityData/city.json'
import provinceData from '@/assets/cityData/province.json'
import Clickoutside from 'element-ui/src/utils/clickoutside'
export default {
  directives: { Clickoutside },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      provinceList: [],
      panelVisible: false,
      activeProvince: {},
      text: ''
    }
  },
  watch: {
    value (val) {
      this.provinceList = provinceData.map(item => {
        return {
          name: item.name,
          id: item.id,
          checked: false,
          children: cityData[item.id].map(city => {
            city.checked = false
            return city
          })
        }
      })
      this.value.forEach(num => {
        let proId = num.toString().substring(0, 2)
        let cityId = num.toString().substring(0, 4)
        let pro = this.provinceList.find(p => p.id.toString().substring(0, 2) === proId)
        if (pro) {
          let city = pro.children.find(c => c.id.toString().substring(0, 4) === cityId)
          if (city) {
            city.checked = true
            this.isProvinceCheckAll(pro)
          }
        }
      })
      this.getCityText(this.value[0])
    },
    panelVisible (val) {
      if (!val) {
        let proArr = this.provinceList.map(pro => {
          return pro.children.filter(c => c.checked).map(item => item.id)
        }).filter(arr => arr.length)
        let result = proArr.reduce((a, v) => a.concat(v), [])
        this.getCityText(result[0])
        this.$emit('input', result)
      }
    }
  },
  computed: {
    iconClass () {
      return this.panelVisible ? 'arrow-up' : 'arrow-up is-reverse'
    }
  },
  methods: {
    getCityText (id) {
      if (id) {
        let proId = id.toString().substring(0, 2)
        let cityId = id.toString().substring(0, 4)
        let pro = this.provinceList.find(p => p.id.toString().substring(0, 2) === proId)
        if (pro) {
          let city = pro.children.find(c => c.id.toString().substring(0, 4) === cityId)
          if (city) {
            this.text = city.name + ' 等'
          }
        }
      } else {
        this.text = ''
      }
    },
    isProvinceCheckAll (province) {
      let len = province.children.length
      let checkedLen = province.children.filter(c => c.checked).length
      if (checkedLen === len) {
        province.checked = true
        province.checkNum = ''
      } else {
        province.checked = false
        province.checkNum = checkedLen === 0 ? '' : checkedLen
      }
    },
    changeProvince (val, province) {
      province.children.forEach(city => {
        city.checked = val
      })
      province.checkNum = ''
    },
    isIndeterminate (pro) {
      let len = pro.children.length
      let checkedLen = pro.children.filter(c => c.checked).length
      return checkedLen !== 0 && checkedLen !== len
    },
    closePanel () {
      this.panelVisible = false
    },
    togglePanel () {
      this.panelVisible = !this.panelVisible
    },
    clickProvince (name) {
      let province = this.provinceList.find(province => province.name === name)
      if (province) {
        this.activeProvince = province
      }
    }
  }
}
</script>
<style lang="scss">
.city-input {
  position: relative;
  overflow: visible;
  .is-reverse{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}
  .panel {
    position: absolute;
    z-index: 2007;
    top: calc(100% + 12px);
    background-color: #fff;
    left: -50px;
    padding-bottom: 10px;
    border: 1px solid #e4e7ed;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    width: 630px;
    display: flex;
    .half-list {
      padding: 10px;
      box-sizing: border-box;
      width: 270px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      .title {
        margin: 0;
        width: 100%;
        font-size: 18px;
      }
      .list-item {
        margin: 0 10px;
        .el-checkbox {
          margin-right: 0;
        }
        .name {
          cursor: pointer;
        }
        .active-province {
          color: #65667B;
          font-weight: bold;
          font-size: 15px;
        }
        .check-num {
          color: #65667B;
          font-weight: bold;
        }
      }
    }
    .half-list:first-child {
      width: 360px;
      border-right: 1px solid #e4e7ed;
    }
  }
}
</style>
