import ksActionSheet from '../action-sheet';
import ksButton from '../button';
import ksGrid from '../grid';
import ksGridItem from '../grid-item';
import { hotCity, createTitles } from './hot-city'; // import './index.css'

var method = 'address.addressBgTerritory.getMultiLevelSublist';
var levels = ['province', 'city', 'zone', 'street', 'village'];
import './index-sfc.css';

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('ks-action-sheet', {
    staticClass: "ks-area-action-select",
    attrs: {
      "title": "请选择省市区街道",
      "get-container": "body"
    },
    model: {
      value: _vm.show,
      callback: function callback($v) {
        _vm.show = $v;
      },
      expression: "show"
    }
  }, [_c('div', {
    staticClass: "ks-area-select"
  }, [_c('h4', [_vm._v("热门城市")]), _vm._v(" "), _c('div', {
    staticClass: "hot-city"
  }, _vm._l(_vm.cities, function (city) {
    return _c('div', {
      key: city.id,
      staticClass: "hot-city__item"
    }, [_c('div', [_c('ks-button', {
      class: {
        active: _vm.selectHotCity === city.id
      },
      on: {
        "click": function click($event) {
          return _vm.handleSelectHot(city);
        }
      }
    }, [_vm._v("\n            " + _vm._s(city.title) + "\n          ")])], 1)]);
  }), 0), _vm._v(" "), _c('div', {
    staticClass: "city-select"
  }, [_c('div', {
    staticClass: "select-tab"
  }, [_c('ks-grid', {
    attrs: {
      "border": false
    }
  }, _vm._l(_vm.titles, function (item, index) {
    return _c('ks-grid-item', {
      key: index,
      on: {
        "click": function click($event) {
          return _vm.handleChangeTab(index);
        }
      }
    }, [_c('div', {
      staticClass: "select-tab-item__title",
      style: {
        color: item === '请选择' ? '#7972FE' : '#333',
        width: _vm.tabItemWidth + "px"
      }
    }, [_vm._v("\n              " + _vm._s(item) + "\n              "), _c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: item === '请选择',
        expression: "item === '请选择'"
      }],
      staticClass: "select-tab-item__line"
    })])]);
  }), 1)], 1), _vm._v(" "), _c('div', {
    staticClass: "select-gray"
  }), _vm._v(" "), _c('div', {
    ref: "list",
    staticClass: "select-list"
  }, [_c('ul', _vm._l(_vm.list, function (item, index) {
    return _c('li', {
      key: item.districtID
    }, [_c('div', {
      class: {
        active: _vm.selectedArea[_vm.currentLevel] && item.districtID === _vm.selectedArea[_vm.currentLevel].id
      },
      on: {
        "click": function click($event) {
          return _vm.handleSelect(item, index);
        }
      }
    }, [_vm._v("\n              " + _vm._s(item.districtName || (_vm.currentLevel === 1 ? '市级县' : '')) + "\n            ")])]);
  }), 0)])])])]);
};

var __vue_staticRenderFns__ = [];
export default {
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__,
  name: 'ks-area-single-select',
  components: {
    ksActionSheet: ksActionSheet,
    ksButton: ksButton,
    ksGrid: ksGrid,
    ksGridItem: ksGridItem
  },
  props: {
    level: {
      type: Number,
      default: 4
    }
  },
  data: function data() {
    return {
      cities: hotCity(),
      show: false,
      titles: createTitles(this.level),
      list: [],
      selectHotCity: null,
      selectedArea: [],
      currentLevel: 0
    };
  },
  computed: {
    tabItemWidth: function tabItemWidth() {
      return document.body.clientWidth / this.level - 16;
    }
  },
  methods: {
    open: function open(area) {
      var _this = this;

      this.list = [];
      this.selectHotCity = null;

      if (area && area.length) {
        this.getAreaList(area.length - 1, area[area.length - 2].id);
        area.forEach(function (item, index) {
          if (index === _this.titles.length - 1) {
            _this.titles[index] = '请选择';
          } else {
            _this.titles[index] = item.name;
          }
        });
        this.selectedArea = area;
        this.currentLevel = 3;
      } else {
        this.selectedArea = [];
        this.currentLevel = 0;
        this.getAreaList(0);
      }

      this.show = true;
    },
    getAreaList: function getAreaList(level, id) {
      var _this2 = this;

      if (level === 0 && this.province) {
        this.list = this.province;
      } else {
        var params = level === 0 ? {
          districtLevel: levels[level]
        } : {
          districtLevel: levels[level],
          commonDistrID: id
        };
        var data = {
          method: method,
          id: Math.random().toString().substring(4),
          jsonrpc: '2.0',
          params: params
        };
        this.$http(method, 10205, data).then(function (res) {
          if (level === 0) {
            _this2.province = res.districtList;
          }

          _this2.list = res.districtList;
          _this2.$refs.list.scrollTop = 0;
        });
      }
    },
    handleChangeTab: function handleChangeTab(index) {
      if (index === 0) {
        this.getAreaList(0);
        this.selectedArea = [];
      } else {
        this.getAreaList(index, this.selectedArea[index - 1].id);
        this.selectedArea = this.selectedArea.slice(0, index);
      }

      for (var i = this.titles.length; i--;) {
        if (i > index) {
          this.titles[i] = '';
        } else if (i === index) {
          this.titles[i] = '请选择';
        }
      }

      this.currentLevel = index;
    },
    handleSelect: function handleSelect(area) {
      if (this.currentLevel + 1 === this.level) {
        if (this.selectedArea.length === this.level) {
          this.selectedArea[this.currentLevel] = {
            id: area.districtID,
            name: area.districtName,
            level: levels[this.currentLevel]
          };
        } else {
          this.selectedArea.push({
            id: area.districtID,
            name: area.districtName,
            level: levels[this.currentLevel]
          });
        }

        this.$emit('select', this.selectedArea);
        this.show = false;
      } else if (this.currentLevel + 1 < this.level) {
        var currentLevel = this.currentLevel + 1;
        this.getAreaList(currentLevel, area.districtID);
        this.selectedArea.push({
          id: area.districtID,
          name: area.districtName,
          level: levels[this.currentLevel]
        });
        this.titles[this.currentLevel] = area.districtName;
        this.titles[currentLevel] = '请选择';
        this.currentLevel = currentLevel;
      }
    },
    handleSelectHot: function handleSelectHot(city) {
      this.getAreaList(1, city.id);
      this.selectHotCity = city.id;
      this.selectedArea = city.value;
      this.currentLevel = 2;

      for (var i = this.titles.length; i--;) {
        if (i > 2) {
          this.titles[i] = '';
        } else if (i === 2) {
          this.titles[i] = '请选择';
        } else {
          this.titles[i] = city.value[i].name;
        }
      }
    }
  }
};