<template>
  <section class="toAlertContainer">
    <section class="homeToAlert" v-for="(item,index) in cockPitListArr" :key="index">
      <div class="htaTitle"><strong>{{item.item_boardname}}</strong></div>
      <div class="htaBox">
        <ul>
          <li :class="['color'+its.libgcolor,its.item_url?'active':'']" v-for="(its,idx) in item.children" :key='idx'
            v-if='its.isshow' @click="listdetailli(its)">
            <span><i></i><em>{{its.item_title}}</em></span>
            <span>
              <strong v-if="its.count=='-1'"><img src='~@/assets/images/other/warnicon.png' /></strong>
              <strong v-else>{{its.count}}</strong>
            </span>
            <span class="detaillink" v-if="its.item_url"><img src="~@/assets/images/detailIcon.png" title='查看详情'></span>
          </li>
        </ul>
      </div>
    </section>

    <!-- 弹窗 -->
    <el-dialog :title="title" :visible.sync="DialogVisible" :close-on-click-modal="false" width="90%" class="dialogpic"
      center>
      <span class="dialogImg">
        <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 {
      cockPitListArr: [],
      DialogVisible: false,
      loading: false,
      title: "",
      url: `/static/portal/vue/index.html#/open?appId=__BW3MQkflZe4tN0xxpJZ&actionContent=____nOUaNbEmDDW5viPtO9d&opentarget=detail&linkType=00&realformId=__nOUaNbEmDDW5viPtO9d&docid=${this.docid}`, //跳转
    };
  },
  mounted() {
    this.toAlertList();
  },
  methods: {
    listdetailli(its) {
      if (its.item_url) {
        if (its.item_url.indexOf("http") > -1) {
          window.open(its.item_url);
          return;
        }
        this.DialogVisible = true;
        this.title = its.item_title;
        this.url = its.item_url;
      }
    },
    toAlertList() {
      let data = {
        name: "工作台",
        type: 2,
      };
      this.$api.v3CockPitListApi(data, {
        onSucess: (response) => {
          console.log(response.data);
          if (response.data.code == 0) {
            this.cockPitListArr = response.data.data;
            console.log(this.cockPitListArr);
            if (response.data.data.length) {
              console.log(response.data.data);
              response.data.data.forEach((item) => {
                if (item.children.length) {
                  item.children.forEach((its) => {
                    console.log(its);
                    switch (its.item_priority) {
                      case "紧急":
                        this.$set(its, "libgcolor", 1);
                        break;
                      case "高":
                        this.$set(its, "libgcolor", 2);
                        break;
                      case "中":
                        this.$set(its, "libgcolor", 3);
                        break;
                      case "低":
                        this.$set(its, "libgcolor", 4);
                        break;
                      default:
                        this.$set(its, "libgcolor", 4);
                    }
                    let dateli = {
                      id: its.id,
                    };
                    this.$api.v3CockPitChildId(dateli, {
                      onSucess: (res) => {
                        console.log(res.data.data.title);
                        if (res.data.code == 0) {
                          let sum = res.data.data && res.data.data.data[0].sum;
                          this.cockPitListArr.forEach((ims) => {
                            if (ims.children.length) {
                              ims.children.forEach((iks) => {
                                if (iks.item_title == res.data.data.title) {
                                  this.$set(iks, "count", sum);
                                  this.$set(
                                    iks,
                                    "isshow",
                                    res.data.data.isshow
                                  );
                                  this.$forceUpdate();
                                }
                              });
                            }
                          });
                          console.log(this.cockPitListArr);
                        }
                      },
                    });
                  });
                }
              });
            }
          }
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.commBoxBg {
  background: #ffffff;
  box-shadow: 0px 2px 6px -4px rgba(0, 0, 0, 0.12),
    0px 0px 16px 0px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}
.toAlertContainer {
  .homeToAlert {
    display: flex;
    flex-direction: column;
    @extend .commBoxBg;
    margin-bottom: 24px;
    .htaTitle {
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      // font-size: 18px;
      // color: rgba(0, 0, 0, 0.85);
      padding: 16px;
      strong {
        color: #3c4766;
        font-size: 16px;
      }
    }
    .htaBox {
      padding: 16px 0 16px 16px;
      ul {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        li {
          background: #f7f9ff;
          // width: 18%;
          min-width: 262px;
          height: 90px;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          padding: 16px;
          margin-right: 16px;
          margin-bottom: 16px;
          position: relative;
          &.active {
            cursor: pointer;
          }
          span {
            margin-bottom: 10px;
            i {
              width: 6px;
              height: 6px;
              background: #0f71ff;
              margin-right: 8px;
              display: inline-block;
              vertical-align: 2px;
              border-radius: 50%;
            }
            em {
              // color: rgba(0, 0, 0, 0.65);
              color: #82899e;
              font-size: 14px;
            }
            strong {
              margin-left: 14px;
              // color: rgba(0, 0, 0, 0.85);
              font-size: 19px;
              color: #3c4766;
            }
          }
          .detaillink {
            position: absolute;
            right: 5px;
            top: 40%;
            img {
              width: 20px;
              height: auto;
              image-rendering: -moz-crisp-edges;
              image-rendering: -o-crisp-edges;
              image-rendering: -webkit-optimize-contrast;
              image-rendering: crisp-edges;
              -ms-interpolation-mode: nearest-neighbor;
            }
          }
        }
        .color1 {
          background: #fff2f4;
          span {
            i {
              background: #ff2855;
            }
          }
        }
        .color2 {
          background: #fff9f6;
          span {
            i {
              background: #ff7946;
            }
          }
        }
        .color3 {
          background: #fef7e9;
          span {
            i {
              background: #ffbf00;
            }
          }
        }
        .color4 {
          background: #f7f9ff;
          span {
            i {
              background: #0f71ff;
            }
          }
        }
      }
    }
  }
  ::v-deep .el-dialog {
    margin: 0 auto !important;
    margin-top: 3% !important;
  }
  ::v-deep .el-dialog--center {
    text-align: left !important;
  }
}

.projectDocument {
  iframe {
    display: block; /* iframes are inline by default */
    background: none;
    border: none; /* Reset default border */
    height: 82vh; /* Viewport-relative units */
    width: 100%;
    padding-bottom: 0px;
  }
}
</style>
