/**
* 级联菜单
*
*/
<template>
  <div class="page-region-cascarder page-popup">
    <co-popup v-model="visible" position="bottom" class="co-popup-4">
      <div class="picker-toolbar co-line-down">
        <span class="co-datetime-action co-datetime-cancel" @click="cancel()">取消</span>
        <span class="co-datetime-action co-datetime-confirm" @click="confirm()">确定</span>
      </div>
      <div class="page-picker-wrapper">
        <div class="cus-cascader" :class="'cus-cascader-level-' + options.level">
          <co-picker ref="firstPicker" valueKey="text" :slots="firstSlots" @change="firstBack" :visible-item-count="5"></co-picker>
        </div>
        <div class="cus-cascader" :class="'cus-cascader-level-' + options.level">
          <co-picker ref="secondPicker" valueKey="text" :slots="secondSlots" @change="secondBack" :visible-item-count="5"></co-picker>
        </div>
        <div class="cus-cascader" :class="'cus-cascader-level-' + options.level" v-if="options.level == 3">
          <co-picker ref="thirdPicker" valueKey="text" :slots="thirdSlots" @change="thirdBack" :visible-item-count="5"></co-picker>
        </div>
      </div>
    </co-popup>
  </div>
</template>

<script type="es6">
  const REGION_DATA = require('../assets/regionData.json');
  export default {
    name: 'cus-cascader',
    data() {
      return {
        options: {}, // 入参
        results: [], // 回调的结果
        firstSlots: [],
        secondSlots: [],
        thirdSlots: [],
        visible: false
      };
    },
    props: {
      data: Object
    },
    methods: {
      confirm() {
        this.visible = false;
        this.$emit('confirm', this.options.level === 2 ? [this.results[0], this.results[1]] : this.results);
      },
      cancel() {
        this.visible = false;
      },
      open(options) {
        // 默认数据
        this.options = options;
        this.visible = true;
        this.setDatas(1, options.datas || REGION_DATA);
      },
      firstBack(picker, data) {
        if (!data || data.length === 0 || !data[0]) {
          return;
        }
        this.results = [{}, {}, {}];
        this.results[0] = data[0];
        if (this.options.datas) {
          // 数据异步传入
          this.$emit('getCascaderData', {'serial': 1, 'params': this.results});
          return;
        }
        REGION_DATA.map(item => {
          if (item.value === data[0].value) {
            this.setDatas(2, item.children);
          }
        });
      },
      secondBack(picker, data) {
        if (!data || data.length === 0 || !data[0]) {
          return;
        }
        this.results[1] = data[0];
        if (this.options.level === 2) {
          // 二级级联
          return;
        }
        if (this.options.datas) {
          // 数据异步传入
          this.$emit('getCascaderData', {'serial': 2, 'params': this.results});
          return;
        }
        REGION_DATA.map(item => {
          if (item.value === this.results[0].value) {
            item.children.map(second => {
              if (second.value === data[0].value) {
                this.setDatas(3, second.children);
              }
            });
          }
        });
      },
      thirdBack(picker, data) {
        if (!data || data.length === 0 || !data[0]) {
          return;
        }
        this.results[2] = data[0];
      },
      setDatas(serial, datas) {
        // serial: 1（firstSlots）、2（secondSlots）、3（thirdSlots）
        let fields = ['first', 'second', 'third'];
        let defaultIndex = 0;
        if (serial === 1) {
          if (this.options.selected && this.options.selected.length > 0) {
            datas.map((item, index) => {
              if (item.text === this.options.selected[0].text || item.value === this.options.selected[0].value) {
                defaultIndex = index;
              }
            });
          }
        } else if (serial === 2) {
          if (this.options.selected && this.options.selected.length > 1) {
            datas.map((second, index) => {
              if (second.text === this.options.selected[1].text || second.value === this.options.selected[1].value) {
                defaultIndex = index;
              }
            });
          }
        } else if (serial === 3) {
          if (this.options.selected && this.options.selected.length > 1) {
            datas.map((third, index) => {
              if (third.text === this.options.selected[2].text || third.value === this.options.selected[2].value) {
                defaultIndex = index;
              }
            });
          }
        }
        this[fields[serial - 1] + 'Slots'] = [{
          flex: 1,
          defaultIndex: defaultIndex,
          values: datas
        }];
        this.$refs[fields[serial - 1] + 'Picker'].initSlots();
      }
    }
  };
</script>