<template>
  <p-grid-form ref="form"
               :span="span"
               :labelCol="{ span: labelSpan }"
               :wrapperCol="{ span: wrapperSpan }"
               :items="queryFormItems" />
</template>

<script>
// 定义一个深拷贝函数  接收目标target参数
const deepClone = function(target) {
  // 定义一个变量
  let result
  // 如果当前需要深拷贝的是一个对象的话
  if (typeof target === 'object') {
    // 如果是一个数组的话
    if (Array.isArray(target)) {
      result = [] // 将result赋值为一个数组，并且执行遍历
      for (let i in target) {
        // 递归克隆数组中的每一项
        result.push(deepClone(target[i]))
      }
      // 判断如果当前的值是null的话；直接赋值为null
    } else if (target === null) {
      result = null
      // 判断如果当前的值是一个RegExp对象的话，直接赋值
    } else if (target.constructor === RegExp) {
      result = target
    } else {
      // 否则是普通对象，直接for in循环，递归赋值对象的所有值
      result = {}
      for (let i in target) {
        result[i] = deepClone(target[i])
      }
    }
    // 如果不是对象的话，就是基本数据类型，那么直接赋值
  } else {
    result = target
  }
  // 返回最终结果
  return result
}
export default {
  name: "PQueryForm",
  props: {
    items: {
      type: Array,
      default: null,
    },
    colNum: {
      type: Number,
      default: 3,
    },
    labelSpan: {
      type: Number,
      default: 10,
    },
    wrapperSpan: {
      type: Number,
      default: 12,
    },
  },

  watch: {
    items: {
      handler(queryItems) {
        if (!queryItems) return;
        this.queryItems = queryItems;
        this.init(queryItems);
      },
      immediate: true,
    },
  },

  data() {
    return {
      queryFormItems: [],
      data: null,
      span: 8,
      isExpend: false,
    };
  },

  methods: {
    init(queryItems) {
      queryItems = deepClone(queryItems) //深拷贝一下
      this.remoteBefored(queryItems)
      let ops = [
        {
          value: "查询",
          icon: "search",
          btnType: "primary",
          on: {
            click: (event, form) => {
              this.handleQuery(form);
            },
          },
        },
        {
          value: "重置",
          icon: "redo",
          style: "margin-right:20px;margin-left:20px",
          on: {
            click: (event, form) => {
              this.handleReset(form);
            },
          },
        },
      ];
      this.span = 24 / this.colNum;
      // 添加展开和收起的按钮
      if (queryItems.length > this.colNum) {
        let o = {
          value: "收起",
          icon: "up",
          style: "margin-right:20px",
          on: {
            click: (event, form) => {
              this.handleExpend(form, queryItems);
            },
          },
        };
        ops.unshift(o);
      }
      let n = queryItems.filter((t) => !t.hidden).length % this.colNum;
      this.queryFormItems = [
        ...queryItems.map((t) => ({ ...t })),
        {
          type: "buttonGroup",
          span: 24 - n * this.span,
          style: n ? {} : { textAlign: "right" },
          options: ops,
        },
      ];
    },
    remoteBefored(queryItems) {
        queryItems.forEach((item, i) => {
        let name = item.name
        if (item.type == 'searchModal') {
          delete item.labelCol
          delete item.span
          item.tableConfig.remoteBefore = (function(event, remoteParams){
            if(item.remoteDependency) {
              this.remoteDependencyFun(remoteParams, item.remoteDependency)
            }
          }).bind(this)
        } else if (item.type == 'select')  {
          item.remoteBefore = (function(event, remoteParams) {
            if(item.remoteDependency) {
              this.remoteDependencyFun(remoteParams, item.remoteDependency)
            }
            if(item.returnBefore && typeof(item.returnBefore) ==  'function') {
              remoteParams =  item.returnBefore(remoteParams,name)
            } 
          }).bind(this)
        }
      })
    },
    remoteDependencyFun(remoteParams, obj) {
      this.$nextTick(() => {
        let values = this.$refs.form.form.getFieldsValue()
        for (const key in obj) {
          if (Object.hasOwnProperty.call(obj, key)) {
            if(obj[key].map)  {
              remoteParams.params[obj[key].map] = values[key]
            } else {
              remoteParams.params[key] = values[key]
            }
          }
        }
        return 
      })
    },
    handleQuery(form) {
      this.$refs.form.form.validateFields((err, value) => {
        if (err) {
          return;
        }
        // let p = {};
        // Object.keys(value).forEach((k) => {
        //   if (typeof value[k] === "string" && !p[k]) return;
        //   p[k] = value[k];
        // });
        this.$emit("submit", value);
      });
    },

    handleReset(form) {
      form.resetFields();
    },
    // 展开 or 收起
    handleExpend(form, queryItems) {
      let hideItemsName = queryItems.map(item => item.name);
      hideItemsName = hideItemsName.slice(this.colNum-1, queryItems.length);
      this.isExpend = !this.isExpend;
      let op = this.queryFormItems[this.queryFormItems.length - 1].options[0];
      if (this.isExpend) {
        op.icon = "down";
        op.value = "展开";
        form.hiddenItem(hideItemsName);
        this.queryFormItems[this.queryFormItems.length - 1].span = this.span;
      } else {
        op.icon = "up";
        op.value = "收起";
        form.unhiddenItem();
        let n = queryItems.filter((t) => !t.hidden).length % this.colNum;;
        this.queryFormItems[this.queryFormItems.length - 1].span = 24 - n * this.span;
      }
    },
  },
};
</script>

<style scoped>
</style>