<template>
  <div class="page-audit-list page-auth-audit-list">
    <SearchTable title="待审核列表查询" ref="searchTableRef" :immediately="true" v-model="searchForm" @reset="handleReset" @submit="handleSubmit">
      <template #slot-form>
        <el-col :span="isTablet ? 12 : 6">
          <el-form-item label="车辆VIN码" prop="vin" label-width="120px">
            <el-input v-model="searchForm.vin" placeholder="请输入车辆VIN码" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6">
          <el-form-item label="关联ICCID" prop="iccid" label-width="120px">
            <el-input v-model="searchForm.iccid" placeholder="请输入关联ICCID" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 24 : 12" :class="isTablet ? 'mt-16' : ''">
          <el-form-item label="实名日期" prop="certificationTime" label-width="120px" :rules="START_TIME">
            <el-date-picker v-model="searchForm.certificationTime" :editable="false" type="datetimerange" start-placeholder="请选择开始时间" end-placeholder="请选择结束时间" align="right" value-format="yyyy-MM-dd HH:mm:ss"> />
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6">
          <el-form-item label="车主姓名" class="mt-16" prop="vinOwnerName" label-width="120px">
            <el-input v-model="searchForm.vinOwnerName" placeholder="请输入车主姓名" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6">
          <el-form-item label="车主手机" class="mt-16" prop="vinOwnerPhone" label-width="120px">
            <el-input v-model="searchForm.vinOwnerPhone" placeholder="请输入车主手机号码" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6" class="mt-16">
          <el-form-item label="业务类型" prop="rnrBizzType" label-width="120px">
            <el-select v-model="searchForm.orderType" placeholder="请选择业务类型" clearable>
              <el-option v-for="item in BUSINESS_TYPE" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6" class="mt-16">
          <el-form-item label="企业名称" prop="vinCompanyName" label-width="120px">
            <el-input v-model="searchForm.vinCompanyName" placeholder="请输入企业名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6" class="mt-16">
          <el-form-item label="组织名称" prop="orgName" label-width="120px">
            <el-input v-model="searchForm.orgName" placeholder="请输入组织名称" clearable />
          </el-form-item>
        </el-col>
      </template>
      <template #slot-table>
        <el-table-column label="车辆VIN码" prop="vin" min-width="200" />
        <el-table-column label="关联ICCID" prop="iccid" min-width="200" />
        <el-table-column label="业务类型" prop="orderTypeName" min-width="180" />
        <el-table-column label="审核状态" prop="orderStatus" width="130px">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.orderStatus == 3 ? 'success' : 'warning'"
              size="mini"
            >{{ ['待审核', '待审核', '待审核', '审核通过', '审核不通过'][scope.row.orderStatus] || '' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="车主姓名" prop="vinOwnerName" width="130px" />
        <el-table-column label="车主手机" prop="vinOwnerPhone" width="130px" />
        <el-table-column label="创建时间" prop="rnrDate" min-width="200" />
        <el-table-column label="企业名称" prop="vinCompanyName" min-width="230" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.vinCompanyName ? scope.row.vinCompanyName : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="组织名称" prop="orgName" min-width="230" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.orgName ? scope.row.orgName : '-' }}</span>
          </template>
        </el-table-column >
        <el-table-column label="操作" width="106px" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleOpenDialog('0',scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </template>
    </SearchTable>
    <!-- 操作用户弹窗 start -->
    <AuditDetailDialog :visible.sync="AuditDetailDialog.show" :data="AuditDetailDialog.data" @refresh="handleRefresh" />
    <!-- 操作用户弹窗 end -->
  </div>
</template>
<script>
import SearchTable from '@/components/SearchTable'
import AuditDetailDialog from './components/AuditDetailDialog.vue'

import { auditList } from '@/api/audit'
// 业务类型
const BUSINESS_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' }
]
const ORDER_TYPE = [
  '',
  '自然人实名认证',
  '自然人代办人实名认证',
  '自然人二手车实名认证',
  '自然人二手车代办人实名认证',
  '自然人二手车解绑',
  '企业实名认证',
  '企业责任人变更'
]
const START_TIME = { required: true, trigger: 'change', message: '请选择实名日期' }
export default {
  name: 'AuditList',
  components: {
    SearchTable,
    AuditDetailDialog
  },
  data() {
    return {
      totalCount: 0,
      searchForm: {
        vin: '',
        iccid: '',
        vinOwnerName: '',
        vinOwnerPhone: '',
        orderType: '',
        vinCompanyName: '',
        orgName: '',
        rnrOrderInfoId: '',
        certificationTime: []
      },
      START_TIME,
      BUSINESS_TYPE,
      ORDER_TYPE,
      list: [],
      // 查看
      AuditDetailDialog: {
        show: false,
        type: '0',
        data: {}
      },
      isTablet: window.OS.isTablet
    }
  },
  created() {
    this.searchForm.certificationTime[0] = this.dateFormat1()
    this.searchForm.certificationTime[1] = this.dateFormat2()
  },
  methods: {
    /**
     * 当前日期
     */
    dateFormat1() {
      var date = new Date()
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      const time = y + '-' + m + '-' + d + ' ' + '00' + ':' + '00' + ':' + '00'
      return time
    },
    /**
     * 后30天日期
     */
    dateFormat2() {
      var date = new Date()
      date.setDate(date.getDate() + 30)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      const time = y + '-' + m + '-' + d + ' ' + '23' + ':' + '59' + ':' + '00'
      return time
    },
    /**
     * 获取数据
     * @param formData 表格数据
     * @param callback 回调函数
     */
    async handleSubmit(formData, callback) {
      const formDataCopy = { ...formData }

      if (formData.certificationTime && formData.certificationTime.length > 0) {
        formDataCopy.rnrStartDate = formData.certificationTime[0]
        formDataCopy.rnrEndDate = formData.certificationTime[1]
      }
      const respData = await auditList(formDataCopy)
      // 处理vin和list列表
      respData.list.forEach(item => {
        // 如果当前有vin码
        if (item.vin) {
          const vin = item.vin
          item.vin = vin.split(',').slice(0, 5).join(',')
          item.vin = `${item.vin}${item.vin === vin ? '' : '...'}`
        }
        // 如果当前有iccid
        if (item.iccid) {
          const iccid = item.iccid
          item.iccid = iccid.split(',').slice(0, 5).join(',')
          item.iccid = `${item.iccid}${item.iccid === iccid ? '' : '...'}`
        }
      })
      console.log('调用待审核列表:', respData)
      callback(respData)
    },
    /**
     * 刷新页面
     */
    handleRefresh() {
      // 重新刷新页面
      this.$refs.searchTableRef.handleSubmit()
    },
    /**
     * 打开审核页面弹框
     * @param type 打开弹框类型
     * @param row 当前行数据
     */
    handleOpenDialog(type = '0', row = {}) {
      if (row.orderType) {
        this.AuditDetailDialog = {
          show: true,
          type,
          data: { ...row }
        }
      }
    },
    /**
     * 重置方法
     */
    handleReset() {
      Object.keys(this.searchForm).forEach((key) => {
        this.searchForm[key] = ['string', 'number'].includes(typeof key)
          ? ''
          : []
      })
    },

    /**
     * 清除事件
     * @time 2021-11-06 14:45:23
     */
    onClear() {
      this.searchForm.currPage = 1
      this.$refs.searchForm.resetFields()
      this.searchData = { ...this.searchForm }
      this.list = []
      // this.getData()
    }
  }
}
</script>
<style lang="scss">
.page-auth-audit-list {
  .page-car-auth {
    padding: 24px 24px 0;
  }
  .search-count {
    margin: 0 auto;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .count-item {
      margin-right: 24px;
      padding: 24px;
      box-sizing: border-box;
      width: 25%;
      height: 112px;
      color: #fff;
      border-radius: 4px;
      background-size: 100% 112px;
      background-position: 0 0;
      background-repeat: no-repeat;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: center;
      position: relative;
      &:before {
        content: '';
        width: 118px;
        height: 112px;
        background: url(../../assets/image/count_light.png) no-repeat 0 0 /
          118px 112px;
        position: absolute;
        left: 0;
        top: 0;
      }
      &:after {
        content: '';
        width: 100px;
        height: 100px;
        position: absolute;
        right: 0;
        bottom: 0;
      }
      &:last-child {
        margin-right: 0;
      }
      &.count1 {
        background: linear-gradient(90deg, #77b4ff 0%, #2a68ff 100%);
        &:after {
          background: url(../../assets/image/count1.png) no-repeat 0 0 / 100px
            100px;
        }
      }
      &.count2 {
        background: linear-gradient(90deg, #6a8eff 0%, #2a4eff 100%);
        &:after {
          background: url(../../assets/image/count2.png) no-repeat 0 0 / 100px
            100px;
        }
      }
      &.count3 {
        background: linear-gradient(90deg, #70e592 0%, #1eb980 100%);
        &:after {
          background: url(../../assets/image/count3.png) no-repeat 0 0 / 100px
            100px;
        }
      }
      &.count4 {
        background: linear-gradient(90deg, #59bef8 0%, #0d7fe1 100%);
        &:after {
          background: url(../../assets/image/count4.png) no-repeat 0 0 / 100px
            100px;
        }
      }
      dt {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
      dd {
        margin-top: 5px;
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        i {
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          font-style: normal;
        }
      }
    }
  }
  .status {
    position: relative;
    padding-left: 10px;
    &.success:before {
      background: #25c343;
    }
    &.warning:before {
      background: #ff9c00;
    }
    &.fail:before {
      background: #ff4d4f;
    }
    &:before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 3px;
      left: -5px;
      top: 50%;
      margin-top: -3px;
      position: absolute;
    }
  }
  .mt-16 {
    margin-top: 16px;
  }
  .el-col {
    &:last-child {
      margin-top: 16px;
    }
  }
}
</style>
