<template >
   
  <div class="edu-head">

    <div class="department">
      <nut-image class="dicon" width="40" height="40" :src=hospitalLogo alt="图片描述" round />
      <div class="dtitle">
        <nut-ellipsis
    :content=hospital
    rows="1"
    direction="end"
    v-if="hospital.length>10"
  ></nut-ellipsis>
  <nut-ellipsis
    :content=dtitle
    v-if="hospital.length>10"
    rows="1"
    direction="end"
  ></nut-ellipsis>
        <div  v-if="hospital.length<11">{{ hospital}}</div>
      <div  v-if="hospital.length<11">{{dtitle }}</div>
      </div>
     
      <div class="changedepart" @click="changedepart" v-if="hospital.length<11">
        <img src='../assets/change_depart.png' style=" width: 16px;height: 16px;">
         切换科室</div>
    </div>
    <search :message="searchMessage" />
  </div>
  <div style="background: var(--back-color-01);">
    <nut-overlay v-model:visible="show" :close-on-click-overlay="false">
      <div class="wrapper">
        <div class="content" v-if="showPop">
          <div class="raido_title">切换科室</div>
          <nut-radio-group v-model="radioVal" @change="handleChange" class="contentchild">
            <div v-for="(item, index) in departemntlist">
              <nut-radio :label=index>
                <template #icon>
                  <!-- <IconFont size="16" name= 'src/assets/radio_no.png' :style="{ 'margin-top': '3px' }" /> -->
                  <IconFont size="16" :name=radio_no :style="{ 'margin-top': '3px' }" />
                </template>
                <template #checkedIcon>
                  <!-- <IconFont size="16" name= 'src/assets/radio_sel.png' :style="{ 'margin-top': '3px' }" /> -->
                  <IconFont size="16" :name=radio_sel :style="{ 'margin-top': '3px' }" />
                </template>
                {{ item.officeName }}
              </nut-radio>
            </div>
          </nut-radio-group>
          <div :style="{
            display: 'flex', background: '#FFFFFF',
            'border-radius': '0px 0px 12px 12px'
          }">
            <div class="bt_no" @click.stop="handleclick(false)">取消</div>
            <div class="bt_yes" @click.stop="handleclick(true)">确认</div>
          </div>
        </div>
        <div class="content1" v-if="showPop1">
          <div class="raido_title">温馨提示</div>
          <div class="raido_title1">{{ '您确定要跳转到：' + hospitaltmp + '-' + dtitletmp }}</div>
          <div class="raido_title2">{{ '您当前浏览的科室为：' + hospital + '-' + dtitle }}</div>
          <div :style="{ display: 'flex' }">
            <div class="bt_no" @click.stop="handleclick(false)">取消</div>
            <div class="bt_yes" @click.stop="handleclick(true, true)">确认</div>
          </div>

          <div>

          </div>

        </div>
      </div>
    </nut-overlay>
    <div class="classgrid">
      <div v-if="appOfficeCeecList.length > 0" :style="{
        
        'background-size': '100% 100%', 'height': '188px', 'background-repeat': 'no-repeat', 'border-radius': '8px'
      }" @click="gotoNextPage(appOfficeCeecList[0])" v-lazy:background-image="imgurl + appOfficeCeecList[0].ceecImg">
        <div class="ftitle">{{ appOfficeCeecList[0].ceecName }}</div>
        <div class="fcontent" v-if="appOfficeCeecList[0].ceecArticleNum > 0">{{ '共' + appOfficeCeecList[0].ceecArticleNum
          + '篇'
        }}</div>
      </div>
      <div class="classgrid1">
        <div :style="{
          'height': '88px', 
          'background-size': '100% 100%', 'background-repeat': 'no-repeat', 'border-radius': '8px'
        }" @click="gotoNextPage(appOfficeCeecList[1])" v-if="appOfficeCeecList.length > 1"  v-lazy:background-image="imgurl + appOfficeCeecList[1].ceecImg">
          <div class="ftitle">{{ appOfficeCeecList[1].ceecName }}</div>
          <div class="fcontent" v-if="appOfficeCeecList[1].ceecName=='科普直播'"><img src='../assets/nowb.gif' style=" width: 20px;height: 20px;"></div>
          <div class="fcontent" v-else-if="appOfficeCeecList[1].ceecArticleNum > 0">{{
            '共' + appOfficeCeecList[1].ceecArticleNum + '篇' }}</div>
        </div>
        <div :style="{
          'height': '88px', 
          'background-size': '100% 100%', 'background-repeat': 'no-repeat', 'border-radius': '8px'
        }" @click="gotoNextPage(appOfficeCeecList[2])" v-if="appOfficeCeecList.length > 2" v-lazy:background-image="imgurl + appOfficeCeecList[2].ceecImg">
          <div class="ftitle">{{ appOfficeCeecList[2].ceecName }}</div>
          <div class="fcontent" v-if="appOfficeCeecList[2].ceecName=='科普直播'"><img src='../assets/nowb.gif' style=" width: 20px;height: 20px;"></div>
          <div class="fcontent" v-else-if="appOfficeCeecList[2].ceecArticleNum > 0">{{
            '共' + appOfficeCeecList[2].ceecArticleNum + '篇' }}</div>
        </div>

      </div>
      <div v-for="(item, index) in appOfficeCeecList.slice(3)" :style="{
        'height': '88px', 
        'background-size': '100% 100%', 'background-repeat': 'no-repeat', 'border-radius': '8px'
      }" @click="gotoNextPage(item)" v-lazy:background-image="imgurl + item.ceecImg">
        <div class="ftitle">{{ item.ceecName }} </div>
        <div class="fcontent" v-if="item.ceecName=='科普直播'"><img src='../assets/nowb.gif' style=" width: 20px;height: 20px;"></div>
        <div class="fcontent" v-else-if="item.ceecArticleNum > 0">{{ '共' + item.ceecArticleNum + '篇' }}</div>

      </div>
      <!-- <div class="third" @click="gotoLiving">
        <div class="ftitle">科普直播 </div>
        <div class="fcontent"><img src='../assets/nowb.gif' style=" width: 20px;height: 20px;"></div>


      </div> -->
    </div>

    <TabTools></TabTools>
  </div>
</template>
<script setup >
import { showToast } from '@nutui/nutui';
// import now from '../assets/nowb.gif'
import radio_no from '../assets/radio_no.png'
import radio_sel from '../assets/radio_sel.png'
import TabTools from '@/components/tabTools.vue';
// import change_depart from '../assets/change_depart.png'
import { IconFont } from '@nutui/icons-vue';
import { useRouter, useRoute } from 'vue-router';
import { WXSHAREHOME } from '../utils/wxshare-1.6.0';
import search from '../components/search.vue'
import { getIndex, imgurl,roootUrl } from '../utils/api.js'
// const Logos = ref('https://health-edu.oss-cn-beijing.aliyuncs.com/system/getheadimg.png');
const router = useRouter();
const routerr = useRoute();
const searchMessage = ref('请输入文章标题/疾病/关键词…');
const hospital = ref('');
const hospitalLogo = ref('https://health-edu.oss-cn-beijing.aliyuncs.com/system/getheadimg.png');
const show = ref(false);
const dtitle = ref('');
const dtitletmp = ref('');
const hospitaltmp = ref('');
const urltmp = ref('');
const radioVal = ref(dtitle.value);
const showPop1 = ref(false)
const showPop = ref(true)
let officeid = ''
let appid = ''
const urlSearchParams = new URLSearchParams(window.location.search)
const departemntlist = reactive([
])
const appOfficeCeecList = reactive([])
const handleChange = (value) => {
  console.log('handleChange', value);
  // window.location.href='http://dev.edu.igandan.com/h5/index.html?officeid='+departemntlist[value].offidId+'&appid='+departemntlist[value].appid
  if (isNaN(value)) {  
    
} else {  
  dtitletmp.value = departemntlist[value].officeName;
  hospitaltmp.value = departemntlist[value].hospitalName;
  officeid=departemntlist[value].officeId
  urltmp.value = roootUrl+ departemntlist[value].officeId + '&appid=' + departemntlist[value].appid
}
 

};
onMounted(() => {

  // appid = urlSearchParams.get('appid')
  // officeid = urlSearchParams.get('officeid')
  // alert("appid:"+appid)
  // alert("officeid:"+officeid)
  // console.log("appid", appid);
  // console.log("officeid", officeid);
  // localStorage.setItem("officeid", officeid);
  // const token = localStorage.getItem(officeid + '-token');
  // alert("token:"+token)
  // console.log(officeid + '-token', token);
  // if (token) {


    const urlSearchParams = new URLSearchParams(window.location.search)
    let officeid = urlSearchParams.get('officeid')
    
    if(typeof officeid === "undefined"||officeid ==null|| officeid == "undefined")
    {

    }
    else
    {
      localStorage.setItem("officeid", officeid);
    }
     appid = urlSearchParams.get('appid')
    
    if(typeof appid === "undefined"||appid ==null|| appid == "undefined")
    {

    }
    else
    {
      localStorage.setItem("appid", appid);
    }
    
    initData()
  
     
  // } else {
  //   goGreet()
  // }
})

// function goGreet() {
//   const code = urlSearchParams.get('code')
//   alert(code)
//   if (code) {
//     oauth2greet(appid, officeid, code).then((res) => {
//       console.log("oauth2greetapp", res);
//       localStorage.setItem(officeid + '-token', res.data);
//       localStorage.setItem('default' + '-token', res.data);
//       if(res.code === 30001){
//         let encodedUrl = encodeURIComponent(window.location.href)
//         window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + encodedUrl + "&response_type=code&scope=snsapi_userinfo&state=1&component_appid=wx61944e1d991e380e&connect_redirect=1#wechat_redirect";
//         return
//       }
//     }).then(()=>{
//       initData()
//     })
//   } else {
//     let encodedUrl = encodeURIComponent(window.location.href)
//     window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + encodedUrl + "&response_type=code&scope=snsapi_userinfo&state=1&component_appid=wx61944e1d991e380e&connect_redirect=1#wechat_redirect";
//   }
// }

function initData() {
  getIndex().then((data) => {
   

    // if (data.code == 30007 || data.code == 40007) {
    //   goGreet()
    // } else {
      console.log("getIndex", data);
      // Logos.value=data.data.hospitalLogo
      hospital.value = data.data.appOffice.hospitalName
      dtitle.value = data.data.appOffice.officeName
      dtitletmp.value = data.data.appOffice.officeName
      hospitalLogo.value = imgurl + data.data.appOffice.hospitalLogo
      appOfficeCeecList.push(...data.data.appOfficeCeecList)
      departemntlist.push(...data.data.appOfficeRecord)
      localStorage.setItem("hospitalName", hospital.value);
      localStorage.setItem("officeName", dtitle.value);
    // }
    WXSHAREHOME("宣教中心", '肝胆相照-肝胆病在线公共服务平台', window.location.href,"");
  });
 
}
function handleclick(choose, close) {
  if (close) {
   
    window.location.href = urltmp.value
    // showPop.value=true;
    // showPop1.value=false;
    // show.value=false;
    // dtitle.value=dtitletmp.value;
  }
  else if (choose) {
    if (dtitle.value == dtitletmp.value) {
      show.value = false;
    }
    else {
      showPop.value = false;
      showPop1.value = true;
    }


  }
  else {
    showPop.value = true;
    showPop1.value = false;
   
    radioVal.value = dtitle.value
    dtitletmp.value = dtitle.value
    show.value = false;
   
  }
}

function gotoLiving() {
  router.push({ path: '/live' });
}

function gotoNextPage(item) {
  if(item.ceecName=='科普直播')
  {
    router.push({ path: '/live' });
  }
  else if (item.ceecType == 2) {
    window.location.href = item.ceecLink;
  }
  else {
    // let json = { type: item.ceecName, ceecId: item.ceecId, from: 'edu-center' }
    // router.push({
    //   path: '/information', state:
    //   {
    //     data: JSON.stringify(json)

    //   }
    // });
    router.push({ name: 'information', query:{type:item.ceecName,ceecId:item.ceecId,from:'edu-center'}  });

  }

}
function changedepart() {
  if (departemntlist.length > 0) {
    show.value = true
  }
  else {
    showToast.text('暂无可切换的科室');
  }
}
</script>
<style  scoped>
.edu-head {
  background-image: url(../assets/edubg1.png);
  background-size: cover;
  padding-bottom: 48px;
}

.department {
  width: 100%;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.dicon {
  margin-left: 16px;

}

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */

.dtitle {
  margin-left: 8px;
  margin-right: 8px;
  width: 100%;
  flex: 1;
  /* font-size: var(--font-size-14); */
  font-size:18px;
  font-family: AlibabaPuHuiTiM;
  ;
  color: var(--text-color-normal);
  line-height: 24px;

}

.changedepart {
  display: flex;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  margin-left: 16px;
  margin-right: 8px;
  padding: 3px 10px 3px 8px;
  /* font-size: var(--font-size-12); */
  font-size:14px;
  font-family: AlibabaPuHuiTiR;
  color: var(--text-color-normal);
  line-height: 17px;
}

.wrapper {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.content {

  width: 80%;
  min-height: 256px;
  /* height: 256px; */
  background: url(../assets/popbg.png);
  background-size: contain;

  background-repeat: no-repeat;

}

.contentchild {
  /* height: 300px; */
  min-height: 100px;
  max-height: 300px;
  overflow: scroll
}

.content1 {

  width: 80%;
  min-height: 256px;
  /* height: 256px; */
  background: linear-gradient(184deg, #F1FAFF 0%, #FFFFFF 100%);
  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
  border-radius: 12px;

}

.raido_title {
  margin: 16px;
  font-size: var(--font-size-18);
  font-family: AlibabaPuHuiTiM;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
}

.raido_title1 {
  margin: 16px;
  font-size: var(--font-size-16);
  font-family: AlibabaPuHuiTiM;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
  text-shadow: 0px 9px 28px rgba(0, 0, 0, 0.05);
}

.raido_title2 {
  margin: 16px;
  background: rgba(0, 0, 0, 0.04);
  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  padding: 8px;
  font-size: var(--font-size-14);
  font-family: AlibabaPuHuiTiR;
  color: rgba(0, 0, 0, 0.65);
  line-height: 22px;
  text-shadow: 0px 9px 28px rgba(0, 0, 0, 0.05);
}

.nut-radio-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: #FFFFFF;

}

.nut-radio {
  margin: 16px;
  --nut-radio-label-margin-left: 8px;
  --nut-radio-label-font-size: var(--font-size-16);
  align-items: self-start;
  font-family: AlibabaPuHuiTiR;
  color: rgba(0, 0, 0, 0.85);
  /* line-height: 24px; */
}

.bt_no {
  flex: 1;
  height: 48px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  margin-left: 16px;
  margin-top: 16px;
  font-size: var(--font-size-18);
  font-family: AlibabaPuHuiTiM;
  color: rgba(0, 0, 0, 0.45);
  line-height: 48px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bt_yes {
  flex: 1;
  height: 48px;
  background: #3BB5FE;
  border-radius: 8px;
  margin: 16px;
  font-size: var(--font-size-18);
  font-family: AlibabaPuHuiTiM;
  color: white;
  line-height: 48px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.classgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
  /* margin: 16px;  */
  margin-top: -24px;
  margin-left: 16px;
  margin-right: 16px;
  margin-bottom: 16px;
  padding-bottom: 80px;
}

.classgrid1 {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 12px;
}

.ftitle {
  margin-top: 21px;
  margin-left: 16px;
  font-size: var(--font-size-18);
  font-family: AlibabaPuHuiTiM;
  color: #314E4D;
  line-height: 24px;
}

.fcontent {
  margin-top: 4px;
  margin-left: 16px;
  /* font-size: var(--font-size-12); */
  font-size: 14px;
  font-family: AlibabaPuHuiTiR;
  color: rgba(0, 0, 0, 0.45);
  line-height: 17px;
}

.second {
  height: 88px;
  background: url(../assets/second.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.third {
  height: 88px;
  background: url(../assets/liviing.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 8px;
}
</style>
