<template>
  <section v-if="active" class="pick-bottom">
    <van-picker
    show-toolbar
    :title="title"
    :columns="columns"
    :default-index="defaultIndex"
    @cancel="onCancel"
    @confirm="onConfirm"
    />
    <transition name="fade">
      <div class="overlay" @click="onCancel"></div>
    </transition>
  </section>
</template>

<script>
import { Picker } from 'vant'
import {deviceQuery, workprocedureQuery, instStatusQuery} from '@config/getData1'
export default {
  name: 'Picker',
  components: {
    [Picker.name]: Picker
  },
  props: {
    active: Boolean,
    title: String,
    api: String,
    selectItem: Object,
    pickerArr: Array
    // defaultIndex: {
    //   type: Number,
    //   default: 0
    // }
  },
  computed: {
    defaultIndex () {
      return this.columns.findIndex(item => {
        return item.id === this.selectItem.id
      })
    }
  },
  data () {
    return {
      columns: []
    }
  },
  created () {
    if (!this.api && this.pickerArr.length > 0) {
      this.columns = this.pickerArr
    }
    switch (this.api) {
      case 'deviceQuery':
        this._deviceQuery()
        break
      case 'workprocedureQuery':
        this._workprocedureQuery()
        break
      case 'instStatusQuery':
        this._instStatusQuery()
        break
      case 'layerArr':
        this._layerArr()
        break
      case 'seatArr':
        this._seatArr()
        break
    }
  },
  methods: {
    async _deviceQuery () {
      let res = await deviceQuery()
      if (res.code === '1') {
        this.columns = res.result
      } else {
        this.Dialog(res.desc)
      }
    },
    // _deviceQuery () {
    //   this.columns = [{id: '01', text: '缓存线1'}, {id: '02', text: '缓存线2'}, {id: '03', text: '缓存线3'}]
    // },
    async _workprocedureQuery () {
      let res = await workprocedureQuery()
      if (res.code === '1') {
        this.columns = res.result
      } else {
        this.Dialog(res.desc)
      }
    },
    // _workprocedureQuery () {
    //   this.columns = [{id: '1', text: '工序1'}, {id: '2', text: '工序2'}, {id: '3', text: '工序3'}]
    // },
    async _instStatusQuery () {
      let res = await instStatusQuery()
      if (res.code === '1') {
        this.columns = res.result
      } else {
        this.Dialog(res.desc)
      }
    },
    // _instStatusQuery () {
    //   this.columns = [{id: '1', text: '状态1'}, {id: '2', text: '状态2'}, {id: '3', text: '状态3'}]
    // },
    _layerArr () {
      this.columns = [{id: '1', text: '1'}, {id: '2', text: '2'}, {id: '3', text: '3'}]
    },
    _seatArr () {
      this.columns = [{id: '1', text: '1'}, {id: '2', text: '2'}, {id: '3', text: '3'}, {id: '4', text: '4'}, {id: '5', text: '5'}, {id: '6', text: '6'}, {id: '7', text: '7'}, {id: '8', text: '8'}, {id: '9', text: '9'}, {id: '10', text: '10'}]
    },
    onConfirm (value, index) {
      this.$emit('onConfirmCallback', value)
      // this.columns.defaultIndex = index
    },
    onCancel () {
      this.$emit('onCancelCallback')
    }
  }
}
</script>

<style lang="stylus" scoped>
.pick-bottom >>> .van-ellipsis
  font-size 14px
.pick-bottom
  position fixed
  width 100%
  bottom 0
  z-index 2018
.van-picker
  z-index 2018
.overlay
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  background-color rgba(0, 0, 0, 0.7)
  z-index 2012
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fade-enter-active
  animation 0.3s fade-in
.fade-leave-active
  animation 0.3s fade-out
</style>
