<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="showModal"
      width="700px"
      title="菜单详情"
    >
      <div class="maxHeight">
        <table class="tableClass">
          <tbody>
            <tr>
              <th>系统</th>
              <td>{{ systemName }}</td>
              <th>上级菜单</th>
              <td>{{ obj.parentName }}</td>
            </tr>
            <tr>
              <th>名称</th>
              <td>{{ obj.name }}</td>
              <th>路径</th>
              <td>{{ obj.uri }}</td>
            </tr>
            <tr>
              <th>编码</th>
              <td>{{ obj.code }}</td>
              <th>图标</th>
              <td>{{ obj.icon }}</td>
            </tr>
            <tr>
              <th>类型</th>
              <td v-if="obj.type==0">
                PC 菜单
              </td>
              <td v-else-if="obj.type==1">
                按钮
              </td>
              <td v-else-if="obj.type==2">
                APP 菜单
              </td>
              <td v-else>
                未知
              </td>
              <th>状态</th>
              <td>{{ obj.status == 0 ? '禁用':'正常' }}</td>
            </tr>
            <tr>
              <th>排序</th>
              <td>{{ obj.sort }}</td>
              <th>备注</th>
              <td>{{ obj.remark }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/**
 * 菜单详情
 */
import { sysResource, sysSystem } from '../../../api'

export default {
  data() {
    return {
      obj: {},
      showModal: false,
      systemName: ''
    }
  },
  methods: {
    _open: async function(id) {
      this.showModal = true
      this.obj = await sysResource.getById(id)
      this._systemId(this.obj)
    },
    _systemId: async function(obj) {
      let systemName = ''
      const list = await sysSystem.listIdName()
      list.forEach(function(value, index, array) {
        if (array[index].id === obj.systemId) {
          systemName = array[index].name
        }
      })
      this.systemName = systemName
    }
  }
}
</script>
