<template>
  <div style="padding:10px">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="人员结构" name="1">人员结构</el-tab-pane>

      <el-tab-pane label="政策制度" name="2">
        <el-table :data="policeSystemData" stripe style="width: 100%" border>
          <el-table-column label="序号" type="index" align="center" />
          <el-table-column prop="issueDate" label="发布日期" align="center" />
          <el-table-column prop="issuer" label="发布者" align="center" />
          <el-table-column prop="title" label="标题" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="checkPoliceSystem(scope.row)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
// 引入分页
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data() {
    return {
      total: 30,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      activeName: '1',
      // 表格数据
      policeSystemData: [
        {
          // 发布日期
          issueDate: '2020-1-1',
          //   发布者
          issuer: '中储粮山西分公司',
          // 标题
          title: '关于2021年小麦收购的相关事项'
        },
        {
          // 发布日期
          issueDate: '2020-1-1',
          //   发布者
          issuer: '中储粮山西分公司',
          // 标题
          title: '关于2021年小麦收购的相关事项'
        },
        {
          // 发布日期
          issueDate: '2020-1-1',
          //   发布者
          issuer: '中储粮山西分公司',
          // 标题
          title: '关于2021年小麦收购的相关事项'
        }
      ]
    }
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 机构人员查看
    checkPoliceSystem(row) {
      console.log(row)
    },
    getList() {}
  }
}
</script>
