<template>
  <div class="actionbar_card">
    <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" @submit.native.prevent>
          <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}`]" @keyup.enter.native="searchProtocol" />
                </div>
              </template>
              <!-- 下拉框 -->
              <template v-if="item.type === 'select'">
                <el-select size="medium" :id="item.field" v-loadmore="(params) => handleScroll(item.field)"
                  class="forms_dom" v-model="ruleForm[`${item.field}`]" :placeholder="item.placeholder"
                  :filterable="item.filterable" :remote="item.filterable" :disabled="item.disabled"
                  :multiple="item.multiple" style="width: 100%" @change="changeSelect" :remote-method="remoteMethod">
                  <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="datetimerange" align="right"
                  value-format="yyyy-MM-dd hh:mm:ss" unlink-panels range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" :picker-options="pickerOptions" @change="searchProtocol">
                </el-date-picker>
              </template>
            </el-form-item>
            <el-form-item style="display: flex;margin-right: 10px;margin-bottom: 10px !important;">
              <el-button size="medium" icon="el-icon-search" type="primary" @click="searchProtocol">搜索</el-button>
              <el-button size="medium" icon="el-icon-refresh" @click="reset">重置</el-button>
            </el-form-item>
            <div class="btn_head" v-for="(item1,index1) in operateList" :key="index1 + 'il'"
              v-if="operateList.length > 0">
              <el-button :type="item1.colour ? item1.colour : 'primary'" size="medium" :icon="item1.icon"
                @click="openModel(item1.type)">{{item1.title}}</el-button>
            </div>
          </div>
        </el-form>
      </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')
      },
      handleScroll(type) {
        this.$emit('handleScroll', type)
      },
      // 下拉选择
      changeSelect() {
        this.$emit('searchProtocol', this.ruleForm)
      },
      // 下拉框远程搜索
      remoteMethod(event) {
        this.$emit('remoteMethod', event)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .actionbar_card {
    display: flex;
    flex-direction: column;
    background-color: rgba(95, 99, 127, 0.3);
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
  }

  .Ice_cream_freezer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .card_action_bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

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

  .margin_5x {
    margin-bottom: 10px;
  }

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