<template>
  <section class="homeRTGT">
    <div class="htaTitle">
      <span class="TitleName"><strong>工作事项</strong></span>
      <span class="TitleTab"><em v-for="(item, index) in titleArr" :key="index" @click="titleClick(item, index)"
          :class="inx == index ? 'active' : ''">{{ item.name }}</em></span>
      <span class="more" @click="more" v-if='type==2'>
        更多
      </span>
    </div>
    <div class="htaBoxRTMeetList">
      <div class="tableContent" v-if="type == 1">
        <ul class="waitul">         
          <li v-for="(item,index) in tableData" :key='index'>
            <span class="t1"><em :class="item.readState==1?'active':''">{{item.readState==0?'未读':'已读'}}</em></span>
            <span class="t2"><strong>{{item.subject}}</strong></span>
            <span class="t3"><i><img src="~@/assets/images/RTImgs/waitcbicon.png"></i><b>催办{{item.hastenTimes?item.hastenTimes:0}}次</b></span>
            <span class="t4"><em @click='jumplink(item)'>去处理</em></span>
          </li>

          <!-- <li>
            <span class="t1"><em class="active">已读</em></span>
            <span class="t2"><strong>待办事项待办事项待办事项</strong></span>
            <span class="t3"><i><img src="~@/assets/images/RTImgs/waitcbicon.png"></i><b>催办2次</b></span>
            <span class="t4"><em>去处理</em></span>
          </li> -->
        </ul>
      </div>

      <div class="tableContent" v-if="type == 2">
        <ul class="jtnetul">
          <!-- <li v-for="(item,index) in tableData2" :key='index'  @click="DialogVisible = true;listdetailli2(item)"><i><img src="~@/assets/images/RTImgs/hyicon.png"></i><b>{{item.item_meetingtime}}</b><em>{{item.item_meetingname}}</em></li> -->
          <li v-for="(item, index) in tableData2" :key="index" @click="
              DialogVisible = true;
              listdetailli2(item);
            ">
            <span class="txt1"><img src="~@/assets/images/RTImgs/会议icon(1).png"
                class="img" /><em><strong>会议时间</strong><i :title="item.item_meetingtime">{{
                  item.item_meetingtime
                }}</i></em></span>
            <span class="txt2"><em><strong>会议名称</strong><i :title="item.item_meetingname">{{
                  item.item_meetingname
                }}</i></em></span>
            <span class="txt3"><em><strong>主持人</strong><i
                  :title="item.item_compere">{{ item.item_compere }}</i></em></span>
          </li>          
        </ul>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog title="" :close-on-click-modal="false" :visible.sync="DialogVisible" width="90%" class="dialogpic"
      center>
      <span class="dialogImg">       
        <section class="projectDocument" v-loading="loading">
          <iframe :src="url" frameborder="0" border="0" ref="iframeRef" v-if="DialogVisible"></iframe>
        </section>
      </span>
    </el-dialog>
  </section>
</template>
<script>
export default {
  data() {
    return {
      titleArr: [       
        { name: "信息化工作例会", type: 2 },
        {name:'待办流程',type:1},
      ],
      inx: 0,
      params: {
        //搜索条件
        pageIndex: 1,
        pageSize: 3,
        total: 0,
      },
      type: 2,
      tableData: [],
      tableData2: [],
      tableData3: [],
      DialogVisible: false,
      detailContent: {},
      docid: "",
      loading: false,
      url: `/static/portal/vue/index.html#/open?appId=__BW3MQkflZe4tN0xxpJZ&actionContent=____nOUaNbEmDDW5viPtO9d&opentarget=detail&linkType=00&realformId=__nOUaNbEmDDW5viPtO9d&docid=${this.docid}`, //跳转
    };
  },
  mounted() {
    // this.jtnetlist();
    this.xxhgzlist();
    this.waitlist()
  },
  methods: {
    titleClick(item, index) {
      this.inx = index;
      this.type = item.type;
    },
    jtnetlist() {
      this.$api.jtnetlistApi(this.params, {
        onSucess: (response) => {
          console.log(response);
          this.tableData = response.data.data;
          console.log(this.tableData);         
        },
      });
    },
    xxhgzlist() {
      this.$api.xxhgzlistApi(this.params, {
        onSucess: (response) => {
          console.log(response);
          this.tableData2 = response.data.data;
          console.log(this.tableData2);          
        },
      });
    },
    waitlist(){
      let jsonData={"userName":"restkk","password":"67b80b38-a020-4888-842e-33908ded1beb"}
      this.$api.waitTokenApi(jsonData, {
        onSucess: (response) => {
          console.log(response);
          let resttoken = (response.data&&response.data.id)||"";
          if(resttoken){
              let loginName=(sessionStorage.getItem('userInfo')&&JSON.parse(sessionStorage.getItem('userInfo')).telephone)||''
              let jsonDataParam={token:resttoken,loginName:loginName}
              this.$api.waitlistApi(jsonDataParam, {
                onSucess: (response) => {
                  console.log(response)
                   if(response.data.data){
                       this.tableData=response.data.data
                   }
                }
              })
          }
        },
      });
    },
    jumplink(item){
       if(item.link){
         window.open(item.link)
       }else{
         alert('没有相关链接地址')
       }
    },  
    listdetailli2(item) {
      this.url = `/static/portal/vue/index.html#/open?appId=__BW3MQkflZe4tN0xxpJZ&actionContent=__0Dddkwmjh5JTw6mOCBh&opentarget=detail&linkType=00&realformId=__0Dddkwmjh5JTw6mOCBh&docid=${item.id}`;
    },
    more() {
      let appId = "__BW3MQkflZe4tN0xxpJZ";
      let name = "信息化会议";
      let flag = 1;
      this.$store.dispatch("loadMenus", { appId, name, flag });
    },
    stateChange() {
      this.loading = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.homeRTGT {
  display: flex;
  flex-direction: column;
  background: #fff;
  // box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  height: 354px;
  .htaTitle {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    padding: 10px;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    align-items: center;
    .TitleName {
      display: flex;
      align-items: center;
      margin-right: 40px;
      i {
        width: 2px;
        height: 18px;
        background: #0e71ff;
        margin-right: 4px;
      }
      strong {
        color: rgba(0, 0, 0, 0.85);
        font-size: 16px;
      }
    }
    .TitleTab {
      flex: 1;
      em {
        margin-right: 15px;
        font-size: 16px;
        padding-bottom: 10px;
        cursor: pointer;
        color: #999;
        &.active {
          border-bottom: 2px solid #4b5eff;
          color: #1e5eff;
        }
      }
    }
    .more {
      flex-wrap: 150px;
      font-size: 14px;
      cursor: pointer;
      color: rgba(0, 0, 0, 0.45);
      display: flex;
      align-items: center;
    }
  }
  .htaBox {
    padding: 16px 0 16px 16px;
    ul {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;

      li {
        background: #fff;
        width: 140px;
        height: 100px;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        padding: 16px;
        margin-right: 16px;
        margin-bottom: 16px;
        align-items: center;
        text-align: center;
        span {
          margin-bottom: 8px;
          img {
            width: 48px;
            height: 48px;
          }
          strong {
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
            font-weight: normal;
          }
        }
      }
    }
  }
  .scrollbarClass {
    .el-scrollbar__wrap {
      overflow: scroll !important;
      height: calc(100% + 20px) !important; //多出来的20px是横向滚动条默认的样式
    }
    .el-table--scrollable-x .el-table__body-wrapper {
      overflow-x: hidden !important;
    }
  }

  .htaBoxRTMeetList {
    .jtnetul {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 16px 16px 16px 16px;
      height: 310px;
      box-sizing: border-box;
      overflow: hidden;
      li {
        border-radius: 8px;
        border: 1px solid #e6e9f4;
        padding: 10px;
        padding-left: 16px;
        padding-right: 16px;
        display: flex;
        margin-bottom: 5px;
        cursor: pointer;
        .txt1 {
          display: flex;
          margin-right: 8px;
          width: 180px;
          white-space: nowrap;
          .img {
            width: 50px;
            height: 50px;
          }
          em {
            width: 100%;
            justify-content: center;
            margin-left: 16px;
            display: flex;
            flex-direction: column;
            width: 180px;
            strong {
              //   margin-bottom: 8px;
              font-weight: normal;
              font-size: 12px;
              line-height: 20px;
              color: #999;
            }
            i {
              display: inline-block;
              height: 22px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 100%;
              font-size: 14px;
              line-height: 22px;
              color: #333;
            }
          }
        }
        .txt2 {
          display: flex;
          margin-right: 8px;
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          em {
            width: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            border-left: 1px solid #e6e9f4;
            padding-left: 8px;
            //   max-width:350px;
            flex: 1;
            strong {
              //   margin-bottom: 8px;
              font-weight: normal;
              font-size: 12px;
              line-height: 20px;
              color: #999;
            }
            i {
              display: inline-block;
              height: 22px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 100%;
              font-size: 14px;
              line-height: 22px;
              color: #333;
            }
          }
        }
        .txt3 {
          display: flex;
          margin-right: 8px;
          width: 70px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          em {
            width: 100%;
            display: flex;
            flex-direction: column;
            border-left: 1px solid #e6e9f4;
            padding-left: 8px;
            justify-content: center;
            width: 80px;
            strong {
              //   margin-bottom: 8px;
              font-weight: normal;
              font-size: 12px;
              line-height: 20px;
              color: #999;
            }
            i {
              display: inline-block;
              height: 22px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 100%;
              font-size: 14px;
              line-height: 22px;
              color: #333;
            }
          }
        }
        .txt4 {
          display: flex;
          margin-right: 8px;
          em {
            width: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            border-left: 1px solid #e6e9f4;
            padding-left: 8px;
            strong {
              //   margin-bottom: 8px;
              font-weight: normal;
              font-size: 12px;
              line-height: 20px;
              color: #999;
            }
            i {
              display: inline-block;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              height: 22px;
              width: 99%;
              font-size: 14px;
              line-height: 22px;
              color: #333;
            }
          }
        }
      }
    }
    .waitul{
       display: flex;
       flex-direction: column;
       margin: 17px 16px 27px 16px;
       height: 270px;
       overflow: auto;
       li{
         display: flex;
         width: 100%;
         line-height: 30px;
         padding-top: 4px;
         padding-bottom: 3px;
         border-bottom:1px solid #E6E9F4;
         .t1{
           em{
              background: rgba(15,113,255,0.0800);
              border-radius: 5px;
              color: #0F71FF;
              font-size: 12px;
              width: 40px;           
              margin-right: 8px;
              display: flex;
              justify-content: center;
              &.active{
                background: #F3F3F3;
                color: #999999;
              }
           }           
         }
         .t2{
           flex:1;     
           strong{
             font-size: 14px;
             font-weight: 400;
             color: #333333;
             display: -webkit-box;
             overflow: hidden;
             text-overflow: ellipsis;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
                   
           }
         }
         .t3{
           background: rgba(255,140,140,0.0800);
           border-radius: 5px;
           color: #FF8C8C;
           font-size: 12px;
           padding: 0 8px;
           display: flex;
           justify-content: center;
           i{
             font-weight: normal;
             img{
               vertical-align:-4px;
             }
           }
         }
         .t4{
           margin-left:8px;
           display: flex;
           em{
             background: #0F71FF;
             border-radius: 5px;
             color: #fff;
             font-size: 12px;
             padding: 0 12px;
             cursor: pointer;
           }
         }
        
       }
    }
  }
}
.projectDocument {
  iframe {
    display: block; /* iframes are inline by default */
    background: none;
    border: none; /* Reset default border */
    height: 100vh; /* Viewport-relative units */
    width: 100%;
    padding-bottom: 0px;
  }
}
</style>
