<template>
  <scroll-view scroll-y="true" class="scroll-Y">
    <!--    <wx-points-commit ref='wxPointsCommit'></wx-points-commit>-->

    <!--    <authorize ref="authorize"></authorize>-->
    <div class="wrap">
      <div v-if="custTypeId === 0" class="wrap_plate">我的车牌</div>
      <div v-else class="wrap_plate">车牌号绑定</div>
      <div
        class="plate_plate"
        :style="{ position: custTypeId === 0 ? '' : 'relative' }"
        :class="
          custTypeId === 0
            ? 'linear-gradient-' + item.licensePlateType
            : 'border-change'
        "
        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: custTypeId === 0 ? '0 0 0 14px' : '14px 0 0 14px',
            }"
          >
            我的车牌
          </div>
          <div class="plate_plate_index plate_plate_index2">
            {{ item.vehicleNo | formatCarno }}
          </div>
          <div class="plate_plate_index plate_plate_index3">车牌类型</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.licensePlateTypeDesc }}</div>
            <div class="plate_plate_index4_index2">
              <!-- <uni-icons type="compose" size="20" @click="toEdit(item)"></uni-icons> -->
              <!-- <uni-icons type="trash" size="20" class="mrg-left-20" @click="toDelete(item)"></uni-icons> -->
              <img
                :src="require(`../../static/images/money.png`)"
                @click="toPay(item.vehicleNo)"
              />
              <img
                :src="require(`../../static/images/update.png`)"
                class="mrg-left-20"
                @click="toEdit(item)"
              />
              <img
                :src="require(`../../static/images/delete.png`)"
                class="mrg-left-20"
                @click="toDelete(item)"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="add_plate" v-if="licensePlateList.length < 3" @click="toAdd">
        添加车牌+
      </div>
      <div class="wrap_plate" style="margin-bottom: 50px">
        <div>温馨提示:</div>
        <div style="padding-top: 25px; color: #898989; font-size: 28px">
          ·用户可以添加多个"燃油车牌号"或"新能源车牌号"
        </div>
        <div style="color: #898989; font-size: 28px; padding-top: 5px">
          ·用户可以更改或删除已经绑定车牌
        </div>
      </div>
    </div>
    <uni-popup ref="deleteDialog" type="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>
    </uni-popup>
    <uni-popup ref="deleteSuccessDialog" type="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>
    </uni-popup>
  </scroll-view>
</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: #fff;
}

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

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

  .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: #fff;

      .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 {
      color: #666;
    }

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

    .plate_plate_index2 {
      font-size: 50px;
      font-weight: 500;
    }

    .plate_plate_index4 {
      padding-bottom: 20px;
      font-size: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .plate_plate_index4_index2 {
        width: 164px;
      }

      img {
        width: 32px;
        height: 32px;
        // margin-left: 25px;
        // margin-top: 10px;
      }
    }
  }

  .add_plate {
    width: 90%;
    height: 140px;
    text-align: center;
    line-height: 140px;
    border: 1px dashed #eaeaea;
    margin-left: 40px;
    margin-top: 40px;
    color: #898989;
  }

  .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 {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  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;
}
</style>
