<!--
  ** 综合搜索组件Zr-searchbox
 -->
<template>
  <div :class="[{'zr-searchbox-radius': radius},'sereen']" :style="{'background-color':backgroundColor}">
    <div class="form">
      <el-form ref="form" :model="form" inline label-width="0" size="small">
        <el-form-item v-for="(searchFormItem, itemIndex) in searchFormData" :key="itemIndex"
          v-show="searchFormItem.show || !searchFormItem.senior">
          <template v-if="searchFormItem.text">
            <el-input v-model="searchFormItem.value" :placeholder="searchFormItem.placeholder" 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: 120px"></el-input>
              <span class="input-divide">-</span>
              <el-input v-model="searchFormItem.maxValue" :placeholder="searchFormItem.maxPlaceholder" clearable
                @clear="clearInput" style="width: 120px"></el-input>
            </div>
          </template>
          <template v-if="searchFormItem.select">
            <el-select :placeholder="searchFormItem.placeholder" v-model="searchFormItem.value" 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>
          </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-date-picker v-model="searchFormItem.value" type="datetimerange" :picker-options="pickerOptions"
                range-separator="至" :default-time="searchFormItem.defaultTime"
                :start-placeholder="searchFormItem.startPlaceholde" :end-placeholder="searchFormItem.endPlaceholder"
                format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" class="column-double"
                style="position: relative; top: 1px">
              </el-date-picker>
            </div>
          </template>
        </el-form-item>

        <el-form-item>
          <el-button type="danger" size="mini" @click="onSubmit">筛选</el-button>
          <el-button type="info" size="mini" plain @click="reset">重置</el-button>
          <a href="javascript:void(0)" @click="open()">
            <span v-if="show">收起 <i class="el-icon-arrow-up"></i></span>
            <span v-else>高级搜索 <i class="el-icon-arrow-down"></i></span>
          </a>
        </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'
    }
  },
  data() {
    return {
      form: {},
      show: false,
      // mark:'',
      total: "", //会员总数

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() { },
  methods: {
    open() {
      this.show = !this.show;
      let arr = this.searchFormData;
      arr.forEach((item, index) => {
        if (item.senior) {
          item.show = !item.show;
        }
      });
    },
    onSubmit() {
      console.log("111111");
      let temp = this.searchFormData;
      this.$emit("searchSubmit", temp);
    },
    clearInput() {
      this.onSubmit();
    },
    reset() {
      let temp = this.searchFormData;
      this.$emit("searchReset", temp);
    },
    change(val) {
      // console.log(val,666)
    },
  },
};
</script>
<style lang="less" scoped>
.sereen {
  display: flex;
  background-color: #f6f8fa;
  padding: 16px 10px 0 10px;
  margin-bottom: 15px;
  border: 1px solid #ecf1f5;

  .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 {
    flex-shrink: 1;
    width: 300px;
    height: auto;
    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;
      color: #155bd4;
    }
  }
}
.zr-searchbox-radius {
  border-radius: 6px;
}
.el-select {
  width: 78%;
}
</style>