<style lang="less" >
    @import url('../../../styles/common.less');
    #healthCardStatisticsIndex{
        background: white;
        height:100%;
        display: flex;
        flex-direction: column;
        .items{
          flex-grow:1;
          height:1px;
          overflow: auto;
          -webkit-overflow-scrolling: touch;
          .item{
            margin:15px 15px 0 15px;
            .HEAD{
              border-top-left-radius: 6px;
              border-top-right-radius: 6px;
              background: #6b9bf7;
              height:60px;
              display: flex;
              align-items: center;
              padding:0 10px;
              .left{
                flex:1;
                color:white;
                font-size:18px;
                font-weight: bold;
              }
              .right{
                flex:1;
                text-align: right;
                display:flex;
                flex-wrap: wrap;
                div{
                  width:100%;
                  color:white;
                }
                .month{
                  font-size:14px;
                }
                .day{
                  font-size:18px;
                  font-weight: bold;
                }
              }
            }
            .CONTENT{
              border-bottom-left-radius: 6px;
              border-bottom-right-radius: 6px;
              border:2px solid #6b9bf7;
              border-top:0;
              padding:10px;
              display: flex;
              justify-content: center;
              align-items: center;
              .left,.right,.center{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                flex:1;
                .n{
                  width:100%;
                  color:#527cd9;
                  font-weight: bold;
                  font-size:20px;
                  text-align: center;
                }
                .t{
                  width:100%;
                  font-size:14px;
                  text-align: center;
                }
              }
            }
          }
          .item:last-child{
            margin-bottom:15px;
          }
        }
        
        .img{
            width:100%;
            display: flex;
            justify-content: center;
            img{
                width:100%;
                height:300px;
            }
        }
        .btn{
          height:40px;
          margin:0 15px 10px 15px;
          >button{
            height:40px;
            color:white;
            width:100%;
            line-height: 40px;
            background: #2d8cf0;
            border-radius: 5px;
            font-size:14px;
          }
        }
    }
</style>

<template>
  <div id="healthCardStatisticsIndex">
    <div class="items" v-if="list.length > 0">
      <div class="item" v-for="(item,index) in list" :key="index" @click="routerToChart(item)" >
        <div class="HEAD" >
          <div class="left">
            <span>{{item.iAllJoin}}/{{item.iAll}}</span>
          </div>
          <div class="right">
            <div class="day">{{item.iDay}}</div>
            <div class="month">{{item.sMonth}}</div>
          </div>
        </div>   
        <div class="CONTENT">
          <div class="left">
            <div class="n">{{item.iAll}}</div>
            <div class="t">应参与人员</div>
          </div>
          <div class="center">
            <div class="n">{{item.iAllJoin}}</div>
            <div class="t">已参与人员</div>
          </div>
          <div class="right">
            <div class="n">{{item.iAllNotJoin}}</div>
            <div class="t">未参与人员</div>
          </div>
        </div>      
      </div>
    </div>
    
    <div class="img" v-if="list.length <= 0">
      <img src="@/assets/noData.jpg" class="_img" alt="">
    </div>

    <div class="btn" v-if="list.length > 0">
      <!-- <span v-show="false" id="copyUrl">{{copyUrl}}</span> -->
      <button @click="exportExcel" class="copy" :data-clipboard-text="copyUrl">导出excel</button>
    </div>
    
  </div>
</template>

<script>
import Util from '@/libs/util.js';
import {mapState} from 'vuex';
import axios from 'axios';
import ClipboardJS from 'clipboard'
import { setTimeout } from 'timers';
export default {
  name: 'healthCardStatisticsIndex',
  data () {
    return {
      list:[],
      openId:'',
      copyUrl:''
    }
  },
  components:{
    
  },
  computed:{
    ...mapState({

    })
  },
  async mounted(){
    this.openId=this.$route.query.openId;
    this.$store.dispatch('saveHealthStatisticsOpen',this.openId);
  },
  async activated(){
    window.d = this;
    await this.getData();
    
  //   axios({
  //     method: 'get',
  //     url:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/1227787695263191040/sendmessage/excel/?iCompanyID=1382&t=0.34324224',
  //     responseType: 'blob'
  // })
  //   .then(data => {
  //     let url = window.URL.createObjectURL(data.data)
  //       let link = document.createElement('a')
  //       link.style.display = 'none'
  //       link.href = url
  //       console.log(url)
  //       link.setAttribute('download', 'product.xls')
  //       document.body.appendChild(link)
  //       link.click()
  //   })
  },
  methods:{
    async getData(){
      let res = await this.request('getStatisticalDetails',{
          data:[
              {key:'url',value:'statistical_details'},
              {key:'openid',value:this.openId}
          ],
          params:{},
      },'加载中',{});
      if(res && res.length > 0) {
        this.list = res;
        this.copyUrl = `https://weixin.huansi.net/apiproxy/huansi/service/proxy/1225621052093239296/sendmessage/excel/?iCompanyID=${this.list[0].iCompanyId}&t=${Math.random()}`
        new ClipboardJS('.copy');
      }
    },
    routerToChart(item){
      this.$store.dispatch('saveHealthStatisticsHdr',item);
      this.$router.push({name:'healthCardStatisticsChart'});
    },
    async exportExcel(){
      this.$vux.loading.show();
      setTimeout(async ()=>{
        new ClipboardJS('.copy');
        this.$vux.loading.hide();
        this.$vux.confirm.show({
          title:"提示",
          content:'已复制导出链接，请手动打开浏览器粘贴并下载！',
          showCancelButton:false,
        })
      },1000)
    }
  }
}
</script>