<template>
   
   <headTop :num1=num1  :num2=num2 /> 
   <div style="background: #DEF6FF; ">
    <div style="background: #06247A;">
   <div :style="dynamicStyle">
    <div style="display: flex;"  >
    <div :style="style1" @click="changeinfo('开始投票')">开始投票</div>
    <div :style="style2" @click="changeinfo('线上排名')">线上排名</div>  
  </div>
</div>
      </div>  
      <div style="display: flex;flex-direction: column;align-items: center;margin-top: 12px;" v-if="1>2" >
      <div :style="dynamicStyle1" >
    <div style="display: flex;"  >
    <div :style="style3" @click="changeinfo('图文类投稿')">图文类投稿</div>
    <div :style="style4" @click="changeinfo('视频类投稿')">视频类投稿</div>  
  </div>
</div>
</div> 
<div style="display: flex;margin-top: 12px;align-items: center;justify-content: center;margin-left: 16px;margin-right: 16px;"
v-show="voting">
    <div class="text1">*每个视频每天限投1票</div> 
    <div class="divsearch">
        <van-image width="20" height="20" :src=search style="margin-left: 12px;" />
    <input placeholder="搜索作者、医院、名称或编号" type="text" v-model="inputValue" @input="debouncedInputHandler()">
    </div>
</div>
<div v-if="(istuwen&&list.length>0)||(!istuwen&&listvideo.length>0)||needrequestdata">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text=""
    @load="onLoad"
  >
    <div v-for="(item,$index) of list" :key="item.article_id"   v-if="istuwen">
      <div v-if="voting" class="litme">
        <div class="numberss"  v-if="$index==0" :style=Style11>{{ item.article_number }}</div>
        <div class="numberss"  v-else-if="$index==1" :style=Style12>{{ item.article_number }}</div>
        <div class="numberss"  v-else-if="$index==2" :style=Style13>{{ item.article_number }}</div>
        <div class="numberss"  v-else :style=Style14>{{ item.article_number }}</div>
        <div style="display: flex;margin-top: 6px;padding-bottom: 16px;align-items: center;">
        <div class="letfdiv" @click="gotoDetails(item.article_id,item.article_title,item.article_author)">
          <div class="title">{{ item.article_title }}</div>
          <div>
          <div class='name'>
            <div v-for="auther in item.article_author">
              <div>{{ auther.author_name}}&nbsp;{{ auther.hospital_name }}</div>
              
            </div>
          </div>
          </div>
         </div>
     
         <div class="rightdiv" >
          <div class="title">{{item.vote_num}}票</div>
          <div>
          <div class='toubg' :style="{background:'linear-gradient( 180deg, #D8D8D8 0%, #959595 100%)'}"  v-if="item.is_vote">
            投票
          </div>
          <div class='toubg' :style="{background:'linear-gradient( 180deg, #51EAFF 0%, #00B9FF 100%)'}" @click="vote(item.article_id,$index)" v-else>
          投票
          </div>
          </div>
         </div>
      </div>
      </div>
      <div v-else  class="litmev">
    
        <div style="display: flex;align-items: center;width: 100%;">
        <div class="numbers" v-if="item.rank==1" :style=Style1 ></div>
        <div class="numbers" v-else-if="item.rank==2" :style=Style2  ></div>
        <div class="numbers" v-else-if="item.rank==3" :style=Style3></div>
        <div class="numbers1" v-else >{{ item.rank}}</div>
        <div style="display: flex;align-items: center;flex: 1;">
        <div class="letfdiv" @click="gotoDetails(item.article_id,item.article_title,item.article_author)">
          <div class="title">{{ item.article_title }}</div>
          <div>
          <div class='name'>
            <div v-for="auther in item.article_author" style="display: flex;align-items: center;">
              <van-image 
                v-if="auther.author_avatar" 
                :src="auther.author_avatar" 
                width="28" 
                height="28" 
                round
                style="margin-right: 8px;"
              />
              <div>{{ auther.author_name}}&nbsp;{{ auther.hospital_name }}</div>
              
            </div>
          </div>
          </div>
         </div>
         <div class="rightdiv">
          <div class="toubg1">{{item.vote_num}}</div>
          </div>
      
         </div>
    
      </div>
    </div>
      
      
    </div>
    <div v-for="(item,$index) of listvideo" :key="item.video_id"  v-else>
      <div v-if="voting" class="litme">
    
      <div class="numberss"  v-if="$index==0" :style=Style11>{{ item.video_number }}</div>
        <div class="numberss"  v-else-if="$index==1" :style=Style12>{{ item.video_number }}</div>
        <div class="numberss"  v-else-if="$index==2" :style=Style13>{{ item.video_number }}</div>
        <div class="numberss"  v-else :style=Style14>{{ item.video_number }}</div>
      <div style="display: flex;margin-top: 6px;padding-bottom: 16px;align-items: center;">
        <div class="letfdiv" @click="gotoDetails(item.video_id ,item.video_title,item.video_author)">
          <div class="title">{{ item.video_title }}</div>
          <div>
          <div class='name'>
            <div v-for="auther in item.video_author">
              <div>{{ auther.author_name}}&nbsp;{{ auther.hospital_name }}</div>
              
            </div>
          </div>
          </div>
         </div>
      
         <div class="rightdiv">
          <div class="title">{{item.vote_num}}票</div>
          <div>
          <div class='toubg' :style="{background:'linear-gradient( 180deg, #D8D8D8 0%, #959595 100%)'}"  v-if="item.is_vote">
            投票
          </div>
          <div class='toubg' :style="{background:'linear-gradient( 180deg, #51EAFF 0%, #00B9FF 100%)'}" @click="vote(item.video_id,$index)" v-else>
          投票
          </div>
          </div>
         </div>
      </div>
      </div>
      <div v-else  class="litmev">
    
    <div style="display: flex;align-items: center;width: 100%;">
      <div class="numbers" v-if="item.rank==1" :style=Style1 ></div>
        <div class="numbers" v-else-if="item.rank==2" :style=Style2  ></div>
        <div class="numbers" v-else-if="item.rank==3" :style=Style3></div>
        <div class="numbers1" v-else >{{ item.rank}}</div>
    <div style="display: flex;align-items: center;flex: 1;">
  
        <div class="letfdiv" @click="gotoDetails(item.video_id,item.video_title ,item.video_author)">
          <div class="title">{{ item.video_title }}</div>
          <div>
          <div class='name'>
            <div v-for="auther in item.video_author" style="display: flex;align-items: center;">
              <van-image 
                v-if="auther.author_avatar" 
                :src="auther.author_avatar" 
                width="28" 
                height="28" 
                round
                style="margin-right: 8px;"
              />
              <div>{{ auther.author_name}}&nbsp;{{ auther.hospital_name }}</div>
              
            </div>
          </div>
          </div>
         </div>
         <div class="rightdiv" >
          <div class="toubg1">{{item.vote_num}}</div>
          </div>
      
     
    </div>
    </div>
    </div>
    </div>
  </van-list>
</van-pull-refresh>
</div>
<div  style="margin-top: 16px;height: 700px;"   v-else>
  <van-empty description="暂无数据"   />
</div>

<votView :show =show :shows =shows @onchange="handlechange"  @onchanges="handlechange" :ticket=tickets ></votView>
  </div> 
</template>
<script setup >
import first from '../assets/first.png'
import second from '../assets/second.png'
import third from '../assets/third.png'
import jiesao from '../assets/paiming1.png'
import toupiao from '../assets/toupiao1.png'
import tuwen from '../assets/tuwen.png'
import shipin from '../assets/shipin.png'
import search from '../assets/search.png'
import { goAuth } from '../utils/authorize.js'
import {votedata,browse,articlepage,videopage,rankarticle,rankvideo,votearticle,votevideo} from '../utils/api.js'
import { useRouter,useRoute } from 'vue-router';
import { debounce } from 'lodash';
import { WXSHARE } from '../utils/wxshare-1.6.0';
import {saveurl} from'../utils/authorize.js'
const inputValue=ref('');
const show = ref(false);
const shows = ref(false);
const voting = ref(true);
// const istuwen = ref(true);
const istuwen = ref(false);//初始化视频
const num1 = ref(0);
const num2 = ref(0);
const router = useRouter();
const route = useRoute();
const needrequestdata = ref(true);
const Style11 = ref({
 'background': 'linear-gradient( 180deg, #FE1B28 0%, #FD5C65 100%)'
});
const Style12 = ref({
 'background': 'linear-gradient( 180deg, #FF6623 0%, #FE824D 100%)'
});
const Style13 = ref({
 'background': 'linear-gradient( 180deg, #FEB903 0%, #FEC93D 100%)'
});
const Style14 = ref({
 'background': '#F0AA99'
});
const Style1 = ref({
  'backgroundImage': 'url(' + first + ')',
});

const Style2 = ref({
  'backgroundImage': 'url(' + second + ')',
});
const Style3 = ref({
  'backgroundImage': 'url(' + third + ')',
});
const dynamicStyle = ref({
  'backgroundImage':'url('+toupiao+')',
  'height': '48px',
  'background-size': 'cover', 
  'background-repeat': 'no-repeat',
    });
    const style1=ref({
    'font-family': 'AlimamaShuHeiTi',
    'font-weight':'bold',
    'font-size': '20px',
    'color': '#0E3564',
    'line-height': '24px',
    'flex': '1',
    'text-align': 'center',
    'margin-top': '11px'
    })
    const style2=ref({
    'font-family': 'AlimamaShuHeiTi',
    'font-weight':'bold',
    'font-size': '20px',
    'color': '#FFFFFF',
    'line-height': '24px',
    'flex': '1',
    'text-align': 'center',
     'margin-top': '16px'
    })
    const dynamicStyle1 = ref({
    'backgroundImage':'url('+tuwen+')',
  'background-size': '100% 100%',
  'height': '40px', 
  'width':'344px',
  'background-size': 'contain', 
  'background-repeat': 'no-repeat',
    });
    const style3=ref({
    'font-family': 'AlimamaShuHeiTi',
    'font-weight':'bold',
    'font-size': '16px',
    'color': '#FFFFFF',
    'line-height': '40px',
    'flex': '1',
    'text-align': 'center',
    })
    const style4=ref({
    'font-family': 'AlimamaShuHeiTi',
    'font-weight':'bold',
    'font-size': '16px',
    'color': '#07ADEB',
    'line-height': '40px',
    'flex': '1',
    'text-align': 'center',
    })
    
    function changeinfo(name){
        
      if(name=='开始投票'){
        dynamicStyle.value.backgroundImage = 'url('+toupiao+')'
        style1.value.color='#0E3564'
        style2.value.color='#FFFFFF'
        style1.value.marginTop='11px'
        style2.value.marginTop='16px'
        voting.value=true
       
      }else if(name=='线上排名'){
        dynamicStyle.value.backgroundImage = 'url('+jiesao+')'
        style1.value.color='#FFFFFF'
        style2.value.color='#0E3564'
        style1.value.marginTop='16px'
        style2.value.marginTop='11px'
        voting.value=false
      }
      else if(name=='图文类投稿'){
        dynamicStyle1.value.backgroundImage = 'url('+tuwen+')'
         style3.value.color='#FFFFFF'
        style4.value.color='#07ADEB'
        istuwen.value=true
       
      }else if(name=='视频类投稿'){
        dynamicStyle1.value.backgroundImage = 'url('+shipin+')'
       
        style3.value.color='#07ADEB'
        style4.value.color='#FFFFFF'
        istuwen.value=false
      }
    
      
      refreshing.value=true;
      onRefresh();
    }

      
    const debouncedInputHandler = debounce(() => {
  // 在这里执行异步操作
  console.log('Input value changed:', inputValue.value);
  refreshing.value=true;
  onRefresh();
}, 1500);
    const list = ref([]);
    const listvideo = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);
    const tickets = ref('');
    const page = ref(1);
    const onLoad = () => {
      
      setTimeout(() => {
      
        if (refreshing.value) {
          list.value = [];
          listvideo.value = [];
          refreshing.value = false;
  
        
        }
        if(voting.value)
        {
          if(istuwen.value)
        {
         
          gotoarticlepage()
        }
       else
       {
        gotovideopage()
       }
      }
       else{

        if(istuwen.value)
        {
          gotorankarticle()
        }
       else
       {
        gotorankvideo()
       }

        }
       
      }, 100);
    };

    const onRefresh = () => {
      needrequestdata.value=true;
      // 清空列表数据
      finished.value = false;
      page.value=1;
      // refreshing.value=true;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
     
      onLoad();
    };

    const video_author_t=ref("")
  
    function vote(id,index)
    {
      const token=localStorage.getItem('bearer-tokens');
     
     if(typeof token === "undefined"||token ==null|| token == ""|| token == "undefined")
         { 
           
           const ticket=  localStorage.getItem('qr-tickets');
           if(typeof ticket === "undefined"||ticket ==null|| ticket == ""|| ticket == "undefined")
           {
             goAuth()
           }
           else
           {
             tickets.value=ticket;
             show.value=true;
             localStorage.setItem('qr-tickets', "");
           }
         
           return;
         }
  
     

      if(istuwen.value)
    {
    
      votearticle(id).then((data) => {
      console.log("votearticle",data)
      if('200'==data.code)
      {
        shows.value=true;
        list.value[index].vote_num=list.value[index].vote_num+1;
        list.value[index].is_vote=true;
        
        // refreshing.value=true;
        // onRefresh();
      }
      else
      {
        showToast(data.message);
      }
     
    });  
    }
    else
    {
      votevideo(id).then((data) => {
      console.log("votevideo",data)
      if('200'==data.code)
      {
        shows.value=true;
        listvideo.value[index].vote_num=listvideo.value[index].vote_num+1;
        listvideo.value[index].is_vote=true;

        // refreshing.value=true;
        // onRefresh();
      }
      else
      {
        // showToast(data.massage);
        showToast(data.message+"");
      }
     
    });  
    }
      
    }
    function gotoDetails(id,name,video_authors)
    {
      if(istuwen.value)
      {
        router.push({ path: '/articleDetails' ,query:{id:id,name:name}})
      }
      else
      {
    //     video_author_t.value=""
    //     if(video_authors!=null&&video_authors!='')
    //   {
    //     video_authors.forEach((auther)=>{
    //       video_author_t.value=video_author_t.value+ auther.author_name+"、"
    // })
    // video_author_t.value=video_author_t.value.slice(0, -1);
    //   }
        router.push({ path: '/videoDetails' ,query:{id:id,name:name}})
      }
     
    }
    function handlechange(){
  show.value = false;
  shows.value = false;
}
function initData()
  {
    
    votedata().then((data) => {
      console.log("votedata",data)
      num1.value = data.data.view_num
      num2.value = data.data.vote_num
     
    });  

  
  
  }
  function updatBrowse()
  {
    browse().then((data) => {
      console.log("browse",data)


    });
  }
  function gotoarticlepage()
  {
    
    articlepage(page.value,10,inputValue.value).then((data) => {
      needrequestdata.value=false;
      console.log("articlepage",data)
      loading.value = false;
  
      list.value.push(...data.data.data);
      if (data.data.data.length < 10) {
        finished.value = true;
        return;
      }
      page.value++

    });
  
  }
  function gotovideopage()
  {
    videopage(page.value,10,inputValue.value).then((data) => {
      needrequestdata.value=false;
      console.log("videopage",data)
      loading.value = false;
    
      listvideo.value.push(...data.data.data);
      if (data.data.data.length < 10) {
        finished.value = true;
        return;
      }
      page.value++

    });
  
  }

  function gotorankarticle()
  {
    rankarticle().then((data) => {
      needrequestdata.value=false;
      console.log("rankarticle",data)
      loading.value = false;
      finished.value = true;
      list.value.push(...data.data);
        
    
    });
  
  }
  function gotorankvideo()
  {
    rankvideo(page.value,10,inputValue.value).then((data) => {
      needrequestdata.value=false;
      console.log("rankvideo",data)
      loading.value = false;
      finished.value = true;
      listvideo.value.push(...data.data);
        
    

    });
  
  }
  const Share_PATH = import.meta.env.VITE_SHARE_URL+'home';
onMounted(() => {  
    
  initData()
  updatBrowse()
  WXSHARE('2024第九届肝胆英雄榜最具影响力视频投票开始啦！', '就差你一票~助力喜欢的专家或者视频上"肝胆英雄榜"', Share_PATH,"")
  saveurl('/voteList','','')

  })
</script>
<style scoped>
.text1{

font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #0E3564;
line-height: 17px;
text-align: left;
font-style: normal;
}
input {
  
    margin-left: 5px;
    margin-right: 5px;
    font-size: 12px;
    background: transparent;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    flex: 1;
    font-family: PingFangSC, PingFang SC;;
    color: rgba(0,0,0,0.65);
    
  
  }
  
  input:focus {
    margin-left: 5px;
    margin-right: 5px;
    font-size: 12px;
    background: transparent;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    flex: 1;
    font-family: PingFangSC, PingFang SC;;
    color: rgba(0,0,0,0.65);
    
  }
  .divsearch {
    display: flex;
    flex: 1;
    margin-left: 8px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 21px;
    align-items: center;
    justify-content: center;
  
  }
  .litme{
margin: 12px 16px;
min-height: 109px;
background: #FFFFFF;
border-radius: 12px;
  }
  .litmev{
margin: 12px 16px;
padding-top: 16px;
padding-bottom: 16px;
min-height: 93px;
background: #FFFFFF;
border-radius: 12px;
display: flex;
align-items: center;
  }
   .numbers{
width: 32px;
height: 36px;
margin-left: 12px;

font-family: AlibabaPuHuiTiB;
font-size: 14px;
color: rgba(0,0,0,0.65);
font-weight: bold;
line-height: 36px;
text-align: center;
font-style: normal;
background-size:cover;
  background-repeat: no-repeat;
  }
  .numbers1{
width: 32px;
height: 32px;
margin-left: 12px;

font-family: AlibabaPuHuiTiB;
font-size: 14px;
color: rgba(0,0,0,0.65);
font-weight: bold;
line-height: 32px;
border-radius:32px;
background: #EFEFEF;
text-align: center;
font-style: normal;
background-size:cover;
  background-repeat: no-repeat;
  }
  .numberss{
width: 70px;
height: 30px;

border-radius: 12px 0px 16px 0px;
font-family: AlibabaPuHuiTiB;
font-size: 16px;
color: #FFFFFF;
line-height: 30px;
text-align: center;
font-style: normal;
  }
  .title{

font-family: AlibabaPuHuiTiB;
font-size: 16px;
color: #0E3564;
line-height: 26px;
text-align: left;
font-style: normal;
font-weight: bold;
margin-bottom: 4px;
  }
  .name{
    margin-top: 2px;
font-family: AlibabaPuHuiTiR;
font-size: 14px;
color: #0E3564;
line-height: 20px;
text-align: left;
font-style: normal;
white-space: pre-wrap;
  }
  .letfdiv{
    margin-left: 16px;
    flex: 1;
  }
  .rightdiv{
    margin-right: 16px;
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
  }
  .toubg1{

font-family: AlibabaPuHuiTiB;
font-size: 20px;
color: #0BBDFF;
line-height: 27px;
text-align: center;
font-style: normal;
  }
  .toubg{
    margin-top: 5px;
    width: 80px;
height: 40px;
/* background: linear-gradient( 180deg, #51EAFF 0%, #00B9FF 100%); */
box-shadow: inset 2px 2px 5px 0px rgba(255,255,255,0.5);
border-radius: 20px;
font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
font-weight: bold;
font-size: 16px;
color: #FFFFFF;
line-height: 40px;
/* text-shadow: 0px 2px 2px #00A9E6; */
text-align: center;
font-style: normal;
  }



</style>