<template>
  <div class="audit-group-list">
    <div class="audit-group-header">
      <el-button type="primary" @click="toCreateGroup()">新建审核组</el-button>
    </div>
    <el-table :data="groupList">
      <el-table-column label="审核组" prop="auditGroupName" :formatter="(row, col, val) => val || '--'" show-overflow-tooltip></el-table-column>
      <el-table-column label="管理员" show-overflow-tooltip>
        <template slot-scope="{ row }">{{ row.auditPerson | formatAuditer }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" @click="toCreateGroup(row)">编辑</el-button>
          <el-button type="text" @click="onDelGroup(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import fetch from '@/api/review.js';

const { getAuditGroupList, delAuditGroup } = fetch;

export default {
  name: 'AuditGroupList',
  data() {
    return {
      groupList: []
    };
  },
  created() {
    const haobanUser = JSON.parse(localStorage.getItem('haoBanUser') || '{}');
    this.wxEnterpriseId = haobanUser.wxEnterpriseId;
    this.$emit('showTab', '/audit-group-list');
    this.getGroupList();
  },
  methods: {
    getGroupList() {
      getAuditGroupList({ wxEnterpriseId: this.wxEnterpriseId }).then(res => {
        this.groupList = res.result || [];
      });
    },
    onDelGroup(groupData) {
      const { auditGroupName, auditGroupId } = groupData;
      this.$confirm(`确定删除【 ${auditGroupName} 】吗？`, '提示', { type: 'warning' }).then(() => {
        delAuditGroup({ auditGroupId }).then(res => {
          this.$message.success('删除成功！');
          this.getGroupList();
        });
      });
    },
    toCreateGroup(groupData) {
      const { auditGroupId } = groupData || {};
      const url = '/create-audit-group';
      this.$router.push(auditGroupId ? `${url}?auditGroupId=${auditGroupId}` : url);
    }
  },
  filters: {
    formatAuditer(auditerlist) {
      if (!Array.isArray(auditerlist)) return '--';
      const result = auditerlist.map(el => el.staffName || '--');
      return result.length > 0 ? result.join('、') : '--';
    }
  }
};
</script>

<style lang="scss" scoped>
.audit-group-list {
  padding: 20px;
  min-height: 100%;
  background-color: #fff;
  .audit-group-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
