<template>
  <a-button
    :disabled="record.options.disabled"
    :type="record.options.type"
    @click="openModal"
    v-text="$locale(record.name)"
  >
    <view-select-modal
      ref="modal"
      :multi="multi"
      :viewCode="viewCode"
      :rows="rows"
      :keys="keys"
      :labelField="labelField"
      :fks="fks"
      @ok="handleOK"/>
  </a-button>
</template>
<script>

  import ViewSelectModal from '../../packages/components/viewSelect/ViewSelectModal'
  import LocleUtil from "../utils/LocleUtil";

  export default {
    name: 'PageButton',
    props: {
      record: Object,
      form: {
        type: Object,
        default: () => {
        }
      }
    },
    components: {
      ViewSelectModal
    },
    data() {
      return {
        multi: this.record.options.page.multiple,
        viewCode: this.record.options.page.viewCode,
        fields: this.record.options.page.fields,
        fkFields: this.record.options.page.fkFields,
        parameterConfig: this.record.options.page.parameterConfig || [],
        labelField: 'id',
        rows: [],
        keys: [],
        fks: []
      }
    },
    methods: {
      $locale(params) {
        return LocleUtil.getLocale(params)
      },
      openModal() {
        if (!this.viewCode) {
          this.$message.warning(this.$locale('m.eform.formDesign.label.qing-xian-pei-zhi-ye-mian-bian-ma'))
          return
        }
        if (!this.labelField) {
          this.$message.warning(this.$locale('m.eform.formDesign.label.qing-xian-pei-zhi-xian-shi-zi-duan'))
          return
        }
        this.fks = []
        if (this.fkFields && this.fkFields.length > 0) {
          this.fkFields.forEach(item => this.getFieldValue(item))
        }

        let parameterValue = [];
        if(this.parameterConfig && this.form){
          let success = true;
          parameterValue = this.parameterConfig.map(item => {
            let value = null;
            if (item.outKey) {
              value = this.form.getFieldValue(item.outKey)
            }
            if (!value && item.defaultValue) {
              value = item.defaultValue
            }
            if (!value && item.isRequired) {
              this.$message.warning(item.customMessage || this.$locale('m.eform.formDesign.label.Not_allowed_to_be_empty', [item.parameterKey]))
              success = false
            }
            return {
              colCode: item.parameterKey,
              queryValue: value
            }
          })
          if (!success) {
            return
          }
        }

        this.$refs.modal.show(parameterValue)
      },
      getFieldValue(item) {
        this.$emit('getFieldValue', item.to, (value) => {
          const fk = {
            colCode: item.from,
            queryValue: value
          }
          this.fks.push(fk)
        })
      },
      handleOK(rows) {
        if (this.fields && this.fields.length > 0) {
          for (let i = 0; i < this.fields.length; i++) {
            const item = this.fields[i]
            if (!item.from || !item.to) {
              continue
            }
            let toValue = ''
            if (rows && rows.length > 0) {
              toValue = rows.map(row => row[item.from]).join(',')
            }
            this.$emit('setFieldValue', item.to, toValue)
          }
        }
      }
    }
  }
</script>
