<template>
  <div class="pending">
    <el-form :inline="true" size="small">
      <el-row :gutter="20">
        <template v-for="item in formItems">
          <el-col :span="item.col" :key="item.id">
            <el-form-item :label="item.label">
              <template v-if="item.type === 'input'">
                <el-input
                    style="width: 180px;"
                    :placeholder="item.placeholder"
                    v-model="formData[`${item.field}`]"
                    clearable>
                </el-input>
              </template>
              <template v-else-if="item.type === 'select'">
                <el-select
                    style="width: 180px;"
                    :placeholder="item.placeholder"
                    v-model="formData[`${item.field}`]"
                    @change="onChange(item.field, formData[`${item.field}`])"
                    clearable>
                  <el-option
                      v-for="option in item.options"
                      :key="option.value"
                      :value="option.value"
                      :label="option.label">
                  </el-option>
                </el-select>
              </template>
              <template v-else-if="item.type === 'datepicker'">
                <el-date-picker
                    v-model="formData[`${item.field}`]"
                    :start-placeholder="item.placeholder[0]"
                    :end-placeholder="item.placeholder[1]"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    clearable
                    class="date-picker-reset">
                </el-date-picker>
              </template>
              <template v-else-if="item.type === 'text'">
                <span  :style="{cursor: 'pointer', color: item.value === day ? color : '#000' }" @click="onSelectText(item.value)">{{item.text}}</span>
              </template>
              <template v-else-if="item.type === 'button'">
                <el-button  @click="manage(item.click)">{{item.text}}</el-button>
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "XForm",
  props: {
    formItems: {
      type: Array,
      default: () => []
    },
    day: {
      type: Number,
      default: () => 2
    }
  },
  computed: {
    ...mapState(['color'])
  },
  data() {
    return {
      formData: {}
    }
  },
  methods: {
    // 拿到方法
    onSelectText(value) {
      this.formData.value1 = [];
      this.$emit('setDay', {type:value, data: this.formData})
    },
    onChange(val, data) {
      this.$emit('setChange', {type: val, data: data});
    },
    manage(value) {
      this.$emit('onClickType', {type: value, data: this.formData})
    }
  }
}
</script>

<style scoped>
.pending {
  width: 100%;
  height: 70px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  padding: 20px;
}
</style>
