<!--
  行加单选弹出框
  @author: 张文
  @date: 2022-03-09
-->
<template>
  <div>
    <ty-cell
      :title="title"
      v-model="label"
      :form-value.sync="val"
      :submit-value="false"
      :placeholder="placeholder"
      :is-link="!disabled"
      :required="required"
      :name="name"
      :is-edit="!disabled"
      :border="border"
      @click="showPopup = true"
      @clear="$emit('clear')"
    />

    <ty-popup-radio
      v-model="showPopup"
      :title="popupTitle || title"
      :columns="columns"
      :dict-key="dictKey"
      :label-key="labelKey"
      :value-key="valueKey"
      @confirm="popupConfirm"
    />
  </div>
</template>

<script>

export default {
  name: "tyCellPopupRadio",
  props:{
    // 递交的初始数据
    value: String,
    // 行的title
    title: String,
    // 行占位提示文字
    placeholder: String,
    // 是否禁用
    disabled:{
      type: Boolean,
      default: false
    },
    // 是否显示必填星号
    required:{
      type: Boolean,
      default: false
    },
    // 表单提交时的key
    name:String,
    // 是否显示下边框
    border:{
      type:Boolean,
      default: true
    },



    // 弹框的title
    popupTitle: String,
    // 提供选择的数据
    columns: Array,
    // 取值字典时的key
    dictKey: String,
    // 单选显示的值的key
    labelKey: {
      type:String,
      default: 'label'
    },
    // 单选选中的值的key
    valueKey: {
      type: String,
      default: 'value'
    },
  },
  computed:{
    val:{
      get(){
        return this.value
      },
      set(v){
        this.$emit('input', v)
      }
    },
    // 右侧显示的数据
    label:{
      get(){
        if (!this.val) return ''

        if (this.columns) return this.getLabel(this.columns)

        const list = this.dictKey && this.$tyDict.get(this.dictKey)
        if (Array.isArray(list)) return this.getLabel(list)

        return this.val
      },
      set() {}
    }
  },
  data() {
    return {
      // 显示弹出层
      showPopup: false,
    }
  },
  methods: {
    // 获取label的显示值
    getLabel(arr=[]){
      for (let i = 0; i < arr.length; i++) {
        if(arr[i][this.valueKey] === this.val){
          return arr[i][this.labelKey]
        }
      }
      return ''
    },

    // 弹出层点击确定
    popupConfirm(item){
      this.label = item[this.labelKey]
      this.val = item[this.valueKey]
      this.$emit('confirm', item)
    }
  }
}
</script>

<style scoped lang="less">

</style>
