<!--
  @description:供应商-不良记录查询
  @Modifier: qrf
  @routerPath: supplierEvaluation/supplierBadSearch-list
  @date:2020/11/04-14:27
-->
<template>
  <div>
    <table-crud
      ref="tableCrud"
      :menu="true"
      :search-form="searchForm"
      search-label-width="110px"
      @on-load="loadData"
    >
      <!-- 标题 -->
      <template v-slot:header>
        不良记录查询
      </template>
      <!-- 查询 -->
      <template v-slot:search="search" :page-flag="false">
        <el-form-item ref="badDate" label="记录日期" prop="badDate">
          <el-date-picker
            v-model="searchForm.badDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:240px"
          />
        </el-form-item>
        <!-- 审核状态：00生效，01已解除-->
        <el-form-item ref="badStatus" label="状态" prop="badStatus">
          <el-select v-model="searchForm.status" placeholder="请选择" style="width: 220px">
            <el-option
              v-for="item in badStatusList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
      </template>
      <!-- 列表 -->
      <template v-slot:GXTable>
        <el-table
          ref="enterpriseAuditTable"
          :data="tableData"
        >
          <!-- 序号 -->
          <el-table-column
            label="序号"
            type="index"
            fixed
            width="60px"
            align="center"
          />
          <!-- 类型 -->
          <el-table-column
            label="类型"
            prop="badType"
            header-align="center"
            min-width="160"
          />
          <!-- 原因 -->
          <el-table-column
            label="原因"
            header-align="center"
            prop="badReason"
            min-width="120"
          />
          <!-- 事件说明 -->
          <el-table-column
            label="事件说明"
            header-align="center"
            prop="eventDescription"
            min-width="120"
          />
          <!-- 不良记录日期 -->
          <el-table-column
            label="不良记录日期"
            header-align="center"
            prop="badDate"
            min-width="120"
          />
          <!-- 状态 -->
          <el-table-column
            label="状态"
            header-align="center"
            prop="badStatus"
            min-width="120"
          />
          <!-- 操作 -->
          <el-table-column
            label="操作"
            align="center"
            width="160"
          >
            <!-- 支付年费用 再次申请 查看年审费用 -->
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click.stop="applyDismiss(scope.row)"
              >
                申请解除
              </el-link>
              <el-link
                type="primary"
                @click.stop="applyDismissDetail(scope.row)"
              >
                查看解除申请
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </table-crud>
    <!-- 支付年审费用-弹框 -->
    <supplierBadSearchAdd v-if="addDialogData.dialog" :dialog-data="addDialogData" />
    <!-- 查看年审费用-弹框 -->
    <supplierBadSearchDetail v-if="detailDialogData.dialog" :dialog-data="detailDialogData" />
  </div>
</template>
<script>
/* api*/
import { querySupplierBadSearchList } from '@/api/supplier/supplierBad'
/* 公共方法*/
import { supplierBadGroupMixin } from '../mixin/supplierBadGroupMixin'
/* 组件*/
import supplierBadSearchAdd from './supplierBadSearchAdd-dialog' // 申请解除不良记录-弹框
import supplierBadSearchDetail from './supplierBadSearchDetail-dialog' // 查看解除不良记录-弹框
export default {
  name: 'SupplierEnterpriseAuditList',
  components: {
    supplierBadSearchAdd, // 申请解除不良记录-弹框
    supplierBadSearchDetail // 查看解除不良记录-弹框
  },
  mixins: [supplierBadGroupMixin],
  data() {
    return {
      loading: true,
      // 搜索
      searchForm: {
        badDate: '', // 不良记录日期
        badStatue: '' // 状态
      },
      tableData: [],
      // 支付年审费用-弹框数据
      addDialogData: {
        dialog: false
      },
      // 查看年审费用-弹框数据
      detailDialogData: {
        dialog: false
      }
    }
  },
  methods: {
    // 获取年审记录列表数据
    loadData(params, callback) {
      querySupplierBadSearchList(params).then(res => {
        this.loading = false
        this.tableData = res.data.records
        callback(res.data.total)
      }).catch(() => {
        this.loading = false
      })
    },
    // 申请解除
    applyDismiss() {
      this.addDialogData = {
        dialog: true
      }
    },
    // 查看申请解除
    applyDismissDetail() {
      this.detailDialogData = {
        dialog: true
      }
    }
  }
}
</script>
