<template>
  <div class="dsk-custom-item-render" :class="classCreate(comCustomItem.comType)">
    <!-- 编辑模式 -->
    <el-form-item class="dsk-custom-form-render-item" :prop="validatorTarget" :rules="validatorRules(comCustomItem)" :show-message="false">
      <template v-if="isModify">
        <!-- 单行文本类型 -->
        <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>
      </template>
      <!-- 图片类型 -->
      <dsk-photo-input v-model="comCustomItem.componentAttribute.value" v-if="comCustomItem.comType == 'photo'"
        :limit="comCustomItem.formAttribute.limit" :disabled="!isModify" @change="fileChange"></dsk-photo-input>
      <!-- 文件类型 -->
      <dsk-file-input v-model="comCustomItem.componentAttribute.value" v-if="comCustomItem.comType == 'file'"
        :limit="comCustomItem.formAttribute.limit" :disabled="!isModify" @change="fileChange"></dsk-file-input>

      <!-- 详情模式下 -->
      <template v-if="!isModify && detailTypes.includes(comCustomItem.comType)">
        <div class="dsk-cutom-form-render-detail-item">
          <div class="render-detail-item-inner">
            <dsk-text-over-flow-tip>
              <div v-if="comCustomItem.comType == 'textarea'" v-html="detailRender(comCustomItem)"></div>
              <span v-else>{{detailRender(comCustomItem)}}</span>
              <template slot="overflow">{{detailRender(comCustomItem)}}</template>
            </dsk-text-over-flow-tip>
          </div>
        </div>
      </template>
    </el-form-item>

  </div>
</template>
<script>
import DskEmailInput from "@/components/DskEmailInput";
import DskPhotoInput from "@/components/DskPhotoInput";
import DskFileInput from "@/components/DskFileInput";
import DskTextOverFlowTip from "@/components/DskTextOverFlowTip";
import { cloneDeep } from 'lodash-es';
export default {
  name: "dskCustomItemRender",
  components: {
    DskEmailInput,
    DskPhotoInput,
    DskFileInput,
    DskTextOverFlowTip
  },
  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,
      detailTypes: ["text", "textarea", "select", "date", "phone", "email"],
      validatorMap: {
        "email": [/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, "邮箱"],
        "phone": [/^1[3-9]\d{9}$/, "电话号码"]
      }
    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {
    // prop传递的验证值
    validatorTarget() {
      return `subfieldModuleList.${this.comCustomModuleIndex}.childrentGroup.${this.comCustomRowIndex}.${this.comCustomItemIndex}.componentAttribute.value`;
    }
  },
  //方法集
  methods: {
    // 验证规则
    validatorRules(item) {
      const _item = cloneDeep(item);
      const itemLabel = _item.formAttribute.label;
      let type = Object.prototype.toString.call(_item.componentAttribute.value).split(" ")[1].replace("]", "").toLowerCase();
      if (!_item.formAttribute) return { required: false, type };
      if (_item.formAttribute.required) {
        if (item.formAttribute.requiredRules) {
          if (_item.formAttribute.requiredRules.validator) {
            let validatorRule = cloneDeep(this.validatorMap[_item.comType]);
            _item.formAttribute.requiredRules.validator = (rule, value, callback) => {
              const reg = validatorRule[0];
              if (!value && !value?.toString()?.trim()) {
                return callback(new Error(itemLabel ? `请输入${itemLabel}` : `请输入${validatorRule[1]}`));
              }
              if (!reg.test(value)) {
                return callback(new Error(itemLabel ? `请输入正确的${itemLabel}` : `请输入正确的${validatorRule[1]}`));
              }
              return callback();
            };
          }
          return _item.formAttribute.requiredRules;
        };
        return { required: true, type, message: `${itemLabel}不能为空` };
      }
      if (Object.keys(_item.formAttribute.rules).length) {
        return _item.formAttribute.rules;
      } else {
        return { required: false, type };
      };
    },
    classCreate(comType) {
      const classParams = {
        [`custom-render-item-${comType}`]: true
      };
      if (!this.comIsModify) classParams["is-detail-custom-render-item"] = true;
      if (this.comIsModify) classParams["is-edit-custom-render-item"] = true;
      return classParams;
    },
    detailRender(item) {
      let value = item.componentAttribute.value;
      const valueType = Object.prototype.toString.call(value);
      if (valueType === "[object String]") {
        if (value || value == "0") {
          value = value.replace(new RegExp("\\n", "gmi"), "<\/br>");
          // 富文本框保留空格
          if (item.comType == "textarea") value = value.replace(new RegExp("\\s", "gmi"), "&nbsp;");
          return value;
        }
        return "-";
      };
      if (valueType === "[object Array]") return value?.length ? value.join(",") : "-";
    },
    fileChange(isRemove, fileList) {
      this.$emit("fileChange", isRemove, fileList, this.comCustomItem);
    }
  },
}
</script>
<style lang="scss" scoped>
.dsk-custom-item-render {
  width: 100%;
  height: 100%;
  position: relative;

  &.custom-render-item-file,
  &.custom-render-item-photo {
    ::v-deep .dsk-photo-input-container,
    .dsk-file-input-container {
      height: 40px;
      display: flex;
      align-items: center;
      padding-left: 12px;
      box-sizing: border-box;
    }
  }

  ::v-deep .dsk-custom-form-render-item {
    .dsk-cutom-form-render-detail-item {
      width: 100%;
      display: flex;
      align-items: center;
      height: 40px;
      line-height: 40px;
      padding: 9px 12px;
      box-sizing: border-box;

      .render-detail-item-inner {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  &.custom-render-item-textarea {
    &.is-detail-custom-render-item {
      .dsk-cutom-form-render-detail-item {
        display: block;
        height: 73px;
        line-height: 22px;
        padding: 9px 12px;
        overflow: auto;
        box-sizing: border-box;

        .render-detail-item-inner {
          overflow: unset;
          ::v-deep .dsk-text-over-flow-tip {
            .text-over-flow-tip-inner {
              overflow: unset;
            }
          }
        }
      }
    }
    /* 编辑模式 */
    &.is-edit-custom-render-item {
    }
  }
}
</style>
