<template>
  <div class="main">
    <div class="topMessage">
      <div class="messageTitle">请输入您的车牌号</div>
      <div class="messageList">
        <div class="messageText">
          1、您授权的车牌信息安全将被严格保证，并限于您授权的用途；
        </div>
        <div class="messageText">2、1个车牌号仅允许被1个账号绑定。</div>
      </div>
      <image class="carLogo" src="/static/images/home/carLogoBg.png" />
    </div>

    <!-- 输入车牌号的框 -->
    <div class="codeBox">
      <div class="input-box">
        <div
          :class="haveCode ? 'input-f cccBg' : 'input-f'"
          v-for="(item, i) in normalLen"
          :key="i"
          @tap="focusInput(i)"
        >
          <div calss="show-input">{{ saveCarText[i] }}</div>
        </div>
        <div class="input-f lastBox" @tap="handleChangeCarType">
          <div calss="show-input">
            <span class="text-sm">{{ newEnergy ? "新能源" : "" }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 确认绑定按钮 -->
    <div class="confirmBox" @click="handleConfirmCode" v-if="!haveCode">
      确认绑定
    </div>
    <!-- 取消绑定 -->
    <div class="cancelBox" @click="handleCancelCode" v-if="haveCode">
      解绑车辆
    </div>

    <div>
      <keyboard
        :isShow="isShow"
        @inputchange="inputChange"
        @delete="delValue"
        @ok="confirmboard"
      />
    </div>

    <div class="page-body" v-if="false">
      <div v-show="!isLoading && cards.length > 0">
        <div class="title">已绑车辆</div>
        <swiper scroll-x="true" class="banner">
          <swiper-item v-for="(item, o) in cards" :key="o" class="car-card">
            <div class="car-card">
              <image src="/static/images/car-card.png" mode="acspetFit" />
              <text class="card-title">{{ item.License_Plate }}</text>
            </div>
          </swiper-item>
          <swiper-item class="car-card">
            <div class="car-card-add"></div>
          </swiper-item>
        </swiper>
      </div>
      <div v-show="!isLoading && cards.length == 0">
        <image
          src="/static/images/car.png"
          mode="acspetFit"
          class="pic-image"
        ></image>
        <div class="tip-text">暂无绑定车辆</div>
        <div class="add-car" @tap="toAdd">
          <van-icon name="plus" size="32" color="#B0B0B0" />
          <span class="">添加车辆</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import keyboard from "../../../components/keyboard.vue";
export default {
  data() {
    return {
      cards: [],
      isLoading: true,
      normalLen: 7,
      nowIndex: -1,
      isShow: false,
      saveCarText: ["浙", "A", "", "", "", "", "", ""],
      newEnergy: true, // 是否是新能源
      haveCode: false, // 判断是否已经有了code
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  components: {
    keyboard,
  },
  methods: {
    // 确认绑定
    handleConfirmCode() {
      console.log("this.saveCarText", this.saveCarText);
      let _this = this;
      let carText = _this.saveCarText.join("");

      if (carText.length < 7) {
        uni.showModal({
          title: "温馨提示",
          content: "请您完善车牌号再提交",
          cancelColor: "#000000",
          confirmText: "确定",
          confirmColor: "#3CC51F",
          success: (result) => {
            if (result.confirm) {
            }
          },
        });
        return;
      } else {
        let reg =
          /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][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挂学警港澳使领]))$/;
        const careg = reg.test(carText);
        if (!careg) {
          uni.showModal({
            title: "温馨提示",
            content: "请输入正确车牌号",
            showCancel: false,
          });
          return;
        }
      }

      _this.$api
        .getCoop({
          action_type: "BindVehicle",
          LicensePlate: carText,
          VehicleType: _this.newEnergy ? "新能源" : "",
        })
        .then((res) => {
          console.log("res", res);
          if (res.Result_Code === 100) {
            uni.showModal({
              content: res.Result_Desc,
              cancelColor: "#000000",
              showCancel: false,
              confirmText: "确定",
              confirmColor: "#3CC51F",
              success: (result) => {
                _this.isShow = false;
                _this.getList();
              },
            });
          } else {
            uni.showModal({
              title: "温馨提示",
              content: res.Result_Desc,
              cancelColor: "#000000",
              confirmText: "确定",
              confirmColor: "#3CC51F",
              success: (result) => {
                if (result.confirm) {
                }
              },
            });
          }
        });
    },
    // 改变车的能源类型
    handleChangeCarType() {
      if (this.haveCode) {
        uni.showToast({
          title: "已有关联车辆！如需修改请先解绑",
          icon: "none",
          duration: 2000,
        });
        return;
      } else {
        this.newEnergy = !this.newEnergy;
      }
    },
    inputChange(value) {
      let index = this.nowIndex;
      this.saveCarText[index] = value;
      let next = index + 1;

      if (next < 7) {
        this.nowIndex = next;
      }
      this.$forceUpdate();
    },
    delValue() {
      let index = this.nowIndex;
      this.saveCarText[index] = "";
      let next = index - 1;

      if (next > -1) {
        this.nowIndex = next;
      }
      this.$forceUpdate();
    },
    confirmboard() {
      this.isShow = false;
    },
    focusInput(value) {
      if (this.haveCode) {
        uni.showToast({
          title: "已有关联车辆！如需修改请先解绑",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      this.isShow = true;
      this.nowIndex = value;
    },
    // 取消绑定
    handleCancelCode() {
      let _this = this;
      if (_this.cards && _this.cards.length > 0) {
        let obj = _this.cards[0];
        console.log("user", _this.user);
        console.log("obj", obj);
        uni.showModal({
          title: "确认取消绑定？",
          content: "取消绑定后将无法恢复",
          success: function (res) {
            if (res.confirm) {
              _this.$api
                .getCoop({
                  action_type: "UnbindVehicle",
                  MEMBERSHIPVEHICLE_ID: obj.MEMBERSHIPVEHICLE_ID,
                  LicensePlate: obj.License_Plate,
                  Membership_Id: _this.user.MEMBERSHIP_ID,
                })
                .then((res) => {
                  console.log("res", res);
                  if (res.Result_Code === 100) {
                    uni.showModal({
                      content: res.Result_Desc,
                      cancelColor: "#000000",
                      showCancel: false,
                      confirmText: "确定",
                      confirmColor: "#3CC51F",
                      success: (result) => {
                        _this.isShow = false;
                        _this.getList();
                      },
                    });
                  }
                });
            }
          },
        });
      } else {
        uni.showToast({
          title: "暂无关联车辆！",
          icon: "none",
          duration: 2000,
        });
      }
    },
    getList() {
      let _this = this;

      uni.showLoading({ title: "加载中" });
      this.$api
        .getCoop({
          action_type: "GetVehicleList",
        })
        .then((res) => {
          _this.isLoading = false;
          _this.cards = res.Result_Data.List;
          console.log("_this.cards", _this.cards);
          if (_this.cards && _this.cards.length > 0) {
            let obj = _this.cards[0];
            console.log("obj", obj);
            let code = obj.License_Plate;
            _this.saveCarText = code.split("");
            _this.haveCode = true;
          } else {
            _this.saveCarText = ["浙", "A", "", "", "", "", "", ""];
            _this.haveCode = false;
          }
          uni.hideLoading();
        });
    },
    toAdd() {
      uni.navigateTo({ url: "/pages/homeFn/bindingCar/index" });
    },
  },
  onShow() {
    this.isLoading = true;
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  .topMessage {
    width: 100%;
    height: 292rpx;
    background: linear-gradient(270deg, #727377 0%, #424448 100%);
    box-sizing: border-box;
    padding: 48rpx 32rpx;
    position: relative;
    .messageTitle {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
    }
    .messageList {
      width: 100%;
      margin-top: 16rpx;
      .messageText {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #b8b7b4;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        margin-bottom: 4rpx;
      }
    }
    .carLogo {
      position: absolute;
      right: 12rpx;
      bottom: 0;
      width: 240rpx;
      height: 240rpx;
      opacity: 0.8;
    }
  }

  .codeBox {
    width: calc(100% - 64rpx);
    height: 152rpx;
    background: #ffffff;
    border-radius: 6rpx;
    margin-left: 32rpx;
    transform: translateY(-60rpx);
    box-sizing: border-box;
    padding: 40rpx 26rpx;
    .input-box {
      display: flex;
      align-items: center;
      margin-top: 24rpx;
      .input-f {
        text-align: center;
        width: 72rpx;
        height: 72rpx;
        box-sizing: border-box;
        border-radius: 5rpx;
        line-height: 72rpx;
        position: relative;
        border: 1rpx solid #e7e7e6;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8rpx;
        .show-input {
          font-size: 34rpx;
        }
        .text-sm {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #716f69;
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
        }
        .text-tip-btn {
          text-align: center;
          width: 74rpx;
          height: 74rpx;
          border: 1rpx dashed #ededed;
          border-radius: 5rpx;
          background: #f8f8f8;
          line-height: 70rpx;
        }
      }
      .cccBg {
        background: #f5f6f7;
      }
      .lastBox {
        background: #f5f6f7;
        border-radius: 2rpx;
        border: 1rpx dashed #e7e7e6 !important;
      }
      .input-f:nth-last-child(1) {
        margin-right: 0;
      }
    }
  }
  .confirmBox {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    height: 88rpx;
    color: #ffffff;
    line-height: 44rpx;
    text-align: center;
    font-style: normal;
    width: calc(100% - 64rpx);
    margin-left: 32rpx;
    background: #ba922f;
    border-radius: 6rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cancelBox {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    height: 88rpx;
    color: #b8b7b4;
    line-height: 44rpx;
    text-align: center;
    font-style: normal;
    width: calc(100% - 64rpx);
    margin-left: 32rpx;
    background: #ffffff;
    border-radius: 6rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #b8b7b4;
    margin-top: 24rpx;
  }
}

page {
  background: #fff;
}

.title {
  color: #333333;
  padding-bottom: 36rpx;
  padding-left: 28rpx;
  padding-top: 43rpx;
}

.banner {
  height: 500rpx;
}

.car-card-add {
  width: 502rpx;
  height: 246rpx;
  background: #ffffff;
  border-radius: 8rpx;
  box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(221, 221, 221, 0.48);
}

.car-card {
  position: relative;
  padding-left: 35rpx;
  padding-top: 33rpx;
  width: 534rpx !important;
  height: 285rpx;

  // margin-left 26rpx
  image {
    width: 534rpx;
    height: 285rpx;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
  }

  .card-title {
    background: linear-gradient(#f3e6dd, #e5ba9f);
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-size: 36rpx;
    font-weight: bolder;
  }
}

.pic-image {
  width: 482rpx;
  height: 281rpx;
  margin-left: 128rpx;
  margin-right: 140rpx;
  margin-top: 138rpx;
  margin-bottom: 54rpx;
}

.tip-text {
  text-align: center;
}

.add-car {
  color: #b0b0b0;
  width: 504rpx;
  height: 145rpx;
  background: #f8f8f8;
  border: 1rpx dashed #c3c3c3;
  border-radius: 5rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 83rpx auto;
  font-size: 24rpx;
  justify-content: center;
  line-height: 1.5;
}
</style>