<template>
  <div class="page">
    <div class="demoName">
      <a class="icon" @click="$router.push({path:'/'})"></a>
      <div class="comp-title">Picker</div>
    </div>
    <h3>基本示例</h3>
    <List>
      <span slot="header">地址选择器：默认</span>
      <Item class="test-style" arrow="horizontal" @onClick="handleClick">
        <div slot="title">地址</div>
        <div slot="content">{{ pickedAddress }}</div>
      </Item>
    </List>
    <Picker
      ref="addressPicker"
      title="省份-城市-区域选择器"
      :visible.sync = "addressPickerShow"
      :columns="addressColumns"
      @confirm="addressConfirm"
      @change="onAddressChange"
    />
    <WhiteSpace size="lg" />
    <List>
      <span slot="header">地址选择器：省份-城市</span>
      <Item class="test-style" arrow="horizontal" @onClick="handleProvinceCityAddressPickerClick">
        <div slot="title">地址</div>
        <div slot="content">{{ pickedProvinceCityAddress }}</div>
      </Item>
    </List>
    <Picker
      ref="provinceCityAddressPicker"
      title="省份-城市选择器"
      :visible.sync = "provinceCityAddressPickedShow"
      :columns="provinceCityAddressColumns"
      @confirm="provinceCityAddressPickerConfirm"
      @change="onProvinceCityAddressChange"
    />
    <WhiteSpace size="lg" />
    <List>
      <span slot="header">星期选择器</span>
      <Item class="test-style" arrow="horizontal" @onClick="getWeekData">
        <div slot="title">日期</div>
        <div slot="content">{{weekDate}}</div>
      </Item>
    </List>
    <Picker
      ref="picker"
      title="星期选择器"
      :visible.sync = "weekPickerShow"
      :columns="weekCol"
      :visibleItemCount="5"
      @confirm="weekConfirm"
    />
  </div>
</template>

<script>

const provinces = ['广东省'];

// 获取某一省下的市
const getCities = (province) => {
  let cities = [];
  switch (province) {
    case '广东省':
      cities = ['广州市', '深圳市'];
      break;
    default:
      break;
  }
  return cities;
}

// 获取某一市下的区/县
function getAreas (province, city) {
  let areas = []
  if (province === '广东省') {
    switch(city) {
      case '广州市':
        areas = ['荔湾区', '越秀区', '海珠区', '天河区', '白云区', '黄埔区', '番禺区', '花都区', '南沙区', '从化区', '增城区']
        break;
      case '深圳市':
        areas = ['罗湖区', '福田区', '南山区', '宝安区', '龙岗区', '盐田区', '龙华区', '坪山区', '光明区'];
      break;
    }
  }
  return areas;
}

export default {
  data () {
    return {
      addressPickerShow: false,
      provinceCityAddressPickedShow: false,
      weekPickerShow: false,
      pickedAddress: '',
      pickedProvinceCityAddress: '',
      weekDate: '',
      addressColumns: [
        {
          values: provinces
        },
        {
          values: getCities('广东省')
        },
        {
          values: getAreas('广东省', '广州市')
        }
      ],
      provinceCityAddressColumns: [
        {
          values: provinces
        },
        {
          values: getCities('广东省')
        }
      ],
      weekColumns: [
        {
          values: [
            '星期一',
            '星期二',
            '星期三',
            '星期四',
            '星期五',
            '星期六',
            '星期日'
          ],
          defaultIndex: 0
        },
        {
          values: [
            '上午',
            '下午'
          ],
          defaultIndex: 0
        }
      ],
      weekCol: [
        [
          '星期一',
          '星期二',
          '星期三',
          '星期四',
          '星期五',
          '星期六',
          '星期日'
        ],
        [
          '上午',
          '下午'
        ]
      ]
    }
  },
  methods: {
    handleClick () {
      this.addressPickerShow = true
      console.log('handle list item click')
    },
    handleProvinceCityAddressPickerClick () {
      this.$refs.provinceCityAddressPicker.setColumnValue(0,
        this.pickedProvinceCityAddress.split(',')[0] !== '' ? this.pickedProvinceCityAddress.split(',')[0] : '广东省'
      );
      this.provinceCityAddressPickedShow = true;
    },
    addressConfirm (values) {
      this.pickedAddress = values.toString();
    },
    provinceCityAddressPickerConfirm (values) {
      this.pickedProvinceCityAddress = values.toString();
    },
    onAddressChange (picker, addressValues, slotIndex) {
      if (slotIndex === 0) {
        const cities = getCities(addressValues[0])
        picker.setColumnValues(1, cities)
        picker.setColumnValues(2, getAreas(addressValues[0], cities[0]))
      } else if (slotIndex === 1) {
        picker.setColumnValues(2, getAreas(addressValues[0], addressValues[1]))
      }
    },
    onProvinceCityAddressChange (picker, addressValues, slotIndex) {
      if (slotIndex === 0) {
        const cities = getCities(addressValues[0])
        picker.setColumnValues(1, cities)
        picker.setColumnValues(2, getAreas(addressValues[0], cities[0]))
      } else if (slotIndex === 1) {
        picker.setColumnValues(2, getAreas(addressValues[0], addressValues[1]))
      }
    },
    getWeekData () {
      this.weekPickerShow = true
    },
    weekConfirm (values) {
      const mon = ['1', '2', '3', '4', '5', '6']
      this.weekDate = values.toString()
      console.log(this.weekDate)
      const curCol = mon.splice(0, mon.indexOf(this.weekDate) + 1)
      console.log(curCol)
      console.log(mon)
      this.endCol = []
      this.endCol = [{
        values: mon,
        defaultIndex: 0
      }]
      console.log(this.endCol)
    }
  }
}
</script>