<template>
  <div>
    <ul class="carsList">
      <li>
        <div style="display: flex;justify-content: space-between;margin-bottom: 6px;">
          <p >
            蒙D12345 　<span class="carColor"></span>
          </p>
          <p class=" check-status">
            审核中
          </p>
          <!--<p class=" pass-status">-->
          <!--已认证-->
          <!--</p>-->
        </div>
        <div style="display: flex;justify-content: space-between">
          <p>
            汽油车
          </p>
          <p style="color: blue" @click="deleteShowHandle">
            解绑车辆
          </p>
          <!--<p class=" pass-status">-->
          <!--已认证-->
          <!--</p>-->
        </div>
        <p class="top-border">
          您可以申请 <span style="color: blue">立刻认证</span>,享受更多服务
        </p>
        <!--<p class="top-border">-->
        <!--您已经提交审核申请,请耐心等待-->
        <!--</p>-->
        <!--<p class="top-border">-->
        <!--您可以查看历史停车记录了-->
        <!--</p>-->
      </li>
      <li></li>
      <li></li>
    </ul>
    <div style="padding: 20px 15px">
      <x-button type="primary">立即添加</x-button>
    </div>

    <div class="tipWrap">
      <span>温馨提示:</span>
      <p>
        1、车辆绑定后请提交行驶证进行真实性验证,48小时内反馈审核结果,如自行解绑车牌后,再次重新绑定，需重新审核认证。
      </p>
      <p>
        2、未认证车牌只支持当前停车费和历史欠费记录。
      </p>
      <p>
        3、认证车牌支持查看历史停车记录。
      </p>
    </div>

    <div v-transfer-dom>
      <confirm v-model="deleteShow"
               :title="提示"
               @on-cancel="onCancel"
               @on-confirm="onConfirm"
               @on-show="onShow"
               @on-hide="onHide">
        <p style="text-align:center;">是否删除该车辆</p>
      </confirm>
    </div>

  </div>
</template>

<script>
export default {
  name: "myCars",
  data(){
    return {
      deleteShow: false
    }
  },
  methods:{
    deleteShowHandle(){
      this.deleteShow = true
    }
  }
};
</script>

<style scoped lang="scss">
  .carsList {
    padding: 0 15px;
    font-size: 12px;
    > li {
      /*height:100px;*/
      margin-top: 15px;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 1px 3px #ddd;
    }
  }
  .carColor{
    width: 28px;
    height: 17px;
    display: inline-block;
    background: url("../../assets/images/myCars/black.png");
    background-size: 100% 100%;
    vertical-align: middle;
  }

  .check-status {
    padding: 1px 8px;
    border: 1px solid #ffbe00;
    border-radius: 15px;
    color: #ffbe00;
  }

  .pass-status {
    padding: 2px 8px;
    border: 1px solid blue;
    border-radius: 15px;
    color: blue;
  }

  .top-border {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #ddd;
  }
  .tipWrap{
    padding: 0 15px;
    p{
      text-indent: 15px;
    }
  }

</style>
