<template>
  <div id="root">
    <span class="activityTile">{{ ruleForm.activityTitle }}</span>
    <img :src="ruleForm.activityCarouselImg" width="700" height="500">
    <div class="activityContext">
      {{ ruleForm.activityContent }}
    </div>
    <div class="activityContextImg">
      <img v-for="item in ruleForm.contentImg" :src="item" width="80" height="80" >
    </div>
    <div style="display: flex;">
          <span style="width: 200px;transform:translateY(25%);">是否需要报名人扫码签到</span>
          <el-radio v-model="ruleForm.radio" label="1" style="padding-left:4%;font-weight:bold;font-size:12px;transform:translateY(30%);">需要</el-radio>
          <el-radio v-model="ruleForm.radio" label="2" style="padding-left:8%;font-weight:bold;font-size:12px;transform:translateY(30%);">不需要</el-radio> 
          <el-button type="primary" style="float:left;" @click="singn">查看签到名单</el-button> 
    </div>
      <div style="padding-left:30%;">
        <div><img :src="ruleForm.activityCode" width="200" height="200" ></div>
        
        <a :href="ruleForm.activityCode" download="图片">
　　    <img :src="ruleForm.activityCode" alt="图片">
        </a>

        <!-- <a download="图片" :href="ruleForm.activityCode + 'admin/miniProgram.jpg'">点击下载</a>
        <div><el-button type="primary" style="float:left;" @click=" downloadCodeImg()">查看签到名单</el-button> </div> -->
      </div>
    <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>
      <a type="primary" style="float: left;" @click="lockSignUp">查看报名名单</a>
    </div>
    <span>报名截止时间：{{ formatDate(ruleForm.registrationEndTime) }}</span>
    <div class="bom-button">
      <el-button v-if="isEdi" type="primary" style="width: 100px;" @click="ediActivity">修改</el-button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Index',
  data() {
    return {
      asOfdate: '2018/10/10 23:59:59',
      ruleForm: {
        activityCode: '',
        id: '',
        activityTitle: '',
        activityCarouselImg: '', // 轮播图
        activityContent: '', // 活动内容详细
        contentImg: [], // 活动内容配图
        signUpCount: '', // 报名人数统计
        signUpMax: '', //  活动人数上限
        registrationEndTime: '', // 报名活动结束时间
        sort: 1, // 权重
        status: '' // 状态 0 是已作废 1 是已发布   2 是草稿 3 是已修改
      },
      isEdi: true, // 显示修改按钮
      innerW: 0 // 进度条
    }
  },
  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
        if (this.ruleForm.signUpMax !== 0) {
          const tempNum = 450 / this.ruleForm.signUpMax
          this.innerW = this.ruleForm.signUpCount * tempNum
          console.log(this.$refs.innerDiv.style.width)
          console.log(this.innerW)
        }
        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();
  }
  
}
  }
</script>

<style scoped>
#root {
  display: flex;
  flex-flow: column;
  width: 700px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}
.activityTile{
  text-align: center;
  font-size: 30px;
  margin-bottom: 10px;
}
.activityContext{
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 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>
