
<template>
  <div class="routerWapper">
    <div class="portalDetailTitle" v-if="$route.name=='lvot'">
			<span class="title">标签维护</span>
			<div class="detailOperations">
				<a-button @click="backPage"> 返回 </a-button>
			</div>
		</div>
    <div v-if="$route.name=='lvot'">
      <a-row>
        <a-col :span='4' class="layoutMargin layoutPadding">
          <a-row>
            <a-button 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">
          <RightPanel v-if="currentState == 'create'" :trigger-type='currentState' @finish='getFinishState' />
          <RightPanel v-else-if="currentState == 'loadChildLabel'" :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 EmptyRightPanel from '@/views/label/labelRightSideEmpty.vue'

const treeData = []

export default {
  name: 'lvot',
  components: {
    RightPanel,
    EmptyRightPanel
  },
  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
      }
    },
    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) {
      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]
          if(!!result.parentId) { // 为二级菜单
            this.currentState = 'loadChildLabel'
          } else { // 为一级菜单
            this.currentState = 'loadParentLabel'
          }
        }
      })
    },
    onCheck(checkedKeys, info) {
      console.log('onCheck', checkedKeys, info)
    },
    addLabel() {
      this.currentState = 'create'
      console.log('add')
    }
  },
}
</script>

<style scoped>

</style>

