<template>
  <div class="workorder-rnr-list">
    <SearchTable
      v-model="searchForm"
      ref="searchTableRef"
      title="平台车辆认证查询"
      :immediately="true"
      @submit="handleSubmit"
    >
      <template #slot-form>
        <el-col :span="isTablet ? 12 : 6">
          <el-form-item label="车辆VIN码" prop="vin" label-width="140px">
            <el-input v-model="searchForm.vin" placeholder="请输入车辆VIN码" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6">
          <el-form-item :class="isTablet ? 'mt-16' : ''" label="ICCID" prop="iccid" label-width="140px">
            <el-input v-model="searchForm.iccid" placeholder="请输入ICCID" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6">
          <el-form-item :class="isTablet ? 'mt-16' : ''" label="业务类型" prop="orderType" label-width="140px">
            <el-select v-model="searchForm.orderType" placeholder="请输入业务类型" clearable>
              <el-option v-for="type in ORDER_TYPE" v-bind="type" :key="type.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6">
          <el-form-item :class="isTablet ? 'mt-16' : ''" label="认证进度" prop="orderStatus" label-width="140px">
            <el-select v-model="searchForm.orderStatus" placeholder="请输入认证进度" clearable>
              <el-option v-for="status in ORDER_STATUS" v-bind="status" :key="status.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6">
          <el-form-item label="企业名称" prop="companyName" label-width="140px" class="mt-16">
            <el-input v-model="searchForm.companyName" placeholder="请输入企业名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 24 : 12">
          <el-form-item label="认证日期" prop="createTimeQuery" label-width="140px" class="mt-16">
            <el-date-picker
              v-model="searchForm.createTimeQuery"
              type="daterange"
              value-format="timestamp"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6">
          <el-form-item label="车主/责任人姓名" prop="fullName" label-width="140px" class="mt-16">
            <el-input v-model="searchForm.fullName" placeholder="请输入车主/责任人姓名" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6">
          <el-form-item label="车主/责任人手机" prop="phone" label-width="140px" class="mt-16">
            <el-input v-model="searchForm.phone" placeholder="请输入车主/责任人手机" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6">
          <el-form-item label="车主/责任人证件号" prop="certNumber" label-width="140px" class="mt-16">
            <el-input v-model="searchForm.certNumber" placeholder="请输入车主/责任人证件号" clearable />
          </el-form-item>
        </el-col>
      </template>
      <template #slot-table>
        <el-table-column label="认证进度" prop="orderStatus" fixed="left" width="140px">
          <template #default="{ row }">
            <el-link type="primary" @click="handleOpenRnrOrderDetail(row)">{{ ORDER_STATUS.find(status => +status.value === +row.orderStatus).label }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="车辆VIN" prop="vin" fixed="left" min-width="200px" />
        <el-table-column label="ICCID" prop="iccid" min-width="200px" />
        <el-table-column label="企业名称" prop="companyName" min-width="220px" />
        <el-table-column label="车主/责任人" prop="fullName" min-width="140px" />
        <el-table-column label="车主/责任人手机" prop="phone" min-width="160px" />
        <el-table-column label="认证日期" prop="createTime" min-width="180px" />
        <el-table-column label="业务类型" prop="orderType" width="180px">
          <template #default="{ row }">{{ businessType(row) }}</template>
        </el-table-column>
        <el-table-column label="证件号" prop="certNumber" width="160px" />
        <el-table-column label="审核人" prop="operatorName" width="140px" />
        <el-table-column label="审核日期" prop="auditTime" width="180px" />
      </template>
    </SearchTable>
    <el-drawer
      :visible.sync="rnrDetail.show"
      :before-close="() => (rnrDetail.show = false)"
      title="审核详情"
      direction="rtl"
      size="1000px">
      <RnrAuditDetail v-if="rnrDetail.show" :order-id="rnrDetail.data" />
    </el-drawer>
  </div>
</template>

<script>
import { pageListQuery } from '@/api/audit'
import SearchTable from '@/components/SearchTable'
import RnrAuditDetail from './components/rnr-audit-detail'

// 认证进度
const ORDER_STATUS = [
  { label: '已提交', value: 0 },
  { label: '待分派/认领', value: 1 },
  { label: '待审核', value: 2 },
  { label: '审核通过', value: 3 },
  { label: '未通过', value: 4 },
  { label: '作废', value: 9 }
]

// 业务类型
const ORDER_TYPE = [
  { label: '自然人新车实名认证', value: 1 },
  { label: '自然人二手车实名认证', value: 2 },
  { label: '企业新车实名认证', value: 3 },
  { label: '车企新车实名认证', value: 4 },
  { label: '企业责任人变更', value: 5 },
  { label: '车主解绑', value: 6 },
  { label: '二手车主解绑', value: 7 },
  { label: '车企实名解绑', value: 8 },
  { label: '设备更换', value: 9 },
  { label: '一车多卡绑定', value: 10 },
  { label: '重新绑定', value: 11 },
  { label: '企业解绑', value: 12 }
]

export default {
  name: 'WorkOrderRnrList',
  components: { SearchTable, RnrAuditDetail },
  data() {
    return {
      rnrDetail: {
        show: false,
        data: ''
      },
      searchForm: {},
      ORDER_STATUS,
      ORDER_TYPE
    }
  },
  methods: {
    /**
     * 提交方法
     * @param formData 表单数据
     * @param callback 控制页面显示的回调
     */
    async handleSubmit(formData, callback) {
      try {
        // 如果当前选择了认证时间
        if (formData.createTimeQuery) {
          const [createTimeQueryStart, createTimeQueryEnd] = formData.createTimeQuery
          formData.createTimeQueryStart = createTimeQueryStart
          formData.createTimeQueryEnd = createTimeQueryEnd + 1000 * 60 * 60 * 24 - 1
          delete formData.createTimeQuery
        }
        // 开始查询接口
        const { list, totalCount } = await pageListQuery(formData)
        // 渲染界面
        callback({ list, totalCount })
      } catch (error) {
        callback([], 0)
        console.error(error)
      }
    },

    /**
     * 跳转到工单详情页面
     * @param row 当前行数据
     */
    handleOpenRnrOrderDetail(row) {
      // 打开弹框
      this.rnrDetail.show = true
      // 记录当前订单编号
      this.rnrDetail.data = row.orderId
    },

    /**
    * 业务类型
    * @param  {Object} row 当前行数据
    * @time 2022-09-15 16:27:19
    */
    businessType(row) {
      try {
        return ORDER_TYPE.find(status => +status.value === +row.orderType).label
      } catch (error) {
        return ''
      }
    }
  }
}
</script>

<style lang="scss">
.workorder-rnr-list {
  .mt-16 {
    margin-top: 16px;
  }
  .el-col {
    &:last-child {
      margin-top: 16px;
    }
  }
}
</style>
