<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"
            @blur="item.blurFunc ? item.blurFunc($event) : defaultBlur($event)"
            @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"
            :editable="false"
            :type="item.dateType || 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: {
      ruleNew: Boolean,
      dataSource: {
        type: Array,
        default: () => []
      },
      form: {
        type: Object,
        default: () => {}
      }
    },
    watch: {
      form(val){
        this.form = val
        this.$forceUpdate()
      },
    },
    data() {
      return {
        spanNum: 6,
//        valueFormat: 'timestamp',
//        valueFormat: 'yyyy-MM-dd',
//        format: 'yyyy',
//        dateType: 'datetime'
      }
    },
    methods: {
      defaultFun() {},
      defaultBlur(){},
      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" scoped>

</style>
<style lang="scss">
  .form-box {
    padding: 20px 0px;
    .sec-title{
      float: none;
      font-weight: bold;
      margin-left: 0;
    }
    .color-gray{
      color: #a7a7a7;
    }
    .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
      content: '*';
      color: #F56C6C;
      margin-right: 10px;
    }
    .el-date-editor{
      width: 100%;
    }
    .el-form-item__label,
    .el-radio__label {
      font-size: 18px;
    }
    .float-none{
      float: none;
      .el-form-item__label,
      .el-form-item__content{
        display: block;
        float: none;
      }
    }
    .obj-form-title{
      .el-form-item__label,
      .el-form-item__content{
        display: block;
        float: none;
      }
      .el-form-item__content{
        margin-left: 15px;
        .el-radio{
          margin-top: 5px;

        }
      }
    }
    .title-obj{
      font-size: 20px;
    }
    .el-form-item__label{
      font-weight: bold;
    }
    .obj-form-title2{
      margin-left: 15px;
    }
    .obj-form-title3{
      margin-left: 25px;
    }
    .obj-form-title4{
      margin-left: 35px;
    }
    .radio-block{
      .el-radio-group{
        .el-radio{
          display: block;
        }
      }
    }
    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #449284 !important;
    }


    .margin-left-20{
      margin-left: 20px;
    }
    .margin-left-40{
      margin-left: 40px;
    }
    .margin-left-60{
      margin-left: 60px;
    }
    .margin-left-80{
      margin-left: 80px;
    }
  }
</style>

