<template>
  <div class="page-search page-auth-search">
    <div class="page-car-auth">
      <div class="manage-title">态势感知看板（截止昨日）</div>
      <div class="search-count">
        <dl class="count-item count1">
          <dt>自然人实名数</dt>
          <dd>{{ statistics.peopleRnrNum || 0 }}</dd>
        </dl>
        <dl class="count-item count2">
          <dt>企业实名数</dt>
          <dd>{{ statistics.companyRnrNum || 0 }}</dd>
        </dl>
        <dl class="count-item count3">
          <dt>车企实名成功率</dt>
          <dd>{{ statistics.vehicleCompanyRnrSuccessRate }}</dd>
        </dl>
        <dl class="count-item count4">
          <dt>车企人工审核平均时长</dt>
          <dd>{{ statistics.vehicleHandleTimeAvg }}</dd>
        </dl>
      </div>
    </div>
    <SearchTable
      title="认证进度查询"
      ref="searchTableRef"
      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 ? 12 : 6" :class="isTablet ? 'mt-16' : ''">
          <el-form-item label="车主/企业责任人" prop="user" label-width="120px">
            <el-input v-model="searchForm.user" placeholder="请输入车主/企业责任人" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6" :class="isTablet ? 'mt-16' : ''">
          <el-form-item label="车主/责任人手机" prop="userPhone" label-width="120px">
            <el-input v-model="searchForm.userPhone" placeholder="请输入车主/责任人手机号码" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 24 : 12" class="mt-16">
          <el-form-item label="提审日期" prop="sendCheck" label-width="120px">
            <el-date-picker v-model="searchForm.sendCheck" :editable="false" type="datetimerange" start-placeholder="请选择开始时间" end-placeholder="请选择结束时间" align="right" />
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6" class="mt-16">
          <el-form-item label="业务类型" prop="orderType" label-width="120px">
            <el-select v-model="searchForm.orderType" placeholder="请选择业务类型" clearable>
              <el-option v-for="item in dict.businessType" :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="status" label-width="120px">
            <el-select v-model="searchForm.checkStatus" placeholder="请选择审核进度" clearable>
              <el-option v-for="status in auditStatus" v-bind="status" :key="status.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="isTablet ? 12 : 6" class="mt-16">
          <el-form-item label="企业名称" prop="companyName" label-width="120px">
            <el-input v-model="searchForm.companyName" placeholder="请输入企业名称" clearable />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="isTablet ? 12 : 6" class="mt-16">
          <el-form-item label="组织名称" prop="carCompanyName" label-width="120px">
            <el-input v-model="searchForm.carCompanyName" placeholder="请输入车企名称" clearable />
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="6" class="mt-16" >
          <el-form-item label="经销商名称" prop="dealer" label-width="120px">
            <el-input v-model="searchForm.dealer" placeholder="请输入经销商名称" clearable />
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="审核人" prop="operator">
            <el-input v-model="searchForm.operator" placeholder="请输入审核人" clearable />
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="12" class="mt-16">
          <el-form-item label="审核日期" prop="auditTime" label-width="120px">
            <el-date-picker v-model="searchForm.auditTime" :editable="false" type="datetimerange" start-placeholder="提交开始时间" end-placeholder="提交结束时间" align="right" />
          </el-form-item>
        </el-col> -->
      </template>
      <template #slot-table>
        <el-table-column label="认证进度" fixed="left" prop="orderStatus" min-width="150" >
          <template slot-scope="scope">
            <span v-if="[0, 1, 2].includes(+scope.row.orderStatus)" class="status warning">{{ AUDIT_STATUS[scope.row.orderStatus] }}</span>
            <span v-else-if="+scope.row.orderStatus === 3" class="status success">{{ AUDIT_STATUS[scope.row.orderStatus] }}</span>
            <span v-else-if="[4, 9].includes(+scope.row.orderStatus)" class="status fail">{{ AUDIT_STATUS[scope.row.orderStatus] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="车辆VIN码" prop="iotId" min-width="200" />
        <el-table-column label="关联ICCID" prop="iccid" min-width="200" />
        <el-table-column label="企业名称" prop="companyName" min-width="230" show-overflow-tooltip />
        <el-table-column label="车主/责任人" prop="fullName" min-width="150" />
        <el-table-column label="车主/责任人手机" prop="phone" min-width="200" />
        <el-table-column label="认证日期" prop="startCheckDate" min-width="200" />
        <el-table-column label="组织名称" prop="orgName" min-width="230" show-overflow-tooltip />
        <el-table-column label="业务类型" min-width="180">
          <template slot-scope="scope">
            <span>{{ getOrderType(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核人" prop="checkUser" min-width="140" />
        <el-table-column label="审核日期" prop="endCheckDate" min-width="180" />
      </template>
    </SearchTable>
  </div>
</template>
<script>
import SearchTable from '@/components/SearchTable'
import { mapGetters } from 'vuex'
import { carAuthList2, queryCheckStatistics } from '@/api/search'

const AUDIT_STATUS = ['已提交', '待分派/认领', '待审核', '审核通过', '未通过', '', '', '', '', '作废']
const ORDER_TYPE = ['', '自然人实名认证', '自然人代办人实名认证', '自然人二手车实名认证', '自然人二手车代办人实名认证', '自然人二手车解绑', '企业实名认证', '企业责任人变更']

export default {
  name: 'CarAuth2',
  components: {
    SearchTable
  },
  data() {
    return {
      totalCount: 0,
      searchForm: {
        vin: '',
        iccid: '',
        user: '',
        sendCheck: [],
        userPhone: '',
        orderType: '',
        checkStatus: '',
        companyName: '',
        carCompanyName: '',
        dealer: '',
        operator: '',
        auditTime: []
      },
      // 统计看板数据
      statistics: {},
      AUDIT_STATUS,
      ORDER_TYPE,
      list: [],
      isTablet: window.OS.isTablet
    }
  },
  computed: {
    ...mapGetters(['dict']),
    // 审核状态
    auditStatus() {
      return AUDIT_STATUS.map((item, index) => {
        return {
          label: item,
          value: index
        }
      }).filter(item => !!item.label)
    }
  },
  async mounted() {
    this.statistics = await queryCheckStatistics() || {}
  },
  methods: {
    /**
     * 获取订单类型
     */
    getOrderType(row) {
      try {
        return this.dict.businessType.find(type => +type.value === +row.orderType).label
      } catch (error) {
        return ''
      }
    },

    /**
     * 获取数据
     * @param formData 表格数据
     * @param callback 回调函数
     */
    async handleSubmit(formData, callback) {
      try {
        const formDataCopy = { ...formData }
        // 如果当前选择了提审时间
        if (formDataCopy.sendCheck && formDataCopy.sendCheck.length > 0) {
          formDataCopy.startSendCheck = formDataCopy.sendCheck[0]
          formDataCopy.endSendCheck = formDataCopy.sendCheck[1]
        }
        // 如果当前选择了审核时间
        if (formDataCopy.auditTime && formDataCopy.auditTime.length > 0) {
          formDataCopy.startCheck = formDataCopy.auditTime[0]
          formDataCopy.endCheck = formDataCopy.auditTime[1]
        }
        // 是否车企实名
        formDataCopy.isVehicleCompany = !formDataCopy.carCompanyName ? 0 : 1
        // 删除原来的数据
        delete formDataCopy.sendCheck
        delete formDataCopy.auditTime
        // 列表数据
        const respData = await carAuthList2(formDataCopy)
        // 开始渲染页面
        callback(respData)
      } catch (error) {
        console.error(error)
      }
    },

    /**
     * 重置方法
     */
    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-search {
  .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;
      overflow: hidden;
      &: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;
        position: relative;
        white-space: nowrap;
        z-index: 1;
        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>
