<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" class="page page-search page-car-auth">
    <div class="manage-title">单车认证查询</div>
    <div class="search-form">
      <el-form ref="searchForm" :rules="rules" :model="searchForm" label-width="90px" size="small" @submit.native.prevent>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="车辆VIN码" prop="vin">
              <el-input v-model="searchForm.vin" maxlength="17" placeholder="请输入车辆VIN码" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button size="small" type="primary" icon="iconfont icon-search" @click="onSearch">搜索</el-button>
            <el-button size="small" type="gray" icon="iconfont icon-clear" @click="onClear">清除</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="search-body">
      <div class="search-title">认证进度查询结果</div>
      <div v-if="list.length > 0">
        <div v-for="(item, index) in list" :key="index" class="auth-content" >
          <div class="auth-date">
            <div v-if="item.year">{{ item.year }}年</div>
          </div>
          <div class="auth-step">
            <div class="step-item">
              <div class="step-time">申请时间：{{ item.startCheckDate }} </div>
              <div class="step-cont">
                <div class="step-head">
                  <div class="step-name">{{ item.title }}</div>
                  <el-tag v-if="[0, 1, 2].includes(+item.orderStatus)" size="mini" type="warning">{{ AUDIT_STATUS[item.orderStatus] }}</el-tag>
                  <el-tag v-else-if="+item.orderStatus === 3" size="mini" type="success">{{ AUDIT_STATUS[item.orderStatus] }}</el-tag>
                  <el-tag v-else-if="[4, 9].includes(+item.orderStatus)" size="mini" type="danger">{{ AUDIT_STATUS[item.orderStatus] }}</el-tag>
                </div>
                <ul class="step-body">
                  <li>ICCID：{{ item.iccid }}</li>
                  <li>组织名称：{{ item.orgName || '-' }}</li>
                  <li>车主/责任人：{{ item.fullName }}</li>
                  <li>手机号：{{ item.phone }}</li>
                  <li>所属企业：{{ item.companyName || '-' }}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="empty-data">暂无数据</div>
    </div>
  </div>
</template>
<script>
import { carAuthList1 } from '@/api/search'

const AUDIT_STATUS = ['已提交', '待分派/认领', '待审核', '审核通过', '未通过', '', '', '', '', '作废']

export default {
  name: 'CarAuth1',
  data() {
    const checkVin = (rule, value, callback) => {
      if (!value) {
        callback(new Error('车辆VIN码不能为空'))
      } else if (value.length !== 17) {
        callback(new Error('车辆VIN码格式不正确'))
      } else {
        callback()
      }
    }
    return {
      fullscreenLoading: false,
      searchForm: {
        vin: ''
      },
      AUDIT_STATUS,
      searchData: {},
      list: [],
      rules: {
        vin: [
          { required: true, trigger: 'blur', message: '车辆VIN码不能为空' },
          { validator: checkVin, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /**
     * 获取数据
     * @time 2021-11-06 13:23:29
     */
    async getData() {
      const param = {
        ...this.searchData
      }
      this.fullscreenLoading = true
      try {
        const data = await carAuthList1(param)
        this.list = data || []
        const dataInfo = {}
        const { businessType } = this.$store.getters.dict
        this.list.forEach(item => {
          const time = item.startCheckDate.substring(0, 4)
          if (!dataInfo[time]) {
            dataInfo[time] = []
            item.year = time
          }
          dataInfo[time].push(item)
          item.title = businessType.find(type => +type.value === +item.orderType).label
        })
      } catch (error) {
        console.error(error)
      }
      this.fullscreenLoading = false
    },

    /**
    * 搜索事件
    * @time 2021-11-06 14:45:23
    */
    onSearch() {
      this.$refs.searchForm.validate(valid => {
        if (valid) {
          this.searchData = { ...this.searchForm }
          this.getData()
        }
      })
    },

    /**
    * 清除事件
    * @time 2021-11-06 14:45:23
    */
    onClear() {
      this.$refs.searchForm.resetFields()
      this.searchData = { ...this.searchForm }

      this.list = []

      // this.getData()
    }
  }
}
</script>
<style lang="scss">
.page-car-auth {
  padding: 24px;
  .search-body {
    .auth-date {
      margin-top: -6px;
    }
  }
}
</style>
