<template>
  <sail-page type="loading-view" title="手机开门" isHead>
    <div slot="content" class="mobile__phone_open-door">
           <p class="open_button" @click="openDoor"></p>
          <!--  <van-actionsheet v-model="show" title="" >
              <p>1</p>
              <p @click='openNow'>立即开锁</p>
          </van-actionsheet> -->
          <van-popup v-model="show" style="background: #000;">
              <van-cell-group>
                <van-field v-model="passwords" type="password" placeholder="请输入房间门锁密码" />
              </van-cell-group>
              <van-button :loading="loading" size="large" class="submit-btn btn_bgcolor" @click="openNow">立即开锁</van-button>
          </van-popup>
    </div>
  </sail-page>
</template>

<script>
import { Dialog } from "vant";
import { mapState } from "vuex";
import { Toast } from "vant";
import sailPage from "@/components/sail-page.vue";
export default {
  components: {
    sailPage
  },
  data: function(){
    return {
      show:false,
      loading: false,
      passwords:""
    }; 
  },
  computed: {
    ...mapState({
      //passwords:state => state.deviceModule.passwords, //获取门锁密码
    })
  }, 
  methods: {

    openDoor(){
      this.show = true;
      this.passwords = "";
    },
    openNow(){
      if (!this.passwords) {
        Toast.fail({
          duration: 2000,
          message: "请输入正确的房间门锁密码",
        });
        return;
      }
      // this.commit('deviceModule/set_pass_info',this.passwords)
      let me = this;
      let store = this.$store;
      Dialog.confirm({
        title: "提示",
        message: "您是否确定远程开锁，点击确定后立即开锁。"
      }).then(() => {
        // on confirm
        me.loading = true;
        store.dispatch("deviceModule/remoteOpen",{
          password:me.passwords
        }).then(res=>{
          
          me.loading = false;
          if(res){
            Toast.success({
              duration: 2000,
              message: res.data.msg,
            });
          }else {
            Toast.fail({
              duration: 2000,
              message: res.data.msg,
            });
          }
        });
      }).catch(() => {
        // on cancel
      });
        
    }
  },
  mounted() {
        
  }
};
</script>
<style lang="less">
  #mobile__phone_open-door .van-popup {
    background: #000 !important;
  }
  #mobile__phone_open-door .van-button--default {
    border: 1px solid #db7826 !important;
  }
</style>
<style lang="less" scoped>
   .cube-page {
    background: #000000;
     .mobile__phone_open-door {
     	width: 100vw;
     	min-height: 100vh;
     	background: url(~@/assets/img/bannerImg/smartlock_bg@3x.jpg) no-repeat center;
     	background-size:100% 100%;
     	position: relative;
     	.open_button {
     		width: 132px;
     		height: 61px;
     		background: url(~@/assets/img/smartlock_btn_n@3x.png) no-repeat center;
     		background-size:100% 100%;
     		position: absolute;
     		// left: 122px;
     		// top: 319px; 
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin:auto; 
     	} 
     }
   }
   .btn_bgcolor {
     border: 1px solid #2baa76 !important;
     height: 45px !important;
   }
</style>