<template>
  <div class="base-search-form">
    <div class="brand-color-line">
      <span style="font-size: 20px">{{ headTitle }}</span>
    </div>

    <div class="actual-form">
      <el-form :inline="true" :model="dataForm" :rules="headConfig.rules">
        <!-- <el-col :span="opt.span ? +opt.span : 4" v-for="opt in options" :key="opt.id"> -->
        <el-form-item
          v-for="(opt, index) in headConfig.fields"
          :key="opt.prop"
          :label="opt.label ? opt.label : null"
          :prop="opt.prop ?? '' + index"
          :rules="opt.bind?.rules ? opt.bind.rules : undefined"
        >
          <el-input v-if="opt.input" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable size="small" />
          <el-select v-if="opt.select" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable size="small">
            <el-option v-for="item in opt.select" :key="item.value + Math.random().toString()" :label="item.label" :value="item.value" />
          </el-select>
          <el-date-picker v-if="opt.timerange" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable size="small" />
          <el-upload
            v-if="opt.upload"
            size="small"
            :key="'upload_' + Math.random().toString()"
            class="inline-block pl-3"
            action="https://jsonplaceholder.typicode.com/posts/"
          >
            <el-button type="primary">上传文件</el-button>
          </el-upload>
          <el-button
            v-if="opt.button && (!opt.button.permission || $hasPermission(opt.button.permission))"
            :key="'button' + Math.random().toString()"
            size="small"
            :type="opt.button.type"
            v-bind="opt.bind"
            @click="handleBtnClick(opt.button.name)"
            >{{ opt.button.name }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "BaseSearchForm",
  props: {
    headConfig: {
      type: Object,
      default: () => ({}),
    },
    headTitle: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dataForm: {},
    };
  },

  // 这个 watch 出现得没啥必要......
  // watch: {
  //   dataForm: {
  //     handler: (val) => {
  //       console.log("[BaseSearchForm::watcher::dataForm]", val);
  //     },
  //     deep: true,
  //   },
  // },

  created() {},
  mounted() {
    // console.log("[BaseSearchForm] configs:", JSON.parse(JSON.stringify(this.headConfig)));

    this.headConfig.fields.forEach((field, index) => {
      // 没有 field.prop ，则为按钮之类的
      if (!field.prop) return;

      if (!this.dataForm[field.prop]) {
        this.$set(this.dataForm, field.prop, null);
      }

      if (field.default) {
        // default 必须有个 value 属性！哪怕是 input 输入框
        this.dataForm[field.prop] = field.default.value;
      }

      // 更新选项列表
      if (!field.watch && field.fn && typeof field.fn === "function") {
        const optionLabel = field.fieldOptionLabel;
        const optionValue = field.fieldOptionValue;
        // 设置自身的选项列表
        field.fn().then(({ data: res }) => {
          if (res.code === 0 && res.data) {
            // TODO: 此处需要随具体情况再做更新
            if ("list" in res.data) {
              this.$set(
                field,
                "select",
                res.data.list.map((item) => ({
                  label: optionLabel ? item[optionLabel] : item.name,
                  value: optionValue ? item[optionValue] : item.id,
                }))
              );
            }
          } else {
            this.$message({
              message: `${field.label} 数据获取出错: ${res.code} - ${res.msg}`,
              type: "error",
              duration: 1500,
            });
          }
        });
      }

      // 如果需要监听关联字段， field.watch ===> 需要watch的那个字段的 prop
      // TODO: 此处也需要修改，碰到具体业务需求才更新...
      if (field.watch) {
        // const { index: innerIdx, condition } = field.watch;
        // console.log("=====field.watch=====", innerIdx, this.searchForm[innerIdx], this.headConfig.fields[innerIdx].default);
        // // 设置监听器
        // this.$watch(
        //   () => this.searchForm[innerIdx],
        //   (val) => {
        //     const queryParams = { [condition]: val };
        //     // field.watch.condition.forEach(c => {
        //     // 	queryParams
        //     // })
        //     this.$http(field.url, queryParams).then((res) => {
        //       console.log("[==>] 更新有前置条件的字段!!!", queryParams, res);
        //       // 此处是外部的 index
        //       this.searchForm[index] = Math.floor(Math.random() * 10);
        //     });
        //   }
        // );
        // console.log("[BaseSearchForm] mounted(): ", this.searchForm);
        // // 如果此时已经有默认值了，就立马根据这个默认值来发起请求
        // if (this.searchForm[innerIdx]) {
        //   // TODO: 这个判断好像不太需要...
        //   console.log("TODO: 这个判断好像不太需要...");
        // } else {
        //   console.log("TODO: 监听的字段还没来得及设置值呢...");
        // }
      }
    });
  },
  methods: {
    handleBtnClick(name) {
      this.$emit("btn-click", { btnName: name, payload: this.dataForm });
    },
  },
};
</script>

<style scoped>
.base-search-form {
  /* display: flex; */
  /* align-items: center; */
  /* position: relative; */
}

.base-search-form >>> .el-form-item {
  margin-bottom: 12px;
}

.brand-color-line {
  position: relative;
  /* background: red; */
  /* margin-top: 10px; */
  height: 24px;
  margin: 16px 0;
}

.brand-color-line span {
  display: inline-block;
  height: 100%;
  padding: 2px 0;
  margin-left: 14px;
  line-height: 1;
}

.brand-color-line::before {
  display: inline-block;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  border-radius: 2px;
  background: #0b58ff;
  /* margin-right: 8px; */
  /* position: absolute; */
}

.actual-form >>> .el-form-item {
  margin-bottom: 12px;
}
</style>
