<template>
  <div>
    <img id="equipmentImg" src="../assets/pic_kv.png">
    <div id="equipmentCon">
      <div>
        <div>设备ID：{{seexSn}}</div>
        <span v-if="seexSn==''" @click="bindDialog">立即绑定</span>
        <span v-else @click="bindDialog">切换设备</span>
      </div>
    </div>
    <div id="equipmentTip">
      <p>
        <img src="../assets/tips.png">
        <span>在哪可以找到我的SN码？</span>
      </p>
      <p>1. 开启眼保仪 > 我的 > 关于我们，最下方写着SN字母数字组合</p>
      <p>2. 眼保仪的外包装盒</p>
    </div>
    <div id="bindDialog" v-show="bindDialogShow" @click.stop="bindDialogShow=false">
      <div id="bindDialogCon" @click.stop>
        <p>输入提示</p>
        <div>
          <span>设备ID：</span>
          <input type="text" v-model="equmentId" placeholder="请输入SN码" maxlength="20">
        </div>
        <p id="bindTip" v-show="noCode">SN码不存在，请检验是否输入正确</p>
        <span id="bindSure" @click="bindSure">确认</span>
        <img id="bindDialogClose" @click="bindDialogShow=false" src="../assets/icon_close.png">
      </div>
    </div>
    <loading :loadingShow="loadingShow"></loading>
  </div>
</template>
<script>
import request from '../utils/request'
import loading from '../components/loading/loading.vue'
export default {
  data() {
    return{
      loadingShow: false,//加载
      seexSn: '',
      equmentId: '',
      bindDialogShow: false,//绑定弹窗
      noCode: false, //sn码不存在
    }
  },
  components: {
    loading
  },
  mounted() {
    this.loadingShow = true
    request({
      url: '/api/MarketingToolApi/Users/personalCenter',
      method: 'post',
      data: {
        token: localStorage.getItem("token"),
      }
    }).then(response => {
      this.loadingShow = false
      this.seexSn = response.data.seexSn
    })
  },
  watch: {
    bindDialogShow() {
      if(this.bindDialogShow) {
        this.equmentId = this.seexSn
      }else{
        this.equmentId = ''
        this.noCode = false
      }
    }
  },
  methods: {
    bindDialog() {
      this.bindDialogShow = true
    },
    bindSure() {
      this.loadingShow = true
      request({
        url: '/api/MarketingToolApi/Devices/bind',
        method: 'post',
        data: {
          token: localStorage.getItem("token"),
          seexSn: this.equmentId
        }
      }).then(response => {
        if(response.errno==200) {
          request({
            url: '/api/MarketingToolApi/Users/personalCenter',
            method: 'post',
            data: {
              token: localStorage.getItem("token"),
            }
          }).then(response => {
            this.loadingShow = false
            this.bindDialogShow = false
            this.seexSn = response.data.seexSn
          })
        }else{
          this.loadingShow = false
          this.noCode = true
        }
      })
    }
  }
}
</script>
<style lang="scss">
#equipmentImg{
  display: block;
  width: 100%;
  height: 226px;
  padding: 10px;
  background-color: #fff;
}
#equipmentCon{
  background-color: #fff;
  padding: 10px;
  >div{
    background: #F0F0F0;
    border-radius: 24px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 20px;
    >div{
      font-size: 14px;
      color: #282B2F;
    }
    >span{
      font-size: 14px;
      color: #FFFFFF;
      border-radius: 14px;
      padding: 4px 22px;
    }
    span:nth-child(2){
      background: #F9BE3C;
    }
    span:nth-child(3){
      background: #44D7B6;
    }
  }
}
#equipmentTip{
  font-size: 12px;
  color: #70767A;
  padding: 10px 0 0 15px;
  img{
    width: 11px;
    height: 11px;
    margin-right: 6.5px;
  }
  p:nth-child(1){
    font-weight: 500;
    margin-bottom: 10px;
  }
}
#bindDialog{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background-color: rgba( 0, 0, 0,0.6);
  #bindDialogCon{
    background: #fff;
    width: 240px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -120px;
    margin-top: -128px;
    border-radius: 5px;
    text-align: center;
    padding: 20px 10px;
    p:nth-child(1){
      font-size: 18px;
      color: #3F4041;
      font-weight: 500;
      margin-bottom: 18px;
    }
    >div{
      display: flex;
      align-items: center;
      background: #F0F0F0;
      border-radius: 24px;
      height: 48px;
      font-size: 14px;
      color: #282B2F;
      padding-left: 20px;
      input{
        width: 68%;
        background: none;
        border: none;
      }
      input::-webkit-input-placeholder {
        font-size: 12px;
        color: #ADB0B2;
      }
      input::-moz-input-placeholder {
        font-size: 12px;
        color: #ADB0B2;
      }
      input::-ms-input-placeholder {
        font-size: 12px;
        color: #ADB0B2;
      }
    }
    #bindTip{
      font-size: 12px;
      color: #FA6400;
      margin-top: 6px;
    }
    #bindSure{
      display: inline-block;
      font-size: 14px;
      color: #FFFFFF;
      background: #F9BE3C;
      border-radius: 14px;
      width: 100px;
      height: 28px;
      line-height: 28px;
      margin-top: 10px;
    }
    #bindDialogClose{
      width: 37px;
      height: 37px;
      position: absolute;
      margin: 0;
      top: -37px;
      right: -37px;
    }
  }
}
</style>