<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>
          <!--button-->
          <el-button
            v-if="item.formType === 'button'"
            type="primary"
            :disabled="item.disabled"
            @click="
              item.clickFunc ? item.clickFunc($event) : defaultClick($event)
            "
            :icon="item.icon"
            >{{ item.btnText }}
          </el-button>
          <!-- input -->
          <el-input
            v-else-if="item.formType === 'input'"
            v-model.trim="form[item.model]"
            :refs="item.refs"
            :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:value="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:value="form[item.model]"
            :disabled="item.disabled"
            @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:value="form[item.model]"
            :disabled="item.disabled"
            @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:value="form[item.model]"
          />
          <!--  transfer-->
          <el-transfer
            v-else-if="item.formType === 'transfer'"
            v-model:value="form[item.model]"
            :data="item.data"
          />
          <!-- 时间 -->
          <el-date-picker
            v-else-if="item.formType === 'date-picker'"
            v-model:value="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-row
            v-else-if="item.formType === 'list'"
            v-for="(itemChild, indexChild) in form[item.model]"
            style="
              width: 800px;
              margin-bottom: 15px;
              font-size: 18px;
              color: #606266;
            "
          >
            <el-col :span="24">
              <span>{{ itemChild.medicinesName }}：</span>
              <span>每日{{ itemChild.dosageDay }}次，</span>
              <span>每次{{ itemChild.dosageNum }}</span>
              <el-button
                type="plain"
                icon="el-icon-delete"
                class="margin-left-20"
                @click="clickDeleteFunc(form[item.model], indexChild)"
                >删除</el-button
              >
            </el-col>
          </el-row>
        </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: {
    defaultClick() {},
    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
      }
    },
    clickDeleteFunc(list, index) {
      list.splice(index, 1)
    },
  },
}
</script>

<style lang="scss">
.form-template .screenSet {
  margin: 88px 30px 0px;
  overflow: visible !important;
}
.form-box {
  padding: 20px 0px;
  .sec-title {
    font-size: 18px;
    float: none;
    font-weight: bold;
    margin-left: 0;
    overflow: hidden;
    height: auto;
  }
  .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;
    .el-checkbox__label {
      font-size: 18px;
    }
  }
  .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>
