<template>
    <div>
        <Tabs type="card" :animated="false" @on-click="tabChange" v-model="tabIndex">
            <TabPane label="菜单列表" name="list">
                <menu-list ref="menuList" @addOption="addOption" @updateOption="updateOption"></menu-list>
            </TabPane>
            <TabPane :label="optionName" name="option">
                <menu-option ref="menuOption" :optionState="optionState" :formData="formData" :menuData="menuData"
                             @cancelOption="cancelOption" @saveOption="saveOption"></menu-option>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>

import menuList from './components/menu-list'
import menuOption from './components/menu-option'
// import { log } from '@/libs/util'

export default {
  name: 'WlMenuManager',
  components: {
    menuOption,
    menuList
  },
  data () {
    return {
      tabIndex: 'list',
      optionName: '添加菜单',
      optionState: false, // 添加false（默认） 修改true
      formData: {},
      menuData: [] // 上级菜单数据
    }
  },
  // mounted () {
  //   log('menuManager', 'readme')
  // },
  methods: {
    addOption (data) {
      this.optionName = '添加菜单'
      this.tabIndex = 'option'
      this.optionState = false
      this.menuData = this.$refs.menuList.superMenuData
      this.$refs.menuOption.interfaceList = []
      this.formData = {
        is_show: '1', // 是否可见
        wx_show: '0', // 微信端是否可见
        type: '1',
        parent_id: data.id, // 上级机构id
        sort: parseInt(data.sort) + 30 // 排序
      }
    },
    updateOption (data) {
      this.optionName = '修改菜单'
      this.optionState = true
      this.formData = this.$common.xeUtils.clone(data)
      this.menuData = this.$refs.menuList.superMenuData
      console.log(this.formData, 456)
      this.$refs.menuOption.getById({ id: this.formData.id })
      this.$refs.menuOption.getInForMenu({ permission: this.formData.permission })
      this.tabIndex = 'option'
    },
    saveOption () {
      this.tabIndex = 'list'
      this.optionName = '添加菜单'
      this.$refs.menuList.findList()
      this.clearSelect()
    },
    cancelOption () {
      this.tabIndex = 'list'
      this.optionName = '添加菜单'
      this.$refs.menuList.findList()
      this.clearSelect()
    },
    tabChange (val) {
      if (val === 'list') {
        this.optionName = '添加菜单'
        this.clearSelect()
      } else {
        const data = this.$refs.menuList.originData[0]
        this.menuData = this.$refs.menuList.superMenuData
        this.$refs.menuOption.interfaceList = []
        this.formData = {
          is_show: '1', // 是否可见
          wx_show: '0', // 微信端是否可见
          type: '1',
          parent_id: data.parent_id, // 上级机构id
          sort: parseInt(data.sort) + 30 // 排序
        }
      }
    },
    // iview下拉框select添加filterable造成的bug (置空处理)
    clearSelect () {
      this.$refs.menuOption.$refs.menuSelect.setQuery(null)
    }
  }
}
</script>

<style scoped>

</style>
