<template>
  <div class="container" :style="{ paddingBottom: paddingBottom }">
    <div class="search-and-btn">
      <div class="searchForm-area">
        <!-- <el-row :gutter="50"> -->
        <el-form class="searchForm" ref="form" :model="form">
          <!-- <el-col :span="5" v-for="(item, index) in searchData"> -->
          <el-form-item
            v-for="(item, index) in searchData"
            :label="item.label"
            :props="item.key"
            :label-width="handleLabelWidth(item.label)"
          >
            <!-- 输入框 -->
            <el-input
              v-if="item.type === 'input'"
              v-model="form[item.key]"
              :placeholder="'请输入' + item.label"
              size="mini"
              :clearable="item.clearable"
            >
            </el-input>

            <!-- 单选框 -->
            <el-select
              v-if="item.type === 'select'"
              filterable
              v-model="form[item.key]"
              size="mini"
              :placeholder="'请选择' + item.label"
              clearable
            >
              <el-option
                v-for="(option, index) in item.optionsData"
                :label="
                  !item.optionsConfig
                    ? option.label
                    : option[item.optionsConfig.labelKey]
                "
                :value="
                  !item.optionsConfig
                    ? option.value
                    : option[item.optionsConfig.valueKey]
                "
                :key="index"
              >
              </el-option>
            </el-select>

            <!-- 多选框 -->
            <el-select
              v-if="item.type === 'selectMultiple'"
              :multiple-limit="item.multipleLimit"
              collapse-tags
              multiple
              filterable
              v-model="form[item.key]"
              size="mini"
              :placeholder="'请选择' + item.label"
              clearable
            >
              <el-option
                v-for="(option, index) in item.optionsData"
                :label="
                  !item.optionsConfig
                    ? option.label
                    : option[item.optionsConfig.labelKey]
                "
                :value="
                  !item.optionsConfig
                    ? option.value
                    : option[item.optionsConfig.valueKey]
                "
                :key="index"
              >
              </el-option>
            </el-select>

            <!-- 级联选择 -->
            <el-cascader
              v-if="item.type === 'cascader'"
              clearable
              v-model="form[item.key]"
              placeholder="选择分类"
              :props="item.props ? item.props : {}"
              :options="item.optionsData"
              :show-all-levels="false"
              filterable
              size="mini"
              change-on-select
            >
            </el-cascader>
            <el-date-picker
              v-if="item.type === 'dataPickerSingle'"
              clearable
              v-model="form[item.key]"
              type="date"
              size="mini"
              value-format="timestamp"
              placeholder="选择日期"
            >
            </el-date-picker>
            <el-date-picker
              v-if="item.type === 'dataPicker'"
              :clearable="item.clearable === false ? false : true"
              v-model="form[item.key]"
              type="daterange"
              size="mini"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="(v) => dataPickerChange(v, item.key)"
              :default-time="['00:00:00', '23:59:59']"
              value-format="timestamp"
            >
            </el-date-picker>
            <el-date-picker
              v-if="item.type === 'dataTimePicker'"
              clearable
              size="mini"
              v-model="form[item.key]"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              value-format="timestamp"
            >
            </el-date-picker>
            <el-date-picker
              v-if="item.type === 'weekDataPicker'"
              :clearable="item.clearable === false ? false : true"
              v-model="form[item.key]"
              type="week"
              size="mini"
              format="yyyy 第 WW 周"
              :picker-options="pickerOptions"
              @change="change(index)"
            >
            </el-date-picker>
            <el-date-picker
              v-if="item.type === 'monthrange'"
              v-model="form[item.key]"
              type="monthrange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
            >
            </el-date-picker>
          </el-form-item>
          <!-- </el-col> -->
        </el-form>
        <!-- </el-row> -->
      </div>
      <div class="btn-area">
        <el-button type="primary" size="small" @click="submit">查 询</el-button>
        <el-button type="info" size="small" @click="resetForm('form')"
          >重 置</el-button
        >
      </div>
    </div>

    <div class="divide-area"></div>
    <!-- <el-divider style="height: 10px"></el-divider> -->
  </div>
</template>

<script>
import { debounce } from "@/utils/index";
export default {
  name: "searchArea",
  components: {},
  props: {
    searchData: {
      type: Array,
      default: () => {
        return [
          {
            label: "键1",
            key: "key1",
            type: "input",
            value: "",
          },
          {
            label: "键2",
            key: "key2",
            type: "input",
            value: "",
          },
        ];
      },
    },
    btnData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    paddingBottom: {
      type: String,
      default: () => {
        return "5px";
      },
    },
  },
  data() {
    return {
      form: {},
      show: false, //是否展开搜索
    };
  },
  watch: {
    searchData: {
      handler(val, oldVal) {
        // console.log('val', val, oldVal)
        val.forEach((item) => {
          this.$set(this.form, item.key, item.value);
        });
        //
      },
      deep: true,
    },
  },
  methods: {
    dataPickerChange(v, key) {
      if (v && v.length > 1) {
        v[1] = new Date(v[1]).setHours(23, 59, 59);
        this.form[key] = v;
      }
    },
    handleLabelWidth(label) {
      // console.log("label: ", label.length);
      let result = "80px";
      if (label.length > 5) result = "100px";
      return result;
    },
    change(index) {
      if (this.formData[index].key === "type") {
        // console.log(this.form)
        this.$emit("typeChange", this.form.type);
      }
      if (this.formData[index].linkage) {
        this.$emit("linkage", this.form);
      }
    },
    submit: debounce(
      function () {
        this.$emit("submit", this.form);
      },
      200,
      true
    ),
    resetForm: debounce(
      function () {
        this.form = {};
        this.$emit("submit", this.form, "resetForm");
      },
      200,
      true
    ),
    // submit() {
    //   this.$emit("submit", this.form);
    // },
    // resetForm(formName) {
    //   // console.log("formName: ", formName);
    //   this.form = {};
    //   this.$emit("submit", this.form);
    //   // this.$refs[formName].resetFields();
    // },
  },
};
</script>

<style scoped lang="scss">
.container {
  //   display: flex;
  //   justify-content: space-between;
  padding-top: 5px;

  .search-and-btn {
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
    .searchForm-area {
      width: 95%;
      .searchForm {
        display: flex;
        flex-wrap: wrap;
      }
    }
    .btn-area {
      width: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .divide-area {
    height: 5px;
    background-color: #e6e8e7;
  }
}
.el-form {
  ::v-deep .el-form-item {
    margin: 0 20px 10px 0;
    height: 32px;

    .el-input__inner {
      width: 10vw;
    }

    .el-date-editor--daterange.el-input__inner,
    .el-date-editor--datetimerange.el-input__inner {
      width: 18vw;
    }

    .el-form-item__label {
      padding: 0 5px 0 0;
    }

    .el-date-editor.el-input {
      width: 100%;
    }
  }

  ::v-deep .el-form-item__label {
    font-size: 13px;
    text-align: center;
    font-weight: bold;
  }
}
</style>
