<template>
  <Page class="page-search-car" :show-operation="false" title="认证查询">
    <div class="page-rnr-main-card placeholder-wrapper">
      <div :class="isSearch ? 'scale' : ''" class="page-search-car-image-placeholder animation" />
      <div :class="isSearch ? 'scale' : ''" class="page-search-car-title animation">请输入VIN码，查询车辆认证信息</div>
      <SearchInput ref="searchInputRef" :class="isSearch ? 'page-search-car-input-indent' : 'page-search-car-input'" @search="handleSearch" />
      <!-- <van-button plain hairline block round color="#0761F3" @click="handleScanCode"><i class="imageicon imageicon-scan" />扫码输入</van-button> -->
    </div>
    <TimeLine class="time-line-wrapper" v-if="!isEmpty">
      <TimeLineItem v-for="(children, time) in list" :key="time" :time="time">
        <div v-for="item in children" :key="item.iotId" class="page-search-car-block">
          <div class="page-search-car-row">
            <div class="title">
              {{ item.orderType | businessName }}
            </div>
            <div :class="item.orderStatus == 3 ? 'success' : ''" class="status">{{ ['已提交', '待分派/认领', '待审核', '审核通过', '未通过', '', '', '', '', '作废'][item.orderStatus] }}</div>
          </div>
          <van-cell-group>
            <van-cell title="ICCID" :value="item.iccid" />
            <van-cell title="车主/责任人" :value="item.fullName" />
            <van-cell title="手机号" :value="item.phone" />
            <van-cell title="所属企业" :value="item.companyName" />
            <van-cell title="申请时间" :value="item.startCheckDate" />
          </van-cell-group>
        </div>
      </TimeLineItem>
    </TimeLine>
    <van-empty v-else-if="isSearch" :image="require('@/assets/search/empty.png')" description="未查询到认证信息" />
  </Page>
</template>

<script>
import JsBridge from '@/utils/bridge'
import Page from '@/components/Page'
import TimeLine from '@/components/TimeLine/Index'
import TimeLineItem from '@/components/TimeLine/Item'
import SearchInput from '@/components/SearchInput'
import { querySearchProgress } from '@/api/search'

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

export default {
  name: 'CarSearch',
  components: { Page, SearchInput, TimeLine, TimeLineItem },
  filters: {
    /**
     * 业务名称
     */
    businessName(val) {
      // 取出当前字典项
      const businessDict = BUSINESS_TYPE.find(type => +type.value === +val)
      return businessDict ? businessDict.name : ''
    }
  },
  data() {
    return {
      isSearch: false,
      vin: '',
      isEmpty: true,
      list: {}
    }
  },
  methods: {
    /**
     * 处理搜索方法
     */
    async handleSearch(vin) {
      // 接口返回值
      try {
        // 给输入框设置vin号
        this.$refs.searchInputRef.setValue(vin)
        // 开始请求接口
        const list = await querySearchProgress({ vin })
        // 先清空数据
        this.list = {}
        // 循环数据
        list.forEach(item => {
          // 当前年的key
          const key = item.startCheckDate.slice(0, 4)
          // 如果当前年没有在数据
          if (!this.list[key]) {
            this.list[key] = []
          }
          // 将数据塞进去
          this.list[key].push(item)
        })
        // 重新赋值数据
        this.isEmpty = list.length === 0
      } catch (error) {
        this.list = []
        // 重新赋值数据
        this.isEmpty = true
      }
      // 标记当前搜索过了
      this.isSearch = true
    },

    /**
     * 开始扫码
     */
    handleScanCode() {
      JsBridge.scanCode(true, vin => {
        this.handleSearch(vin)
      })
    }
  }
}
</script>

<style lang="scss">
.page-search-car {
  font-family: PingFangSC-Regular;
  .placeholder-wrapper {
    padding: 40px 32px 36px !important;

    .page-search-car-image-placeholder {
      background-image: url(../../assets/search/search.png);
      background-size: 100% 100%;
      width: 290px;
      height: 184px;
      margin: 0 auto;
    }
    .page-search-car-title {
      color: #242424;
      font-size: 32px;
      text-align: center;
      font-weight: 400;
      margin-top: 24px;
    }
    .page-search-car-input {
      margin-top: 40px;
    }
    .page-search-car-input-indent {
      margin-top: -25px;
    }
    .van-button {
      width: 100%;
      margin-top: 24px;

      .imageicon-scan {
        margin-bottom: -4px;
        margin-right: 12px;
      }
    }
  }
  .time-line-wrapper {
    margin: 36px 24px 0;
    .page-search-car-block {
      background: #ffffff;
      border-radius: 16px;
      padding: 36px 32px;
      margin-top: 24px;
      .page-search-car-row {
        align-items: center;
        display: flex;
        justify-content: space-between;
        line-height: 46px;
        .title {
          color: #242424;
          font-size: 34px;
          font-weight: 500;
        }
        .status {
          align-items: center;
          color: #352FD1;
          display: flex;
          font-size: 24px;
          font-weight: 400;
          &.success {
            color: #7DD164;
            &:before {
              background-image: url('../../assets/home/ico_point_green.png');
            }
          }
          &.fail {
            color: #F16E6F;
            &::before {
              background-image: url('../../assets/home/ico_point_red.png');
            }
          }
          &:before {
            background-size: 100% 100%;
            background-image: url('../../assets/home/ico_point_purple.png');
            content: "";
            display: block;
            width: 36px;
            height: 36px;
          }
        }
      }
      .van-cell-group {
        margin-top: 26px;
        .van-cell {
          color: #000000;
          font-size: 32px;
          height: 64px;
          line-height: 64px;
          .van-cell__value {
            color: rgba(39, 39, 39, 0.5);
            flex: 2;
          }
          &:after {
            display: none;
          }
        }
        &:after {
          display: none;
        }
      }
      &:first-child {
        margin-top: 0;
      }
    }
  }
  .van-empty {
    .van-empty__image {
      width: 354px;
      height: 264px;
    }
    .van-empty__description {
      color: #242424;
      font-size: 32px;
      font-weight: 400;
      text-align: center;
      opacity: 0.4;
      margin-top: 28px;
    }
  }
  .animation {
    transition: all 300ms linear;
    &.scale {
      height: 0;
      opacity: 0;
      margin-top: 0px;
    }
  }
}
</style>
