<template>
  <el-popover
    class="city-picker"
    placement="bottom"
    v-model="visible"
    :disabled="disabled"
    width="400"
    trigger="click"
  >
    <div class="city-picker-wrapper">
      <el-tabs
        :stretch="true"
        v-model="activeName"
        >
        <el-tab-pane
          v-for="(tab, index) in tabs"
          :key="index"
          class="city-list"
          :label="tab.label"
          :name="tab.name">
          <city-page
            :tab="tab"
            :ref="tab.name"
            @select="handleSelect"
          ></city-page>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div slot="reference">
      <slot name="input"></slot>
    </div>
  </el-popover>
</template>

<script>
import cityPage from './city-page';

export default {
  name: 'city-picker',
  components: {
    cityPage,
  },
  props: {
    disabled: Boolean,
  },
  data() {
    const tabs = [
      // {
      //   label: '历史',
      //   name: 'history',
      //   groups: [],
      // },
      {
        label: '热门',
        name: 'hot',
        metheodType: 'hot',
        groups: [],
      },
      {
        label: '国际/港澳台',
        name: 'common',
        groups: [],
      },
      {
        label: 'ABCD',
        name: 'ABCD',
        groups: [],
      },
      {
        label: 'EFGH',
        name: 'EFGH',
        groups: [],
      },
      {
        label: 'JKLM',
        name: 'JKLM',
        groups: [],
      },
      {
        label: 'NOPQR',
        name: 'NOPQR',
        groups: [],
      },
      {
        label: 'STUVW',
        name: 'STUVW',
        groups: [],
      },
      {
        label: 'XYZ',
        name: 'XYZ',
        groups: [],
      },
    ];
    return {
      visible: false,
      tabs,
      activeName: tabs[0].name,
      options: [],
    };
  },
  created() {
    this.getCityData();
    // this.getCityHistory();
    this.getOtherData();
  },
  watch: {
    disabled(val) {
      this.visible = val;
    },
    visible(val) {
      if (val) {
        this.activeName = this.tabs[0].name;
      }
    },
    activeName(name) {
      this.$refs[name][0].resetPages();
    },
  },
  methods: {
    getCityData() {
      const params = {
        metheodType: 'letterAll',
        key: Array(26).fill('').map((_, i) => String.fromCharCode(65 + i)).join('^'),
      };
      this.$http.post('base/city/findCityPage', params).then(
        ({ data }) => {
          data = data.data;
          const { hot, letter } = data;
          this.setCityData('hot', hot);
          this.setCityData('letter', letter);
        },
      );
    },
    getOtherData() {
      const params = {
        metheodType: 'common',
        cityType: 'CST2',
      };
      this.$http.post('base/city/findCityPage', params).then(
        ({ data }) => {
          data = data.data;
          const { common } = data;
          this.setCityData('common', common);
        },
      );
    },
    getCityHistory() {
      const params = {
        chooseType: 'CITY',
      };
      this.$http.post('base/userchoosehistory/historyList', params).then(
        ({ data }) => {
          data = data.data || [];
          const history = data.map(d => ({
            ...d,
            cityName: d.chooseName,
          }));
          this.setCityData('history', history);
        },
        () => {},
      );
    },
    setCityData(name, citys) {
      if (Array.isArray(citys)) {
        // 如果是数组, 则直接推入groups
        const tab = this.tabs.find(t => t.name === name);
        if (tab) {
          tab.groups = [{
            citys,
          }];
        }
      } else {
        // 如果是对象, 则拆分到A-Z中
        this.tabs.forEach((tab) => {
          if (tab.name === tab.label) {
            const letters = tab.name.split('');
            tab.groups = letters.map(letter => ({
              letter,
              citys: citys[letter],
            }));
          }
        });
      }
    },
    handleSelect(city) {
      this.$emit('input', city);
      this.visible = false;
    },
    hide() {
      this.visible = false;
    },
  },
};
</script>