<template>
  <div style="background-color: #f4f7ff">
    <scroll-view class="wrap">
      <div class="car-number-box">
        <div :style="{ border: custTypeId === 0 ? '' : '1px solid #C69C6D' }">
          <div class="switch-container" v-if="custTypeId === 0">
            <div class="car-type">车牌类型</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
                    ? '#333'
                    : custTypeId === 1
                    ? '#333 '
                    : '#333',
              }"
              :class="[active === 0 ? 'active' : '']"
            >
              {{ numArr[0] }}
            </div>
            <div
              class="li"
              @click="clickShowKeyboard(1)"
              :style="{
                color:
                  custTypeId === 0
                    ? '#333'
                    : custTypeId === 1
                    ? '#333 '
                    : '#333',
              }"
              :class="[active === 1 ? 'active' : '']"
            >
              {{ numArr[1] }}
            </div>
            <div
              class="dot"
              :style="{
                color:
                  custTypeId === 0
                    ? '#333'
                    : custTypeId === 1
                    ? '#333 '
                    : '#333',
              }"
            >
              ·
            </div>
            <div
              class="li"
              @click="clickShowKeyboard(2)"
              :style="{
                color:
                  custTypeId === 0
                    ? '#333'
                    : custTypeId === 1
                    ? '#333 '
                    : '#333',
              }"
              :class="[active === 2 ? 'active' : '']"
            >
              {{ numArr[2] }}
            </div>
            <div
              class="li"
              @click="clickShowKeyboard(3)"
              :style="{
                color:
                  custTypeId === 0
                    ? '#333'
                    : custTypeId === 1
                    ? '#333 '
                    : '#333',
              }"
              :class="[active === 3 ? 'active' : '']"
            >
              {{ numArr[3] }}
            </div>
            <div
              class="li"
              @click="clickShowKeyboard(4)"
              :style="{
                color:
                  custTypeId === 0
                    ? '#333'
                    : custTypeId === 1
                    ? '#333 '
                    : '#333',
              }"
              :class="[active === 4 ? 'active' : '']"
            >
              {{ numArr[4] }}
            </div>
            <div
              class="li"
              @click="clickShowKeyboard(5)"
              :style="{
                color:
                  custTypeId === 0
                    ? '#333'
                    : custTypeId === 1
                    ? '#333 '
                    : '#333',
              }"
              :class="[active === 5 ? 'active' : '']"
            >
              {{ numArr[5] }}
            </div>
            <div
              class="li"
              @click="clickShowKeyboard(6)"
              :style="{
                color:
                  custTypeId === 0
                    ? '#333'
                    : custTypeId === 1
                    ? '#333 '
                    : '#333',
              }"
              :class="[active === 6 ? 'active' : '']"
            >
              {{ numArr[6] }}
            </div>
            <div
              v-if="carType == 1"
              class="li"
              @click="clickShowKeyboard(7)"
              :style="{
                color:
                  custTypeId === 0
                    ? '#333'
                    : custTypeId === 1
                    ? '#333 '
                    : '#333',
              }"
              :class="[active === 7 ? 'active' : '']"
            >
              <span v-if="numArr[7]">{{ numArr[7] }}</span>
            </div>
          </div>
        </div>

        <div class="reminder">
          <div class="reminder-title">温馨提示:</div>
          <div class="reminder-content">
            ·用户可以添加多个"燃油车牌号"或"新能源车牌号"
          </div>
          <div class="reminder-content">·用户可以更改或删除已经绑定车牌</div>
        </div>
      </div>
    </scroll-view>
    <div class="btn-box">
      <div class="btnpb"></div>
      <div
        class="confirm-btn"
        :class="disabledBtn ? 'disabled-btn' : ''"
        :disabled="disabledBtn"
        @click="handleAddLicensePlateByKipMember"
      >
        确认{{ carInfo.id ? '修改' : '添加' }}
      </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;

  .car-number-box {
    margin-top: 24px;
    padding: 30px;
    background-color: #fafbff;
    border: 1px solid #d8dae0;
  }

  .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;

    .car-type {
      font-size: 34px;
      font-weight: 600;
      color: #333333;
      line-height: 50px;
      // width: 144px;
      margin-right: 54px;
    }

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

      div {
        height: 100%;
        border-radius: 27px;
        line-height: 54px;
        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);
        background: #064c8a;
      }
    }
  }

  .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: #333333;
      border-radius: 4px;
      background-color: #f4f7ff;
      margin-right: 26px;

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

      &.active {
        border-color: #333333;
      }
      &:last-child {
        margin-right: 0;
      }
    }

    .dot {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 120px;
      color: #333333;
      margin-right: 18px;
    }
  }

  .reminder {
    margin-top: 20px;

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

    .reminder-content {
      font-size: 26px;
      padding-top: 3px;
      color: #898989;
    }
  }
}
.btn-box {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #f9f9ff;
  padding: 30px;
  box-shadow: 0px 13px 33px 0px rgba(190, 187, 187, 0.2);

  &.btnpb {
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .confirm-btn {
    color: #fff;
    margin: 0 auto;
    height: 90px;
    width: 98%;
    line-height: 90px;
    font-size: 34px;
    text-align: center;
    background: #064c8a;
    border-radius: 45px;
  }

  .confirm-btn-else {
    width: 636px;
    height: 90px;
    color: white;
    line-height: 90px;
    text-align: center;
    font-size: 34px;
    opacity: 1;
    border-radius: 45px;
    background: #d8dae0;
    margin: 64px auto 31px;
  }

  .confirm-btn-blue {
    background: #023694;
  }

  .confirm-btn-green {
    background: #0d6b38;
  }

  .disabled-btn {
    background-color: #d8dae0;
    background-image: none;
    font-size: 34px;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
