<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-10-30 10:51:04
 * @LastEditors: 无尘
 * @LastEditTime: 2020-12-02 13:51:36
-->
<template>
  <div class="audit-item-list" v-loading="loading">
    <div class="audit-item-header">
      <el-button type="primary" @click="toCreateItem()">新建事项</el-button>
    </div>
    <el-table :data="auditItemList">
      <el-table-column label="审核组" prop="auditGroupName" :formatter="(row, col, val) => val || '--'" show-overflow-tooltip></el-table-column>
      <el-table-column label="审核事项" prop="auditTypes" show-overflow-tooltip>
        <template slot-scope="{ row }">{{ row.auditTypes | formatAuditTypes(auditTypes) }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" @click="toCreateItem(row)">编辑</el-button>
          <el-button type="text" @click="onDelItem(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import auditTypes from './audit-types';
import fetch from '@/api/review';
const { auditItemList, delAuditItem } = fetch;
export default {
  name: 'AuditItemList',
  data() {
    return {
      wxEnterpriseId: '',
      auditTypes,
      auditItemList: [],
      loading: false
    };
  },
  created() {
    const haobanUser = JSON.parse(localStorage.getItem('haoBanUser') || '{}');
    this.wxEnterpriseId = haobanUser.wxEnterpriseId;
    this.$emit('showTab', '/audit-item-list');
    this.getAuditItemList();
  },
  methods: {
    getAuditItemList() {
      const that = this;
      that.loading = true;
      auditItemList({ wxEnterpriseId: this.wxEnterpriseId }).then(res => {
        that.loading = false;
        that.auditItemList = res.result || [];
      })
        .catch(function(error) {
          that.loading = false;
        });
    },
    toCreateItem(itemData) {
      const { auditItemId } = itemData || {};
      const url = '/create-audit-item';
      this.$router.push(auditItemId ? `${url}?auditItemId=${auditItemId}` : url);
    },
    onDelItem(itemData) {
      const { auditGroupName, auditItemId } = itemData;
      this.$confirm(`确定删除【 ${auditGroupName} 】吗？`, '提示', { type: 'warning' }).then(() => {
        delAuditItem({ auditItemId }).then(res => {
          this.$message.success('删除成功！');
          this.getAuditItemList();
        });
      });
    }
  },
  filters: {
    formatAuditTypes(types, auditTypes) {
      if (!types) return '--';
      types = types.split(',');
      const result = auditTypes.filter(el => types.some(item => item == el.type));
      return result.length > 0 ? result.map(el => el.title).join('、') : '--';
    }
  }
};
</script>

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