<template>
  <van-popup v-model="modalData[type].visible" position="right">
      <div class="status-page">
      	 <van-nav-bar
      	   :title="title"
      	   left-arrow
      	   @click-left="back"
      	   v-show="isHead"
      	 />
      	 <div class="status-wrapper">
    	     	 <svg class="icon status-head__icon" aria-hidden="true">
  	     	     <use xlink:href="#icon-chenggong"/>
  	     	   </svg>
      	     <p class="status-title__desc">{{desc}}</p>
      	     <div class="status-content">
      	     	<div class="status-content__up">
      	     		<slot name="up-content">
      	     			
      	     		</slot>
      	     	</div>
      	     	<div class="status-content__down">
      	     		<slot name="down-content">
      	     			
      	     		</slot>
      	     	</div>
      	     </div>
           	<van-button size="large" class="submit-btn" @click="jump" v-show="isButton">{{btxt}}</van-button>
      	 </div>
      </div>
  </van-popup>
</template>

<script>

//import sailPage from '@/components/sail-page.vue'
import { mapState } from "vuex";

export default {
  props: {
    title: {
      type: String,
      default: "",
      required: true
    },
    isHead: {
      type: Boolean,
      default: false,
      required: false
    },
    isButton: {
      type: Boolean,
      default: false,
      required: false
    },
    visible: {
      type: Boolean,
      default: false,
      required: false
    },
    desc: {
      type: String,
      default: ""
    },
    btxt: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: ""
    }
  },
  components: {
    //sailPage
  },
  computed: {
    ...mapState({
      modalData: state => state.modalData
    })
  },
  data: function(){
    return {
      //visible: false
    }; 
  },
  methods: {
    back() {
      this.$store.commit("UPDATE_STATUS_VISIBLE", this.type);
      //this.$emit('close')
    },
    jump() {
      this.$emit("jumpCallback");
    }
  }
};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
    @import "~@/common/less/variable.less";
    .status-wrapper {
    	margin-top: 34px;
    	text-align: center;
	    color: @nice-green;
    }
    .status-title__desc {
    	margin-top: 10px;
    	font-size: 20px;
    }
    .status-content {
    	margin-top: 35.5px;
    	color: #666666;
    	margin-left: 32px;
      padding-right: 42px;
      line-height: 25px;
    	text-align: left;
    	font-size: 14px;
    	.status-content__down {
    		margin-top: 40px;
    	}
    }
    .status-head__icon {
    	font-size: 70px;
    }
    .status-page {
    	width: 100vw;
    	min-height: 100vh;
    	background: #fff;
    }
    
</style>1