<!--
  @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="supplierName" label="供应商名称" prop="supplierName">
          <el-input
            v-model.trim="searchForm.supplierName"
            style="width:220px"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 审核状态：00待审核，01审核通过，02审核不通过-->
        <el-form-item ref="auditStatus" label="审核状态" prop="auditStatus">
          <el-select v-model="searchForm.auditStatus" placeholder="请选择" style="width: 220px">
            <el-option
              v-for="item in auditStatusList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <el-form-item ref="supplyScope" label="供货范围" prop="supplyScope">
          <el-input @click="addSupplyScope" />
        </el-form-item>
        <!-- 类别：00不合格供应商，01黑名单-->
        <el-form-item ref="badType" label="类别" prop="badType">
          <el-select v-model="searchForm.badType" placeholder="请选择" style="width: 220px">
            <el-option
              v-for="item in badTypeList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <!-- 申请人 -->
        <el-form-item ref="applyPerson" label="申请人" prop="applyPerson">
          <el-input
            v-model.trim="searchForm.applyPerson"
            style="width:220px"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <el-form-item ref="createDate" label="创建日期" prop="createDate">
          <el-date-picker
            v-model="searchForm.createDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:240px"
          />
        </el-form-item>
      </template>
      <!-- 按钮 -->
      <template v-slot:menuLeft>
        <el-button type="primary" plain @click="addBadRecording('')">
          新增不良记录
        </el-button>
      </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="supplierName"
            header-align="center"
            align="left"
            min-width="160"
          />
          <!-- 供货范围 -->
          <el-table-column
            label="供货范围"
            header-align="center"
            prop="supplyScope"
            min-width="120"
          />
          <!-- 类别 -->
          <el-table-column
            label="类别"
            header-align="center"
            prop="badType"
            min-width="120"
          />
          <!-- 申请人 -->
          <el-table-column
            label="申请人"
            header-align="center"
            prop="applyPerson"
            min-width="120"
          />
          <!-- 创建日期 -->
          <el-table-column
            label="创建日期"
            header-align="center"
            prop="createDate"
            min-width="120"
          />
          <!-- 审核状态 -->
          <el-table-column
            label="审核状态"
            header-align="center"
            prop="auditStatus"
            min-width="120"
          />
          <!-- 操作 -->
          <el-table-column
            label="操作"
            align="center"
            width="160"
          >
            <!-- 支付年费用 再次申请 查看年审费用 -->
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click.stop="applyDismiss(scope.row)"
                @click="badRecordingDetail"
              >
                查看
              </el-link>
              <el-link
                type="primary"
                @click.stop="retract"
              >
                撤回
              </el-link>
              <el-link
                type="primary"
                @click.stop="addBadRecording(scope.row)"
              >
                编辑
              </el-link>
              <el-link
                type="primary"
                @click.stop="deleteData"
              >
                删除
              </el-link>
              <el-link
                type="primary"
                @click.stop="removeBlack(scope.row)"
              >
                移除黑名单
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </table-crud>
    <categoryTree v-if="categoryTreeData" :dialog-data="categoryTreeData" />
    <!-- 支付年审费用-弹框 -->
    <supplierBadBoardAdd v-if="addDialogData.dialog" :dialog-data="addDialogData" />
    <!-- 查看年审费用-弹框 -->
    <supplierBadBoardDetail v-if="detailDialogData.dialog" :dialog-data="detailDialogData" />
  </div>
</template>
<script>
/* api*/
import { querySupplierBadSearchList } from '@/api/supplier/supplierBad'
/* 公共方法*/
import { supplierBadGroupMixin } from '../mixin/supplierBadGroupMixin'
/* 组件*/
import categoryTree from '@/views/common/tools/categoryTree-dialog'
import supplierBadBoardAdd from './supplierBadBoardAdd-dialog' // 申请解除不良记录-弹框
import supplierBadBoardDetail from './supplierBadBoardDetail-dialog' // 查看解除不良记录-弹框
export default {
  name: 'SupplierEnterpriseAuditList',
  components: {
    categoryTree, // 供货范围
    supplierBadBoardAdd, // 新增不良记录-弹框
    supplierBadBoardDetail // 查看不良记录-弹框
  },
  mixins: [supplierBadGroupMixin],
  data() {
    return {
      loading: true,
      // 搜索
      searchForm: {
        supplierName: '', // 供应商名称
        auditStatus: '', // 审核状态
        supplyScope: '', // 供货范围
        badType: '', // 类别
        applyPerson: '', // 申请人
        createDate: '' // 创建日期
      },
      tableData: [],
      // 供货范围-弹框-弹框数据
      categoryTreeData: {
        dialog: false
      },
      // 新增不良记录-弹框-弹框数据
      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
      })
    },
    // 添加供货范围
    addSupplyScope() {
      this.categoryTreeData = {
        dialog: true
      }
    },
    // 新增不良记录
    addBadRecording(row) {
      this.addDialogData = {
        dialog: true,
        id: row.id
      }
    },
    // 查看不良记录
    badRecordingDetail() {
      this.detailDialogData = {
        dialog: true
      }
    },
    // 撤回
    retract() {
    },
    // 删除
    deleteData() {
    },
    // 移除黑名单
    removeBlack() {
    }
  }
}
</script>
