<!--
 * @Author       : yuanrunwei
 * @Date         : 2021-11-01 18:03:02
 * @LastEditors: daiqisheng
 * @LastEditTime: 2022-04-25 12:16:31
 * @FilePath     : \spfm-market-front\src\pages\main\performance\components\form.vue
-->
<template>
  <el-form
    :inline="true"
    :model="object"
    label-position="left"
    label-width="80px"
  >
    <!-- <el-row :gutter="24" v-if="form.length < 5">
      <el-col
        v-for="({ props, label, type, dictionary }, index) in form"
        :key="index"
        :span="6"
      >
        <el-form-item :label="label">
          <template v-if="type === 'select'">
            <el-select
              v-model="object[props]"
              :placeholder="label"
              filterable
              clearable
            >
              <el-option
                :label="label"
                :value="value"
                v-for="({ label, value }, index) in dictionary"
                :key="index"
              ></el-option>
            </el-select>
          </template>
          <template v-else-if="['datetime', 'date', 'month'].includes(type)">
            <el-date-picker
              v-model="object[props]"
              :type="type"
              :placeholder="label"
            >
            </el-date-picker>
          </template>
          <template v-else-if="type === 'dateRange'">
            <el-date-picker
              v-model="object[props]"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </template>
          <template v-else>
            <el-input
              v-model="object[props]"
              :placeholder="label"
              clearable
            ></el-input>
          </template>
        </el-form-item>
      </el-col>
      <div v-if="form.length < 4"></div>
      <el-col :span="6">
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-col>
      <el-col class="flex-justify-align-end" :span="24">
        <el-button
          v-for="({ label, props, unlogo }, index) in handle"
          :key="index"
          @click="handleSubmit(props)"
        >
          <i v-if="!unlogo" class="el-icon-document-add font-weight-bold" />{{
            label
          }}
        </el-button>
      </el-col>
    </el-row> -->

    <div v-if="form.length < 5" class="margin-bottom-10">
      <div class="template-input width-100">
        <div class="template-input " style="width:94%">
          <div
            class="margin-right-100"
            v-for="({ props, label, type, dictionary }, index) in form.slice(
              0,
              2
            )"
            :key="index"
          >
            <el-form-item :label="label" style="padding-right:140px">
              <template v-if="type === 'select'">
                <el-select
                  v-model="object[props]"
                  :placeholder="label"
                  filterable
                  clearable
                >
                  <el-option
                    :label="label"
                    :value="value"
                    v-for="({ label, value }, index) in dictionary"
                    :key="index"
                  ></el-option>
                </el-select>
              </template>
              <template
                v-else-if="['datetime', 'date', 'month'].includes(type)"
              >
                <el-date-picker
                  v-model="object[props]"
                  :type="type"
                  :placeholder="label"
                >
                </el-date-picker>
              </template>
              <template v-else-if="type === 'dateRange'">
                <el-date-picker
                  v-model="object[props]"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </template>
              <template v-else>
                <el-input
                  v-model="object[props]"
                  :placeholder="label"
                  clearable
                ></el-input>
              </template>
            </el-form-item>
          </div>
        </div>
        <div class="width-20" style="width:70px">
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </div>
      </div>
      <div class="template-input width-100 margin-top-10 margin-bottom-10">
        <div
          class="margin-right-100"
          v-for="({ props, label, type, dictionary }, index) in form.slice(2)"
          :key="index"
          :span="6"
        >
          <el-form-item :label="label" style="padding-right:140px">
            <template v-if="type === 'select'">
              <el-select 
                v-model="object[props]"
                :placeholder="label"
                filterable
                clearable
              >
                <el-option
                  :label="label"
                  :value="value"
                  v-for="({ label, value }, index) in dictionary"
                  :key="index"
                ></el-option>
              </el-select>
            </template>
            <template v-else-if="['datetime', 'date', 'month'].includes(type)">
              <el-date-picker
                v-model="object[props]"
                :type="type"
                :placeholder="label"
              >
              </el-date-picker>
            </template>
            <template v-else-if="type === 'dateRange'" >
              <el-date-picker
                v-model="object[props]"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </template>
            <template v-else>
              <el-input
                v-model="object[props]"
                :placeholder="label"
                clearable
              ></el-input>
            </template>
          </el-form-item>
        </div>
      </div>
      <p class="width-100 flex-justify-align-end margin-top-10">
        <el-button
          v-for="({ label, props, unlogo }, index) in handle"
          :key="index"
          @click="handleSubmit(props)"
        >
          <i v-if="!unlogo" class="el-icon-document-add font-weight-bold" />{{
            label
          }}
        </el-button>
      </p>
      <!-- 输入框 -->
      <!-- <div class="template-input">
        <div
          class="flex-1 margin-right-10"
          v-for="({ props, label, type, dictionary }, index) in form"
          :key="index"
          :span="6"
        >
          <el-form-item :label="label">
            <template v-if="type === 'select'">
              <el-select
                v-model="object[props]"
                :placeholder="label"
                filterable
                clearable
              >
                <el-option
                  :label="label"
                  :value="value"
                  v-for="({ label, value }, index) in dictionary"
                  :key="index"
                ></el-option>
              </el-select>
            </template>
            <template v-else-if="['datetime', 'date', 'month'].includes(type)">
              <el-date-picker
                v-model="object[props]"
                :type="type"
                :placeholder="label"
              >
              </el-date-picker>
            </template>
            <template v-else-if="type === 'dateRange'">
              <el-date-picker
                v-model="object[props]"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </template>
            <template v-else>
              <el-input
                v-model="object[props]"
                :placeholder="label"
                clearable
              ></el-input>
            </template>
          </el-form-item>
        </div>
      </div> -->
      <!-- 按钮 -->
      <!-- <div class="template-input">
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </div>
      <p class="width-100 flex-justify-align-end margin-top-10">
        <el-button
          v-for="({ label, props, unlogo }, index) in handle"
          :key="index"
          @click="handleSubmit(props)"
        >
          <i v-if="!unlogo" class="el-icon-document-add font-weight-bold" />{{
            label
          }}
        </el-button>
      </p> -->
    </div>
    <div v-else>
      <div class="template-content">
        <div class="template-left">
          <div class="template-head">
            <div
              v-for="({ props, label, type, dictionary }, index) in form.slice(
                0,
                1
              )"
              :key="index"
              :span="6"
            >
              <el-form-item :label="label">
                <template v-if="type === 'select'">
                  <el-select
                    v-model="object[props]"
                    :placeholder="label"
                    filterable
                    clearable
                  >
                    <el-option
                      :label="label"
                      :value="value"
                      v-for="({ label, value }, index) in dictionary"
                      :key="index"
                    ></el-option>
                  </el-select>
                </template>
                <template
                  v-else-if="['datetime', 'date', 'month'].includes(type)"
                >
                  <el-date-picker
                    v-model="object[props]"
                    :type="type"
                    :placeholder="label"
                  >
                  </el-date-picker>
                </template>
                <template v-else-if="type === 'dateRange'">
                  <el-date-picker
                    v-model="object[props]"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </template>
                <template v-else>
                  <el-input
                    v-model="object[props]"
                    :placeholder="label"
                    clearable
                  ></el-input>
                </template>
              </el-form-item>
            </div>
          </div>
          <div class="template-head">
            <div
              class="margin-right-10"
              v-for="({ props, label, type, dictionary }, index) in form.slice(
                1
              )"
              :key="index"
              :span="6"
            >
              <el-form-item :label="label">
                <template v-if="type === 'select'">
                  <el-select
                    v-model="object[props]"
                    :placeholder="label"
                    filterable
                    clearable
                  >
                    <el-option
                      :label="label"
                      :value="value"
                      v-for="({ label, value }, index) in dictionary"
                      :key="index"
                    ></el-option>
                  </el-select>
                </template>
                <template
                  v-else-if="['datetime', 'date', 'month'].includes(type)"
                >
                  <el-date-picker
                    v-model="object[props]"
                    :type="type"
                    :placeholder="label"
                  >
                  </el-date-picker>
                </template>
                <template v-else-if="type === 'dateRange'">
                  <el-date-picker
                    v-model="object[props]"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </template>
                <template v-else>
                  <el-input
                    v-model="object[props]"
                    :placeholder="label"
                    clearable
                  ></el-input>
                </template>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="template-right margin-top-10">
          <el-form-item class="template-search">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </div>
      </div>

      <div class="flex-justify-align-end margin-top-40 margin-bottom-20">
        <el-button
          v-for="({ label, props, unlogo }, index) in handle"
          :key="index"
          @click="handleSubmit(props)"
        >
          <i v-if="!unlogo" class="el-icon-document-add font-weight-bold" />{{
            label
          }}
        </el-button>
      </div>
    </div>
  </el-form>
</template>
<script>
export default {
  props: {
    form: {
      type: Array,
      default: () => [],
    },
    handle: {
      type: Array,
      default: () => [],
    },
  },
  data: () => ({
    object: {},
  }),
  // watch: {
  //   form() {
  //     this.form.forEach((el) => {
  //       if (el.default) {
  //         this.object[el.props] = el.default;
  //         console.log(this.object[el.props], "this.object[el.props]");
  //       }
  //     });
  //   },
  // },
  created() {
    this.form.forEach((el) => {
      if (el.default) {
        // this.object[el.props] = el.default;
        this.object = {
          ...this.object,
          [el.props]: el.default,
        };
      }
    });
  },
  methods: {
    handleSearch() {
      this.$emit("search", this.object);
    },
    handleSubmit(params) {
      this.$emit(params, this.object);
    },
  },
};
</script>
<style lang="scss" scope>

.width-100 {
  width: 100%;
}
.width-80 {
  width: 80%;
}
.width-20 {
  // float: right;
  // position: relative;
  // left: 180px;
  // margin-left: 180px;
}
.border {
  border: 1px solid red;
}
.template {
  &-head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-left: 10px;
    margin-top: 10px;
  }
  &-input {
    display: flex;
    // flex-wrap: wrap;
    // margin-bottom: 10px;
  }
  &-content {
    display: flex;
    justify-content: space-between;
  }
}
</style>
