<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'>查看更多>></span> -->
    </div>
    <div class="htaBoxIntel">
      <div class="tableContent" v-if='type==1'>
        <ul class="zslist">
          <li @click="DialogVisible = true;img('资源开发.png')"><i>1</i><em>资源开发</em><b>92.5</b></li>
          <li @click="DialogVisible = true;img('旅发公司.png')"><i>2</i><em>旅发公司</em><b>88.5</b></li>
          <li @click="DialogVisible = true;img('财务公司.png')"><i>3</i><em>财务公司</em><b>86</b></li>
          <li @click="DialogVisible = true;img('科研院.png')"><i>4</i><em>科研院</em><b>84</b></li>
          <li @click="DialogVisible = true;img('医疗健康.png')"><i>5</i><em>医疗健康</em><b>82.5</b></li>
          <li @click="DialogVisible = true;img('地产公司.png')"><i>6</i><em>地产公司</em><b>80.5</b></li>
          <li @click="DialogVisible = true;img('安防国际.png')"><i>7</i><em>安防国际</em><b>80</b></li>
          <li @click="DialogVisible = true;img('保险公司.png')"><i>8</i><em>保险公司</em><b>78.5</b></li>
          <li @click="DialogVisible = true;img('商服公司.png')"><i>9</i><em>商服公司</em><b>78</b></li>
          <li @click="DialogVisible = true;img('农发公司.png')"><i>10</i><em>农发公司</em><b>69</b></li>
          <li @click="DialogVisible = true;img('文教公司.png')"><i>11</i><em>文教公司</em><b>61</b></li>
        </ul>
      </div>

      <div class="tableContent" v-if='type==2'>
        <ul class="sdlist">
          <li v-for="(item,index) in sdData" :key='index' @click="DialogVisible2 = true;newsdetailli(item)">
            {{item.item_title}}</li>
        </ul>
      </div>

    </div>

    <!-- 弹窗 -->
    <el-dialog title="" :visible.sync="DialogVisible" :close-on-click-modal="false" width="90%" class="dialogpic"
      center>
      <span class="dialogImg"><img :src="src" /></span>
    </el-dialog>

    <!-- 弹窗 -->
    <el-dialog title="" :visible.sync="DialogVisible2" :close-on-click-modal="false" width="90%" 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: 2 }],
      inx: 0,
      params: {
        //搜索条件
        pageIndex: 1,
        pageSize: 3,
        total: 0,
      },
      type: 2,
      tableData: [],
      tableData2: [],
      tableData3: [],
      sdData: [],
      DialogVisible: false,
      DialogVisible2: false,
      src: "",
      detailContent: {},
      cateId: "w50Bfs68e3npVlrTDF1--__j0Bcl6YXcZ24REitb00", //示范试点项目
    };
  },
  mounted() {
    this.sdlist();
  },
  methods: {
    img(url) {
      this.src = require(`../assets/images/intelImgs/${url}`);
    },
    titleClick(item, index) {
      this.inx = index;
      this.type = item.type;
    },
    sdlist() {
      let jsonData = { classificationid: this.cateId, ...this.params };
      this.$api.newslistApi(jsonData, {
        onSucess: (response) => {
          console.log(response);
          this.sdData = response.data.data;
        },
      });
    },
    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() {
      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;
  .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: 0px solid #ff7946;
          color: #ff7946;
        }
      }
    }
    .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;
    }
  }

  .htaBoxIntel {
    ul {
      &.zslist {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 158px;
        overflow: auto;
        li {
          display: flex;
          line-height: 24px;
          padding: 5px 0;
          cursor: pointer;
          i {
            width: 11px;
            margin-left: 16px;
            margin-right: 16px;
          }
          em {
            flex: 1;
          }
          b {
            width: 30px;
            margin-right: 40px;
            color: rgba(0, 0, 0, 0.85);
          }
        }
      }
    }
  }

  .sdlist {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 158px;
    overflow: auto;
    li {
      padding: 5px;
      cursor: pointer;
      line-height: 24px;
      position: relative;
      padding-left: 25px;
      &::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background: #ccc;
        position: absolute;
        left: 10px;
        top: 12px;
      }
    }
  }

  .dialogImg {
    img {
      width: 100%;
    }
  }
}
</style>
<style lang="scss">
.dialogpic .el-dialog--center .el-dialog__body {
  height: 700px;
  overflow: auto;
}
</style>
<style lang="scss" scoped>
.newsContent {
  display: flex;
  flex-direction: column;
  h3 {
    text-align: center;
    margin-bottom: 10px;
  }
  .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 {
  }
  .fj {
    ul {
      li {
        cursor: pointer;
        color: #0e71ff;
        text-decoration: underline;
      }
    }
  }
}
</style>