<template>
  <div class="dsk-custom-item-render">
    <el-form-item class="dsk-custom-form-render-item" :prop="validatorTarget" :rules="validatorRules(comCustomItem)">
      <!-- 单行文本类型 -->
      <el-input v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder" clearable
        v-if="comCustomItem.comType == 'text'"></el-input>
      <!-- 多行文本类型 -->
      <el-input type="textarea" v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder"
        :show-word-limit="false" clearable v-if="comCustomItem.comType == 'textarea'"></el-input>
      <!-- 下拉框类型 -->
      <el-select v-model="comCustomItem.componentAttribute.value" :multiple="comCustomItem.formAttribute.isMultiple"
        :collapse-tags="comCustomItem.formAttribute.isMultiple" :placeholder="comCustomItem.componentAttribute.placeholder"
        v-if="comCustomItem.comType == 'select'">
        <el-option v-for="(item,index) in comCustomItem.formAttribute.selectOptions" :key="item.id" :label="item.value" :value="item.value">
        </el-option>
      </el-select>
      <!-- 时间类型 -->
      <el-date-picker v-model="comCustomItem.componentAttribute.value" type="datetime" :value-format="'yyyy-MM-dd HH:mm:ss'"
        :placeholder="comCustomItem.componentAttribute.placeholder" v-if="comCustomItem.comType == 'date'">
      </el-date-picker>
      <!-- 电话类型 -->
      <el-input v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder" clearable
        v-if="comCustomItem.comType == 'phone'"></el-input>
      <!-- 电子邮箱类型 -->
      <dsk-email-input v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder" :clearable="true"
        v-if="comCustomItem.comType == 'email'"></dsk-email-input>
      <!-- 图片类型 -->
      <dsk-photo-input v-model="comCustomItem.componentAttribute.value" v-if="comCustomItem.comType == 'photo'"
        :limit="comCustomItem.formAttribute.limit"></dsk-photo-input>
      <!-- 文件类型 -->
      <dsk-file-input v-model="comCustomItem.componentAttribute.value" v-if="comCustomItem.comType == 'file'"
        :limit="comCustomItem.formAttribute.limit"></dsk-file-input>
    </el-form-item>
  </div>
</template>
<script>
import DskEmailInput from "@/components/DskEmailInput";
import DskPhotoInput from "@/components/DskPhotoInput";
import DskFileInput from "@/components/DskFileInput";
export default {
  name: "dskCustomItemRender",
  components: {
    DskEmailInput,
    DskPhotoInput,
    DskFileInput
  },
  props: {
    customItem: Object,
    // 模块下标
    customModuleIndex: Number,
    // 父级下标
    customRowIndex: Number,
    // 当前下标
    customItemIndex: Number,
    // 是否处于修改模式
    isModify: Boolean
  },
  watch: {
    customItem: {
      handler(newValue) {
        this.comCustomItem = newValue;
      },
      deep: true
    },
    customRowIndex: {
      handler(newValue) {
        this.comCustomRowIndex = newValue;
      },
      immediate: true
    },
    customItemIndex: {
      handler(newValue) {
        this.comCustomItemIndex = newValue;
      },
      immediate: true
    },
    customModuleIndex: {
      handler(newValue) {
        this.comCustomModuleIndex = newValue;
      },
      immediate: true
    },
    isModify: {
      handler(newValue) {
        this.comIsModify = newValue;
      },
      immediate: true
    }
  },
  data() {
    return {
      comCustomItem: this.customItem,
      comCustomModuleIndex: this.customModuleIndex,
      comCustomRowIndex: this.customRowIndex,
      comCustomItemIndex: this.customItemIndex,
      comIsModify: this.isModify
    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {
    // prop传递的验证值
    validatorTarget() {
      return `subfieldModuleList.${this.comCustomModuleIndex}.childrentGroup.${this.comCustomRowIndex}.${this.comCustomItemIndex}.componentAttribute.value`;
    }
  },
  //方法集
  methods: {
    // 验证规则
    validatorRules(item) {
      if (!item.formAttribute) return {};
      return item.formAttribute.required ? item.formAttribute.requiredRules ? item.formAttribute.requiredRules : { required: true } : item.formAttribute.rules;
    }
  },
}
</script>
<style lang="scss" scoped>
.dsk-custom-item-render {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
