<template>
  <Page class="page-rnr-person-card">
    <template #slot-title>
      <span>1/{{ totalFlow }}</span>
      <span>车卡信息</span>
    </template>
    <VinScan ref="vinScanRef" @change="handleChangeVin" />
    <div class="page-rnr-main-card page-rnr-main-card-iccid">
      <div class="page-rnr-main-card-title">
        <div class="page-rnr-main-card-title-tl">ICCID</div>
        <div class="page-rnr-main-card-title-tr">{{ iccidList.length }}/5</div>
      </div>
      <List v-model="iccidList" @click="handleOpenEditIccid" />
      <van-button class="rnr-main-card-add-btn" plain hairline round block color="#0761F3" @click="handleOpenAddIccid"><i class="imageicon imageicon-add" />添加</van-button>
    </div>
    <template #slot-operation>
      <van-button :disabled="iccidList.length === 0" :loading="submitLoading" type="primary" class="page-rnr-main-btn-next" round color="linear-gradient(120deg, #4F4CFB 0%, #376FF4 97%)" block @click="handleToNext">下一步</van-button>
    </template>
    <InputActionSheet
      :title="addType === 'add' ? '添加卡号' : '修改卡号'"
      :rules="{ iccid: 'iccid' }"
      :data="newIccid"
      :visible.sync="showAddVin"
      label="ICCID"
      @submit="handleAddIccid"
    />
  </Page>
</template>

<script>
import Page from '@/components/Page'
import List from '@/components/List'
import InputActionSheet from '@/components/InputActionSheet'
import VinScan from '@/components/VinScan'
import ErrorWrap from '@/components/ErrorWrap.vue'
import { getIccidListByVin, getBindIccidListByVin, verifyVinCards } from '@/api/rnr'
import { Toast } from 'vant'
import flowMixin from '@/minxin/flow'
import { SET_PERSON_CARD } from '@/store/modules/rnr'

export default {
  name: 'RnrPersonCard',
  components: { Page, ErrorWrap, VinScan, List, InputActionSheet },
  mixins: [flowMixin],
  data() {
    const { customerType } = this.$route.query
    return {
      addType: 'add',
      customerType: +customerType,
      isConsigner: +this.$route.query.isConsigner === 1,
      isLoading: false,
      vin: '',
      newIccid: '',
      showSearchBtn: true,
      showAddVin: false,
      submitLoading: false,
      iccidList: []
    }
  },
  methods: {
    /**
     * 改变vin码
     * @param vin 当前输入的vin码
     */
    handleChangeVin(vin) {
      // 如果当前输入的内容和之前输入的vin不一致，则需要展示搜索按钮
      if (vin !== this.vin) {
        this.showSearchBtn = true
      }
      // 记下当前输入的vin码
      this.vin = vin
      // 如果校验失败，则不请求接口
      if (`${vin}`.length !== 17) {
        return
      }
      // 查询一遍vin码
      this.handleFetchIccidByVin()
    },

    /**
     * 通过vin号搜索iccid的集合
     * @param value
     */
    async handleFetchIccidByVin() {
      // 获取输入的vin号
      const vin = this.vin
      // 展示loading
      this.isLoading = true
      try {
        // 当前iccid的集合
        const { iccidList } = await (this.customerType === 1 ? getBindIccidListByVin : getIccidListByVin)({ vin })
        // 不展示搜索
        this.showSearchBtn = false
        // 页面开始渲染
        this.iccidList = iccidList
      } catch (error) {
        console.error(error)
      }
      // 展示loading
      this.isLoading = false
    },

    /**
     * 编辑指定的iccid
     * @param index 当前需要编辑的iccid
     */
    handleOpenEditIccid(iccid, index) {
      // 标记当前是编辑
      this.addType = 'edit'
      // 展示弹框
      this.showAddVin = true
      // 当前的iccid
      this.newIccid = iccid
      // 记住当前编辑的索引
      this.editIndex = index
    },

    /**
     * 新增一条iccid
     */
    handleOpenAddIccid() {
      // 标记当前是编辑
      this.addType = 'add'
      // 展示弹框
      this.showAddVin = true
      // 清空iccid
      this.newIccid = ''
    },

    /**
     * 新增一条iccid数据
     */
    handleAddIccid(iccid) {
      // 关闭弹框
      this.showAddVin = false
      // 如果当年是新增
      if (this.addType === 'add') {
        // 开始添加一条iccid
        this.iccidList.push(iccid)
      } else {
        this.$set(this.iccidList, this.editIndex, iccid)
      }
      // 清空数据
      this.newIccid = ''
    },

    /**
     * 跳转到下一页
     */
    async handleToNext() {
      // 如果vin号输入不正确
      if (!this.vin) {
        return
      }
      // 如果校验失败，则不请求接口
      if (`${this.vin}`.length !== 17) {
        return
      }
      // 如果vin-scan中输入的vin长度不等于17位
      if (this.$refs.vinScanRef.vin.length !== 17) {
        return
      }
      // 如果当前没有输入或选择iccid
      if (this.iccidList.length === 0) {
        Toast('请至少添加1个ICCID号')
        return
      }
      // 如果当前iccid超过5个
      if (this.iccidList.length > 5) {
        Toast('ICCID号最多不能超过5个')
        return
      }
      // 展示loading框
      this.submitLoading = true
      try {
        // 校验vin号和iccid是否合法
        await verifyVinCards({
          businessType: this.customerType === 0 ? 1 : 2,
          vin: this.vin,
          iccidList: this.iccidList
        })
      } catch (error) {
        // 关闭loading框
        this.submitLoading = false
        return
      }
      // 关闭loading框
      this.submitLoading = false
      // 开始保存数据
      this.$store.commit(`rnr/${SET_PERSON_CARD}`, {
        customerType: +this.$route.query.customerType || 0,
        isConsigner: this.isConsigner,
        vin: this.vin,
        iccidList: this.iccidList
      })
      // 开始跳转页面
      this.$router.push({ name: 'RnrPersonIdcard', query: { step: 2 }})
    }
  }
}
</script>

<style lang="scss">
.page-rnr-person-card {
  .van-field__button {
    margin-left: 0px;
    padding-left: 24px;
    .page-rnr-icon-scan {
      background-image: url(../../../assets/rnr/ico_scan.svg);
      background-size: 100% 100%;
      width: 30px;
      height: 30px;
    }
  }
  .page-rnr-main-fixed-btn-group {
    .page-rnr-main-btn-next {
      height: 96px;
    }
  }
  .page-rnr-main-iccid-icon-del {
    background-image: url(../../../assets/rnr/ico_del.png);
    background-size: 100% 100%;
    width: 30px;
    height: 30px;
  }
  .page-rnr-main-iccid-icon-close {
    background-image: url(../../../assets/rnr/ico_close.png);
    background-size: 100% 100%;
    width: 30px;
    height: 30px;
  }
  .page-rnr-main-card-btn-iccid-add {
    padding: 0 24px;
    .page-rnr-main-card-btn-iccid {
      margin-top: 24px;
      .van-icon {
        margin-right: 14px;
      }
    }
  }
  .page-rnr-main-iccid-container {
    padding: 0px 24px;
    .page-rnr-main-iccid-item {
      background-image: linear-gradient(121deg, #617DFF 0%, #AEC6FF 98%);
      border-radius: 16px;
      display: flex;
      height: 125px;
      margin-top: 12px;
      position: relative;
      .page-rnr-main-iccid-item-icon {
        background-image: url(../../../assets/rnr/ico_iccid.png);
        background-size: 100% 100%;
        width: 110px;
        height: 101px;
        margin: 24px 36px 0 42px;
      }
      .page-rnr-main-iccid-item-split {
        background: #FFFFFF;
        display: block;
        width: 1px;
        height: 80px;
        opacity: 0.29;
        margin-top: 20px;
      }
      .van-cell {
        background-color: transparent;
        padding: 0 16px 0 40px !important;
        height: 45px;
        margin-top: 40px;
        .van-field__control {
          color: #FFFFFF !important;
          font-size: 32px !important;
          font-weight: 400 !important;
        }
        .van-field__button {
          padding-left: 60px;
        }
      }
      &:first-child {
        margin-top: 0;
      }
      &:before {
        background-image: url(../../../assets/rnr/gradient.png);
        background-size: 100% 100%;
        content: "";
        display: block;
        position: absolute;
        top: -12px;
        left: 0px;
        right: 0px;
        height: 24px;
        z-index: -1;
      }
    }
    ::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.4) !important;
      font-weight: 400;
    }
    :-moz-placeholder {
      color: rgba(255, 255, 255, 0.4) !important;
      font-weight: 400;
    }
    ::-moz-placeholder {
      color: rgba(255, 255, 255, 0.4) !important;
      font-weight: 400;
    }
    :-ms-input-placeholder {
      color: rgba(255, 255, 255, 0.4) !important;
      font-weight: 400;
    }
  }

  .page-rnr-action-sheet {
    padding: 30px;
    .page-rnr-action-sheet-title {
      color: #242424;
      font-size: 32px;
      font-weight: 500;
      line-height: 45px;
      padding: 0 0 0 24px;
    }
    .van-cell {
      background-color: transparent;
      padding: 0;

      &.van-field {
        background-color: transparent;
        padding: 44px 26px;
        position: relative;
        .van-field__label {
          color: #242424;
          font-size: 32px;
          font-weight: 400;
          height: 45px;
        }
        .van-cell__value {
          height: 45px;
          .van-field__control {
            color: #242424;
            font-size: 32px;
          }
          &.van-field__value {
            position: relative;
            .van-field__error-message {
              position: absolute;
              left: -220px;
              bottom: -90px;
            }
          }
        }
      }
      &.van-cell--required {
        .van-cell__title {
          span {
            padding-left: 20px;
          }
        }
        &:before {
          left: 0px;
          font-size: 16px;
        }
      }
      .van-cell__title {
        span {
          color: #242424;
          font-size: 32px;
          font-weight: 400;
        }
      }
      .van-cell__label {
        margin-top: 36px;
      }
      &:after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0px;
        bottom: 0;
        left: 0px;
        border-bottom: 1PX solid #ebedf0 !important;
        transform: scaleY(.5);
      }
    }
    .page-rnr-action-sheet-btn {
      margin: 112px 0px 88px;
    }
  }

  .page-rnr-main-card-iccid {
    padding-bottom: 36px !important;
    .page-rnr-main-card-title {
      align-items: center;
      display: flex;
      height: 46px;
      padding: 30px 0 48px;
      justify-content: space-between;
      .page-rnr-main-card-title-tl {
        color: #242424;
        font-size: 32px;
        font-weight: 500;
        flex-shrink: 0;
      }
      .page-rnr-main-card-title-tr {
        color: #CACACA;
        font-size: 32px;
        flex-shrink: 0;
      }
    }
    .rnr-main-card-add-btn {
      margin-top: 24px;
      .imageicon {
        margin-bottom: -4px;
        margin-right: 12px;
      }
    }
  }
}
</style>
