<template>
  <el-form :inline="true" :disabled="formDisabled" :model="formData" label-suffix=":" label-width="100px">
    <el-row>
      <el-col v-for="(headerItem, headerIndex) in formHeader" :key="headerIndex" :span="8">
        <el-form-item :label="headerItem.label" v-if="!(['time'].indexOf(headerItem.type) !== -1 && type === 'add')">
          <template v-if="['select'].indexOf(headerItem.type) !== -1">
            <el-select-v2 filterable v-model="formData[headerItem.inputValue]" multiple collapse-tags
              collapse-tags-tooltip :options="headerItem.options" :placeholder="headerItem.label" style="width: 330px"
              :max-collapse-tags="2" />
          </template>
          <template v-else-if="['time'].indexOf(headerItem.type) !== -1">
            <el-date-picker v-model="formData[headerItem.inputValue]" type="datetime" :disabled="headerItem.disabled"
              :placeholder="headerItem.label" format="YYYY/MM/DD HH:mm:ss" style="width: 330px" />
          </template>
          <template v-else-if="['switch'].indexOf(headerItem.type) !== -1">
            <el-switch v-model="formData[headerItem.inputValue]"  style="width: 330px"/>
          </template>
          <template v-else-if="['text', 'email', 'textarea', 'password'].indexOf(
            headerItem.type
          ) !== -1
            ">
            <el-input v-model="formData[headerItem.inputValue]" :placeholder="headerItem.label" :type="headerItem.type"
              clearable :show-password="headerItem.type === 'password'" style="width: 330px" />
          </template>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
export default {
  name: "bug",
  props: {
    type: {
      typeof: String,
      default: () => {
        return "";
      },
    },
    formHeader: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
    formData: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    formDisabled: {
      typeof: Boolean,
      default: () => {
        return false;
      },
    },
  },
  components: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  async mounted() { },
  beforeUnmount() { },

  methods: {},
};
</script>
<style scoped></style>
