<template>
  <div class="subfield-module-item-container">
    <div class="subfield-module-header">
      <div class="subfield-module-title">
        <img src="@/assets/images/consultingAgencyManagement/customForm/icon_drag@2x.png" alt="" class="subfield-module-dragg-target-icon">
        <el-form-item v-if="comModuleInfo.edit" class="subfield-module-form-item" :rules="comModuleInfo.subfieldModuleNameRules"
          :prop="subfieldModuleComName">
          <el-input v-model="comModuleInfo.subfieldModuleName" :placeholder="comModuleInfo.subfieldModulePlaceholder" clearable
            @keyup.enter.native.stop="editOk"></el-input>
        </el-form-item>
        <div v-else class="no-edit-module-name">
          <dsk-text-over-flow-tip>
            <span>{{comModuleInfo.defaultSubfieldModuleName}}</span>
            <template slot="overflow">{{comModuleInfo.defaultSubfieldModuleName}}</template>
          </dsk-text-over-flow-tip>
        </div>
      </div>
      <div class="subfield-module-title-tool" v-if="comModuleInfo.edit">
        <img src="@/assets/images/consultingAgencyManagement/customForm/icon_verify@2x.png" alt="" class="title-tool-edit-ok" @click.stop="editOk">
        <img src="@/assets/images/consultingAgencyManagement/customForm/icon_cancle@2x.png" alt="" class="title-tool-edit-cancel"
          @click.stop="editCancel">
      </div>
      <div class="subfield-module-title-tool" v-else>
        <img src="@/assets/images/consultingAgencyManagement/customForm/icon_edit@2x.png" alt="" class="title-tool-edit" @click="editModule">
        <img src="@/assets/images/consultingAgencyManagement/customForm/icon_delete@2x.png" alt="" class="title-tool-delete" @click="removeModule">
      </div>
    </div>
    <slot></slot>
  </div>
</template>
<script>
import { cloneDeep } from "lodash-es";
import DskTextOverFlowTip from "@/components/DskTextOverFlowTip";
export default {
  name: "subfieldModule",
  components: {
    DskTextOverFlowTip
  },
  props: {
    moduleInfo: Object,
    moduleIndex: Number
  },
  watch: {
    moduleInfo: {
      handler(newValue, oldValue) {
        // console.log(this.comModuleInfo, "subfieldModule");
        // 深克隆 避免未保存修改源数据 通过 订阅 editFinish事件处理更改源数据
        this.comModuleInfo = cloneDeep(newValue);
      },
      deep: true
    },
    moduleIndex: {
      handler(newValue) {
        this.comModuleIndex = newValue;
      },
      immediate: true
    }
  },
  data() {
    return {
      oldComModuleName: this.moduleInfo.subfieldModuleName,
      // 深克隆 避免未保存修改源数据 通过 订阅 editFinish事件处理更改源数据
      comModuleInfo: cloneDeep(this.moduleInfo),
      comModuleIndex: this.moduleIndex
    };
  },
  //可访问data属性
  created() {
    console.log(this.subfieldModuleComName);
  },
  //计算集
  computed: {
    subfieldModuleComName() {
      return `subfieldModuleList[${this.comModuleIndex}].subfieldModuleName`;
    }
  },
  //方法集
  methods: {
    removeModule() {
      this.$emit("removeModule", this.comModuleInfo);
    },
    editModule() {
      this.$emit("editModule", this.comModuleInfo);
      // this.comModuleInfo.edit = true;
    },
    editCancel() {
      this.comModuleInfo.edit = false;
      this.comModuleInfo.subfieldModuleName = this.oldComModuleName;
    },
    editOk() {
      this.comModuleInfo.edit = false;
      this.comModuleInfo.defaultSubfieldModuleName = this.comModuleInfo.subfieldModuleName;
      this.oldComModuleName = this.comModuleInfo.subfieldModuleName;
      this.$emit("editFinish", this.comModuleInfo, this.subfieldModuleComName);
    }
  },
}
</script>
<style lang="scss" scoped>
.subfield-module-item-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 12px;
  width: 100%;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  border-radius: 4px;
  overflow: hidden;

  .subfield-module-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    background: #f0f3fa;
    padding: 0px 16px;
    box-sizing: border-box;

    .subfield-module-title {
      display: flex;
      align-items: center;
      width: calc(100% - 60px);

      & > img {
        width: 14px;
        height: 14px;
        cursor: move;
      }
      .no-edit-module-name {
        font-size: 14px;
        font-weight: 400;
        margin-left: 12px;
        color: rgba(35, 35, 35, 0.8);
      }

      .no-edit-module-name {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .subfield-module-title-tool {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 12px;
      & > img {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }

      .title-tool-delete,
      .title-tool-edit-cancel {
        margin-left: 16px;
      }
    }
  }

  ::v-deep .subfield-module-form-item {
    display: flex;
    margin-bottom: 0px;
    margin-left: 12px;
    width: 100%;

    .el-form-item__content {
      flex: 1;
      line-height: 32px;
      height: 32px;
      .el-input {
        line-height: 32px;
        height: 32px;
        .el-input__suffix {
          display: flex;
          align-items: center;
        }
      }
    }

    .el-input {
      width: 100%;
      .el-input__inner {
        width: 100%;
        height: 32px;
        line-height: 32px;
        padding-left: 12px;

        &::placeholder {
          color: #c0c4cc !important;
          font-size: 14px !important;
        }
      }
      .el-input__suffix {
        .el-input__icon {
          line-height: 32px;
        }
      }
    }
  }
}
</style>
