# 7.4 选择器

<template>
  <div class="wrapper">
    <dof-minibar
      title="Picker"
      background-color="#267AFF"
      text-color="#ffffff"
      :is-image="true"
      :left-button="leftButton"
    ></dof-minibar>
    <scroller class="scroller">
      <title title="Picker"></title>
      <category title="使用案例"></category>
      <div class="wrapper-main">
        <text class="subTitle">选择城市（单列选择）</text>
        <dof-cell title="城市" 
                  :has-top-border="true" 
                  :has-bottom-border="true" 
                  :right-text="city ? city : '请选择城市'" 
                  @dofCellClicked="pickCity">
        </dof-cell>

        <text class="subTitle">选择温度（单列选择）</text>
        <dof-cell  title="温度"
                  :has-top-border="true" 
                  :has-bottom-border="true" 
                  :right-text="tempreture ? tempreture + '℃' : '请选择温度'"
                  @dofCellClicked="pickTempreture">
        </dof-cell>

        <text class="subTitle">选择属性（多列选择）</text>
        <dof-cell title="属性" 
                  :has-top-border="true" 
                  :has-bottom-border="true" 
                  :right-text="attribute" 
                  @dofCellClicked="pickAttribute">
        </dof-cell>

        <text class="subTitle">选择地址（多列选择级联）</text>
        <dof-cell title="属性" 
                  :has-top-border="true" 
                  :has-bottom-border="true" 
                  :right-text="cascadedDesc" 
                  @dofCellClicked="pickCascade">
        </dof-cell>

        <text class="subTitle">选择日期</text>
        <dof-cell title="日期" 
                  :has-top-border="true" 
                  :has-bottom-border="true" 
                  :right-text="date ? date : '请选择日期'" 
                  @dofCellClicked="pickDate">
        </dof-cell>
        <text class="subTitle">选择日期</text>
        <dof-cell title="时间" 
                  :has-top-border="true" 
                  :has-bottom-border="true" 
                  :right-text="time ? time : '请选择时间'" 
                  @dofCellClicked="pickTime"> 
        </dof-cell>
      </div>
    </scroller>
  </div>
</template>

<script>
import { DofMinibar, DofCell } from 'dolphin-weex-ui'
import Category from 'src/_mods/catalog'
import Title from 'src/_mods/title.vue'
const modal = weex.requireModule('modal')
const picker = weex.requireModule('picker')

export default {
  components: {
    DofMinibar,
    DofCell,
    Title,
    Category
  },
  data() {
    return {
      leftButton: '/assets/image/header/back_white@2x.png',
      // index: 0,
      city: '', //city
      cityIndex: 0, //cityIndex
      tempreture: '110', //温度
      tempretureIndex: 0, //温度索引
      attribute: '请选择属性', //属性选择结果
      colorIndex: 0, //属性选择索引
      sizeIndex: 0, //属性选择索引
      cascadedDesc: '请选择属性', //地址选择
      cascadedItem: [{ id: '' }, { id: '' }, { id: '' }], //默认值  地址

      date: '', //日期选择
      time: '' //时间选择
    }
  },
  methods: {
    pickCity() {
      const items = ['北京', '上海', '广州', '深圳', 'NewYork', 'Tokyo', 'Paris', 'Milano']
      var that = this
      var pickItem = [
        {
          index: that.cityIndex,
          item: items,
          label: ''
        }
      ]
      picker.pick(
        {
          items: pickItem,
          headTitle: '选择城市', //标题 6.5.1支持
          cancelTxt: '取消', //取消按钮文字
          confirmTxt: '确定', //确定按钮文字,
          cancelTxtColor: '#000000', //取消颜色
          confirmTxtColor: '#000000', //标题颜色
        },
        event => {
          if (event.result == 'success') {
            var dataArr = event.data
              .replace('[', '')
              .replace(']', '')
              .split(',')
            that.cityIndex = dataArr[0]
            that.city = items[dataArr[0]]
          }
          modal.toast({
            message: `您选择了第${that.cityIndex}个城市,名字为${that.city}}`
          })
        }
      )
    },

    pickTempreture() {
      const items = ['106', '107', '108', '109', '110', '111', '112', '113', '114', '115']
      var that = this
      var pickItem = [
        {
          index: that.tempretureIndex,
          item: items,
          label: '℃'
        }
      ]
      picker.pick(
        {
          items: pickItem,
          headTitle: '选择温度', //标题
          cancelTxt: '取消', //取消按钮文字
          confirmTxt: '确定', //确定按钮文字,
          cancelTxtColor: '#000000', //取消颜色
          confirmTxtColor: '#000000', //标题颜色
        },
        event => {
          if (event.result == 'success') {
            var dataArr = event.data
              .replace('[', '')
              .replace(']', '')
              .split(',')
            that.tempretureIndex = dataArr[0]
            that.tempreture = items[dataArr[0]]
          }

          modal.toast({
            message: `您选择了第${that.tempretureIndex}个温度,温度为${that.tempreture}}`
          })
        }
      )
    },

    pickAttribute() {
      const itemsColor = ['红色', '白色', '粉色']
      const itemsSize = ['XL', 'L', 'M', 'S']
      var that = this
      var pickItem = [
        {
          index: that.colorIndex,
          item: itemsColor,
          label: '颜色'
        },
        {
          index: that.sizeIndex,
          item: itemsSize,
          label: '尺寸'
        }
      ]
      picker.pick(
        {
          items: pickItem,
          headTitle: '选择颜色和尺寸', //标题
          cancelTxt: '取消', //取消按钮文字
          confirmTxt: '确定', //确定按钮文字,
          cancelTxtColor: '#000000', //取消颜色
          confirmTxtColor: '#000000', //标题颜色
        },
        event => {
          if (event.result == 'success') {
            var data = event.data
            var dataArr = data
              .replace('[', '')
              .replace(']', '')
              .split(',')
            that.colorIndex = dataArr[0]
            that.sizeIndex = dataArr[1]
            that.attribute = itemsColor[dataArr[0]] + ',' + itemsSize[dataArr[1]]
          }
          modal.toast({
            message: `that.colorIndex:${that.colorIndex},that.sizeIndex:${that.sizeIndex},that.attribute:${that.attribute}}`
          })
        }
      )
    },

    pickCascade() {
      let pickCascadeItem = [
        {
          index: this.cascadedItem[0].id || 2,
          label: '省'
        },
        {
          index: this.cascadedItem[1].id || 22,
          label: '市'
        },
        {
          index: this.cascadedItem[2].id || 222,
          // label: "区/县",
          label: ''
        }
      ]
      let pickItemMap = [
        { id: 1, pId: 0, name: '北京' },
        { id: 101, pId: 1, name: '北京' },
        { id: 1011, pId: 101, name: '朝阳区' },
        { id: 1012, pId: 101, name: '密云区' },
        { id: 2, pId: 0, name: '广东' },
        { id: 201, pId: 2, name: '广州' },
        { id: 2011, pId: 201, name: '天河区' },
        { id: 2012, pId: 201, name: '越秀区' },
        { id: 202, pId: 2, name: '深圳' },
        { id: 2021, pId: 202, name: '罗湖区' },
        { id: 2022, pId: 202, name: '福田区' },
        { id: 3, pId: 0, name: '广西' },
        { id: 301, pId: 3, name: '南宁' },
        { id: 3011, pId: 301, name: '宾阳县' },
        { id: 3012, pId: 301, name: '横县' },
        { id: 302, pId: 3, name: '北海' },
        { id: 3021, pId: 302, name: '海城区' },
        { id: 3022, pId: 302, name: '银海区' }
      ]
      picker.pickCascade(
        {
          items: pickCascadeItem,
          itemMaps: pickItemMap,
          headTitle: '选择地址', //取消和确定中间那标题
          cancelTxt: '取消', //取消按钮文字
          confirmTxt: '确定', //确定按钮文字,
          cancelTxtColor: '#000000', //取消颜色
          confirmTxtColor: '#000000', //标题颜色
          columnRatios:[1,2,3]   //各列的比例关系
        },
        event => {
          if (event.result == 'success') {
            this.cascadedItem = JSON.parse(event.data)
            let tempStr = ''
            for (let i = 0; i < this.cascadedItem.length; i++) {
              tempStr += this.cascadedItem[i].name + ','
            }
            this.cascadedDesc = tempStr.substring(0, tempStr.length - 1)
          }

          modal.toast({
            message: `cascadedDesc:${that.cascadedDesc}`
          })
        }
      )
    },

    pickDate() {
      var self = this
      picker.pickDate(
        {
          value: this.date || '2016-11-28',
          max: '2029-11-28',
          min: '2015-11-28',
          headTitle: '选择日期', //标题
          cancelTxt: '取消', //取消按钮文字
          confirmTxt: '确定', //确定按钮文字,
          cancelTxtColor: '#000000', //取消颜色
          confirmTxtColor: '#000000', //标题颜色
          columnRatios: [3, 1, 2]
        },
        event => {
          var result = event.result
          if (result == 'success') {
            self.date = event.data
          }
        }
      )
      modal.toast({
        message: `self.date:${self.date}`
      })
    },

    pickTime() {
      picker.pickTime(
        {
          value: this.time,
          headTitle: '选择时间', //标题
          cancelTxt: '取消', //取消按钮文字
          confirmTxt: '确定', //确定按钮文字,
          cancelTxtColor: '#020F13', //取消颜色
          confirmTxtColor: '#020F13', //标题颜色
        },
        event => {
          if (event.result === 'success') {
            this.time = event.data
          }

          modal.toast({
            message: `this.time:${this.time}`
          })
        }
      )
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 750px;
}
</style>