<!-- 业务组件 订单撤单 -->
<template>
  <div class="component_BTCPCancelOrder">
    <van-field
      v-model="currentPicker.valueName"
      readonly
      clickable
      clearable
      :name="item.label"
      :value="currentPicker.valueName"
      :label="item.label"
      right-icon="arrow"
      :required="item.props[0].required"
      :placeholder="`点击选择${item.label}`"
      :rules="rules(item.props[0], item.label)"
      @click="selectChange(item)"
    />
    <van-popup
      v-model="showPicker"
      position="bottom"
    >
      <van-picker
        show-toolbar
        :columns="options"
        :default-index="selectDeafultIndex"
        value-key="label"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { getDictByCode } from './../../api'

export default {
  name: 'BTCPCancelOrder',
  props: {
    item: {
      type: Object,
      required: true,
      default () {
        return {}
      }
    },
    isValidate: {
      type: Boolean,
      default () {
        return true
      }
    },
    // 校验规则
    rules: {
      type: Function,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      showPicker: false,
      options: [],
      selectDeafultIndex: 1,
      currentPicker: {}
    }
  },
  watch: {
    'item.props': {
      handler () {
        const value = this.item.props[0].value
        this.item.componentFeedback[0].value = [{
          CancelOrder: value
        }]
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    this.getOptionsAjax()
  },
  methods: {
    selectChange (info) {
      this.currentPicker = info
      this.showPicker = true
    },
    onConfirm (item, index) {
      this.currentPicker.valueName = item.label
      this.item.props[0].value = item.value
      this.showPicker = false
    },
    getOptionsAjax () {
      this.currentPicker.value = this.item.props[0].value
      getDictByCode('BTCPCancelOption').then(res => {
        if (res.code === 200) {
          this.options = (res.data || []).map(item => {
            return {
              label: item.paraValue,
              value: item.paraCode
            }
          })
          this.options.forEach((item, index) => {
            if (item.value === this.item.props[0].value) {
              this.selectDeafultIndex = index
              this.currentPicker.valueName = item.label
              this.item.props[0].value = item.value
            }
          })
          this.item.componentInfo.componentProps = [{
            belongAlias: 'SO_ExtendInfo',
            belongTo: '现场工单',
            propertyType: 'business',
            propertyDataType: 'String',
            propertyName: '订单撤单',
            propertyAlias: 'CancelOrder',
            dataInitAPI: '/authorityapi/ParamValue/ItemList?categoryCode=BTCPCancelOption',
            options: this.options
          }]
        }
      }).catch(() => {
      })
    }
  }
}
</script>
