<template>
  <div class="attachment-group">
    <h5 @click="handleGroupForm()">附件分组
      <el-icon class="el-icon-circle-plus" />
    </h5>
    <ul class="group_list">
      <li v-for="(item,key) in groupList" :key="key" @click="selectGroup(item.id)">
        <em v-if="item.id === selectGroupIndex" class="iconfont icon-folder-opened" />
        <em v-else class="iconfont icon-folder" />
        <span>{{ item.name }}</span>
        <el-popover placement="right" trigger="click">
          <div v-if="item.id>0" slot="reference" class="op">
            <i class="el-icon-s-tools" />
          </div>
          <div slot="default">
            <el-button size="mini" type="primary" @click.stop="editGroup(item.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delGroup(item.id)">删除</el-button>
          </div>
        </el-popover>
      </li>
    </ul>
    <dk-form-create-dialog ref="group" :form-data="formData" append-to-body @submit="getAttachmentGroupList()" />
  </div>
</template>

<script>
import { getAttachmentGroupForm, getAttachmentGroupList, delAttachmentGroup } from '../../../../api/attachment'
import eventBus from '../eventBus'

export default {
  name: 'DkAttachmentGroup',
  props: {
    type: {
      default: 1,
      type: Number
    }
  },
  data() {
    return {
      selectGroupIndex: '0',
      formData: null,
      groupList: null
    }
  },
  mounted() {
    this.getAttachmentGroupList()
  },
  methods: {
    handleGroupForm(id) {
      getAttachmentGroupForm(id).then(res => {
        this.formData = res.data
        this.$refs.group.dialogFormVisible = true
      })
    },
    emitGetGroup() {
      const groups = this.groupList.filter(item => {
        if (item.id > 0 && item.id !== this.selectGroupIndex) { return item }
      })
      eventBus.$emit('getGroup', groups)
    },
    getAttachmentGroupList() {
      getAttachmentGroupList(this.type).then(res => {
        this.groupList = res.data
        this.emitGetGroup()
      })
    },
    editGroup(id) {
      this.handleGroupForm(id)
    },
    delGroup(id) {
      this.$confirm('此操作将永久删除该分组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delAttachmentGroup(id).then(res => {
          this.$message.success(res.msg)
          this.getAttachmentGroupList()
        })
      })
    },
    selectGroup(index) {
      this.selectGroupIndex = index
      eventBus.$emit('selectGroup', index)
      this.$emit('select', index)
      this.emitGetGroup()
    }
  }
}
</script>

<style scoped lang="scss">
.attachment-group {
  height: 380px;
  overflow: auto;

  h5 {
    .el-icon-circle-plus{
      cursor: pointer;
    }
    font-size: 14px;
    color: #8492a6;
    margin-top: 10px;
    font-weight: 400;
    text-align: center;
    padding-bottom: 10px;
    user-select: none;
  }

  .group-menu {
    border-right: none;
  }

  .group_list {
    li {
      position: relative;
      cursor: pointer;
      padding: 10px;
      border-bottom: 1px solid #f5f5f5;
      &:hover {
        background: #ebfaff;
      }
      &:hover .op {
        display: block;
      }
      .op {
        position: absolute;
        right: 0;
        top: 0;
        color: #ccc;
        padding: 12px;
        display: none;

        &:hover {
          color: #409eff;
        }
      }
      .iconfont {
        font-size: 20px;
        color: #409eff;
        padding: 5px;
      }
      .icon-folder-opened {
        color: #89DCFB;
      }
    }
  }

}

</style>
