<template>
  <basic-container>
    <div>
      <Card class="cardTitle">
        <p>
          <el-button type="primary" @click="backPage" style="margin-top: 5px; width: 80px">返回</el-button>
        </p>
      </Card>
      <avue-crud :data="tableData" :option="option" :page="page" :table-loading="tableLoading" @on-load="getList" @size-change="sizeChange" @current-change="currentChange">
        <template slot="menu" slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-tickets" @click="showTaskInfo(scope.row, scope.index)">任务详情 </el-button>
        </template>
        <template slot="reportApprovalOpinion" slot-scope="scope">
          <div style="line-height: 16px;">
            <span>{{ getTaskStatusVal(scope.row.reportApprovalOpinion) }}</span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="'拒绝原因：' + (scope.row.reportApprovalInfo || (scope.row.checkState && scope.row.checkState.checkMsg) || '无')"
              placement="top-start"
            >
              <i v-if="scope.row.reportApprovalOpinion === '2'" class="el-icon-question f16 ml2"></i>
            </el-tooltip>
          </div>
        </template>
      </avue-crud>
    </div>
  </basic-container>
</template>

<script>
import {reportRulelookdata} from '@/const/crud/reportRule';
import {getLookPage} from '@/api/taskManagement/reportRule';
import Config from '@/settings';
export default {
  name: 'reportRulelook',
  data() {
    return {
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableData: [],
      searchForm: {},
      option: reportRulelookdata,
      tableLoading: false,
      statusDict: [
        {
          label: '通过',
          value: '1'
        },
        {
          label: '不通过',
          value: '2'
        }
      ]
    };
  },
  computed: {
    getTaskStatusVal() {
      return taskStatusId => {
        taskStatusId = String(taskStatusId).trim();
        const curr = this.statusDict.find(ele => ele.value == taskStatusId);
        if (curr) {
          return curr.label;
        }
      };
    }
  },
  mounted() {},
  methods: {
    // 初始化页面
    getList(page, params) {
      this.tableLoading = true;
      getLookPage(
        Object.assign(
          {
            id: this.$route.query.id,
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm
        )
      )
        .then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 返回按钮
    backPage() {
      this.$router.$avueRouter.closeTag();
      this.$router.push({path: '/admin/taskManagement/reportRule'});
    },
    // 任务详情
    showTaskInfo(row, index) {
      window.open(
        Config.outsideUrl + '/h5/#/pages/task/task-detail/index?id=' + row.id,
        'newwindow',
        'height=500, width=400, top=200, left=300, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no'
      );
    },
    // 分页查询
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    }
  }
};
</script>

<style>
.cardTitle {
  margin-bottom: 20px;
}
</style>
