<template>
  <div id="root">
    <el-table
      :data="indexData"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        align="center"
        label="序号"
        width="180"/>
      <el-table-column
        prop="menuName"
        align="center"
        label="按钮名"
        width="180"/>
      <el-table-column
        prop="menuUrl"
        align="center"
        label="图标">
        <template slot-scope="scope">
          <img :src="scope.row.imgUrl" width="50" height="50">
        </template>
      </el-table-column>
      <el-table-column
        prop="explain"
        align="center"
        label="说明"/>
      <el-table-column
        prop="address"
        align="center"
        width="150"
        label="启用">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === '1'" type="primary" @click="menuEnable(scope.row.id)">启用</el-button>
          <el-button v-if="scope.row.status === '0'" type="danger" @click="menuDisable(scope.row.id)">停用</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        align="center"
        width="150"
        label="配置">
        <template slot-scope="scope">
          <el-button type="primary">配置</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'HomeIndex',
  data() {
    return {
      indexData: [] // APP端菜单列表数据
    }
  },
  mounted() {
    this.getMenuList()
  },
  methods: {
    getMenuList() { // 获取菜单列表
      this.$store.dispatch('GetMenuList').then(res => {
        this.indexData = res.data
      }).catch(() => {
        console.log('error GetMenuList')
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.ids = []
      val.map((item, index) => {
        this.ids.push(item.id)
      })
      console.log(this.ids)
    },
    menuEnable(id) { // 启用菜单
      this.$store.dispatch('MenuEnable', id).then(res => {
        const resCode = res.code
        if (resCode === '1') {
          this.$message.error(res.message)
          return
        }
        this.$message.success(res.message)
        this.getMenuList()
      }).catch(() => {
        console.log('error MenuEnable')
      })
    },
    menuDisable(id) { // 停用菜单
      this.$store.dispatch('MenuDisable', id).then(res => {
        const resCode = res.code
        if (resCode === '1') {
          this.$message.error(res.message)
          return
        }
        this.$message.success(res.message)
        this.getMenuList()
      }).catch(() => {
        console.log('error MenuDisable')
      })
    }
  }
}
</script>

<style scoped>

</style>
