<template>
  <div>
    <view-select-tag
      :disabled="disabled"
      :placeholder="placeholder"
      :multi="multi"
      :viewCode="viewCode"
      :keyField="keyField"
      :labelField="labelField"
      :fields="fields"
      @setFieldValue="setFieldValue"
      @setName="setName"
      v-model="value"
      v-show="!disabled"
      :parameterConfig="parameterConfig"
      :record="record"
      :form="form"
    />
    <span v-show="disabled">{{ name }}</span>
  </div>
</template>
<script>


  import ViewSelectTag from "../viewSelect/ViewSelectTag.vue";

  export default {
    name: 'SubTablePageButton',
    props: {
      record: Object,
      disabled: Boolean,
      property: String,
      showConfigString: String,
      // 表单对象
      form: {
        type: Object,
        default: () => {
        }
      },
    },
    components: {
      ViewSelectTag
    },
    data() {
      return {
        placeholder: null,
        multi: false,
        viewCode: null,
        keyField: null,
        labelField: null,
        fields: [],
        value: this.record[this.property],
        name: null,
        parameterConfig: []
      }
    },
    created() {
      const showConfig = JSON.parse(this.showConfigString || '{}')
      this.multi = showConfig.multiple
      this.viewCode = showConfig.viewCode
      this.keyField = showConfig.keyField
      this.labelField = showConfig.labelField
      this.fields = showConfig.fields
      this.placeholder = showConfig.placeholder
      this.parameterConfig = showConfig.parameterConfig
    },
    methods: {
      setFieldValue(key, value) {
        this.$emit('setFieldValue', key, value, this.record)
      },
      setName(name){
        this.name = name
      }
    },
    watch: {
      value(value) {
        this.$emit('setFieldValue', this.property, value, this.record)
      }
    }
  }
</script>
