<template>
  <div class="page-picker">
    <co-header fixed title="Picker">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <div class="page-datetime-wrapper co-wrapper">
        <co-cell title="点击选择出生年份" @click.native="open()"></co-cell>
      </div>
      <p class="page-picker-desc">出生年份: {{ year }}</p>

      <div class="page-datetime-wrapper co-wrapper">
        <co-cell title="点击选择在校时间" @click.native="open2()"></co-cell>
      </div>
      <p class="page-picker-desc">在校时间: {{ dateStart }} 至 {{ dateEnd }}</p>

      <div class="page-datetime-wrapper co-wrapper">
        <co-cell title="点击选择籍贯" @click.native="open3()"></co-cell>
      </div>
      <p class="page-picker-desc">籍贯: <span v-for="x in cascaderData1" v-text="x.text"></span></p>

      <div class="page-datetime-wrapper co-wrapper">
        <co-cell title="点击选择省市区，支持异步获取数据" @click.native="open4()"></co-cell>
      </div>
      <p class="page-picker-desc">省市区: <span v-for="x in cascaderData2" v-text="x.text"></span></p>

    </div>
    <cus-picker @confirm="pickerUpdate" ref="cusPicker"></cus-picker>
    <cus-cascader ref="regionCascader" @confirm="pickerCascaderUpdate" @getCascaderData="getCascaderData"></cus-cascader>
  </div>
</template>

<script type="es6">
  const REGION_DATA = require('../../coui-public/assets/regionData.json');
  export default {
    methods: {
      openRegion() {
        this.$refs.regionCascader.open();
      },
      open() {
        this.selectField = 'year';
        this.$refs.cusPicker.open({
          'datas': this.yearSlot,
          'selected': '2013'
        });
      },
      open2() {
        this.selectField = ['dateStart', 'dateEnd'];
        this.$refs.cusPicker.open({
          'datas': [this.yearSlot, this.yearSlot],
          'selected': ['2011', '2013'],
          'level': 2 // 是否2级，目前只支持2级
        });
      },
      open3() {
        this.selectField = 'cascaderData1';
        // 二级级联
        this.$refs.regionCascader.open({
          'selected': this.cascaderData1,
          'level': 2
        });
      },
      open4() {
        this.selectField = 'cascaderData2';
        // 三级级联
        this.$refs.regionCascader.open({
          'selected': this.cascaderData2,
          'level': 3,
          'datas': REGION_DATA.map(x => { return {'text': x.text, 'value': x.value}; })
        });
      },
      getCascaderData({serial, params}) {
        // serial-级联菜单的第几级，params-当前选中的值[{'value': '', 'text': ''}]
        let datas = [];
        // 异步获取数据
        REGION_DATA.map(item => {
          if (item.value === params[0].value) {
            if (serial === 1) {
              // 获取第二级的数据
              datas = item.children;
            } else if (serial === 2) {
              // 获取第三级的数据
              item.children.map(second => {
                if (second.value === params[1].value) {
                  datas = second.children;
                }
              });
            }
          }
        });
        this.$refs.regionCascader.setDatas(serial + 1, datas);
      },
      pickerUpdate(result) {
        if (typeof this.selectField === 'string') {
          this[this.selectField] = result.text;
        } else if (typeof this.selectField === 'object') {
          this.selectField.map((x, index) => {
            this[x] = result[index].text;
          });
        }
      },
      pickerCascaderUpdate(datas) {
        // 级联菜单返回
        this[this.selectField] = datas;
      }
    },
    created() {},
    data() {
      return {
        selectField: '',
        year: '',
        yearSlot: [
          {
            'value': '2010',
            'text': '2010'
          },
          {
            'value': '2011',
            'text': '2011'
          },
          {
            'value': '2012',
            'text': '2012'
          },
          {
            'value': '2013',
            'text': '2013'
          },
          {
            'value': '2014',
            'text': '2014'
          }
        ],
        dateStart: '',
        dateEnd: '',
        cascaderData1: [],
        cascaderData2: []
      };
    }
  };
</script>

<style lang="less">
  .page-picker {
    .wrapper {
      padding: 1rem .5rem;
    }
    .page-picker-wrapper {
      background-color: #fff;
      text-align: center;
      bottom: 0;
      z-index: 2001;
      width: 100%;
    }

    .page-picker-desc {
      margin: 10px 0 50px;
    }
  }
</style>
