<template>
  <section class="homeRTGT">
    <div class="htaTitle">
      <span class="TitleName"><i></i><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'>更多<img src="~@/assets/images/RTImgs/moreicon.png"></span>
    </div>
    <div class="htaBoxRTMeetList">
      <div class="tableContent" v-if='type==1'>
        <ul class="jtnetul">
          <li v-for="(item,index) in tableData" :key='index' @click="DialogVisible = true;listdetailli(item)"><i><img
                src="~@/assets/images/RTImgs/hyicon.png"></i><b>{{item.meetingTime}}</b><em>{{item.item_meetingname}}</em>
          </li>
          <!-- <li><i><img src="~@/assets/images/RTImgs/hyicon.png"></i><b>2020</b><em>55555</em></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.meetingTime}}</b><em>{{item.item_meetingname}}</em>
          </li>
        </ul>
      </div>

    </div>

    <!-- 弹窗 -->
    <el-dialog title="" :visible.sync="DialogVisible" :close-on-click-modal="false" width="90%" class="dialogpic"
      center>
      <span class="dialogImg">
        <!-- <section class="newsContent">
                <h3>{{detailContent.item_meetingname}}</h3>
                 <el-divider></el-divider>
                <span class="nr" v-html="detailContent.item_meetingname"></span>    
                 <el-divider></el-divider>                
            </section>     -->
        <section class="projectDocument" v-loading="loading">
          <iframe :src="url" frameborder="0" border="0" ref="iframeRef"></iframe>
        </section>
      </span>
    </el-dialog>
  </section>
</template>
<script>
export default {
  data() {
    return {
      titleArr: [
        { name: "集团网信领导小组会", type: 1 },
        { name: "信息化工作周例会", type: 2 },
      ],
      inx: 0,
      params: {
        //搜索条件
        pageIndex: 1,
        pageSize: 3,
        total: 0,
      },
      type: 1,
      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();
  },
  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);
          this.tableData.forEach((item) => {
            let date = new Date(item.item_meetingtime.time);
            let year = date.getFullYear();
            let month =
              date.getMonth() + 1 < 10
                ? "0" + (date.getMonth() + 1)
                : date.getMonth() + 1;
            let dates = date.getDate();
            let HH =
              date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            let mm =
              date.getMinutes() < 10
                ? "0" + date.getMinutes()
                : date.getMinutes();
            let meetingTime =
              year + "-" + month + "-" + dates + " " + HH + ":" + mm;
            this.$set(item, "meetingTime", meetingTime);
          });
          console.log(this.tableData);
        },
      });
    },
    xxhgzlist() {
      this.$api.xxhgzlistApi(this.params, {
        onSucess: (response) => {
          console.log(response);
          this.tableData2 = response.data.data;
          console.log(this.tableData2);
          this.tableData2.forEach((item) => {
            let date = new Date(item.item_meetingtime.time);
            let year = date.getFullYear();
            let month =
              date.getMonth() + 1 < 10
                ? "0" + (date.getMonth() + 1)
                : date.getMonth() + 1;
            let dates = date.getDate();
            let HH =
              date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            let mm =
              date.getMinutes() < 10
                ? "0" + date.getMinutes()
                : date.getMinutes();
            let meetingTime =
              year + "-" + month + "-" + dates + " " + HH + ":" + mm;
            this.$set(item, "meetingTime", meetingTime);
          });
        },
      });
    },
    listdetailli(item) {
      this.url = `/static/portal/vue/index.html#/open?appId=__BW3MQkflZe4tN0xxpJZ&actionContent=__nOUaNbEmDDW5viPtO9d&opentarget=detail&linkType=00&realformId=__nOUaNbEmDDW5viPtO9d&docid=${item.id}`;
    },
    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 });

      // if(this.type==1){
      //      let appId='__Hab04s0VNDPrjFZ3Xlo'
      //     let name='挂图作战'
      //     let flag=1
      //     this.$store.dispatch("loadMenus", {appId, name,flag});
      // }else if(this.type==2){
      //     let appId='__l8yB8fdHv3OmXOrHfyF'
      //     let name='进度滞后预警'
      //     let flag=1
      //     this.$store.dispatch("loadMenus", {appId, name,flag});
      // }else if(this.type==3){
      //     let appId='__u1xGyTCVhsSaWrgdBed'
      //     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: 168px;
  .htaTitle {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 18px;
    color: rgba(0, 0, 0, 0.85);
    padding: 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: 16px;
        cursor: pointer;
        &.active {
          border-bottom: 2px solid #0076f6;
          color: #0076f6;
        }
      }
    }
    .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;
      height: 111px;
      overflow: auto;
      li {
        display: flex;
        padding: 5px 0;
        line-height: 24px;
        cursor: pointer;
        i {
          margin-left: 24px;
          margin-right: 10px;
        }
        b {
          margin-right: 30px;
          width: 132px;
        }
        em {
          flex: 1;
          max-width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-right: 50px;
        }
      }
    }
  }
}
.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>