<template>
  <div
    class="wrap"
    :style="{ padding: custTypeId === 0 ? '30rpx' : '18rpx 22rpx 0 16rpx' }"
  >
    <wx-points-commit ref='wxPointsCommit'></wx-points-commit>

    <div :style="{ border: custTypeId === 0 ? '' : '1px solid #C69C6D' }">
      <div class="switch-container" v-if="custTypeId === 0">
        <div>车牌类型</div>
        <div class="switch">
          <div
            v-for="(item, index) in licensePlateTypeArr"
            :key="index"
            :class="index == carType ? 'switch-active' : ''"
            @click="toggleType(index)"
            >{{ item.label }}</div
          >
        </div>
      </div>
      <!--  -->
      <div class="switch-container-else" v-else>
        <div
          v-for="(item, index) in licensePlateTypeArr"
          :key="index"
          class="switch-item"
          :class="index == carType ? 'switch-selected' : 'switch-else'"
          @click="toggleType(index)"
        >
          <div
            :class="index == carType ? 'switch-blue-color' : 'switch-blue-bg'"
            v-if="custTypeId === 1"
            >{{ item.label }}</div
          >
          <div
            :class="index == carType ? 'switch-green-color' : 'switch-green-bg'"
            v-if="custTypeId === 2"
            >{{ item.label }}</div
          >
          <div class="switch-line" v-if="index == carType"></div>
        </div>
      </div>
      <div
        class="input-box"
        :style="{ margin: custTypeId === 0 ? '' : '0 44rpx 0 35rpx' }"
      >
        <div
          class="li"
          @click="clickShowKeyboard(0)"
          :style="{
            color:
              custTypeId === 0
                ? '#703a98'
                : custTypeId === 1
                ? '#023694 '
                : '#0D6B38',
          }"
          :class="[active === 0 ? 'active' : '']"
        >
          {{ numArr[0] }}
        </div>
        <div
          class="li"
          @click="clickShowKeyboard(1)"
          :style="{
            color:
              custTypeId === 0
                ? '#703a98'
                : custTypeId === 1
                ? '#023694 '
                : '#0D6B38',
          }"
          :class="[active === 1 ? 'active' : '']"
        >
          {{ numArr[1] }}
        </div>
        <div
          class="dot"
          :style="{
            color:
              custTypeId === 0
                ? '#703a98'
                : custTypeId === 1
                ? '#023694 '
                : '#0D6B38',
          }"
          >·</div
        >
        <div
          class="li"
          @click="clickShowKeyboard(2)"
          :style="{
            color:
              custTypeId === 0
                ? '#703a98'
                : custTypeId === 1
                ? '#023694 '
                : '#0D6B38',
          }"
          :class="[active === 2 ? 'active' : '']"
        >
          {{ numArr[2] }}
        </div>
        <div
          class="li"
          @click="clickShowKeyboard(3)"
          :style="{
            color:
              custTypeId === 0
                ? '#703a98'
                : custTypeId === 1
                ? '#023694 '
                : '#0D6B38',
          }"
          :class="[active === 3 ? 'active' : '']"
        >
          {{ numArr[3] }}
        </div>
        <div
          class="li"
          @click="clickShowKeyboard(4)"
          :style="{
            color:
              custTypeId === 0
                ? '#703a98'
                : custTypeId === 1
                ? '#023694 '
                : '#0D6B38',
          }"
          :class="[active === 4 ? 'active' : '']"
        >
          {{ numArr[4] }}
        </div>
        <div
          class="li"
          @click="clickShowKeyboard(5)"
          :style="{
            color:
              custTypeId === 0
                ? '#703a98'
                : custTypeId === 1
                ? '#023694 '
                : '#0D6B38',
          }"
          :class="[active === 5 ? 'active' : '']"
        >
          {{ numArr[5] }}
        </div>
        <div
          class="li"
          @click="clickShowKeyboard(6)"
          :style="{
            color:
              custTypeId === 0
                ? '#703a98'
                : custTypeId === 1
                ? '#023694 '
                : '#0D6B38',
          }"
          :class="[active === 6 ? 'active' : '']"
        >
          {{ numArr[6] }}
        </div>
        <div
          v-if="carType == 1"
          class="li"
          @click="clickShowKeyboard(7)"
          :style="{
            color:
              custTypeId === 0
                ? '#703a98'
                : custTypeId === 1
                ? '#023694 '
                : '#0D6B38',
          }"
          :class="[active === 7 ? 'active' : '']"
        >
          <text v-if="numArr[7]">{{ numArr[7] }}</text>
        </div>
      </div>
      <div
        class="confirm-btn"
        :class="disabledBtn ? 'disabled-btn' : ''"
        :disabled="disabledBtn"
        @click="handleAddLicensePlateByKipMember"
        v-if="custTypeId === 0"
      >
        确认添加
      </div>
      <div
        class="confirm-btn-else"
        :class="custTypeId === 1 ? 'confirm-btn-blue' : 'confirm-btn-green'"
        @click="handleAddLicensePlateByKipMember"
        v-else
      >
        确认添加
      </div>
    </div>

    <div class="reminder">
      <div class="reminder-title">温馨提示:</div>
      <div class="reminder-content"
        >·用户可以添加多个"燃油车牌号"或"新能源车牌号"</div
      >
      <div class="reminder-content">·用户可以更改或删除已经绑定车牌</div>
    </div>
    <plate-number
      ref="plateKeyboard"
      :carType="carType"
      :active="active"
      :ind="ind"
      :numArr="numArr"
      @carnoArr="updateCarno"
    ></plate-number>
  </div>
</template>

<script>
import uniPop from '@/components/uni-popup/uni-popup.vue'
import plateNumber from '@/components/plate-number/plateNumber.vue'
const app = getApp()
import { LICENSE_PLATE_TYPE_ARR } from '@/constants.js'
import {
  kipAddMemberVehicles,
  kipModifyMemberVehicles,
} from '@/utils/api-kip.js'
import { mapState } from 'vuex'
export default {
  components: {
    uniPop,
    plateNumber,
  },
  data() {
    return {
      carInfo: {},
      carType: 0,
      active: null,
      ind: null,
      numArr: ['', '', '', '', '', '', ''],
      vehicleNumber: '',
      licensePlateTypeArr: LICENSE_PLATE_TYPE_ARR,
      preUrl: '',
    }
  },
  onLoad(params) {
    if (params.carType) {
      this.carInfo = {
        ...params,
      }
      this.carType = this.carInfo.carType
      this.numArr = this.carInfo.carno.split('')
      this.vehicleNumber = this.carInfo.carno
    }
    // 埋点-初始化
    this.parkingTrack = new this.$trackFactory('bind_plate_num', {})
    this.parkingTrack.track(1)
    // 埋点本地化
    this.preUrl = uni.getStorageSync('previousUrl')
    uni.setStorageSync('previousUrl', '/pages/parkingFee/vehicleAddOrEdit.vue')
  },
  onShow() {},
  computed: {
    disabledBtn() {
      return this.numArr.findIndex((val) => !val) !== -1
    },
    ...mapState({
      custTypeId: (state) => state.custTypeId,
    }),
  },
  methods: {
    // 切换车牌类型
    toggleType(index) {
      this.ind = 0
      this.active = 0
      this.carType = index

      if (this.carType == '1') {
        this.numArr = [
          this.numArr[0],
          this.numArr[1],
          this.numArr[2],
          this.numArr[3],
          this.numArr[4],
          this.numArr[5],
          this.numArr[6],
          this.numArr[7],
        ]
      } else {
        this.numArr = [
          this.numArr[0],
          this.numArr[1],
          this.numArr[2],
          this.numArr[3],
          this.numArr[4],
          this.numArr[5],
          this.numArr[6],
        ]
      }
    },
    // 唤起键盘
    clickShowKeyboard(index) {
      this.ind = index
      this.active = index
      if (index === 0) {
        this.$refs['plateKeyboard'].openKeyboardCN()
      } else {
        this.$refs['plateKeyboard'].closeKeyboardCN()
        this.$refs['plateKeyboard'].openKeyboardEN()
      }
    },
    // 接收子组件数据
    updateCarno(val) {
      this.numArr = val.numArr
      this.active = val.active
      this.ind = val.ind
      this.vehicleNumber = this.numArr.join('')
    },
    // 车牌号校验
    // isVehicleNumber(vehicleNumber) {
    // 	if (vehicleNumber.length == 7) {
    // 		this.vehicleNumber = vehicleNumber.join("");
    // 		var express =
    // 			/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/;
    // 		if (!express.test(this.vehicleNumber)) {
    // 			uni.showToast({
    // 				title: "请输入正确的车牌号",
    // 				duration: 2000,
    // 				icon: "none",
    // 			});
    // 			return false;
    // 		}
    // 		return true;
    // 	}
    // 	if (vehicleNumber.length == 8) {
    // 		this.vehicleNumber = vehicleNumber.join("");
    // 		var express =
    // 			/^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/;
    // 		if (!express.test(this.vehicleNumber)) {
    // 			uni.showToast({
    // 				title: "请输入正确的车牌号",
    // 				duration: 2000,
    // 				icon: "none",
    // 			});
    // 			return false;
    // 		}
    // 		return true;
    // 	}
    // },
    handleAddLicensePlateByKipMember() {
      uni.showLoading({
        title: '加载中',
      })
      const params = {
        licensePlateType: this.licensePlateTypeArr[this.carType].value,
        vehicleNo: this.vehicleNumber,
      }
      let confirmType
      // 修改车牌
      this.parkingTrack.track(102, {
        plate_type: params.licensePlateType === 'ORDINARY_CAR_NO' ? 1 : (params.licensePlateType === 'NEW_ENERGY_CAR_NO' ? 2 : 3),
        plate_num: params.vehicleNo
      })
      if (this.carInfo.id) {
        params.id = this.carInfo.id
        kipModifyMemberVehicles(params)
          .then((resp) => {
            uni.hideLoading()
            // console.log(resp)
            const result = resp.data
            if (result && result.code == '000000') {
              if (result.data) {
                this.parkingTrack.track(200, {
                  plate_type: params.licensePlateType === 'ORDINARY_CAR_NO' ? 1 : (params.licensePlateType === 'NEW_ENERGY_CAR_NO' ? 2 : 3),
                  plate_num: params.vehicleNo
                })
                uni.showToast({
                  title: '修改车牌成功',
                  duration: 1300,
                  icon: 'none',
                })
                setTimeout(function () {
                  uni.navigateBack()
                }, 1500)
              }
            } else {
              this.parkingTrack.track(102, {
                plate_type: params.licensePlateType === 'ORDINARY_CAR_NO' ? 1 : (params.licensePlateType === 'NEW_ENERGY_CAR_NO' ? 2 : 3),
                plate_num: params.vehicleNo,
                fail_reason: result.message
              })
              const message = result.message || '修改车牌失败'
              uni.showToast({
                title: message,
                duration: 2000,
                icon: 'none',
              })
            }
          })
          .catch((err) => {
            uni.hideLoading()
            console.error(err)
            this.parkingTrack.track(102, {
              plate_type: params.licensePlateType === 'ORDINARY_CAR_NO' ? 1 : (params.licensePlateType === 'NEW_ENERGY_CAR_NO' ? 2 : 3),
              plate_num: params.vehicleNo,
              fail_reason: '修改车牌失败'
            })
            uni.showToast({
              title: '修改车牌失败',
              duration: 2000,
              icon: 'none',
            })
          })
      } else {
        this.parkingTrack.track(100, {
          plate_type: params.licensePlateType === 'ORDINARY_CAR_NO' ? 1 : (params.licensePlateType === 'NEW_ENERGY_CAR_NO' ? 2 : 3),
          plate_num: params.vehicleNo,
          source_name: '车辆管理功能球',
          source_type: '车辆管理入口'
        })
        kipAddMemberVehicles(params)
          .then((resp) => {
            uni.hideLoading()
            // console.log(resp)
            const result = resp.data
            if (result && result.code == '000000') {
              if (result.data) {
                // 绑定车牌成功
                this.parkingTrack.track(200, {
                  plate_type: params.licensePlateType === 'ORDINARY_CAR_NO' ? 1 : (params.licensePlateType === 'NEW_ENERGY_CAR_NO' ? 2 : 3),
                  plate_num: params.vehicleNo
                })
                uni.showToast({
                  title: '绑定车牌成功',
                  duration: 1300,
                  icon: 'none',
                })
                setTimeout(function () {
                  uni.navigateBack()
                }, 1500)
              }
            } else {
              const message = result.message || '绑定车牌失败'
              this.parkingTrack.track(100, {
                plate_type: params.licensePlateType === 'ORDINARY_CAR_NO' ? 1 : (params.licensePlateType === 'NEW_ENERGY_CAR_NO' ? 2 : 3),
                plate_num: params.vehicleNo,
                fail_reason: message
              })
              uni.showToast({
                title: message,
                duration: 2000,
                icon: 'none',
              })
            }
          })
          .catch((err) => {
            this.parkingTrack.track(100, {
              plate_type: params.licensePlateType === 'ORDINARY_CAR_NO' ? 1 : (params.licensePlateType === 'NEW_ENERGY_CAR_NO' ? 2 : 3),
              plate_num: params.vehicleNo,
              fail_reason: '绑定车牌失败'
            })
            uni.hideLoading()
            console.error(err)
            uni.showToast({
              title: '绑定车牌失败',
              duration: 2000,
              icon: 'none',
            })
          })
      }
    },
  },
}
</script>

<style lang="less" scoped>
.wrap {
  padding: 30rpx;
  .switch-container-else {
    margin-bottom: 72rpx;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    font-size: 28rpx;
    .switch-item:nth-of-type(1) {
      .switch-else {
        border-right: 1px solid #c69c6d;
      }
    }
    .switch-item:nth-of-type(2) {
      .switch-else {
        border-right: 1px solid #c69c6d;
      }
    }
    .switch-item {
      width: 33.3%;
      height: 78rpx;
      line-height: 78rpx;
      text-align: center;
    }
    .switch-green-bg {
      background: #0d6b38;
      color: #ffffff;
      box-sizing: border-box;
    }
    .switch-green-color {
      color: #0d6b38;
    }
    .switch-blue-bg {
      background: #023694;
      color: #ffffff;
      box-sizing: border-box;
    }
    .switch-blue-color {
      color: #023694;
    }
    .switch-line {
      width: 104rpx;
      height: 3rpx;
      margin: 10rpx auto 0;
      background: #c69c6d;
      opacity: 1;
    }
  }
  .switch-container {
    margin-bottom: 10rpx;
    width: 100%;
    margin-left: -1rpx;
    font-size: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30rpx;

    .switch {
      font-size: 28rpx;
      width: 470rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border: 1rpx solid #4d4d4d;
      height: 66rpx;
      color: #4d4d4d;
      overflow: hidden;
      border-radius: 50rpx;

      view {
        height: 100%;
        border-radius: 50rpx;
        line-height: 65rpx;
        text-align: center;
      }

      view:nth-child(1) {
        width: 37%;
      }

      view:nth-child(2) {
        width: 36%;
      }

      view:nth-child(3) {
        width: 37%;
      }

      .switch-active {
        color: #fff;
        background-image: linear-gradient(to right, #7e4fa1, #433c7f);
      }
    }
  }

  .input-box {
    // width: 100%;
    height: 100rpx;
    margin: auto;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.4rem;
    margin: 1rem auto;
    display: flex;
    justify-content: center;

    .li:first-child {
      border-top-left-radius: 20rpx;
      border-bottom-left-radius: 20rpx;
    }

    .li {
      flex: 1;
      border: 1px solid rgba(206, 208, 210, 1);
      box-sizing: border-box;
      margin: 0 2px;
      font-size: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #703a98;

      image {
        width: 80%;
        height: 100%;
      }

      &.active {
        border-color: #3e67ff;
      }
    }

    .dot {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 120rpx;
      color: #703a98;
    }
  }

  .confirm-btn {
    color: #fff;
    margin: 0 auto;
    height: 90rpx;
    width: 98%;
    line-height: 90rpx;
    border-radius: 80rpx;
    font-size: 17px;
    text-align: center;
    background-image: linear-gradient(to right, #7e4fa1, #433c7f);
  }
  .confirm-btn-else {
    width: 636rpx;
    height: 87rpx;
    color: white;
    line-height: 87rpx;
    text-align: center;
    font-size: 34rpx;
    opacity: 1;
    border-radius: 43rpx;
    margin: 64rpx auto 31rpx;
  }
  .confirm-btn-blue {
    background: #023694;
  }
  .confirm-btn-green {
    background: #0d6b38;
  }
  .disabled-btn {
    background-color: #c1c1c1;
    background-image: none;
  }

  .reminder {
    margin-top: 20px;

    .reminder-title {
      margin-bottom: 8px;
    }

    .reminder-content {
      font-size: 26rpx;
      padding-top: 3px;
      color: #898989;
    }
  }
}
</style>
