<template>
  <div>
    <!--      单选择  -->
    <select-table v-if="!multiple" clearable :trigger="trigger" :placeholder="placeholder" @changeRow="$emit('changeRow', $event)"
      @change="change" v-model="value" :label="label" :data="data" :tableColumn="tableColumn" :valueField="valueField"
      :labelField="labelField" :disabled="disabled" :layout="layout" :page-size="pageSize" :current-page.sync="page"
      :width="width"></select-table>
    <!--      多选择  -->
    <multiSelectTable v-else-if="multiple" clearable :trigger="trigger" :placeholder="placeholder" @changeRow="$emit('changeRow', $event)"
      @change="change" v-model="value" :label="label" :data="data" :tableColumn="tableColumn" :valueField="valueField"
      :labelField="labelField" :disabled="disabled" :layout="layout" :page-size="pageSize" :current-page.sync="page"
      :width="width"></multiSelectTable>
  </div>
</template>
<script>
import selectTable from '@/components/Chain/SelectTable/SelectTable'
import multiSelectTable from '@/components/Chain/SelectTable/MultiSelectTable'

export default {
  name: "ChainSelect",
  components: { selectTable, multiSelectTable },
  data() {
    return {
      value: undefined,
      layout: 'prev, pager, next',
      page: 1,
      pageSize: 5,
    }
  },

  props: {
    selectVal: {
      type: String,
      desc: '值，多选时多个值发逗号隔开',
    },
    label: {
      type: String,
      desc: '回显值，多选时多个值发逗号隔开',
    },
    width: {
      type: String,
      default: '100%',
      desc: '输入框宽度，默认100%',
    },
    disabled: {
      type: Boolean,
      default: false,
      desc: '是否禁用输入',
    },
    placeholder: {
      type: String,
      default: '请选择',
      desc: '占位符',
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
      desc: '外部列表数据，默认为空数组.',
    },
    tableColumn: {
      default: () => {
        return [];
      },
      desc: '列表显示字段',
    },
    valueField: {
      type: String,
      desc: '取值',
    },
    labelField: {
      type: String,
      desc: '回显字段',
    },
    trigger: {
      type: Boolean,
      default: false,
      desc: '是否触发多次change事件。默认修改后触发一次回显不在触发，可按需求开启。'
    },
    multiple: {
      type: Boolean,
      default: false,
      desc: '是否多选，默认单选。开启多选在组件上加 multiple 此属性',
    }
  },
  model: {
    event: "change",
    prop: "selectVal"
  },
  watch: {
    selectVal: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.value = newVal;
      }
    },
  },
  methods: {
    /**事件回调返回value**/
    change(val) {
      this.$emit('change', val)
    },
  }
}
</script>

<style scoped></style>
