<template>
  <div class="right-list-toolbar">
    <div>
      <!-- 二级导航栏 start-->
      <el-toolbar>
        <el-button @click="addMenu" priv="Weixin.Manage.Menu_Add">
          <i class="fa fa-plus" aria-hidden="true"></i>新建
        </el-button>
        <el-button @click="synchronizeremote"  priv="Weixin.Manage.Menu_Sync">
          <i class="fa fa-refresh" aria-hidden="true"></i>同步到本地
        </el-button>
        <el-button @click="synchronize"  priv="Weixin.Manage.Menu_Sync">
          <i class="fa fa-refresh" aria-hidden="true"></i>同步到公众号
        </el-button>
      </el-toolbar>
      <!-- 二级导航栏 end-->

      <!--树形tab栏-->
      <div id="weixinGrid" class="" v-loading="menuLoading">
      <tree-table :data="menuTable" :expanded-level="9" row-key="ID">
        <tree-table-column label="菜单名称">
          <template slot-scope="scope">
            <el-button type="text" class="table-title-button" :title="scope.row.name" priv="Weixin.Manage.Menu_Edit" @click.stop="editMenu(scope.row)">{{scope.row.name}}
            </el-button>
          </template>
        </tree-table-column>
        <el-table-column prop="status" label="状态">
        </el-table-column>
        <el-table-column prop="typeName" label="类型">
        </el-table-column>
        <el-table-column prop="linkName" label="链接名称">
        </el-table-column>
        <el-table-column prop="URL" label="URL" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="mediaTypeName" label="媒体类型">
        </el-table-column>
        <el-table-column label="操作" align="right">
          <template slot-scope="scope">
            <el-button @click.stop="enable(scope.row)" priv="Weixin.Manage.Menu_Start" type="text" title="启用" class="table-operate-icon">
              <i class="fa fa-check-circle f16"></i>
            </el-button>
            <el-button @click.stop="disable(scope.row)" priv="Weixin.Manage.Menu_Stop" type="text" title="停用" class="table-operate-icon">
              <i class="fa fa-minus-circle f16"></i>
            </el-button>
            <el-button @click.stop="editMenu(scope.row)" priv="Weixin.Manage.Menu_Edit" type="text" title="编辑菜单" class="table-operate-icon">
              <i class="fa fa-edit f16"></i>
            </el-button>
            <el-button @click.stop="removeMenu(scope.row)" priv="Weixin.Manage.Menu_Delete" type="text" title="删除" class="table-operate-icon">
              <i class="fa fa-remove f16"></i>
            </el-button>
          </template>
        </el-table-column>
      </tree-table>
      </div>
    </div>

  </div>
</template>

<script>
import TreeTable from '@src/components/treeTable/TreeTable.vue'
import TreeTableColumn from '@src/components/treeTable/TreeTableColumn.vue'
import util from '@src/common/util.js'

export default {
  components: {
    'tree-table': TreeTable,
    'tree-table-column': TreeTableColumn
  },
  data() {
    return {
      menuTable: [], // 微信菜单数据
      menuLoading: true // 菜单加载动画
    }
  },
  methods: {
    handleCommand(method) {
      if (method && typeof this[method] === 'function') {
        this[method]()
      } else {
        console.warn(`未找到改菜单对应的方法:${method}`)
      }
    },
    // 新建菜单内容
    async addMenu() {
      this.$router.push(`${this.$route.path}/new`)
    },
    // 编辑菜单内容
    editMenu(row) {
      this.$router.push(`${this.$route.path}/${row.ID}`)
    },
    // 删除菜单内容
    async removeMenu(row) {
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/wechatmenu/${row.ID}`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.getMentData()
        }
      } catch (e) {

      }
    },
    // 启用微信菜单
    enable(row) {
      this.menuOption(true, row)
    },
    // 停用微信菜单
    disable(row) {
      this.menuOption(false, row)
    },
    async menuOption(flag, row) {
      let obj = {
        status: flag ? 'Y' : 'N',
        IDs: row.ID
      }
      let res = await axios.put('/ui/wechatmenu/status', obj)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.getMentData()
      }
    },
    // 加载微信菜单数据
    async getMentData() {
      this.menuLoading = true
      let data = await axios.get('/ui/wechatmenu', {
        params: {
          weiXinID: this.$route.params.weiXinID
        }
      })
      this.menuTable = data.data.data
      this.menuLoading = false
    },
    // 同步到本地
    async synchronizeremote() {
      try {
        await this.$confirm('同步远程菜单将删除现有菜单数据，确认从微信公众号同步吗？', '确认同步', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.put('/ui/wechatmenu/syncremote', {weiXinID: this.$route.params.weiXinID})
        util.showResponseMessage(res.data)
      } catch (e) {

      }
    },
    // 同步公众号
    async synchronize() {
      try {
        await this.$confirm('同步菜单将删除原有的菜单数据，确认同步到微信公众号吗？', '确认同步', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.put('/ui/wechatmenu/sync', {weiXinID: this.$route.params.weiXinID})
        util.showResponseMessage(res.data)
      } catch (e) {

      }
    }
  }
}
</script>

<style>
#weixinGrid div.el-table__body-wrapper {
  overflow: inherit;
}
</style>
