<template>
  <div>
    <div class="card_action_bar">
      <div style="display: flex;flex-direction: column;">
        <div class="action_bar_headline" :class="formList.length>0?'margin_5x':''">{{menuTitle}}</div>
        <el-form :model="ruleForm" ref="ruleForm" label-width="100" class="el-row demo-ruleForm"
          :label-position="labelPosition">
          <div style="display: flex;flex-wrap: wrap;flex-direction: row;">
            <el-form-item style="display: flex;margin-right: 10px;margin-bottom: 10px !important;"
              v-for="(item, index) in formList" :key="index" :label="item.label" :prop="item.field"
              :class="item.colWidth">
              <!-- 输入框 -->
              <template v-if="item.type === 'input'">
                <div class="forms_dom">
                  <el-input size="medium" autocomplete="new-password" :placeholder="item.placeholder"
                    :disabled="item.disabled" :id="item.field" :show-password="item.mold ? true : false"
                    v-model="ruleForm[`${item.field}`]" />
                </div>
              </template>
              <!-- 下拉框 -->
              <template v-if="item.type === 'select'">
                <el-select size="medium" :id="item.field" class="forms_dom" v-model="ruleForm[`${item.field}`]"
                  :placeholder="item.placeholder" :disabled="item.disabled" :multiple="item.multiple"
                  style="width: 100%" @change="changeSelect">
                  <el-option v-for="(element, i) in item.options" :label="element.label" :value="`${element.value}`"
                    :key="i" />
                </el-select>
              </template>
              <!-- 时间区间 -->
              <template v-if="item.type === 'picker'">
                <el-date-picker size="medium" v-model="ruleForm[`${item.field}`]" type="daterange" align="right"
                  value-format="yyyy-MM-dd" unlink-panels range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" :picker-options="pickerOptions">
                </el-date-picker>
              </template>
            </el-form-item>
            <el-form-item style="display: flex;margin-right: 10px;margin-bottom: 10px !important;">
              <el-button size="medium" type="primary" @click="searchProtocol">搜索</el-button>
              <el-button size="medium" type="info" @click="reset">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="same_row_in" v-if="operateList.length > 0">
        <div class="btn_head" v-for="(item1,index) in operateList" :key="index">
          <el-button type="primary" size="medium" :icon="item1.icon"
            @click="openModel(item1.type)">{{item1.title}}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      menuTitle: {
        type: String,
        default: () => '',
      },
      operateList: {
        type: Array,
        default: () => [],
      },
      formList: {
        type: Array,
        default: () => [],
      },
      labelPosition: {
        type: String,
        default: () => "right",
      },
      ruleForm: {
        type: Object,
        default: () => {},
      }
    },
    data() {
      return {
        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]);
            }
          }]
        },
      }
    },
    mounted() {},
    methods: {
      openModel(type) {
        this.$emit('openModel', type)
      },
      // 搜索
      searchProtocol() {
        // console.log(this.ruleForm, '搜索')
        this.$emit('searchProtocol', this.ruleForm)
      },
      // 重置
      reset() {
        this.$refs.ruleForm.resetFields();
        this.$forceUpdate()
        this.$emit('reset')
      },
      changeSelect() {}
    }
  }
</script>

<style lang="scss" scoped>
  .card_action_bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
  }

  .action_bar_headline {
    color: #fff;
    font-size: 18px;
  }

  .margin_5x {
    margin-bottom: 10px;
  }

  .btn_head {
    margin-left: 10px;
    margin-bottom: 10px;
  }
</style>
