<!--
  @name: 弹出复选框
  @description: -
  @author 张文
  @date: 2022-01-21
  TODO 超过最大可选量后的提示待优化
-->
<template>
  <ty-popup
    v-model="show"
    :title="title"
    :off-btn-text="$tyLanguage.get('wms_project.pda.common.cancel', '取消')"
  >


    <div class="ty-popup-checkbox-body">
      <!-- 搜索 -->
      <ty-input
        v-model="search"
        :placeholder="$tyLanguage.get('wms_project.pda.component.popupCheckbox.searchKeyword', '搜索关键字')"
        @confirm="searchFn"
      >
        <template #button>
          <ty-button
            mini
            round
            plain
            type="last"
            @click="clearInp"
          >{{ $tyLanguage.get('wms_project.pda.common.clear', '重置') }}</ty-button>
          <ty-button
            mini
            round
            @click="searchFn"
          >{{ $tyLanguage.get('wms_project.pda.common.search', '搜索') }}</ty-button>
        </template>
      </ty-input>

      <div v-if="selectDataList.length">

        <van-checkbox-group v-model="result" :max="max">
          <van-checkbox
            v-for="i in selectDataList"
            :key="i[valueKey]"
            :name="i[valueKey]"
          >{{ i[labelKey] }}</van-checkbox>
        </van-checkbox-group>
      </div>

      <div
        v-else style="margin-top: 10px"
        class="ty-global-flex-center ty-radio-not-data"
      >{{ $tyLanguage.get('wms_project.pda.component.popupCheckbox.notData', '没有可供选择的数据') }}</div>
    </div>

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

<script>

export default {
  name: "tyPopupCheckbox",
  props:{
    // 弹框显示
    value:{
      type:Boolean,
      default:false
    },
    // 标题
    title:String,
    // 提供选择的数据
    columns:Array,
    // 字典键值
    dictKey:String,
    // 显示的键值名
    labelKey:{
      type:String,
      default: 'label'
    },
    // 取值的键值名
    valueKey:{
      type:String,
      default: 'value'
    },
    // 最大可选数
    max:{
      type:Number,
      default:0
    },
    // 已选中的值
    selected:{
      type:Array,
      default:()=>[]
    }
  },
  computed:{
    show:{
      get(){
        return this.value
      },
      set(v){
        this.$emit('input', v)
      }
    }
  },
  watch:{
    show: {
      handler(n) {
        if (!n) return

        this.search = ''
        this.result = (this.selected && this.selected.map(i=>i)) || []

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

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

        this.searchFn()
      }
    }
  },
  data() {
    return {
      // 提供选择的初始数据
      selectDataInfo:[],
      // 有可供选择的数据
      selectDataList:[],
      // 选中的值
      result:[],

      // 搜索输入框
      search:''
    }
  },
  methods: {

    // 重置
    clearInp(){
      this.search = ''
      this.searchFn()
    },

    // 搜索
    searchFn(){
      this.selectDataList = this.selectDataInfo.filter(item=>item[this.labelKey].includes(this.search))
    },

    // 弹框确认
    confirm(){
      this.show=false

      const resultObj = this.result.map(item=>{
        const obj = this.selectDataInfo.filter(inItem=>{
          return inItem[this.valueKey] === item
        })
        if (obj.length){
          return obj[0]
        }
      })

      const resultLabel = resultObj.map(item=>item[this.labelKey]).join(',')

      this.$emit('confirm', this.result.join(','), resultLabel, resultObj )
    }
  }
}
</script>

<style scoped lang="less">

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

.ty-popup-checkbox-body{


  .ty-global-row{
    padding: 5px 0;
  }

  /deep/.van-checkbox{
    padding: 5px;
    font-size: 14px;

    &+.van-checkbox{
      //margin-top: 5px;
      border-top: solid 1px @borderColor;
    }
  }
}

</style>
