<template>
  <div>
    <scroll-view scroll-y="true" class="scroll-Y">
      <!-- 登录校验 -->
      <!-- <authorize ref="authorize"></authorize> -->
      <!-- <LoginDom></LoginDom> -->
      <div class="wrap">
        <div class="wrap_plate">我的车牌</div>
<!--        <div v-else class="wrap_plate">车牌号绑定</div>-->
        <div
          class="plate_plate"
          :class=" 'linear-gradient-' + item.licensePlateType "
          v-for="item in licensePlateList"
          :key="item.id"
        >
          <div class="plate_border">
            <div
              class="plate_tag"
              :class="'bgc-' + item.licensePlateType"
            ></div>
            <div
              class="plate_plate_index plate_plate_index1"
              :style="{
                padding: '0 0 0 14px',
              }"
            >
              我的车牌
            </div>
            <div class="plate_plate_index plate_plate_index2">
              {{ item.vehicleNo | formatCarno }}
            </div>
            <div class="plate_plate_index plate_plate_index3 bb">
              <img
                class="car-icon"
                :src="require(`../../static/images/icon-carType.png`)"
              />
              <div>车牌类型</div>
              <div class="licensePlateTypeDesc">
                {{ item.licensePlateTypeDesc }}
              </div>
            </div>
            <!-- <div class="plate_tag-icon" :class="
            item.licensePlateType === 'NEW_ENERGY_CAR_NO'
              ? 'plate_tag_icon_green'
              : item.licensePlateType === 'ORDINARY_CAR_NO'
              ? 'plate_tag_icon_blue'
              : ''
          " v-if="custTypeId > 0"></div> -->
            <div class="plate_plate_index plate_plate_index4">
              <div class="item" @click.stop="toPay(item.vehicleNo)">
                <img :src="require(`../../static/images/icon-edit.png`)" alt="" /><span>查询</span>
              </div>
              <div class="item" @click="toEdit(item)">
                <img :src="require(`../../static/images/icon-find.png`)" alt="" /><span
                  >编辑</span
                >
              </div>
              <div class="item" @click="toDelete(item)">
                <img :src="require(`../../static/images/icon-del-white.png`)" alt="" /><span
                  >删除</span
                >
              </div>
              <!-- <div class="plate_plate_index4_index2">
              <img src="static/images/money.png" @click="toPay(item.vehicleNo)" />
              <img src="static/images/update.png" class="mrg-left-20" @click="toEdit(item)" />
              <img src="static/images/delete.png" class="mrg-left-20" @click="toDelete(item)" />
            </div> -->
            </div>
          </div>
        </div>
        <div
          class="add_plate_no_data"
          v-if="!licensePlateList.length"
          @click="toAdd"
        >
          添加车牌+
        </div>
        <div class="wrap_plate mt36">
          <div class="title">温馨提示:</div>
          <div class="desc">·用户可以添加多个"燃油车牌号"或"新能源车牌号"</div>
          <div class="desc">·用户可以更改或删除已经绑定车牌</div>
        </div>
      </div>
    </scroll-view>
    <van-popup v-model="deleteDialogSwitch" position="center">
      <div class="popup-dialog">
        <div class="dialog-title">
          <span class="dialog-title-text">删除已绑定车牌</span>
        </div>
        <div class="dialog-content border-top">
          <span class="dialog-content-text">是否确认删除已经绑定车牌</span>
          <span class="dialog-content-carno">{{ activeCarno }}</span>
        </div>
        <div class="dialog-button-group">
          <div class="dialog-button" @click="cancelDelete">
            <span class="dialog-button-text">取消</span>
          </div>
          <div class="dialog-button border-left" @click="doDelete">
            <span class="dialog-button-text">确定</span>
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="deleteSuccessDialogSwitch" position="center">
      <div class="popup-dialog">
        <div class="dialog-content">
          <uni-icons
            type="checkbox-filled"
            size="60"
            color="#7DB124"
          ></uni-icons>
          <span class="dialog-content-text">删除成功</span>
        </div>
        <div class="dialog-button-group">
          <div class="dialog-button" @click="confirmDialog">
            <span class="dialog-button-text">确定</span>
          </div>
        </div>
      </div>
    </van-popup>
    <div
      class="add_plate_box"
      v-if="licensePlateList.length && licensePlateList.length < 3"
      @click="toAdd"
    >
      <div class="add_plate_btn">+添加车牌号</div>
      <div class="btnpb"></div>
    </div>
  </div>
</template>

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

<style lang="less" scoped>
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f4f7ff;
}

.wrap {
  display: flex;
  flex-direction: column;
  width: 100%;

  .wrap_plate {
    margin-top: 24px;
    margin-left: 40px;
    font-size: 30px;

    &.mt36 {
      margin-top: 36px;
    }

    .title {
      // width: 180px;
      // height: 50px;
      font-size: 36px;
      // font-family: PingFangHK-Semibold, PingFangHK;
      font-weight: 600;
      color: #333333;
      line-height: 50px;
      margin-bottom: 20px;
    }

    .desc {
      font-size: 30px;
      font-weight: 400;
      color: #999999;
      line-height: 45px;
    }
  }

  .border-change {
    border: 4px solid #707070;
  }

  .plate_tag-icon {
    position: absolute;
    left: 0;
    top: 40px;
    width: 20px;
    height: 13px;
    opacity: 1;
    border-radius: 0px 12px 1px 0px;
  }

  .plate_tag_icon_green {
    background: #39b54a;
  }

  .plate_tag_icon_blue {
    background: #29abe2;
  }

  .plate_plate {
    width: 670px;
    margin-left: 40px;
    margin-top: 20px;
    padding: 4px;
    border-radius: 20px 128px 20px 20px;

    .plate_border {
      // border-radius: 17px 125px 17px 17px;
      background-color: #064c8a;
      border-radius: 4px;
      padding: 30px;
      color: #ffffff;

      .plate_tag {
        display: inline-block;
        width: 23px;
        height: 14px;
        border-top-right-radius: 18px;
      }

      .bgc-0 {
        background-color: #29abe2;
      }

      .bgc-1 {
        background-color: #39b54a;
      }

      .bgc-2 {
        background-color: #bc9f6d;
      }
    }

    .plate_plate_index {
      padding-left: 37px;
      padding-top: 10px;
      font-size: 26px;
    }

    .plate_plate_index1,
    .plate_plate_index3 {
      font-size: 28px;
      font-weight: 400;
      color: #ffffff;
      line-height: 40px;
      display: flex;
      align-items: center;

      .car-icon {
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }

      .licensePlateTypeDesc {
        margin-left: 5px;
        font-size: 28px;
        font-weight: 500;
        color: #ffffff;
        line-height: 40px;
        margin-left: 20px;
      }

      &.bb {
        padding-bottom: 23px;
        margin-bottom: 23px;
        border-bottom: 1px solid #ffffff;
      }
    }

    .plate_plate_index1 {
      display: inline-block;
      padding-left: 14px;
    }

    .plate_plate_index2 {
      font-weight: 500;
      font-size: 38px;
      font-weight: 600;
      color: #ffffff;
      line-height: 53px;
    }

    .plate_plate_index4 {
      display: flex;
      justify-content: space-around;

      .plate_plate_index4_index2 {
        width: 164px;
      }

      .item {
        width: 33.33%;
        font-size: 28px;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &::after {
          content: '';
          width: 1px;
          height: 30px;
          position: absolute;
          right: 8%;
          background-color: rgba(255, 255, 255, 0.3);
        }

        &:last-child {
          &::after {
            width: 0px;
          }
        }

        img {
          width: 45px;
          height: 45px;
          // margin-right: 10px;
        }

        span {
          flex: 0 0 50%;
          text-align: left;
        }
      }
    }
  }

  .linear-gradient-ORDINARY_CAR_NO {
    // background-image: linear-gradient(#29abe2, #2e3393);
  }

  .linear-gradient-NEW_ENERGY_CAR_NO {
    // background-image: linear-gradient(#8bc63f, #026937);
  }

  .linear-gradient-SPECIAL_CAR_NO {
    // background-image: linear-gradient(#caa86e, #666666);
  }

  .mrg-left-20 {
    margin-left: 20px;
  }
}

.popup-dialog {
  // width: 300px;
  border-radius: 10px;
  background-color: #fff;
}

.dialog-title {
  flex-direction: row;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.dialog-title-text {
  font-size: 16px;
  font-weight: 500;
}

.dialog-content {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

.border-top {
  border-top-color: #f5f5f5;
  border-top-style: solid;
  border-top-width: 1px;
}

.dialog-content-text {
  font-size: 14px;
}

.dialog-content-carno {
  font-weight: 500;
  font-size: 16px;
  margin-top: 8px;
}

.dialog-button-group {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  border-top-color: #f5f5f5;
  border-top-style: solid;
  border-top-width: 1px;
}

.dialog-button {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */

  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 45px;
}

.border-left {
  border-left-color: #f0f0f0;
  border-left-style: solid;
  border-left-width: 1px;
}

.dialog-button-text {
  font-size: 14px;
  color: #6e6e6e;
}

.add_plate_no_data {
  width: 90%;
  height: 200px;
  text-align: center;
  line-height: 200px;
  // border: 1px dashed #eaeaea;
  border: 1px solid #d8dae0;
  margin-left: 40px;
  margin-top: 20px;
  color: #999999;
  background-color: #fafbff;
}
.add_plate_box {
  text-align: center;
  // border: 1px dashed #eaeaea;
  background-color: #fafbff;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 999;
  padding: 30px 30px 0 30px;
  box-shadow: 0px 13px 33px 0px rgba(190, 187, 187, 0.2);
  .btnpb {
    width: 100%;
    padding-bottom: 30px;
    margin-bottom: 30px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .add_plate_btn {
    width: 100%;
    // margin-left: 30px;
    height: 90px;
    line-height: 90px;
    background: #064c8a;
    border-radius: 45px;
    font-size: 34px;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
