<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'>查看更多>></span> -->
    </div>
    <div class="workBox">
      <ul>

        <li @click="workli(tableObj.infoMonthlyReport)">
          <span class="title">信息化工作知识库</span>
          <span class="line"></span>
          <span class="icon"><img src="~@/assets/images/RTImgs/wk1.png"></span>
        </li>

        <li @click="workli(tableObj.infoWeeklyReport)">
          <span class="title">信息化工作周报</span>
          <span class="line"></span>
          <span class="icon"><img src="~@/assets/images/RTImgs/wk2.png"></span>
        </li>

        <li @click="workli(tableObj.PMODayReport)">
          <span class="title">PMO晨会日报</span>
          <span class="line"></span>
          <span class="icon"><img src="~@/assets/images/RTImgs/wk3.png"></span>
        </li>

        <li @click="workli(tableObj.supervisorWeeklyReport)">
          <span class="title">监理报告</span>
          <span class="line"></span>
          <span class="icon"><img src="~@/assets/images/RTImgs/wk4.png"></span>
        </li>

        <!-- <li>
                    <span class="workReporttitle"><strong>科智部</strong><b></b></span>
                    <span class="workReportbtn"><em @click="workli(tableObj.DivWisdomMonthlyReport)">月报</em><em @click="workli(tableObj.DivWisdomWeeklyReport)">周报</em></span>
                    <span class="workReporticon"><img src="~@/assets/images/RTImgs/workreporticon1.png"></span>
                </li>

                <li>
                    <span class="workReporttitle"><strong>信息中心</strong><b></b></span>
                    <span class="workReportbtn"><em @click="workli(tableObj.infoMonthlyReport)">月报</em><em @click="workli(tableObj.infoWeeklyReport)">周报</em></span>
                    <span class="workReporticon"><img src="~@/assets/images/RTImgs/workreporticon2.png"></span>
                </li>

                <li>
                    <span class="workReporttitle"><strong>项目经理</strong><b></b></span>
                    <span class="workReportbtn"><em @click="workli(tableObj.proManagerMonthlyReport)">月报</em><em @click="workli(tableObj.proManagerWeeklyReport)">周报</em></span>
                    <span class="workReporticon"><img src="~@/assets/images/RTImgs/workreporticon3.png"></span>
                </li>

                <li>
                    <span class="workReporttitle"><strong>监理</strong><b></b></span>
                    <span class="workReportbtn"><em @click="workli(tableObj.supervisorMonthlyReport)">月报</em><em @click="workli(tableObj.supervisorWeeklyReport)">周报</em></span>
                    <span class="workReporticon"><img src="~@/assets/images/RTImgs/workreporticon4.png"></span>
                </li> -->

      </ul>
    </div>

    <!-- 弹窗 -->
    <el-dialog title="" :visible.sync="DialogVisible" :close-on-click-modal="false" @close="cancelForm" width="95%"
      class="dialogpicwork" center>
      <span class="dialogContent">
        <section class="projectDocumentWork">
          <iframe :src="url" frameborder="0" border="0" ref="iframeRef" name="ifraname" v-if="DialogVisible"></iframe>
        </section>
      </span>
    </el-dialog>
  </section>
</template>
<script>
export default {
  data() {
    return {
      params: {},
      tableObj: {},
      DialogVisible: false,
      url: `/static/portal/vue/index.html#/open?appId=__SXoDrIHNclhCFBuu1lb&actionContent=__uOJf7WQGQJmCVm5TNa0&opentarget=detail&linkType=01`, //跳转
    };
  },
  mounted() {
    this.WorkReport();
  },
  methods: {
    WorkReport() {
      this.$api.WorkReportApi(this.params, {
        onSucess: (response) => {
          console.log(response);
          this.tableObj = response.data;
        },
      });
    },
    workli(item) {
      if (!item) {
        this.$message({ type: "warning", message: "查无权限" });
        return;
      }
      this.DialogVisible = true;
      this.$nextTick(() => {
        this.url = item;
      });
    },
    cancelForm() {
      //取消关闭
      this.DialogVisible = false;
    },
    titleClick(item, index) {
      this.inx = index;
      this.type = item.type;
    },
    gtlist() {
      this.$api.gtlistApi(this.params, {
        onSucess: (response) => {
          console.log(response);
          this.tableData = response.data.data;
        },
      });
    },
    jdzhyjlist() {
      this.$api.jdzhyjlistApi(this.params, {
        onSucess: (response) => {
          console.log(response);
          this.tableData2 = response.data.data;
        },
      });
    },
    lhzbrblist() {
      this.$api.lhzbrblistApi(this.params, {
        onSucess: (response) => {
          console.log(response);
          this.tableData3 = response.data.data;
        },
      });
    },
    applink(appid, names) {
      let appId = appid;
      let name = names;
      let flag = 1;
      this.$store.dispatch("loadMenus", { appId, name, flag });
    },
    more() {
      // 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});
      // }
    },
  },
};
</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;
  margin-bottom: 24px;
  height: 259px;
  .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;
    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: 1px solid #0076f6;
          color: #0076f6;
        }
      }
    }
    .more {
      flex-wrap: 150px;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .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;
    }
  }

  .workBox {
    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 16px;
      justify-content: space-between;
      li {
        position: relative;
        margin-bottom: 16px;
        width: 45%;
        margin-right: 2%;
        display: flex;
        flex-direction: column;
        align-items: center;

        height: 84px;
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid #e6e9f4;
        cursor: pointer;

        .title {
          color: #333333;
          font-size: 14px;
          font-weight: 400;
          flex: 1;
          display: flex;
          align-items: center;
        }
        .line {
          width: 24px;
          height: 2px;
          background: #0f71ff;
          border-radius: 1px;
        }
        .icon {
          width: 36px;
          height: 36px;
        }

        //    .workReporttitle{
        //        display: flex;
        //        flex-direction: column;
        //        flex:1;
        //        strong{
        //            color: #102254;
        //            font-size: 16px;
        //        }
        //        b{
        //          width: 24px;
        //          height: 2px;
        //          background: #0F71FF;
        //        }
        //    }
        //    .workReportbtn{
        //        display: flex;
        //        em{
        //            border-radius: 4px;
        //            border: 1px solid #E6E9F4;
        //            color: #102254;
        //            font-size: 14px;
        //            padding:2px 4px;
        //            margin-right:8px;
        //            cursor: pointer;
        //        }
        //    }
        //    .workReporticon{
        //        position: absolute;
        //        top: 24px;
        //        right:8px;
        //        img{
        //            width: 40px;
        //            height: auto;
        //        }
        //    }
      }
    }
  }
}
</style>
<style lang="scss">
.projectDocumentWork {
  iframe {
    display: block; /* iframes are inline by default */
    background: none;
    border: none; /* Reset default border */
    width: 100%;
    height: 82vh;
    padding-bottom: 0px;
  }
}
.dialogpicwork {
  .el-dialog {
    width: 95% !important;
    height: 95vh !important;
    margin-top: 2vh !important;
  }
}
</style>