<template>
  <div
    class="wrap"
    :style="{ padding: custTypeId === 0 ? '30px' : '18px 22px 0 16px' }"
  >
    <!-- <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 44px 0 35px' }"
      >
        <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' : '']"
        >
          <span v-if="numArr[7]">{{ numArr[7] }}</span>
        </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"
      :disBtn="[38]"
    ></plate-number>
  </div>
</template>

<script>
import vehicleAddOrEditJs from '../../mixins/vehicleAddOrEdit'
export default {
  mixins:[vehicleAddOrEditJs]
}
</script>

<style lang="less" scoped>
.wrap {
  padding: 30px;
  .switch-container-else {
    margin-bottom: 72px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    font-size: 28px;
    .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: 78px;
      line-height: 78px;
      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: 104px;
      height: 3px;
      margin: 10px auto 0;
      background: #c69c6d;
      opacity: 1;
    }
  }
  .switch-container {
    margin-bottom: 10px;
    width: 100%;
    margin-left: -1px;
    font-size: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;

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

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

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

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

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

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

  .input-box {
    // width: 100%;
    height: 100px;
    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: 20px;
      border-bottom-left-radius: 20px;
    }

    .li {
      flex: 1;
      border: 1px solid rgba(206, 208, 210, 1);
      box-sizing: border-box;
      margin: 0 2px;
      font-size: 50px;
      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: 120px;
      color: #703a98;
    }
  }

  .confirm-btn {
    color: #fff;
    margin: 0 auto;
    height: 90px;
    width: 98%;
    line-height: 90px;
    border-radius: 80px;
    font-size: 17px;
    text-align: center;
    background-image: linear-gradient(to right, #7e4fa1, #433c7f);
  }
  .confirm-btn-else {
    width: 636px;
    height: 87px;
    color: white;
    line-height: 87px;
    text-align: center;
    font-size: 34px;
    opacity: 1;
    border-radius: 43px;
    margin: 64px auto 31px;
  }
  .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: 26px;
      padding-top: 3px;
      color: #898989;
    }
  }
}
</style>
