<template>
  <div class="main-page">
    <div class="main-page-header">
      <p class="title">菜单配置</p>
    </div>
    <div class="main-page-body">
      <div class="mainContent">
        <el-form
          :model="formData"
          ref="formData"
          size="small"
        >
          <el-form-item
            :prop="item.keyName"
            :label="'是否展现' + item.menuName"
            v-for="item in list"
            :key="item.keyName"
          >
            <el-switch
              v-model="formData[item.keyName]"
              inactive-text="是"
              active-color="#ff4949"
              inactive-color="#13ce66"
              active-text="否"
              :active-value="2"
              :inactive-value="1"
              @change="changeHandle(item)"
            >
            </el-switch>
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template>
<script>
import { queryCheckMenuList, updateCheckMenuList } from '@/api/nav'
import store from '../../store'
import {
  Auth
} from '@/util/auth'
export default {
  name: 'expertPage',
  data() {
    return {
      list: [],
      formData: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      queryCheckMenuList({}).then(res => {
        this.list = res.respData
        // console.log(this.list)
        const p = {}
        this.list.forEach(item => {
          p[item.keyName] = item.isCheck
        })
        this.formData = p
      })
    },
    changeHandle(item) {
      const params = {
        ...item
      }
      params.isCheck = this.formData[item.keyName]
      updateCheckMenuList(params).then(res => {
        if (res.msg === 201) {
          this.$message.success('修改成功')
          // store.dispatch('clearStore')
          store.dispatch('LoginByToken', Auth.getLoginInfo())
        } else {
          this.$message.success(res.content)
        }
      })
    }
  },

}
</script>
<style lang="scss" scoped>
.mainContent {
  padding: 20px;
  .bt {
    text-align: right;
    margin-bottom: 16px;
  }
}
</style>
