<template>
  <div class="form-box">
    <el-row>
      <el-col
        v-for="(item, index) in dataSource"
        :span="item.spanNum ? item.spanNum : spanNum"
        :class="item.className"
        :offset="item.offset"
        :key="index" >
        <el-form-item
          v-if="isParent(item)"
          :prop="item.prop"
          :label="item.label"
          :rules="item.rules"
          :label-width="item.labelWidth"
          :required="item.required"
          :class="item.className"
          :error="item.error">
          <!-- div文本 -->
          <div v-if="item.formType === 'div'" :class="item.className">{{ item.name }}</div>
          <!-- input -->
          <el-input
            v-else-if="item.formType === 'input'"
            v-model="form[item.model]"
            :type="item.type"
            :class="item.className"
            :disabled="item.disabled"
            :maxlength="item.maxlength"
            :minlength="item.minlength"
            :placeholder="item.placeholder"
            @change="item.changeFun ? item.changeFun($event) : defaultFun($event)">
            <template
              v-for="slot in item.slots || []"
              :slot="slot.type">{{ slot.name }}</template>
          </el-input>
          <!-- label -->
          <label
            v-else-if="item.formType === 'label'"
            :class="item.className"
            :disabled="item.disabled">{{ form[item.model]==''?'-':form[item.model] }}{{ item.suffix }}
          </label>
          <!-- select -->
          <el-select
            v-else-if="item.formType === 'select'"
            v-model="form[item.model]"
            :multiple="item.multiple"
            :placeholder="item.placeholder"
            @change="item.changeFun ? item.changeFun($event) : defaultFun($event)">
            <el-option
              v-for="(opt, index2) in item.options"
              :key="index2"
              :label="opt.label"
              :value="opt.value"/>
          </el-select>
          <!-- checkbox -->
          <el-checkbox-group
            v-else-if="item.formType === 'checkbox'"
            v-model="form[item.model]"
            @change="item.changeFun ? item.changeFun($event) : defaultFun($event)"
          >
            <el-checkbox
              v-for="(opt, ck) in item.options"
              :key="ck"
              :label="opt.value"
            >
              {{ opt.label }}
            </el-checkbox>
          </el-checkbox-group>
          <!-- radios -->
          <el-radio-group
            v-else-if="item.formType === 'radio'"
            v-model="form[item.model]"
            @change="item.changeFun ? item.changeFun($event) : defaultFun($event)"
          >
            <el-radio
              v-for="(opt, rad) in item.options"
              :key="rad"
              :label="opt.value">
              {{ opt.label }}
            </el-radio>
          </el-radio-group>
          <!--  switch-->
          <el-switch
            v-else-if="item.formType === 'switch'"
            v-model="form[item.model]"/>
          <!--  transfer-->
          <el-transfer
            v-else-if="item.formType === 'transfer'"
            v-model="form[item.model]"
            :data="item.data"/>
          <!-- 时间 -->
          <el-date-picker
            v-else-if="item.formType === 'date-picker'"
            v-model="form[item.model]"
            :disabled="item.disabled"
            :type="item.type || dateType"
            :placeholder="item.placeholder"
            :format="item.format || format"
            :value-format="item.valueFormat || valueFormat"
            @change="item.changeFun ? item.changeFun($event) : defaultFun($event)"/>
          <!-- 图片 -->
          <img v-else-if="item.formType === 'img'" :src="item.src||''" :alt="item.alt||''" :width="item.width">
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import _ from 'lodash'

  export default {
    props: {
      dataSource: {
        type: Array,
        default: () => []
      },
      form: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        spanNum: 12,
        valueFormat: 'timestamp',
        format: 'yyyy-MM-dd HH:mm',
        dateType: 'datetime'
      }
    },
    methods: {
      defaultFun() {},
      isParent(item) {
        if (!item.linkageRule) {
          return true
        } else {
          let num = 0
          item.linkageRule.forEach(t => {
            if (this.form[t.name] == null) {
              return false
            }
            if (typeof this.form[t.name] === 'string') {
              if (t.value.includes(this.form[t.name])) {
                num += 1
              }
            } else {
              const nameVal = this.form[t.name]
              const valType = _.isArray(nameVal) ? nameVal : Array.of(nameVal)
              const bool = _.intersection(valType, t.value)
              if (_.isArray(bool) && bool.length > 0) {
                num += 1
              }
            }
          })
          if (num !== item.linkageRule.length) {
            delete this.form[item.model]
          }
          return num === item.linkageRule.length
        }
      }
    }
  }
</script>

<style lang="scss">
  .form-box {
    padding: 20px 40px;
  }
  .h72 {
    height: 92px;
  }
  .clear {
    clear: left;
  }
  .m-title {
    .el-form-item__label {
      font-size: 16px;
      color: rgba(74, 74, 74, 1);
    }
  }
  .sec-title{
    font-weight: bold;
    margin-left: 0;
  }
</style>

