<template>
  <bxs-bottom-sheets
    v-model="isShow"
    :prevent-scroll-through="true"
    @after-leave="$emit('after-leave')"
    >
    <div
      slot="header"
      class="bx-picker-sheets-header"
      >
      <div
        class="bx-picker-header bx-hairline--bottom"
        v-if="showToolbar"
        >
        <p
          class="bx-picker-cancel"
          @click="cancel()"
          >
          取消
        </p>
        <p class="bx-picker-title">
          {{ title }}
        </p>
        <p
          class="bx-picker-sure"
          @click="sure()"
          >
          确定
        </p>
      </div>
    </div>
    <bxs-picker
      @change="change"
      @confirm="confirm"
      :picker-data="pickerData"
      :value="defaultValue"
      :value-key="valueKey"
      ref="bxsPicker"
      />
  </bxs-bottom-sheets>
</template>
<script>
import { create } from '../utils/index'
import picker from './picker'
import bottomSheets from '../bottom-sheets'

export default create({
  name: 'pop-picker',
  props: {},
  data() {
    return {
      isShow: false,
      title: '',
      showToolbar: true,
      pickerData: [],
      defaultValue: '',
      value: '',
      findValue: '',
      index: '',
      indexs: '',
      pickerObj: {},
      valueKey: 'text',
      isChange: false,
    }
  },
  computed: {},
  methods: {
    cancel() {
      this.isShow = false
      this.$emit('cancel', false)
    },
    confirm(pickerObj, value, index, indexs) {
      this.isShow = false
      this.pickerObj = pickerObj
      this.findValue = value
      this.index = index
      this.indexs = indexs
      this.$emit(
        'confirm',
        this.pickerObj,
        this.findValue,
        this.index,
        this.indexs,
      )
    },
    sure() {
      if (!this.isChange) {
        this.$refs.bxsPicker.confirm()
        return
      }
      this.isShow = false
      this.$emit(
        'confirm',
        this.pickerObj,
        this.findValue,
        this.index,
        this.indexs,
      )
    },
    change(pickerObj, value, index, indexs) {
      this.isChange = true
      this.pickerObj = pickerObj
      this.findValue = value
      this.index = index
      this.indexs = indexs
      this.$emit('change', pickerObj, value, index, indexs)
    },
  },
  watch: {
    value(n) {
      this.$emit('input', n)
    },
  },
  components: {
    [picker.name]: picker,
    [bottomSheets.name]: bottomSheets,
  },
})
</script>
<style lang="postcss">
@import './index.css';
</style>
