<!--
  @name: 单选弹框，字典单选
  @description: -
  @author 张文
  @date: 2022-01-21
-->
<template>
  <ty-popup
    v-model="show"
    :title="title"
    height="auto"
    :off-btn-text="$tyLanguage.get('wms_project.pda.common.cancel', '取消')"
  >
    <van-picker
      ref="picker"
      v-if="selectData.length"
      :columns="selectData"
      :value-key="labelKey"
      :visible-item-count="3"
      @confirm="pickerConfirm"
    />
    <ty-not-data v-else />

    <template #button>
      <ty-button
        v-if="selectData.length"
        @click="confirm"
      >{{ $tyLanguage.get('wms_project.pda.common.confirm', '确定') }}</ty-button>
    </template>
  </ty-popup>
</template>

<script>

export default {
  name: "tyPopupRadio",
  props:{
    // 弹框显示
    value:{
      type:Boolean,
      default:false
    },
    // 标题
    title:String,
    // 提供选择的值
    columns:Array,
    // 字典键值
    dictKey:String,
    // 显示的键值名
    labelKey:{
      type:String,
      default: 'label'
    },
    // 取值的键值名
    valueKey:{
      type:String,
      default: 'value'
    },
  },
  computed:{
    show:{
      get(){
        return this.value
      },
      set(v){
        this.$emit('input', v)
      }
    }
  },
  watch:{
    show: {
      handler(n) {
        if (!n) return

        if (Array.isArray(this.columns)) {
          this.selectData = this.columns
        } else {
          const list = this.$tyDict.get(this.dictKey)

          if (!list || !list.length){
            console.error('获取字典数据失败，请检查字典数据是否正确写入')
            this.selectData = []
            return
          }
          this.selectData = list
        }

      }
    }
  },
  data() {
    return {
      // 提供选择的数据
      selectData:[],
    }
  },
  methods: {

    // 确定按钮点击
    confirm(){
      this.$refs.picker.confirm()
    },
    // 滑块确认
    pickerConfirm(item){

      this.$emit('confirm', item)

      this.show=false
    }
  }
}
</script>

<style scoped lang="less">

@import "../../assets/css/var.less";

.ty-radio-not-data{
  width: 100%;
  height: 100%;
  color: #ccc;
}

</style>
