<template>
  <section class="homeRTGT">
    <div class="htaTitle">
      <span class="Title_container">
        <span class="TitleName"><strong>工作动态</strong></span>
      </span>

      <span class="TitleTab"><em v-for="(item, index) in titleArr" :key="index" @click="titleClick(item, index)"
          :class="inx == index ? 'active' : ''">{{ item.item_classify_name }}</em></span>
      <span class="more" @click="more(inx)">
        <!-- <img src="~@/assets/images/RTImgs/morei.png" /> -->
        更多
      </span>
    </div>
    <div class="htaBoxInfoDy">
      <div class="tableContent">
        <ul class="newslistul">
           <li class="workli" v-for="(item, index) in tableDataNewsList" :key="index"  @click="DialogVisible = true;newsdetailli(item);"><i></i><b>{{ item.item_title }}</b><em>{{item.item_time}}</em></li>
          <!-- <li>
            <span class="left">
              <em @click="
                  DialogVisible = true;
                  newsdetailli(tableDataNewsList[0]);
                " v-if="tableDataNewsList[0]"><img
                  :src="tableDataNewsList[0] && tableDataNewsList[0].imgpath" /><strong>{{
                  tableDataNewsList[0] && tableDataNewsList[0].item_title
                }}</strong></em>
                </span>
            <span class="right">
              <span class="rli" v-for="(item, index) in tableDataNewsList" :key="index" v-if="index > 0" @click="
                  DialogVisible = true;
                  newsdetailli(item);
                "><i></i><b>{{ item.item_title }}</b></span>
            </span>
          </li> -->

          <!-- <li>
                        <span class="left" ><em><img src="~@/assets/images/newtest.png"><strong>文字文字5555555文字5555555文字55555555555555</strong></em></span>
                        <span class="right">
                            <span class="rli"><i></i><b>测试文字1111测试文字1111测试文字1111测试文字1111测试文字1111测试文字1111</b></span>
                            <span class="rli"><i></i><b>测试文字1111测试文字1111测试文字1111测试文字1111测试文字1111测试文字1111</b></span>
                            <span class="rli"><i></i><b>测试文字1111测试文字1111测试文字1111测试文字1111测试文字1111测试文字1111</b></span>
                            <span class="rli"><i></i><b>测试文字1111测试文字1111测试文字1111测试文字1111测试文字1111测试文字1111</b></span>
                            <span class="rli"><i></i><b>测试文字1111测试文字1111测试文字1111测试文字1111测试文字1111测试文字1111</b></span>
                            <span class="rli"><i></i><b>测试文字1111测试文字1111测试文字1111测试文字1111测试文字1111测试文字1111</b></span>
                            <span class="rli"><i></i><b>测试文字1111测试文字1111测试文字1111测试文字1111测试文字1111测试文字1111</b></span>
                        </span>                       
                    </li> -->
        </ul>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog title="" :close-on-click-modal="false" :visible.sync="DialogVisible" width="780px" class="dialogpic"
      center>
      <span class="dialogImg">
        <section class="newsContent">
          <h3>{{ detailContent.item_title }}</h3>
          <span class="linebottom"><em>{{ detailContent.item_article }}</em><b><i
                class="el-icon-view"></i><strong>{{ detailContent.item_readcount }}</strong></b>
            <el-divider direction="vertical"></el-divider>
            <b><i class="el-icon-time"></i><strong>{{ detailContent.item_time }}</strong></b>
          </span>
          <el-divider></el-divider>
          <span class="nr" v-html="detailContent.item_content"></span>
          <el-divider></el-divider>
          <span class="fj" v-if="detailContent.fjArr">
            <strong>附件：</strong>
            <ul>
              <li v-for="(item, index) in detailContent.fjArr" :key="index" @click="fjclick(item)">
                {{ item.name }}
              </li>
            </ul>
          </span>
        </section>
      </span>
    </el-dialog>
  </section>
</template>
<script>
export default {
  data() {
    return {
      titleArr: [
        { name: "信息化动态", type: 1 },
        { name: "信息化工作思路", type: 2 },
      ],
      inx: 0,
      params: {
        //搜索条件
        pageIndex: 1,
        pageSize: 8,
        total: 0,
      },
      type: 1,
      tableDataNewsList: [],
      tableData: [],
      tableData2: [],
      tableData3: [],
      DialogVisible: false,
      detailContent: {},
    };
  },
  mounted() {
    this.newsCate();
  },
  methods: {
    newsCate() {
      this.$api.newsCateApi(this.params, {
        onSucess: (response) => {
          console.log(response);
          let newsData = response.data.data.filter((item) => {
            return item.item_workbench == "是";
          });
          this.titleArr = newsData;
          // console.log(this.titleArr)
          let item = this.titleArr[0]; //默认取第一个分类的列表
          this.newslist(item);
        },
      });
    },
    titleClick(item, index) {
      this.inx = index;
      this.type = item.type;
      this.newslist(item);
    },
    newslist(item) {
      let jsonData = {
        classificationid: item.classificationid,
        ...this.params,
      };
      this.$api.newslistApi(jsonData, {
        onSucess: (response) => {
          console.log(response.data.data);
          this.tableDataNewsList = response.data.data;
          this.tableDataNewsList &&
            this.tableDataNewsList.forEach((item) => {
              if (item.item_image) {
                let path = JSON.parse(item.item_image)[0].path;
                if (path.indexOf("http") > -1) {
                  this.$set(item, "imgpath", path);
                } else {
                  this.$set(item, "imgpath", "/obpm" + path);
                }
              }
            });
        },
      });
    },
    newsdetailli(item) {
      let jsonData = { articleid: item.articleid, ...this.params };
      this.$api.newsdetailliApi(jsonData, {
        onSucess: (response) => {
          console.log(response.data.data);
          this.detailContent = response.data.data[0];
          if (this.detailContent.item_enclosure) {
            this.detailContent.fjArr = JSON.parse(
              this.detailContent.item_enclosure
            );
          }
        },
      });

      this.$api.newsdetailReadingApi(jsonData, {
        onSucess: (response) => {
          console.log(response.data.data);
        },
      });
    },
    fjclick(item) {
      if (item.path.indexOf("http") > -1) {
        window.open(item.path);
      } else {
        window.open("/obpm" + item.path);
      }
    },
    more(inx) {      
      let title=this.titleArr[inx].item_classify_name
      let url = `/static/signon/news/index.html?v=${Date.now()}#/DynamicPage${this.titleArr[inx].item_orderby}?id=${this.titleArr[inx].classificationid}`;    
      this.$parent.$parent.$parent.$parent.navtopmenuclick(
        6,
        "news",
        url,
        title
      );
      // 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;
    padding-right: 16px;
    display: flex;
    align-items: center;
    position: relative;
    .Title_container {
      min-width: 64px;
      margin-right: 40px;
      height: 1px;
    }
    .TitleName {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      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;
      white-space: nowrap;
      em {
        margin-right: 15px;
        font-size: 16px;
        padding-bottom: 10px;
        color: #999;
        cursor: pointer;
        &.active {
          border-bottom: 2px solid #4b5eff;
          color: #0f71ff;
        }
      }
    }
    .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;
    }
  }

  .htaBoxInfoDy {
    .newslistul {
      display: flex;
      flex-direction: column;
      padding-top: 6px;
      height: 214px;
      // overflow: auto;
      overflow: hidden;
      li.workli {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 14px;
        line-height: 30px;
        margin-bottom: 4px;
        padding-top:0px;
        padding-left: 16px;
        padding-right:16px;
        i{
           width: 4px;
           height: 4px;
           background: #0f71ff;
           border-radius: 6px;
           margin-right: 8px;
        }
        b{
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: normal;
          color: #333; 
        }
        em{
          color: #999;
        }
        // .left {
        //   display: flex;
        //   width: 288px;
        //   height: 180px;
        //   margin-top: 10px;
        //   em {
        //     position: relative;
        //     display: flex;
        //     img {
        //       width: 288px;
        //       height: 180px;
        //       border-radius: 8px;
        //     }
        //     strong {
        //       position: absolute;
        //       bottom: 0;
        //       left: 0;
        //       right: 0;
        //       background: rgba(0, 0, 0, 0.3);
        //       color: #fff;
        //       padding: 10px 0;
        //       text-indent: 10px;
        //       display: block;
        //       overflow: hidden;
        //       text-overflow: ellipsis;
        //       white-space: nowrap;
        //       width: 288px;
        //       border-bottom-left-radius: 8px;
        //       border-bottom-right-radius: 8px;
        //     }
        //   }
        // }
        // .right {
        //   display: flex;
        //   flex-direction: column;
        //   flex: 1;
        //   height: 180px;
        //   overflow-y: hidden;
        //   overflow-x: hidden;
        //   margin-top: 10px;
        //   .rli {
        //     width: 95%;
        //     margin-left: 16px;
        //     margin-bottom: 4px;
        //     display: flex;
        //     align-items: center;
        //     line-height: 22px;
        //     font-size: 14px;
        //     font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        //     font-weight: 400;
        //     color: #333333;
        //     i {
        //       width: 4px;
        //       height: 4px;
        //       background: #0f71ff;
        //       border-radius: 6px;
        //       margin-right: 8px;
        //     }
        //     b {
        //       flex: 1;
        //       overflow: hidden;
        //       text-overflow: ellipsis;
        //       white-space: nowrap;
        //       font-weight: normal;
        //       color: #333;
        //     }
        //   }
        // }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.newsContent {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  h3 {
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
    color: #000;
    font-size: 24px;
  }
  .linebottom {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.65);
    em {
      color: #0f71ff;
      margin-right: 30px;
    }
    b {
      strong {
        font-weight: normal;
      }
    }
  }
  .nr {
    font-size: 18px;
    line-height: 30px;
    color: #000;
    ::v-deep p{
      line-height: 30px!important;
      font-size: 18px!important;
    }
    ::v-deep img{
        max-width: 90%;
        height: auto;
    }    
    ::v-deep span{font-family:"SourceHanSansCNRegular,Helvetica Neue","Microsoft YaHei", Helvetica, Arial, sans-serif!important;font-size: 18px!important;}

    ::v-deep font{font-family:"SourceHanSansCNRegular,Helvetica Neue","Microsoft YaHei", Helvetica, Arial, sans-serif!important;font-size: 18px!important;}
    ::v-deep h2{font-family:"SourceHanSansCNRegular,Helvetica Neue","Microsoft YaHei", Helvetica, Arial, sans-serif!important;font-size: 18px!important;font-weight: normal;}
  }
  .fj {
    ul {
      li {
        cursor: pointer;
        color: #0e71ff;
        text-decoration: underline;
      }
    }
  }
}
</style>
