<template>
  <div id="root">
    <div>活动标题&nbsp;&nbsp;<span class="activityTile">{{ ruleForm.activityTitle }}</span></div>
    <div >
        <div class="activityTile" style="transform:translateY(250%);">活动轮播图</div>
        <div  style="width: 500px;padding-left:20%;">
    <img :src="ruleForm.activityCarouselImg" width="100" height="100">
    </div>
    </div>
    <div class="activityContext">
      <div class="activityTile"><span style="position:relative;top:-1px">活动详细描述&nbsp;&nbsp;</span>{{ ruleForm.activityContent }}</div>
    </div>
    <div>
        <div>
        <div style="transform:translateY(20%);">活动配图</div>
        <div  style="width: 500px;padding-left:20%;">
      <img v-for="item in ruleForm.contentImg" :src="item" width="80" height="80" />
        </div>
        </div>
    </div>
    <span>
    <div style="display: flex;">
          <span class="activityTile" style="width: 200px;transform:translateY(50%);">是否需要报名人扫码签到</span>
          <el-radio v-model="ruleForm.signInCode" label="1" style="padding-left:4%;font-weight:bold;font-size:12px;transform:translateY(50%);">需要</el-radio>
          <el-radio v-model="ruleForm.signInCode" label="2" style="padding-left:8%;font-weight:bold;font-size:12px;transform:translateY(50%);">不需要</el-radio> 
          <span style="padding-left:20%"><el-button type="primary" style="float:left;" @click="singn">查看签到名单</el-button></span> 
    </div>
    <div style="padding-left:30%;" v-if="ruleForm.activityCode !=null">
        <div><img :src="qrcode" width="200" height="200" ></div>
        <a :href="qrcode" download="qrcode.jpg"  style="color:#00BFFF;padding-left:15%">点击下载</a>
    </div>
    </span>
    <div class="progress">
      <div class="text-progress">
        <span class="people-number">已报名人数 {{ ruleForm.signUpCount }}</span>
        <div class="outer-layer"/>
        <div ref="innerDiv" :style="{ backgroundColor: 'aquamarine', height: '6px', width: innerW + 'px', position: 'relative', marginTop: '-4px' }"/> <!-- class="inner-layer" -->
      </div>
      <div class="circular"/>
      <div class="people-limit">限制{{ ruleForm.signUpMax }}人</div>
      <el-button type="primary" style="float: left;" @click="lockSignUp">查看报名名单</el-button>
    </div>
    <span class="activityTile">报名截止时间：{{ formatDate(ruleForm.registrationEndTime) }}</span>
    <span class="activityTile" style="transform:translateY(150%);">权重值&emsp;&emsp;&emsp;&emsp;{{ ruleForm.sort }}</span>
    <div class="bom-button">
      <el-button v-if="isEdi" type="primary" style="width: 100px;" @click="ediActivity">修改</el-button>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import QRCode from 'qrcode'

export default {
  name: 'Index',
  data() {
    return {
      asOfdate: '2018/10/10 23:59:59',
      ruleForm: {
        signInCode: '',
        activityCode: '',
        id: '',
        activityTitle: '',
        activityCarouselImg: '', // 轮播图
        activityContent: '', // 活动内容详细
        contentImg: [], // 活动内容配图
        signUpCount: '', // 报名人数统计
        signUpMax: '', //  活动人数上限
        registrationEndTime: '', // 报名活动结束时间
        sort: 1, // 权重
        status: '' // 状态 0 是已作废 1 是已发布   2 是草稿 3 是已修改
      },
      codeIMG: '',
      ownerDocument: '',
      isEdi: true, // 显示修改按钮
      innerW: 0, // 进度条
      qrcode: '',
    }
  },
  mounted() {
    this.ruleForm.id = this.$route.query.id
    this.getById()
  },
  methods: {
    getById() { // 根据ID获取活动信息
      this.$store.dispatch('ActivityById', this.ruleForm.id).then((res) => {
        const resData = res.data
        this.ruleForm = resData.info
        this.codeIMG =resData.info.activityCode
        this.ruleForm.contentImg = resData.contentImg

        QRCode.toDataURL(this.codeIMG, (err, url)=> {
          this.qrcode = url
        })
        if (this.ruleForm.status === '0') {
          this.isEdi = false
        }
      })
    },
    formatDate(val) {
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      // var hour = value.getHours()
      // var minutes = value.getMinutes()
      // var seconds = value.getSeconds()
      // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
      return year + '-' + month + '-' + day
    },
    ediActivity() { // 修改活动
      this.$router.push({ name: 'activity-edi', query: { id: this.ruleForm.id }})
    },
    lockSignUp() { // 查看活动报名
      this.$router.push({ name: 'signUp-info', query: { id: this.ruleForm.id }})
    },
    //跳转签到页面
    singn(){
      this.$router.push({ name: 'activity-signIn-index', query: { id: this.ruleForm.id }})
    },
    // 下载图片
//      downloadCodeImg(){
//       var a = document.createElement('a')
//       a.download = this.ruleForm.activityCode
//        // 设置图片地址
//       a.href = this.ruleForm.activityCode
//       a.click();
//     }
   downloadCodeImg(){
  var alink = document.createElement("a");
  alink.href = this.ruleForm.activityCode;
  alink.download = "pic"; //图片名
  alink.click();
  },

   dataURLToBlob(dataurl) {//ie 图片转格式
          var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          return new Blob([u8arr], {type: mime})
        },
        
        downloadResult() {
          html2canvas(document.getElementById('mymap')).then(canvas => {
				this.imgmap = canvas.toDataURL()
				console.log(999, this.imgmap)
				if (window.navigator.msSaveOrOpenBlob) {
					var bstr = atob(this.imgmap.split(',')[1])
					var n = bstr.length
					var u8arr = new Uint8Array(n)
					while (n--) {
						u8arr[n] = bstr.charCodeAt(n)
					}
					var blob = new Blob([u8arr])
					window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
				} else {
					// 这里就按照chrome等新版浏览器来处理
					const a = document.createElement('a')
					a.href = this.imgmap
					a.setAttribute('download', 'chart-download')
					a.click()
				}
 
			});
        }
}
  }
</script>

<style scoped>
#root {
  display: flex;
  flex-flow: column;
  width: 700px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  font-size: 13px;

}
.activityContext{
  margin-bottom: 20px;
  justify-items: center;
}
.progress {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
}
.text-progress {
  width: 500px;
  float: left;
  align-content: center;
  position: absolute;
  margin-top: 12px;
}
.people-number {
  position: relative;
  margin-left: 180px;
}
.outer-layer {
  background-color: gainsboro;
  height: 3px;
  width: 450px;
  position: relative;
}
.inner-layer {
  background-color: aquamarine;
  height: 6px;
  width: 20px;
  position: relative;
  margin-top: -4px;
}
.circular {
  border: 1px #001528 solid;
  border-radius: 10px;
  /*background-color: chartreuse;*/
  width: 20px;
  height: 20px;
  position: relative;
  margin-left: 452px;
  margin-top: 21px;
  float: left;
}
.people-limit {
  margin-top: 23px;
}
.bom-button{
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 100px;
}
</style>
