<template>
  <com-head :options="headList" class="frame-head">
  </com-head>
  <div class="farme">
    <el-tree
      node-key="id"
      default-expand-all
      class="framework"
      :data="origin"
      :expand-on-click-node="false"
    >
      <template v-slot="{node, data}">
        <div class="custom-tree-node">
          <span class="text">{{ data.deptName }}</span>
          <span @click="readyInsert(data)" class="btn" v-if="data.hasChildren === 1">
            <i class="el-icon-plus"></i>
          </span>
          
          <span @click="readyUpdate(data)" class="btn">
            <i class="el-icon-edit"></i>
          </span>

          <span @click="remove(node, data)" class="btn" v-if="data.canDel === 1">
            <i class="el-icon-delete"></i>
          </span>


        </div>
      </template>
    </el-tree>

    <com-dialog :title="(operState.isInsert ? '添加' : '修改') + '品牌專櫃'" v-model:show="operState.show" @submit="append">
      <el-form ref="form" label-width="100px" class="framework-from">
        <el-form-item label="品牌名稱：" class="mandatory">
          <el-input v-model="operState.deptName" placeholder="請輸入" maxlength="15" show-word-limit></el-input>
        </el-form-item>
      </el-form>
    </com-dialog>

  </div>
</template>

<script>
import { ref } from "vue";
import comHead from "@/components/head";
import comDialog from "@/components/dialog";
import auth from "@/state/viewAuth";
import axios from 'axios'
import { 
  getDeptLogList,
  insertCompany,
  deleteCompany,
  updateCompany
} from '@/request/config'

const analysis = (data, level) => {
  return data.map(item => ({
    id: item.id,
    deptName: item.deptName,
    hasChildren: item.hasChildren,
    canDel: item.canDel,
    level: level,
    children: item.children ? analysis(item.children, level + 1) : []
  }))
}

export default {
  name: 'framework',
  setup() {
    const headList = ref([{ name: "組織架構", value: '0' }]);
    const origin = ref([]);
    const operState = ref({ deptName: '', data: null, show: false, isInsert: false })


    const readyInsert = (data) => {
      operState.value.data = data
      operState.value.show = true
      operState.value.isInsert = true
      operState.value.deptName = ''
    }
    const readyUpdate = data => {
      operState.value.data = data
      operState.value.show = true
      operState.value.isInsert = false
      operState.value.deptName = data.deptName
    }
    return { headList, origin, operState, readyInsert, readyUpdate, auth };
  },
  async mounted() {
    let res = await axios.post(getDeptLogList, {})
    // res.data[0].children = res.data[0].children.concat(res.data[0].children).concat(res.data[0].children)
    this.origin = analysis(res.data, 0)
  },
  methods: {
    async remove(node, data) {
      if (!(await this.$confirm(`確定要刪除${data.deptName}嗎？`, '提示'))) return;

      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);

      await axios.post(deleteCompany, {id: data.id})

      children.splice(index, 1);
      parent.data.children = [...children]

      if (parent.id === 0) {
        this.origin = [...parent.data.children]
      }
    },
    async append() {
      const data = this.operState.data

      if (!this.operState.deptName) {
        return this.$alert('請輸入公司名稱！', '提示')
      }

      if (this.operState.isInsert) {
        const newCompany = { deptName: this.operState.deptName }
        const res = await axios.post(insertCompany, { ...newCompany, parentId: data.id })
        const newChild = { id: res.data.id, ...newCompany, level: data.level + 1,  children: [] };
        data.children = data.children ? [...data.children, newChild] : [newChild]
      } else {
        await axios.post(updateCompany, { id: data.id, deptName: this.operState.deptName })
        data.deptName = this.operState.deptName
      }
      this.operState.deptName = ''
      this.operState.show = false
    }
  },
  components: {
    "com-dialog": comDialog,
    "com-head": comHead,
  },
};
</script>

<style lang="scss" scoped>
.farme {
  padding: 16px 124px 32px 16px;
  background-color: #fff;
  flex: 1;
  overflow-y: auto;
}

.custom-tree-node {
  margin: 10px 0;
  .text {
    font-size: 1rem;
    color: #303133;
  }

  .btn {
    color: rgb(144,144,144);
    border: 1px dashed currentColor;
    display: inline-block;
    margin-left: 10px;
    padding: 3px 5px;

    i {
      font-size: 0.8rem;
    }
  }
}

.framework-from {
  width: 320px;
  margin: 80px auto;
}

</style>

<style lang="scss">
.framework .el-tree-node__content {
  height: auto;
}
.frame-head .head-content-layer.show {
  padding: 0;
}
</style>