
<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' />
          <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
    }
  },
  mounted() {
    this.getLabelList()
  },
  methods: {
    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, info) {
      console.log('selected', selectedKeys, info)
    },
    onCheck(checkedKeys, info) {
      console.log('onCheck', checkedKeys, info)
    },
    addLabel() {
      this.currentState = 'create'
    }
  },
}
</script>

<style scoped>

</style>

