<template>
  <div class="mc-wrap">
    <div class="container-box">
      <div class="mc-top">
        <div class="mc-top-left">
          <el-row>
            <el-col :span="24">
              <el-col :span="16">
                <div class="grid-content bg-purple">
                  <el-carousel height="250px">
                    <el-carousel-item v-for="item in bannerData" :key="item.id">
                      <img
                        v-bind:src="item.src"
                        alt=""
                        style="width: 100%; height: 100%"
                      />
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="car-line-knowledge">
                  <div class="tit" v-if="noticeData.length != 0">
                    <span style="font-weight: bold">公告</span>
                    <span
                      style="
                        font-size: 10px;
                        color: #000;
                        margin-left: 20px;
                        cursor: pointer;
                      "
                      @click="jNotice('/noticec')"
                      >更多</span
                    >
                  </div>
                  <div
                    class="car-box"
                    v-for="item in noticeData"
                    :key="item.noticeId"
                  >
                    <!-- <el-tag> 公告 </el-tag> -->
                    <span
                      style="color: #0b82ff; font-size: 14px; cursor: pointer"
                      @click="uploadsee(item)"
                      >{{ item.noticeTitle }}</span
                    >
                    <span
                      style="
                        color: #999;
                        font-size: 12px;
                        float: right;
                        cursor: auto;
                      "
                    >
                      {{ item.auditTime }}
                      <!-- <span
                        style="
                          font-size: 10px;
                          color: #000;
                          margin-left: 20px;
                          cursor: pointer;
                        "
                        @click="jNotice('/noticec')"
                        >更多</span
                      > -->
                    </span>
                  </div>
                  <div v-if="noticeData.length == 0" style="text-align: center">
                    <div class="tit">
                      <span style="font-weight: bold">公告</span>
                    </div>
                    <img src="../../../assets/404.png" width="100%" alt="" />
                    <div>暂无数据</div>
                  </div>
                </div>
              </el-col>
            </el-col>

            <el-col :span="24">
              <hometask></hometask>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div class="if-box-top" v-if="ifrshow" @keyup.esc="ifrshow = false">
      <i class="el-icon-close" @click="ifrshow = false"></i>
      <iframe height="100%" width="100%" :src="srcsc"> </iframe>
    </div>

    <el-dialog
      title="公告"
      :visible.sync="dialogStatus"
      width="50%"
      :close-on-press-escape="false"
      :show-close="true"
      :destroy-on-close="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :fullscreen="true"
    >
      <el-form :model="infolist" ref="infolist">
        <div style="height: calc(100vh - 180px); overflow-y: scroll">
          <notiCheck
            :infolist="infolist"
            :datalist="datalist"
            :dialogInfo="dialogStatus"
          ></notiCheck>
        </div>
      </el-form>
      <div class="myfooter" style="text-align: right; margin: 20px 20px 0 0">
        <el-button @click="dialogStatus = false">确 定</el-button>
        <el-button @click="dialogStatus = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import uploadDown from "../../../components/uploadDown";
import notiCheck from "../../../components/notiCheck.vue";
import hometask from "./homeTask.vue";

export default {
  components: {
    uploadDown,
    notiCheck,
    hometask,
  },
  data() {
    return {
      activeIndex: "1",
      bannerData: [
        {
          src: require("../../../static/img/bannar-1.png"),
          id: "1",
        },
        {
          src: require("../../../static/img/bannar-1.png"),
          id: "2",
        },
        {
          src: require("../../../static/img/bannar-1.png"),
          id: "3",
        },
      ],
      calendar: new Date(),
      timeDay: 0,
      noticeData: [],
      knowledgeData: [],
      srcsc: "",
      ifrshow: false,
      infolist: {},
      infolistyj: {},
      dialogStatus: false,
      dialogStatusyj: false,
      diaKnowStatus: false,
      uploadstatus: false,
      datalist: {
        url: "/sysmgr/noticeatt/downfile",
        type: 2,
      },
      datalistk: {
        url: "/market/compatt/downfile",
        type: 1,
      },
      attList: [],
      niticList: [],
      datalistn: {
        url: "/sysmgr/noticeatt/downfile",
        type: 1,
      },
      noticStatus: false,
      noticList: {},
      typelist: [],
      userInfo: {},
      knowledgeData: [],
      tableDatayj: [],
      btnsts: null,
      disableStatus: false,
      visiblec: [],
      typeOptions: [],
      fileInfo: {
        limit: 10,
        url: "/market/cwo/upload",
        fileList: [],
      },
      btnctrlStatus: false,
    };
  },
  methods: {
    //跳转
    jNotice(v) {
      this.$router.push(v);
    },
    //获取公告
    getNotice() {
      this.$http({
        url: "/sysmgr/cnotice/queryListPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + 1 + '","pageSize":"5"}',
        },
        data: {
          sts: 2,
        },
      }).then((res) => {
        this.noticeData = res.data.data;
      });
    },

    //预览公告
    uploadsee(v) {
      this.infolist = v;
      this.$http({
        url: "/sysmgr/cnotice/queryInfo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          noticeId: v.noticeId,
        },
      }).then((res) => {
        this.uploadstatus = !this.uploadstatus;
        this.datalist.attList = [];
        this.datalist.attList = res.data.attList;
        this.dialogStatus = true;
      });
    },
  },
  mounted() {
    this.getNotice();
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.mc-wrap {
  box-sizing: border-box !important;
  margin: 0;
  height: calc(100vh - 120px);
  overflow: hidden;
  width: 100%;
  padding-right: 15px;

  .container-box {
    width: 100%;
    height: calc(100% - 40px);
    margin-top: 20px;
    overflow-y: scroll;
    padding: 0 0 0 15px;
  }

  .tit {
    height: 30px;
    background: #fff;
    line-height: 35px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
  }
}

.mc-top {
  display: flex;
  width: 100%;
}

.mc-wrap .mc-top-left {
  width: 100%;
  margin-right: 15px;
}

.car-line-knowledge {
  min-height: 250px;
  max-height: 250px;
  background: #fff;
  //   margin: 10px 0 0 0;
  margin-left: 10px;
  overflow-y: auto;

  .car-box {
    padding: 0 20px;
    line-height: 44px;
    height: 44px;
    color: #333;
    border-bottom: 1px solid #c1abfc;

    span {
      cursor: pointer;
      margin-right: 20px;
    }

    span:first-child {
      cursor: auto;
    }

    span:last-child {
      float: right;
      margin-right: 0;
    }
  }
}

.car-line {
  height: 40px;
  background: #fff;
  //   margin: 10px 0 0 0;

  .car-box {
    padding: 0 20px;
    line-height: 40px;
    color: #333;

    span {
      cursor: pointer;
      margin-right: 20px;
    }

    span:first-child {
      cursor: auto;
    }

    span:last-child {
      float: right;
      margin-right: 0;
    }
  }
}

.mc-wrap .mc-top-right {
  width: calc(20% - 15px);
  background-color: white;
  overflow: hidden;

  .inner-box {
    width: calc(100% + 20px);
    background-color: white;
    overflow-y: scroll;
  }
}

.swiper-pagination {
  position: absolute;
  bottom: 0;
}

.main-box .item {
  float: left;
  width: 50%;
}

.main-box {
  overflow: hidden;
}

#test-n2 #layui-laydate1 {
  width: 100% !important;
}

.mc-wrap .laydate-theme-grid .layui-laydate-content td {
  border: none !important;
  border-radius: 50%;
}

.mc-wrap .layui-laydate-main {
  width: 100% !important;
}

.mc-wrap .layui-laydate-content table {
  width: 100%;
}

.mc-wrap .layui-laydate-static {
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
}

.mc-wrap .laydate-day-mark::after {
  bottom: 0 !important;
  left: 45% !important;
  top: 50px !important;
}

.mc-wrap .laydate-day-mark {
  overflow: inherit !important;
  overflow: none !important;
}

.mc-wrap .layui-laydate .layui-this {
  background-color: #a3c1e5 !important;
}

#test-n2 {
  width: initial !important;
}

.tasksituation {
  border-bottom: 1px solid #f7f7f7;
}

.mc-wrap .tasksituation > .title {
  font-size: 16px;
  font-weight: 500;
  padding-top: 20px;
  padding-left: 20px;
  color: #333;
}

.mc-wrap .main-box .point {
  color: #ff6060;
  font-size: 30px;
  font-weight: 500;
}

.mc-wrap .main-box .item img {
  width: 100%;
}

.mc-wrap .describe {
  text-align: center;
}

.mc-wrap .describe .title {
  color: #999;
  font-size: 12px;
  padding: 5px 0;
}

.mc-wrap .describe .day {
  color: #0081cc;
  font-size: 16px;
}

.mc-wrap .swiper-pagination-bullet {
  width: 10% !important;
  border-radius: 0;
  height: 5px !important;
}

.mc-wrap .laydate-icon {
  display: none;
}

.mc-wrap .laydate-set-ym {
  text-align: left;
}

.mc-wrap .layui-laydate-header {
  padding: 0;
}

.mc-wrap .layui-laydate-header i {
  display: none !important;
}

.mc-wrap .data-box {
  position: relative;
}

.datetimeBox {
  .el-timeline {
    padding-left: 20px;
  }
}

.mc-wrap .operation {
  padding-right: 20px;
  cursor: pointer;
  margin-top: 10px;
  text-align: right;
}

.mc-wrap .layui-laydate-footer {
  display: none;
}

.mc-wrap .layui-timeline-axis {
  width: 50px !important;
  height: 18px;
  border-radius: 20px;
  top: 3px;
  color: white;
  line-height: 18px;
}

.mc-wrap .layui-timeline-content {
  margin-left: 35px;
}

.mc-wrap .layui-timeline {
  width: 80%;
  margin: 0 auto;
}

.mc-wrap .layui-timeline-item:before {
  left: 9% !important;
  width: 3px;
  background-color: #daeaf2;
  top: 3px;
}

.mc-wrap .layui-timeline-axis:hover {
  color: white !important;
}

.mc-wrap .ztree li a.curSelectedNode {
  border: none !important;
  background-color: white !important;
}

.point-baifen {
  font-size: 14px;
  margin-left: -5%;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

.info-line {
  width: 100%;
  display: block;
  padding-left: 20px;

  div {
    width: 50%;
    display: inline-block;
    overflow: hidden;
  }

  .mytxt {
    height: 40px;
    padding-left: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: calc(100% - 100px);
    float: left;
  }

  .mytxtinfo {
    line-height: 40px;
    height: auto;
    padding-left: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: calc(100% - 100px);
  }

  span {
    width: 80px;
    display: inline-block;
    text-align: left;
    float: left;

    i {
      color: red;
      display: inline-block;
      padding-right: 5px;
    }
  }

  .el-select,
  .el-input {
    width: calc(100% - 100px);
  }
}

.online {
  width: 100%;

  .el-select {
    width: calc(100% - 100px);
  }

  span {
    vertical-align: top;
  }

  .el-textarea {
    width: calc(100% - 100px);
  }
}
</style>
