<template>
    <a-modal title="拓展字段"  v-model="isShow" @ok="saveExt()" @cancel="isShow = !isShow" >
      <a-form class="protalForm" :form="formExt" >
        <a-form-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24}" >
          <p style="color:red" v-if="isAll">提示: 修改全部的操作量较大,页面数据可能会有些许延迟,请刷新页面</p>
        </a-form-item>
        <a-form-item v-for="(item,k) in extList" :key="k" :label="item.keyName" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
          <a-select v-if="item.compntType == 'select'" v-decorator="[item.keyCode]" @change="handleChangezz(item)">
            <a-select-option v-for="(i) in JSON.parse(item.sltJson)" :key="i" :value="i">{{i}}</a-select-option>
          </a-select>
          <a-checkbox-group  v-else-if="item.compntType =='checkbox'" v-decorator="[item.keyCode]">
            <a-checkbox v-for="(i) in JSON.parse(item.sltJson)" :key="i" :value="i">{{i}}</a-checkbox>
          </a-checkbox-group>
          <a-radio-group v-else-if="item.compntType == 'radio'" v-decorator="[item.keyCode]" >
            <a-radio v-for="(i) in JSON.parse(item.sltJson)" :key="i" :value="i">{{i}}</a-radio>
          </a-radio-group>
          <a-date-picker v-else-if="item.compntType =='date'"  v-decorator="[item.keyCode]"  />
          <a-input v-else-if="item.compntType == 'num'" v-decorator="[item.keyCode,{validateTrigger:'blur',rules: [{validator: $com.validateNum}]}]" />
          <a-input v-else-if="item.compntType == 'double-1'" v-decorator="[item.keyCode,{validateTrigger:'blur',rules: [{validator: $com.validateNum1}]}]" />
          <a-input v-else-if="item.compntType == 'double-2'" v-decorator="[item.keyCode,{validateTrigger:'blur',rules: [{validator: $com.validateNum2}]}]" />
          <a-input v-else v-decorator="[item.keyCode,]" />
        </a-form-item>
        <p v-if="extList.length < 1 ">拓展信息列表为空</p>
      </a-form>
    </a-modal>
</template>

<script>
export default {
  name: 'zdyModal',
  props: {
    tbl: { // 表名
      type: String,
      default: '',
    },
    extList: { // 表单的数据
      type: Array,
      default() {
        return []
      },
    },
    isAll: { //  是否全量修改
      type: Boolean,
      default: false,
    },
    resourceId: { // 单条修改的id
      type: String,
      default: '',
    },
    isSingle: { // 是否单条修改
      type: Boolean,
      default: true,
    },
    searchParams: {
      type: Object,
      default(){
        return {}
      },
    },
    selectedRowKeys: { // 选中的几条数据
      type: Array,
      default() {
        return []
      },
    }
  },
  data() {
    return {
      formExt: this.$form.createForm(this),
      isShow: false,
      formExtParams: {},
    }
  },
  methods: {
    saveExt() { // 配置当前表格的自定义字段
      this.formExt.validateFields((err, values) => {
        if (!err) {
          const params = {}
          params.tbl = this.tbl
          for(const k in values){ // 如果是复杂类型就转成字符串(checkbox的选项是数组)

            if ( Object.prototype.toString.call(values[k]) === '[object Object]') {
              values[k] = this.$moment(values[k]).format('YYYY-MM-DD')
            }else if( Object.prototype.toString.call(values[k]) === '[object Array]'){
              values[k] = values[k].join(',')
            }else if( values[k] == ''){
              values[k] = undefined
            }
          }
          params.extJson= JSON.stringify(values) // 表单数据改json格式字符串

          // 是单个还是批量
          if (this.isSingle) {
            params.resourceId=this.resourceId // 根据不同情况修改 资源id是单个还是数组
            this.$emit('saveSingleKeys', params)
          } else {
            params.isAll = this.isAll // 是否全部操作
            if (this.isAll) { // 全部操作需要带上父级的搜索条件,
              delete this.searchParams.token
              params.params = this.searchParams
            }else{
              params.resourceIds = this.selectedRowKeys // 不是全部操作就要加上选中id的数组
            }
            this.$emit('saveSomeKeys', params)
          }
          this.isShow = false
        }
      })
    },
    handleChangezz(value) { 
    },
    seeData(){ // 数据回显
      this.formExtParams = {}
      this.extList.forEach(col => {
        let value = col.keyVal ? col.keyVal : col.defVal
        if (value != '' ) {
          if ( value != '' && col.compntType== 'checkbox' ) {
            value = value.split(',')
          }
          if (col.compntType== 'date' && value != '' ) {
            value = this.$moment(value)
          }
        }
        this.$set(this.formExtParams,
          col.keyCode, value
        )
      })
      this.$nextTick(() => {
        this.formExt.setFieldsValue(this.formExtParams)
      })
    },
  }
}
</script>

<style scoped>

</style>
