
<template>
  <div class="routerWapper">
    <div class="portalDetailTitle" v-if="$route.name=='lvot'">
			<span class="title">标签维护</span>
      <!-- {{currentState}} -->
			<div class="detailOperations">
				<a-button @click="backPage"> 返回 </a-button>
			</div>
		</div>
    <div class="layoutMargin layoutPadding" v-if="$route.name == 'lvot'">
      <a-row v-if="$route.name=='lvot'">
          <a-col :span="4" style="border-right:1px solid #ccc;height:100%; position:relative">
            <span style="display: block; width: 90%; color:#1890ff; font-size: 16px; font-weight: 500; padding-bottom:5px;"><a-button style="width: 100%" size='medium' type="default" @click="addLabel"> <a-icon type="plus" />添加标签 </a-button></span>
            <a-tree
              style="height: 700px"
              :tree-data="treeData"
              :replace-fields="replaceFields"
              :selected-keys="selectedKeys"
              @select="onSelect"
            />
          </a-col>
          <a-col :span="17" :offset="1">
            <RightPanel v-if="currentState == 'create'" :trigger-type='currentState' @finish='getFinishState' />
            <RightPanel v-else-if="currentState == 'loadChildLabel'" :trigger-type='currentState' :label-id='labelId' @finish='getFinishState' />
            <ParentRightPanel v-else-if="currentState == 'loadParentLabel'" :trigger-type='currentState' :label-id='labelId' @finish='getFinishState' />
            <EmptyRightPanel v-else />
          </a-col>
      </a-row>
    </div>
    <!-- <div v-if="$route.name=='lvot'">
      <a-row>
        <a-col :span='4' class="layoutMargin layoutPadding" style="height: 680px">
          <a-row style="height: 36px">
            <a-button style="width: 100%" size='small' type="default" @click="addLabel"> <a-icon type="plus" />添加标签 </a-button>
          </a-row>
          <a-tree
            :tree-data="treeData"
            :replace-fields="replaceFields"
            :selected-keys="selectedKeys"
            @select="onSelect"
          />
        </a-col>
        <a-col :span='1'></a-col>
        <a-col :span='18' class="layoutMargin layoutPadding" style="height: 680px">
          <RightPanel v-if="currentState == 'create'" :trigger-type='currentState' @finish='getFinishState' />
          <RightPanel v-else-if="currentState == 'loadChildLabel'" :trigger-type='currentState' :label-id='labelId' @finish='getFinishState' />
          <ParentRightPanel v-else-if="currentState == 'loadParentLabel'" :trigger-type='currentState' :label-id='labelId' @finish='getFinishState' />
          <EmptyRightPanel v-else />
        </a-col>
      </a-row>
    </div> -->
    <RouterWapper v-else />
  </div>
</template>

<script>
import RightPanel from '@/views/label/labelRightSide.vue'
import ParentRightPanel from '@/views/label/parentLabelRightPanel.vue'
import EmptyRightPanel from '@/views/label/labelRightSideEmpty.vue'

const treeData = []

export default {
  name: 'lvot',
  components: {
    RightPanel,
    EmptyRightPanel,
    ParentRightPanel
  },
  data() {
    return {
      treeData,
      replaceFields: {
        children: 'children',
        title: 'labelName',
        key: 'id'
      },
      selectedKeys: [],
      currentState: null,
      labelId: null
    }
  },
  mounted() {
    this.getLabelList()
  },
  methods: {
    getFinishState(state) {
      if(state == true) {
        this.currentState = null
        this.getLabelList()
      }
    },
    getLabelList() {
      this.$ajax.get({
        url: this.$api.GET_LABEL_LIST,
      }).then(res => {
        if (res.code == 200) {
          this.treeData = this.$com.confirm(res, 'data.content', [])
          console.log(JSON.stringify(this.treeData))
        }
      })
    },
    backPage(){ // 返回按钮
      this.$router.back()
    },
    onSelect(selectedKeys, node) {
      console.log(selectedKeys, node.node.$children.length)
      this.$ajax.get({
        url: this.$api.GET_LABEL_DETAIL.replace('{id}', selectedKeys[0]),
      }).then(res => {
        if (res.code == 200) {
          let result = this.$com.confirm(res, 'data.content', [])
          this.labelId = selectedKeys[0]
          console.log(result.parentId, node.node.$children.length)
          if(result.parentId !== '0' && node.node.$children.length == 0 || result.parentId == '0' && node.node.$children.length == 0) { // 为二级菜单
            this.currentState = 'loadChildLabel'
          } else { // 为一级菜单
            this.currentState = 'loadParentLabel'
          }
        }
      })
    },
    onCheck(checkedKeys, info) {
      console.log('onCheck', checkedKeys, info)
    },
    addLabel() {
      this.currentState = 'create'
      console.log('add')
    }
  },
}
</script>

<style>
.ant-tree li {
    margin: 0;
    padding: 10px 0;
    white-space: nowrap;
    list-style: none;
    outline: 0;
}

.ant-tree-child-tree > li:first-child {
  padding-top: 20px;
}
</style>

