<template>
  <el-card class="card">
    <div slot="header" class="flex card__header">
      <el-tooltip class="item" content="一个业务对象有且仅有一个主实体，可以添加任意数量的子实体" effect="dark" placement="right-start">
        <span class="el-icon-question m-l-10">
          <strong>实体列表</strong>
        </span>
      </el-tooltip>
      <div>
        <el-button class="m-l-20" type="primary" @click="addEntRows()">添加实体</el-button>
      </div>
    </div>

    <div class="card__body">
      <el-scrollbar class="scrollbar-fullheight">
        <div v-for="(item, index) in formData.ents" :key="index" :class="{ active: item.isCheck && currentSunIndex < 0 }" class="card__ent">
          <div class="main-ent" @click="getEntsByIndex(index)">
            <div class="card__ent--header flex">
              <span class="card__ent--title">{{ item.show }}</span>
              <div class="card__ent--btngroup">
                <span v-if="item.isExternal != '1' && item.relation != 'main'" class="el-icon-plus" title="添加孙实体" @click.stop="addGrandSonEnt(index)" />
                <el-popconfirm title="确定删除吗？" @onConfirm="deleteEntRows(index)">
                  <span v-if="!item.id || !deployed" slot="reference" class="el-icon-delete" title="删除" />
                </el-popconfirm>

                <el-popconfirm
                  class="external-delete"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除吗？此操作会把子实体下的所有孙实体一并删除并且不可逆转且表单需要重新配置！"
                  @onConfirm="deleteEnt(index)"
                >
                  <span v-if="item.id && item.isExternal == 1 && item.type != 'main'" slot="reference" class="el-icon-delete" title="删除" />
                </el-popconfirm>
              </div>
            </div>

            <div class="card__ent--body">
              <ht-form-item label="实体描述" label-width="90px">
                <ht-input
                  :id="'changeEntsDesc' + index"
                  v-model="item.comment"
                  :maxlength="50"
                  :show-word-limit="true"
                  :validate="{ required: true }"
                  autosize
                  placeholder="请输入内容"
                  type="textarea"
                  @blur="entBlur(index)"
                  @input="chineseFormat('entName' + index, formData.ents, 'name', index, item.comment)"
                />
              </ht-form-item>

              <ht-form-item label="实体名称" label-width="90px">
                <ht-input
                  :id="'entName' + index"
                  v-model="item.name"
                  :disabled="item.id && deployed"
                  :maxlength="50"
                  :name="'entName' + index"
                  :show-word-limit="true"
                  :validate="'required: true|regex:^[a-zA-Z][a-zA-Z0-9_]*$,只能输入字母、数字、下划线，且以字母开头'"
                  placeholder="请输入内容"
                  @blur="entBlur(index)"
                />
              </ht-form-item>

              <ht-form-item v-if="item.relation != 'main'" label="实体关系" label-width="90px">
                <ht-radio v-model="item.relation" :disabled="item.id && deployed" :options="relationData" option-layout="horizontal" />
              </ht-form-item>
            </div>
          </div>

          <div v-if="item.children && item.children.length > 0">
            <el-collapse v-model="activeNames" accordion>
              <el-collapse-item v-for="(v, i) in item.children" :key="i" :class="{ active: i == currentSunIndex }" :name="i">
                <div slot="title" class="flex card__acd--header" @click="getGrandSonEntsByIndex(i, index)">
                  <span class="card__acd--title">{{ v.show }}</span>
                  <div class="card__acd--btngroup">
                    <span
                      v-if="(!deployed || !v.id) && i == currentSunIndex"
                      class="el-icon-delete"
                      title="删除"
                      @click.stop="deleteGrandSonEntRows(i, index)"
                    />
                  </div>
                </div>
                <div class="card__acd--body">
                  <ht-form-item label="实体描述" label-width="90px">
                    <ht-input
                      :id="'changeGrandSonEntsDesc' + i"
                      v-model="v.desc"
                      :maxlength="50"
                      :show-word-limit="true"
                      :validate="{ required: true }"
                      placeholder="请输入内容"
                      @blur="entBlur(i)"
                      @input="chineseFormat('changeGrandSonEntsName' + i, formData.ents[index].children, 'name', i, v.desc)"
                    />
                  </ht-form-item>

                  <ht-form-item label="实体名称" label-width="90px">
                    <ht-input
                      :id="'changeGrandSonEntsName' + i"
                      v-model="v.name"
                      :disabled="v.id && deployed"
                      :maxlength="50"
                      :name="'changeGrandSonEntsName' + i"
                      :show-word-limit="true"
                      :validate="'required: true|regex:^[a-zA-Z][a-zA-Z0-9_]*$,只能输入字母、数字、下划线，且以字母开头'"
                      placeholder="请输入内容"
                      @blur="entBlur(i)"
                    />
                  </ht-form-item>
                  <ht-form-item label="实体关系" label-width="90px">
                    <ht-radio v-model="v.relation" :disabled="v.id && deployed" :options="relationData" />
                  </ht-form-item>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'BusinessObjEnts',
  props: ['formData'],
  data() {
    return {
      relationData: [
        { key: 'onetoone', value: '一对一' },
        { key: 'onetomany', value: '一对多' },
      ],
      activeNames: ['-1'],
      currentEntType: null, // 当前编辑的实体类型：main,sub,sun
      currentSunIndex: -1, // 当前编辑的孙实体索引
    };
  },
  computed: {
    // 业务对象是否已经发布
    deployed: function() {
      return this.formData && this.formData.deployed == 1;
    },
  },
  watch: {
    currentEntType: function(newVal) {
      // 不再编辑孙实体时重置 索引为-1
      if (newVal != 'sun') {
        this.currentSunIndex = -1;
        this.activeNames = [-1];
      }
    },
  },
  methods: {
    deleteEnt(index) {
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.deleteEntRows(index);
      });
    },
    addEntRows() {
      this.$emit('addEntRows');
    },
    getEntsByIndex(index) {
      this.$emit('getEntsByIndex', index);
      this.$forceUpdate();
      this.currentEntType = index > 0 ? 'sub' : 'main';
    },
    addGrandSonEnt(index) {
      this.$emit('addGrandSonEnt', index);
    },
    deleteEntRows(index) {
      if (index - 1 >= 0) {
        // 删除实体之后自动选择上一个实体
        this.$emit('getEntsByIndex', index - 1, 'delete');
      }
      this.$emit('deleteEntRows', index);
    },
    entBlur(index) {
      this.$emit('entBlur', index);
    },
    chineseFormat(id, list, param, index, v) {
      this.$emit('chineseFormat', id, list, param, index, v);
    },
    getGrandSonEntsByIndex(i, index) {
      this.currentSunIndex = i;
      this.$emit('getGrandSonEntsByIndex', i, index);
      this.currentEntType = 'sun';
    },
    deleteGrandSonEntRows(i, index) {
      this.$emit('deleteGrandSonEntRows', i, index);
    },
  },
};
</script>

<style lang="scss" scoped>
@import 'element-variables';

.card {
  height: calc(100% - 10px);
  color: $--color-text-primary;

  ::v-deep .el-card__header,
  ::v-deep .el-card__body {
    padding: 18px 0;
  }

  ::v-deep .el-card__body {
    height: calc(100% - 90px);
  }

  ::v-deep .el-form-item__label {
    font-size: 12px;
  }

  ::v-deep .el-radio-horizontal {
    margin-right: 15px;
    padding-top: 10px;
  }

  .card__header {
    justify-content: space-around;
  }

  .card__body {
    height: 100%;
  }

  .height-32 {
    height: 32px;
  }

  .float-l {
    float: left;
  }

  .scrollbar-fullheight {
    height: 100%;
  }

  .card__ent {
    width: 281px;
    border-radius: 5px;
    background: $--color-white;
    border: 1px solid $--border-color-base;
    margin-bottom: 10px;
    margin-left: 10px;
  }

  .card__ent.active {
    border-color: $--color-primary;

    .card__ent--header {
      background: $--color-primary;
      border-color: $--color-primary;

      .card__ent--title,
      .card__ent--btngroup span {
        color: $--color-white;
        visibility: visible;
      }
    }
  }

  .card__ent--header {
    height: 30px;
    margin: -1px -1px 0 -1px;
    background: $--border-color-extra-light;
    border: 1px solid $--border-color-base;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    justify-content: space-between;
  }

  .card__ent--body {
    padding: 15px 15px 5px 5px;
  }

  .card__ent--title {
    cursor: default;
    line-height: 30px;
    font-weight: 700;
    margin-left: 10px;
  }

  .card__ent--btngroup {
    margin-right: 10px;
  }

  .card__ent--btngroup span {
    visibility: hidden;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
  }

  .card__ent--btngroup span + span {
    margin-left: 10px;
  }

  /** 孙实体 begin **/
  .el-collapse-item ::v-deep .el-collapse-item__header.is-active {
    border-bottom: 1px solid $--border-color-base;
  }

  .el-collapse-item ::v-deep .el-collapse-item__content {
    padding: 10px 15px 0 5px;
  }

  .el-collapse-item ::v-deep .el-collapse-item__wrap {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .card__acd--header {
    width: calc(100% - 30px);
    height: 100%;
    justify-content: space-between;
  }

  .card__acd--title {
    cursor: default;
    line-height: 30px;
    font-weight: 700;
    margin-left: 10px;
  }

  .card__acd--btngroup span {
    font-size: 14px;
    font-weight: 700;
  }

  .card__acd--btngroup span + span {
    margin-left: 10px;
  }

  .el-collapse-item.active ::v-deep .el-collapse-item__header {
    background: $--color-primary;
    border-color: $--color-primary;
    color: $--color-white;
  }

  /** 孙实体 end **/
}

::v-deep .el-textarea ::v-deep .el-input__count {
  height: 29px;
  bottom: 1px;
}
</style>
