<template>
  <section class="diagram">
    <el-page-header @back="$emit('back')" :content="group.groupName">
    </el-page-header>
    <ul v-if="group.groupName" class="center">
      <li style="display: flex">
        <div>
          <img src="@/assets/hos_images/center.png" alt="" />
          <p>{{ group.groupName }}</p>
          <div class="operat">
            <el-button type="text" @click="$emit('editGroup', group)"
              >编辑</el-button
            >
            <el-button type="text" @click="handleAdd()">添加</el-button>
            <el-button
              type="text"
              style="color: #f56c6c"
              @click="handleDel(group, 1)"
              >删除</el-button
            >
          </div>
        </div>
        <ul :class="groupList.length ? 'line' : ''" class="sub-center">
          <li v-for="row in groupList" :key="row.id" style="display: flex">
            <div>
              <img src="@/assets/hos_images/sub-center.png" alt="" />
              <p>{{ row.groupName }}</p>
              <div class="operat">
                <el-button type="text" @click="$emit('editGroup', row)"
                  >编辑</el-button
                >
                <el-button type="text" @click="handleAdd('3', row.id)"
                  >添加</el-button
                >
                <el-button
                  type="text"
                  style="color: #f56c6c"
                  @click="handleDel(row)"
                  >删除</el-button
                >
              </div>
            </div>
            <ul :class="row.children && row.children.length ? 'line' : ''">
              <li v-for="child in row.children" :key="child.id">
                <div>
                  <img src="@/assets/hos_images/depart.png" alt="" />
                  <p>{{ child.groupName }}</p>
                  <div class="operat">
                    <el-button type="text" @click="$emit('editGroup', child)"
                      >编辑</el-button
                    >
                    <el-button
                      type="text"
                      style="color: #f56c6c"
                      @click="handleDel(child)"
                      >删除</el-button
                    >
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <el-empty v-else></el-empty>
  </section>
</template>

<script>
import { getAllGroupList } from "@/api/coop-group"
import { translateListToTree } from "@/utils/handleRoutes"
import { delCoopGroup } from "@/api/coop-group.js"
export default {
  props: ["group", "diseaseCode"],
  name: "SddDiagram",
  data() {
    return {
      groupList: [],
    }
  },
  methods: {
    update() {
      this.getAllGroupList()
    },
    getAllGroupList() {
      const id = this.group.id
      if (!id) return
      getAllGroupList({
        diseaseCode: this.diseaseCode,
        id,
      }).then((res) => {
        this.groupList = translateListToTree(res.data, id)
      })
    },
    handleAdd(level = "2", parentId = this.group.id) {
      this.$emit("editGroup", { level, parentId })
    },

    handleDel({ id, groupName }, type) {
      this.$confirm(`确定删除${groupName}吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delCoopGroup(id).then((res) => {
            if (res.code === 1) {
              this.$message.success("删除成功")
              if (type) {
                this.$emit("delete")
              } else {
                this.getAllGroupList()
              }
            }
          })
        })
        .catch(() => {})
    },
  },
  created() {
    this.getAllGroupList()
  },
}
</script>
<style lang="scss" scoped>
.diagram {
  height: 85vh;
  overflow-x: auto;
  .center {
    padding-top: 20px;
    img {
      width: 80px;
      margin-left: 40px;
    }
    .operat {
      width: 160px;
      text-align: center;
    }
    font-size: 16px;
    li {
      margin-bottom: 40px;
      padding-right: 40px;
      position: relative;

      p {
        width: 160px;
        text-align: center;
      }
      > ul {
        position: relative;

        // &.line::before {
        //   content: " ";
        //   height: 20px;
        //   width: 1px;
        //   background-color: #ddd;
        //   left: 80px;
        //   position: absolute;
        // }

        li {
          position: relative;

          // &::before {
          //   content: " ";
          //   height: 20px;
          //   width: 1px;
          //   background-color: #ddd;
          //   position: absolute;
          //   left: 80px;
          //   top: -20px;
          // }
          // &:not(:last-child)::after {
          //   content: " ";
          //   height: 1px;
          //   width: 100%;
          //   background-color: #ddd;
          //   position: absolute;
          //   left: 80px;
          //   top: -20px;
          // }
        }
      }
    }
  }
}
ul,
li {
  list-style: none;
}
</style>