<style scoped>  
.comp-login {height:100%;height:100vh;padding:0;margin:0;}
.leftline{position: absolute;left:1.5rem;text-align: center;width: 1rem; margin-top: 2rem;
}

.leftline .vLine {
    border-left: solid 0.1rem #EFF1F6;    height: 19em;    vertical-align: middle;    display: inline-block;
}
.leftline .vLine2 {
    border-left: solid 0.1rem #EFF1F6;    height: 6rem;    vertical-align: middle;    display: inline-block;
}
.leftline .bulebgcolor{  background-color: #3474cf !important; }
.leftline .bulefontcolor{  color: #3474cf !important; }
.leftline .circle{  width: 1rem;  height: 1rem;  background: #3474cf;  border-radius: 50%;}
.leftline .circle2{  width: 1rem;  height: 1rem;  background: #E5E8F0;  border-radius: 50%;}
.leftline span.enterstore{position: absolute;width: 5rem;display: inline-block;top: 0; color:#3474cf;font-weight: bold;left:1rem; }
.leftline span.gettting{position: absolute;width: 5rem;display: inline-block;top: 17rem;font-weight: bold; color:#838787;left:1rem; }
.leftline span.leavestore{position: absolute;width: 5rem;display: inline-block;top: 24rem;font-weight: bold;color:#838787; left:1rem;}

.mint-button{width:94%;font-weight: bold; margin:0 auto;margin-top:0.4rem;background-color:#3A8AFB;border-radius: 0.2rem;}
.btnContent{height:3.4rem;background-color:#F3F6FF;position: absolute;bottom:0;width: 100%;}
.rightline1 .btnRecord{  border-radius: 0.6rem;border: 0.1rem solid #3474cf;
color: #3474cf;width: 4.5rem;display: inline-block;height: 1.5rem;line-height: 1.5rem;
margin-left: 35%;
}
.rightline1{position: absolute;left:0;text-align: center;width: 100%;margin-top: 2rem;margin-left:3rem;}
.rightline1 .storeinfo{  width: 77%;text-align: left;}
.rightline1 .storeinfo div.StoreName{ border-bottom: solid 0.1rem #EFF1F6;    padding-bottom: 1rem;
flex: 0.2;color:#000;background:url('http://image.supercarrier8.com/h5_key/icon-arrowDownNew.png');
background-position:right 1.5rem;
background-repeat:no-repeat;background-size: auto 0.4rem;padding-top:1rem;
}  
.rightline1 .storeinfo div.arrowUp{background-image: url('http://image.supercarrier8.com/h5_key/icon-arrowUp.png');}

.rightline1 .storeinfo ul{list-style-type: none;margin:0;padding:0;padding-bottom:2rem; }
.rightline1 .storeinfo ul li{line-height:1.5rem;color:#848484;}
.rightline1 .storeinfo ul li.date{padding-left: 1.3rem;padding-top: 0.3rem;background: url('http://image.supercarrier8.com/h5_key/storecheck/icon-date.png');background-repeat: no-repeat;background-position: 0rem 55%;background-size:0.8rem 0.8rem;}
.rightline1 .storeinfo ul li.address{padding-left: 1.3rem;padding-top: 0.3rem;background: url('http://image.supercarrier8.com/h5_key/storecheck/icon-address.png');background-repeat: no-repeat;background-position: 0rem 55%;background-size:0.8rem 0.8rem;
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}

.rightline2{position: absolute;text-align: center;width:80%;margin-top: 21rem;color:#A09F9F;left:3rem;}
.rightline3{position: absolute;text-align: left;width:80%;margin-top: 28rem;color:#A09F9F;left:3rem;}
.rightline3 .signtip{
background: url('http://image.supercarrier8.com/h5_key/storecheck/icon-date.png');
background-repeat: repeat;
background-size: auto;
background-repeat: no-repeat;
background-position: 0rem 55%;
background-size: 0.8rem 0.8rem;
padding-left: 1.3rem;
}
.rightline2 .tasktip{
background-image: url(http://image.supercarrier8.com/h5_key/icon-arrow-gray.png);
background-repeat: no-repeat;background-position-x: right;
background-position-y: center;background-size: 0.4rem 0.7rem;
text-align: left;
}
.StoreDetail {line-height: 1;}
.auditPopu{z-index:99999999;position: fixed;text-align: center;top:50%;margin-top:-10rem;min-height: 16.4rem;width: 84%;background: rgba(255, 255, 255, 1);margin-left:8%;border-radius: 0.2rem;}
.auditPopu img{display: block;margin: 0 auto;}
.auditPopu .successImg{width: 5rem;height: 5rem;margin-top: 2rem;}
.auditPopu h3{font-weight: normal;color:#3A8AFB;margin-top:1.5rem;}
.auditPopu p{width:86%;margin: 0 auto;color:#A09F9F;height: 1.5rem;line-height: 1.5rem; }
.auditPopu p .left{width: 40%;display: inline-block;text-align: left; }
.auditPopu p .right{width: 50%;display: inline-block;text-align: right;}
.auditPopu .closeImg{width: 2rem;height: 2rem;position: absolute;bottom: -3.2rem;margin-left:-1rem;left: 50%;}
.mask {position: fixed;top: 0;left: 0;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.5);}

</style>
<style>
.StoreDetail .avatar-uploader .el-upload{width:3rem;height: 3rem;border-radius:0.375rem;cursor: pointer;position: relative;overflow: hidden;}
.StoreDetail .avatar-uploader .el-upload .el-icon-plus{position: absolute;top: 50%;left: 50%;margin-top: -0.875rem;margin-left: -0.875rem;}
.StoreDetail .avatar-uploader .el-upload-list--picture-card .el-upload-list__item{width:3rem;height: 3rem;}
</style>
<template>     
  <div class="container comp-login jfBaseSize" v-cloak v-bind:style="vh?'height:100vh':'height: 100%;'"> 
        <div class="leftline">
          <div class='circle'></div>
          <span class="enterstore">进店签到</span>
          <div :class="ShowFlow>0?'bulebgcolor':''" class="vLine" ></div> 
           <div  :class="ShowFlow>0?'bulebgcolor':''" class='circle2'></div><span  :class="ShowFlow>1?'bulefontcolor':''" class="gettting">拜访事项</span>
          <div :class="ShowFlow>1?'bulebgcolor':''" class="vLine2"></div> 
          <div :class="ShowFlow>1?'bulebgcolor':''" class='circle2'></div><span  :class="ShowFlow>1?'bulefontcolor':''" class="leavestore">离店签退</span>
        </div>
        <div class="rightline1">
          <span class="btnRecord" @click="goPage('K_CheckR')">巡店记录</span>
          <div class="storeinfo">
              <div class="StoreName" @click="ShowHideDetail($event)">上海浦江1分店</div>
              <div class="StoreDetail" v-show="IsShowDetail">
                <ul>
                  <li class="date"> 2020-04-23 09：57 </li> 
                  <li class="address">上海市闵行区浦江镇浦江科技广场9号楼</li>
                </ul>
                <p><span>门头照片</span></p>
                <div class="UploadImg">
                  <el-upload
                    class="avatar-uploader"
                    :action="uploadurl"
                    list-type="picture-card"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :on-remove="handleAvatarRemove"
                    :limit="3">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </div>
                </div>
          </div>
        </div>
        <div class="rightline2">
            <div class="tasktip" v-show="ShowFlow>0" @click="goPage('K_CheckT')">必填项已完成3/8，非必填项已完成3/5</div>
        </div>
       <div class="rightline3">
            <div class="signtip" v-show="ShowFlow>2">2020-04-23 10:10:10</div>
        </div>
        <div class="btnContent" v-if="ShowFlow==0">
          <mt-button  type="danger" size="large" @click="ShowSign(true)">打卡签到</mt-button>
        </div>
        <div class="btnContent" v-else-if="ShowFlow==1">
          <mt-button  type="danger" size="large" style="background:#D6E7FF;">打卡签退</mt-button>
        </div>
        <div class="btnContent" v-else>
          <mt-button  type="danger" size="large" @click="ShowSign(false)">打卡签退</mt-button>
        </div>
     <div class="mask" v-show="IsshowMask"></div>
       <div class="auditPopu" v-show="IsshowSignIn" @click="CloseSign">
          <img class="successImg" src="http://image.supercarrier8.com/h5_key/storecheck/icon-signin.png" alt="success">
          <h3 v-if="IsSign">
              签到成功
          </h3>
          <h3 v-else>
              签退成功
          </h3>
          <p>
            <span class="left"><span v-if="IsSign">签到</span><span v-else>签退</span>时间: </span> <span class="right">2020-04-23 10:10</span>
          </p>
          <p>
             <span class="left"><span v-if="IsSign">签到</span><span v-else>签退</span>方式:</span> <span  class="right">GPRS定位</span>
          </p>
          <img class="closeImg" src="http://image.supercarrier8.com/h5_key/icon-close-white.png" alt="close" @click="CloseSign"> 
    </div>
<ReturnHome ref="returnhome"></ReturnHome>
  </div>
</template>
<script>
import Vue from "vue";
import ElementUI from "element-ui";
import { Toast } from 'mint-ui';
import channelHelper from "@/assets/js/channelHelper.js";
import { base64 } from "@/assets/js/cryptoHelper";
import { debug } from 'util';
import ReturnHome from "@/components/channel/temp001/ReturnHome";
import '@/assets/js/libs/js.cookie';
import "element-ui/lib/theme-chalk/index.css";
import { Indicator } from 'mint-ui';
Vue.use(ElementUI);
export default {
  name: "Key_CashEnter",
  components: {ReturnHome},
    provide(){       
     return{           
        goPage:this.goPage       
     }   
    },
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      uploadurl:channelHelper.GetUploadFile()+"/cross/alioss",
      vh:false,
      IsShowDetail:true,
      IsshowMask:false,
      IsshowSignIn:false,
      IsSign:true,
      ShowFlow:0,
      imageUrlList:[]
    };
  },
  methods: {
    goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    CloseSign(){
        this.IsshowMask=false;
        this.IsshowSignIn=false;
    },
    ShowSign(flag){
        this.IsshowMask=true;
        this.IsshowSignIn=true;
        this.IsSign=flag;
        if(flag)
        {
           localStorage.setItem("ShowFlow",1);
           this.ShowFlow=1;
        }
        else
        {
           localStorage.setItem("ShowFlow",3);
           this.ShowFlow=3;
        }
    },
    ShowHideDetail(e){
      var that=this;
      if(!that.IsShowDetail)
      {
          that.IsShowDetail=true;
          $(e.target).removeClass('arrowUp');
      }
      else{
          that.IsShowDetail=false;
          $(e.target).addClass('arrowUp');
      }
    },
    handleAvatarSuccess(res, file) {
      var that=this;
      if (res.flag) {
        var imageUrlList=this.imageUrlList;
        imageUrlList.push(res.data.url);
        that.$set(that,'imageUrlList',imageUrlList);
      }
    },
    beforeAvatarUpload(file) {
      var isJPG = (file.type==='image/jpeg'||file.type==='image/jpg'||file.type==='image/png'?true:false);
      var isLt2M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error('上传门店图片只能是 JPG 和 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传门店图片大小不能超过 10MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarRemove(file, fileList){
      var that=this;
      if (fileList.length>0) {
        var imageUrlList=[];
        fileList.forEach((e,i) => {
          if (e.response.flag) {
            imageUrlList.push(e.response.data.url);
          }
        });
        that.$set(that,'imageUrlList',imageUrlList);
      }else{
        that.$set(that,'imageUrlList',[]);
      }
    }
  },
  watch: {
  },
  created: function() {
     this.ShowFlow=localStorage.getItem("ShowFlow");
  },
  mounted: function() {
     var that=this;
      var isDesign = location.pathname.indexOf('design');
      if (!(isDesign>-1)) {
          that.$set(that,'vh',true);
      }else{
          that.$set(that,'vh',false);
      }
      setTimeout(()=>{
        let offsetHeight = document.body.offsetHeight;
        let scrollHeight = document.body.scrollHeight;
        this.height = scrollHeight>offsetHeight?scrollHeight+"px":offsetHeight+"px";
      },1000);
  }
};
</script>

