<!--
  ** 综合搜索组件Zr-searchbox
 -->
<template>
  <div :class="[{ 'zr-searchbox-radius': radius }, 'sereen']" :style="[
    { 'background-color': backgroundColor },
    { 'border-color': borderColor },
    { 'margin-bottom': marginC }
  ]">
    <div class="form">
      <el-form ref="form" :model="form" inline label-width="0" size="small">
        <slot name="searchLeft"></slot>
        <el-form-item v-for="(searchFormItem, itemIndex) in searchFormData" :key="itemIndex"
          v-if="(searchFormItem.show || !searchFormItem.senior) && (searchFormItem.text || searchFormItem.section || searchFormItem.select || searchFormItem.cascader || searchFormItem.datetimerange || searchFormItem.datetime)">
          <template v-if="searchFormItem.text">
            <el-input v-model="searchFormItem.value" :placeholder="searchFormItem.placeholder"
              @keyup.enter.native="onSubmit" clearable @clear="clearInput" :class="[
                'input-width',
                { 'column-double': searchFormItem.columnDouble },
              ]" prefix-icon="el-icon-search"></el-input>
          </template>
          <template v-if="searchFormItem.section">
            <div>
              <el-input v-model="searchFormItem.minValue" :placeholder="searchFormItem.minPlaceholder" clearable
                @clear="clearInput"
                :style="{ width: searchFormItem.width ? searchFormItem.width : '120px' }"></el-input>
              <span class="input-divide">-</span>
              <el-input v-model="searchFormItem.maxValue" :placeholder="searchFormItem.maxPlaceholder" clearable
                @clear="clearInput"
                :style="{ width: searchFormItem.width ? searchFormItem.width : '120px' }"></el-input>
            </div>
          </template>
          <template v-if="searchFormItem.select">
            <el-select :placeholder="searchFormItem.placeholder"
              :remote="searchFormItem.remote ? searchFormItem.remote : false"
              :multiple="searchFormItem.multiple ? searchFormItem.multiple : false" v-model="searchFormItem.value"
              filterable size="small" clearable @clear="clearInput" @focus="focusSelect(searchFormItem.parameter)"
              @change="changeAll($event, searchFormItem.parameter)"
              :remote-method="(query) => { remoteMethod(query, searchFormItem.parameter) }" :class="[
                'input-width',
                { 'column-double': searchFormItem.columnDouble },
              ]">
              <el-option v-for="(item, index) in searchFormItem.selectData"
                :key="searchFormItem.remote ? item.id : index" :label="item[searchFormItem.labelName]"
                :value="item[searchFormItem.valueName]"
                :disabled="item[searchFormItem.disabled] ? item[searchFormItem.disabled] : false"></el-option>
            </el-select>
          </template>
          <template v-if="searchFormItem.cascader">
            <el-cascader :placeholder="searchFormItem.placeholder" v-model="searchFormItem.value" filterable
              size="small" @clear="clearInput" @change="changeCascader($event, searchFormItem)" :class="[
                'input-width',
                { 'column-double': searchFormItem.columnDouble },
              ]" :options="searchFormItem.selectData" :props="searchFormItem.prop" clearable></el-cascader>
          </template>
          <template v-if="searchFormItem.datetimerange">
            <div>
              <span v-if="searchFormItem.selectObj">
                <el-select :placeholder="searchFormItem.selectObj.placeholder" v-model="searchFormItem.selectObj.value"
                  size="small" style="width: 120px">
                  <el-option v-for="(item, index) in searchFormItem.selectObj
                    .selectData" :key="index" :label="item[searchFormItem.selectObj.labelName]"
                    :value="item[searchFormItem.selectObj.valueName]">
                  </el-option>
                </el-select>
              </span>
              <el-select v-if="searchFormItem.selectChild" :placeholder="searchFormItem.placeholder"
                v-model="searchFormItem.value" filterable size="small" clearable @clear="clearInput" :class="[
                  'input-width',
                  { 'column-double': searchFormItem.columnDouble },
                ]">
                <el-option v-for="(item, index) in searchFormItem.selectData" :key="index"
                  :label="item[searchFormItem.labelName]" :value="item[searchFormItem.valueName]"></el-option>
              </el-select>
              <el-date-picker v-else :unlink-panels="searchFormItem.unlinkPanels" v-model="searchFormItem.value"
                type="datetimerange" :picker-options="pickerOptions" range-separator="至"
                :default-time="searchFormItem.defaultTime" :start-placeholder="searchFormItem.startPlaceholde"
                :end-placeholder="searchFormItem.endPlaceholder" :format="searchFormItem.format
                  ? searchFormItem.format
                  : 'yyyy-MM-dd HH:mm:ss'
                  " :value-format="searchFormItem.valueFormat
                    ? searchFormItem.valueFormat
                    : 'yyyy-MM-dd HH:mm:ss'
                    " class="column-double" style="position: relative; top: 1px">
              </el-date-picker>
            </div>
          </template>
          <template v-if="searchFormItem.datetime">
            <el-date-picker :clearable="!searchFormItem.clearable ? searchFormItem.clearable : true"
              @change="changeDatetime($event, searchFormItem.parameter)" v-model="searchFormItem.value"
              :type="searchFormItem.type" :format="searchFormItem.format ? searchFormItem.format : 'yyyy-MM-dd'
                " :value-format="searchFormItem.valueFormat
                  ? searchFormItem.valueFormat
                  : 'yyyy-MM-dd'
                  " class="input-width" :placeholder="searchFormItem.placeholder" style="position: relative; top: 1px">
            </el-date-picker>
          </template>
        </el-form-item>
        <el-form-item>
          <a href="javascript:void(0)" @click="open()" v-show="btnShow">
            <span v-if="show"><el-link type="primary" :underline="false">收起<i
                  class="el-icon-arrow-up"></i></el-link></span>
            <span v-else>
              <el-link type="primary" :underline="false">展开<i class="el-icon-arrow-down"></i></el-link></span>
          </a>
          <el-button v-if="submitBut" :type="typeSubmit" :size="size" class="submit" @click="onSubmit">筛选</el-button>
          <el-button v-if="resetBut" type="info" :size="size" plain @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <div class="special">
            <slot name="searchSpecial"></slot>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="right-btn">
      <slot name="searchRight"></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    searchFormData: {
      type: Array,
      default: () => [],
    },
    radius: {
      type: Boolean,
      default: false,
    },
    backgroundColor: {
      type: String,
      default: "#f6f8fa",
    },
    borderColor: {
      type: String,
      default: "",
    },
    ByValue: {
      type: String,
      default: "",
    },
    marginC: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'mini'
    },
    typeSubmit: {
      type: String,
      default: 'danger'
    },
    submitBut: {//筛选按钮是否显示
      type: Boolean,
      default: true,
    },
    resetBut: {//重置按钮是否显示
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      form: {},
      show: false,
      // mark:'',
      total: "", //会员总数
      // btnShow: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近15天",
            onClick(picker) {
              const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() { },
  computed: {
    btnShow() {
      const index = this.searchFormData.findIndex((item) => item.senior);
      if (index !== -1) return true;
    },
  },
  methods: {
    open() {
      this.show = !this.show;
      let arr = this.searchFormData;
      arr.forEach((item, index) => {
        if (item.senior) {
          item.show = !item.show;
        }
      });
      this.$emit("open");
    },
    onSubmit(e) {
      if (this.ByValue === "1") {
        let obj = {};
        if (e) obj.page = 1;
        this.searchFormData.forEach((v) => {
          if (v.selectObj) {
            obj[v.selectObj.parameter] = v.selectObj.value
          }
          // 当筛选为双input框时，传值改为以下parameterMin和parameterMax
          if (v.section && (v.minValue || v.maxValue)) {
            obj[v.parameterMin] = v.minValue
            obj[v.parameterMax] = v.maxValue
          }
          if (v.parameter && (String(v.value) == "0" || v.value)) return (obj[v.parameter] = v.value);
        });
        if (JSON.stringify(obj) == "{}") obj = "";
        this.$emit("searchSubmit", obj);
      } else {
        let temp = this.searchFormData;
        this.$emit("searchSubmit", temp);
      }
    },
    clearInput() {
      this.onSubmit();
    },
    reset() {
      if (this.ByValue === "1") {
        this.searchFormData.forEach((item) => {
          if (item.isEmpty == 'no') {
            //点击重置是否清空内容 no不清空，不添加此字段默认为清空
          } else {
            item.value = "";
            if (item.section && (item.minValue || item.maxValue)) { //当使用双input框时
              item.minValue = ''
              item.maxValue = ''
            }
            if (item.selectObj) {
              item.selectObj.value = ""
            }
          }
        });
        this.$emit("searchSubmit");
      } else {
        let temp = this.searchFormData;
        this.$emit("searchReset", temp);
      }
    },
    changeAll(val, type) {
      let obj = {
        val,
        type
      }
      this.$emit("selectChangeAll", obj);
    },
    //联级选择器事件
    changeCascader(val, data) {
      let obj = {
        val: val,
        type: data.parameter
      }
      this.$emit("changeCascader", obj);
    },
    changeDatetime(val, type) {
      let obj = {
        val,
        type
      }
      this.$emit("changeDatetime", obj);
    },
    focusSelect(type) {//获取焦点之后再调接口
      this.$emit("focusSelect", type);
    },
    remoteMethod(query, type) {
      let obj = {
        query,
        type
      }
      this.$emit("remoteMethod", obj);
    },
  },
};
</script>
<style lang="less" scoped>
.sereen {
  display: flex;
  background-color: #f6f8fa;
  padding: 10px 10px 0 0px;
  margin-bottom: 15px;
  border: 1px solid #ecf1f5;
  width: 100%;

  .senior {
    display: none;
  }

  .input-width {
    width: 200px;
  }

  .column-double {
    width: 420px;
  }

  .input-divide {
    color: #999;
  }

  .hander {
    font-size: 14px;
    font-family: "Microsoft YaHei UI";
    font-weight: 400;
    color: #606266;
    height: 50px;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px;

    .num {
      color: #409eff;
    }
  }

  .input_inline {
    width: 70px;
  }

  .input_inline_line {
    color: #606266;
  }

  .right-btn {
    display: flex;
    justify-content: flex-end;
    min-width: 110px;
    height: 32px;
    text-align: right;

    button {
      margin: 0 2px;
    }
  }

  .form {
    flex: 1;

    .radioBox {
      width: 100%;
      height: 32px;
      // background-color: red;
      display: flex;
      align-items: center;

      .radio {
        width: 80px;
        text-align: center;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        color: #606266;
        margin-right: 15px;
        border-radius: 12px;
        border: 1px solid rgba(220, 223, 230, 1);
      }

      .active {
        border: none;
        color: #fff;
        background-color: rgba(64, 158, 255, 1);
      }
    }

    .line {
      text-align: center;
    }

    a {
      // margin-left: 20px;
      margin-right: 10px;
      // color: #155bd4;
    }

    .submit {
      margin-right: 4px;
    }
  }

  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
}

.zr-searchbox-radius {
  border-radius: 6px;
}

.el-select {
  width: 78%;
}
</style>