<template>
  <div class="country-box">
    <div class="country-box-input" @click="handleClick">
      <i class="iconfont icon-close" v-if="chooseCountry && clickStatus" @click.stop="handleClear"></i>
      <i class="iconfont icon-down" v-else></i>
      <span v-if="chooseCountry"  class="params-input">{{ chooseName }}</span>
      <span v-else class="params-input params-input-place">{{ placeholder }}</span>
    </div>
    <div class="country-code" :class="{on: clickStatus}">
      <div class="country-code_search">
        <input type="text" v-model="searchKey" />
        <span @click="handleSearch">搜索</span>
      </div>
      <div class="country-code_body">
        <div class="country-code_tag">
          <div
              :class="['country-code_tag-item', {'on': key === curType}]"
              v-for="(value, key) in countryData"
              :key="key"
              @click="curType = key"
          >{{key}}</div>
        </div>
        <div class="country-code_list">
          <div
              class="country-code_list-item"
              v-for="item in curData"
              :key="item.nameen"
              @click="handleEmit(item)"
          >
            <img :src="`/data/assets/images/country/${item.code.toLowerCase()}.png`" :alt="item.name">
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const countryData = require('../country.json')
export default {
  name: 'CountryCode',
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      countryData: _.cloneDeep(countryData),
      curType: '亚洲',
      chooseCountry: '',
      chooseName: '',
      searchKey: '',
      clickStatus: false
    }
  },
  watch: {
    value (val) {
      if (val !== this.chooseCountry) {
        this.chooseCountry = val
        const allArr = []
        for (let key in countryData) {
          const arr = countryData[key]
          allArr.push(...arr)
        }
        for (let i = 0; i < allArr.length; i++) {
          if (allArr[i].code === val) {
            this.chooseName = allArr[i].name
            break
          }
        }
      }
    }
  },
  mounted: function () {
    window.addEventListener('click', this.clickOutside)
  },
  destroyed() {
    window.removeEventListener('click', this.clickOutside)
  },
  computed: {
    curData () {
      return this.countryData[this.curType];
    }
  },
  methods: {
    handleClear () {
      this.clickStatus = false
      this.chooseCountry = ''
      this.$emit('input', this.chooseCountry)
    },
    handleSearch() {
      const data = _.cloneDeep(countryData);
      this.countryData = {}
      for (let key in data) {
        const arr = data[key]
        const searchResult = arr.filter(item => item.name.indexOf(this.searchKey) > -1)
        if (searchResult.length > 0) {
          this.$set(this.countryData, key, searchResult)
        }
      }
    },
    handleEmit (item) {
      this.chooseName = item.name
      this.chooseCountry = item.code
      this.clickStatus = false
      this.$emit('input', this.chooseCountry)
    },
    handleClick () {
      this.clickStatus = !this.clickStatus
    },
    clickOutside (e) {
      if (!this.$el.contains(e.target)) {
        this.clickStatus = false
      }
    }
  }
}
</script>