<template>
  <div class="">
    <el-dialog title="用户类型权限查询" :visible.sync="visible" width="650px" append-to-body destroy-on-close :before-close="close" top="3vh">
      <div class="user-type-explain">
        <el-select v-model="type" size="small" @change="onChange" style="margin-bottom: 20px;">
          <el-option v-for="(item, key) in typeObj" :label="item" :value="parseInt(key)"></el-option>
        </el-select>
        <el-table :data="tableData" border header-row-class-name="custom-table-header" height="600px" :span-method="objectSpanMethod">
          <el-table-column prop="module" width="150" label="模块名称" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.module }}</span><br>
              <span>({{ scope.row.span }})</span>
            </template>
          </el-table-column>
          <el-table-column width="350" label="功能名称" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.function }}</span>
            </template>
          </el-table-column>
          <el-table-column label="权限状态" align="center">
            <template slot-scope="scope">
              <el-tag effect="dark" :type="scope.row.status[type - 1] ? 'success' : 'danger'" size="small">
                <span>{{ scope.row.status[type - 1] ? '有权' : '无权' }}</span>
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      type: 1,
      tableData: [
        {
          module: '专题库管理',
          function: '专题库基本信息管理',
          status: [0, 1, 0, 0, 1],
          span: 7
        },
        {
          function: '专题库专利导入',
          status: [0, 1, 0, 0, 1],
        },
        {
          function: '专题库参与者查看',
          status: [0, 1, 0, 0, 1],
        },
        {
          function: '专题库参与者管理',
          status: [0, 1, 0, 0, 1],
        },
        {
          function: '专题库报告/附件查看',
          status: [1, 1, 1, 1, 1],
        },
        {
          function: '专题库报告/附件管理',
          status: [1, 1, 0, 0, 1],
        },
        {
          function: '专题库分享',
          status: [1, 1, 0, 0, 1],
        },
        {
          span: 19,
          module: '专利文件夹',
          function: '申请人/权利人合并查看',
          status: [1, 1, 1, 1, 1],
        },
        {
          function: '申请人/权利人合并管理',
          status: [1, 1, 0, 0, 1],
        },
        {
          function: '发明人合并查看',
          status: [1, 1, 1, 1, 1],
        },
        {
          function: '发明人合并管理',
          status: [1, 1, 0, 0, 1],
        },
        {
          function: '专利导出',
          status: [1, 1, 1, 1, 1]
        },
        {
          function: '专题库数据包导出',
          status: [0, 1, 0, 0, 1]
        },
        {
          function: '专利说明书上传',
          status: [1, 1, 0, 0, 1]
        },
        {
          function: '专利说明书批量上传',
          status: [1, 1, 0, 0, 1]
        },
        {
          function: '自定义栏位查看',
          status: [1, 1, 1, 1, 1]
        },
        {
          function: '自定义栏位管理',
          status: [1, 1, 0, 0, 1]
        },
        {
          function: '关键词高亮模板管理',
          status: [1, 1, 1, 1, 1]
        },
        {
          function: '文件夹查看',
          status: [1, 1, 1, 1, 1]
        },
        {
          function: '文件夹管理',
          status: [1, 1, 0, 0, 1]
        },
        {
          function: '专利标引',
          status: [1, 1, 0, 0, 1]
        },
        {
          function: '专利批量标引',
          status: [1, 1, 0, 0, 1]
        },
        {
          function: '专利附图查看',
          status: [1, 1, 1, 1, 1]
        },
        {
          function: '专利附图管理',
          status: [1, 1, 0, 0, 1]
        },
        {
          function: '专利注释查看',
          status: [1, 1, 1, 1, 1]
        },
        {
          function: '专利注释管理',
          status: [1, 1, 0, 0, 1]
        },
        {
          span: 4,
          module: '分析系统',
          function: '图表分析查看',
          status: [1, 1, 0, 1, 1]
        },
        {
          function: '图表分析管理',
          status: [1, 1, 0, 1, 1]
        },
        {
          function: '创建报告',
          status: [1, 1, 0, 0, 1]
        },
        {
          function: '报告模板管理',
          status: [1, 1, 0, 0, 1]
        },
      ],
      typeObj: {
        1: '分类人',
        2: '管理员',
        3: '查阅人',
        4: '查阅人(图表)',
        5: '创建人'
      },
    }
  },
  mounted() {
  },
  methods: {
    open() {
      this.visible = true
    },
    close() {
      this.visible = false
      this.$emit('close')
    },
    onChange() {

    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const span = row.span
        if (span) {
          return {
            rowspan: span,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
}
</script>

<style lang="less">
.user-type-explain {

}
</style>