<template>
  <el-container class="is-vertical fullheight">
    <el-container style="overflow-x: hidden; overflow-y: hidden">
      <div class="home-page">
        <div class="home-header flex">
          <div class="home-header-left cardBox">
            <img src="@/assets/img/homePage/avater.png" alt="" class="avater" />
            <div class="header-left-flex">
              <div class="basic">
                <div class="basic-title">Admin，你好！欢迎登录系统</div>
                <div class="basic-height flex">
                  <img
                    src="@/assets/img/homePage/company.png"
                    alt=""
                    class="icon-style"
                  />
                  <div class="basic-content">重庆智慧调度中心-监控中心</div>
                </div>
                <div class="basic-height flex">
                  <img
                    src="@/assets/img/homePage/user.png"
                    alt=""
                    class="icon-style"
                  />
                  <div class="basic-content">用户角色：超级管理员</div>
                </div>
              </div>
              <div class="time">最近登录时间：2025-02-18 17:11:23</div>
            </div>
          </div>
          <div class="home-header-right cardBox">
            <div class="flex">
              <img
                src="@/assets/img/homePage/title1.png"
                alt=""
                class="icon-style"
              />
              <div class="home-title-style">任务管理</div>
            </div>
            <div class="task-manger">
              <div
                class="task-container flex cursor"
                @click="taskChange(item)"
                :title="item.name"
                v-for="(item, index) in taskList"
                :key="index"
              >
                <img
                  :src="
                    require('@/assets/img/homePage/task' + (index + 1) + '.png')
                  "
                  alt=""
                  class="task-img"
                />
                <div>
                  <div class="task-title">{{ item.name }}</div>
                  <div
                    :class="index === 2 ? 'task-value overtime' : 'task-value'"
                  >
                    {{ item.value }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="home-contain cardBox">
          <div class="home-contain-flex">
            <div class="flex">
              <img
                src="@/assets/img/homePage/title2.png"
                alt=""
                class="icon-style"
              />
              <div class="home-title-style">快捷功能</div>
            </div>
            <div class="flex cursor">
              <img
                src="@/assets/img/homePage/edit.png"
                alt=""
                class="edit-style"
              />
              <div class="pspadEditor">功能编辑</div>
            </div>
          </div>
          <div class="flex">
            <div
              class="shortcutFunction cursor"
              v-for="(item, index) in systemMenu"
              :key="index"
              @click="handleMenuChange(item)"
            >
              <img
                :src="
                  require('@/assets/img/homePage/feature_' +
                    item.systemIconImg +
                    '.png')
                "
                alt=""
                class="system-img"
              />
              <div class="system-text">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="home-footer flex">
          <div class="home-footer-left cardBox">
            <div class="home-footer-header">
              <div class="flex">
                <img
                  src="@/assets/img/homePage/title3.png"
                  alt=""
                  class="icon-style"
                />
                <div class="home-title-style">企业新闻</div>
              </div>
              <div class="flex andMore" @click="checkListChange('new')">
                <div class="evenMore">更多</div>
                <img
                  src="@/assets/img/homePage/arrow2.png"
                  alt=""
                  class="arrow-style"
                />
              </div>
            </div>
            <div class="news-body">
              <div
                class="news-left cursor"
                title="昆仑集团召开复工复产动员会"
                @click="newsChange('1')"
              >
                <img src="@/assets/img/homePage/work.jpg" alt="" />
                <div class="news-title">昆仑集团召开复工复产动员会</div>
                <div class="new-content">
                  2月10日，昆仑集团在蓉召开复工复产动员会，动员全体干部职工收心归位、抖擞精神，鼓足干劲、加
                </div>
              </div>
              <div class="new-right">
                <div
                  class="company-news cursor"
                  v-for="(item, index) in newsList"
                  :key="index"
                  @click="newsChange(item.id)"
                  :title="item.title"
                >
                  <div class="company-title">{{ item.title }}</div>
                  <div class="company-content">{{ item.content }}</div>
                  <div class="company-flex">
                    <div class="company-time">{{ item.time }}</div>
                    <img
                      src="@/assets/img/homePage/arrow1.png"
                      alt=""
                      class="company-arrow"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="home-footer-right cardBox">
            <div class="home-footer-header">
              <div class="flex">
                <img
                  src="@/assets/img/homePage/title4.png"
                  alt=""
                  class="icon-style"
                />
                <div class="home-title-style">通知公告</div>
              </div>
              <div class="flex andMore" @click="checkListChange('notice')">
                <div class="evenMore">更多</div>
                <img
                  src="@/assets/img/homePage/arrow2.png"
                  alt=""
                  class="arrow-style"
                />
              </div>
            </div>
            <div class="notice-contain">
              <div
                class="notice-body cursor"
                v-for="(item, index) in noticeList"
                :key="index"
                :title="item.title"
                @click="noticeChange(item.id)"
              >
                <div class="notice-time">
                  <div class="notice-month">{{ item.month }}</div>
                  <div class="notice-year">{{ item.year }}</div>
                </div>
                <div class="notice-flex">
                  <div class="notice-title">{{ item.title }}</div>
                  <div class="notice-content">{{ item.content }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-container>
  </el-container>
</template>

<script>
import Navigator from '@/components/layout/Navigator/index.vue'
import API from '@/api/homePage'
import Portal from '@/api/portal.js'
import {mapState} from 'vuex'
import {
  formatSystemIconImg,
  processFirstChild,
  systemJump
} from '@/utils/system.js'

export default {
  name: 'HomePage',
  components: {
    Navigator
  },
  computed: {
    ...mapState({
      currentUser: state => state.user.currentUserDetail,
      // 重构菜单信息
      systemMenu(state) {
        const {platSystemMenus = [], cockpitMenus = []} = state.menu
        const cockpitMenusWrapper = []
        if (cockpitMenus.length) {
          const {name, ...item} = processFirstChild(cockpitMenus)
          cockpitMenusWrapper.push({
            name: '领导驾驶舱',
            systemIconImg: 'jsc',
            ...item
          })
        }
        const platSystemMenusWidthIcon = platSystemMenus.map(item => {
          item.systemIconImg = formatSystemIconImg(item.name)
          return item
        })
        return cockpitMenusWrapper.concat(platSystemMenusWidthIcon)
      },
      userInfo: state => state.login.currentUser
    })
  },
  data() {
    return {
      currentMenu: 'homePage',
      taskList: [
        {
          name: '待办事项',
          value: 1
        },
        {
          name: '已办事项',
          value: 68
        },
        {
          name: '超时任务',
          value: 0
        },
        {
          name: '任务完成率',
          value: '98%'
        }
      ],
      featureList: [
        '领导驾驶舱',
        '养护业务系统',
        '收费业务系统',
        '巡查业务救援',
        '视频监控',
        '安全生产业务系统',
        '机电业务系统'
      ],
      newsList: [
        {
          id: '2',
          title:
            '昆仑集团党委理论学习中心组举行2025年第1次集中学习暨专题研讨会',
          content:
            '1月25日，昆仑集团党委理论学习中心组举行2025年第1次集中学习暨专题研讨会，深入学习贯彻党中央全面从严治党要求，认真学习习近平总书记近期重要讲话精神，传达学习中国铁建2025年党的建设暨党风廉政建设和反腐',
          time: '2025-01-25'
        },
        {
          id: '3',
          title: '昆仑集团党委召开2024年度党组织书记抓基层党建述职评议大会',
          content:
            '1月17日，昆仑集团党委在蓉召开2024年度党组织书记抓基层党建述职评议大会，深入学习贯彻习近平总书记在全国国有企业党的建设工作会议上的重要讲话精神，全面检验一年来所属各单位党建工作成果，切实推动全面从严治党向纵深发展，',
          time: '2025-01-17'
        }
      ],
      noticeList: [
        {
          id: '4',
          year: '2025',
          month: '02-14',
          title:
            '桂东至新田（宁远）高速公路郴州至桂阳段工程项目土建工程施工招标公告',
          content:
            '桂东至新田（宁远）高速公路郴州至桂阳段工程已由湖南省发展和改革委员会（湘发改基础〔2023〕845号）批准建设，项目初步设计已批复，招标人为中国铁建昆仑投资集团有限公司桂新工程总承包指挥部。项目已具备招标条件，受招标人委托，北京中铁国际招标有限公司现对该项目的土建工程施工进行招标'
        },
        {
          id: '5',
          year: '2025',
          month: '01-13',
          title:
            '内江至大足高速公路（四川境）项目竣工环境保护验收调查报告验收公示',
          content:
            '根据《国务院关于修改<建设项目环境保护管理条例>的决定》及企业自行验收相关规定和要求，于2025年1月14日将本项目验收情况予以公告，公示期为公示之日起20个工作日，如有建议意见，请于公示期内提出。'
        },
        {
          id: '6',
          year: '2024',
          month: '12-05',
          title: '中国铁建昆仑投资集团有限公司企业形象片拍摄制作项目采购公告',
          content:
            '中国铁建昆仑投资集团有限公司企业形象片拍摄制作项目主要内容包括：制定宣传片拍摄制作方案及宣传文本，拍摄宣传片所需视频素材，提供宣传片所需配音配乐，完成宣传片剪辑制作。'
        },
        {
          id: '7',
          year: '2024',
          month: '08-27',
          title:
            '贵州省乌当（羊昌）至长顺高速公路PPP项目交通安全设施工程施工招标评标结果公示',
          content:
            '贵州省乌当（羊昌）至长顺高速公路PPP项目交通安全设施工程施工招标，评标委员会根据相关法律、法规的规定和招标文件载明的评标办法完成评标工作，现将评标结果公示如下：'
        }
      ]
    }
  },
  created() {},
  methods: {
    //任务跳转列表页面
    taskChange() {
      this.$router.push('/platLayout/taskList')
    },
    // 更多跳转
    checkListChange(type) {
      this.$router.push({path: '/platLayout/infoList', query: {type}})
    },
    // 新闻详情
    newsChange(id) {
      this.$router.push({path: '/platLayout/detailsPage', query: {id}})
    },
    // 公告详情
    noticeChange(id) {
      this.$router.push({path: '/platLayout/detailsPage', query: {id}})
    },

    async handleMenuChange(item) {
      systemJump(item)
    },
    processMenu(menu) {
      const code = menu.href.split('#/')[1] || ''
      const path = menu.href.split('#/')[0] || ''
      return {code, path}
    },
    processRoutingFirstChild(routes) {
      for (const item of routes) {
        if (item.children && item.children.length) {
          const firstChild = this.processRoutingFirstChild(item.children)
          if (firstChild) {
            return firstChild
          }
        } else {
          return item
        }
      }
      return null
    }
  }
}
</script>

<style scoped lang="scss">
.home-page {
  width: 100%;
  height: 100vh;
  background: #eef8ff;
  padding: 16px 20px;
  box-sizing: border-box;
  .andMore {
    cursor: pointer;
  }
  .andMore:hover .evenMore {
    color: #0963c4 !important;
  }
  .edit-style {
    width: 12px;
    height: 14px;
    margin-right: 4px;
  }
  .arrow-style {
    width: 6px;
    height: 10px;
  }
  .cursor {
    cursor: pointer;
  }
  .home-title-style {
    color: #1150a0;
    font-size: 18px;
    font-weight: 700;
  }
  .icon-style {
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }
  .cardBox {
    background: #fff;
    box-shadow: 4px 4px 10px 0 rgba(53, 152, 220, 0.1);
    border-radius: 16px;
  }
  .home-header {
    width: 100%;
    height: 250px;
    margin-bottom: 16px;
    .home-header-left {
      display: flex;
      width: 677px;
      height: 100%;
      padding: 40px;
      margin-right: 16px;
      box-sizing: border-box;
      .avater {
        width: 170px;
        height: 170px;
        margin-right: 40px;
        border-radius: 20px;
      }
      .header-left-flex {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .basic {
          .basic-title {
            font-size: 22px;
            color: #3399ff;
            font-weight: 700;
            margin-bottom: 16px;
          }
          .basic-content {
            font-size: 16px;
            color: #000000;
          }
          .basic-height {
            line-height: 32px;
          }
        }
        .time {
          font-size: 14px;
          color: #999999;
        }
      }
    }
    .home-header-right {
      flex: 1;
      height: 100%;
      padding: 16px;
      box-sizing: border-box;
      .task-manger {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        .task-container {
          width: 220px;
          height: 130px;
          background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(219, 231, 255, 0.6) 69%,
            rgba(255, 255, 255, 0.5) 100%
          );
          box-shadow: 0 3px 15px 0 rgba(0, 60, 180, 0.15);
          border-radius: 20px;
          .task-img {
            width: 104px;
            height: 104px;
            margin: 20px 5px;
          }
          .task-title {
            font-size: 16px;
            color: #0f2a4d;
            font-weight: 700;
            margin-bottom: 10px;
          }
          .task-value {
            font-size: 30px;
            color: #3399ff;
            font-weight: 700;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
          }
          .overtime {
            color: #ff4b87;
          }
        }
      }
    }
  }
  .home-contain {
    width: 100%;
    height: 220px;
    margin-bottom: 16px;
    padding: 16px;
    box-sizing: border-box;
    .home-contain-flex {
      display: flex;
      justify-content: space-between;
      padding-bottom: 16px;
      border-bottom: 1px solid;
      border-image: linear-gradient(270deg, #ffffff, #d0dded) 1;
      .pspadEditor {
        font-size: 14px;
        color: #0f2a4d;
      }
    }
    .shortcutFunction {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 35px 40px;
      .system-img {
        width: 64px;
        height: 64px;
      }
      .system-text {
        font-size: 16px;
        color: #0f2a4d;
      }
    }
  }
  .home-footer {
    width: 100%;
    height: calc(100vh - 250px - 220px - 64px - 60px);
    .home-footer-header {
      display: flex;
      justify-content: space-between;
      padding-bottom: 16px;
      border-bottom: 1px solid #cfdcec;
      .evenMore {
        color: #999999;
        font-size: 14px;
        margin-right: 2px;
      }
    }
    .home-footer-left {
      width: 928px;
      height: 100%;
      margin-right: 16px;
      padding: 16px;
      box-sizing: border-box;
      .news-body {
        height: calc(100% - 32px);
        display: flex;
        padding: 16px 0;
        box-sizing: border-box;
        .news-left {
          width: 300px;
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            width: 300px;
            height: 180px;
            border-radius: 8px;
          }
          .news-title {
            font-size: 20px;
            color: #0963c4;
            font-weight: 700;
            margin: 12px 0;
          }
          .new-content {
            width: 100%;
            font-size: 15px;
            color: #999999;
            line-height: 22px;
            display: -webkit-box; /* 使用 flexbox */
            -webkit-box-orient: vertical; /* 垂直排列子元素 */
            -webkit-line-clamp: 2; /* 限制显示的行数为 2 */
            overflow: hidden; /* 隐藏超出部分 */
            text-overflow: ellipsis;
          }
        }
        .new-right {
          flex: 1;
          margin-left: 16px;
          .company-news {
            width: 100%;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            padding: 10px;
            box-sizing: border-box;
            height: 50%;
            .company-title {
              font-size: 20px;
              color: #333333;
              font-weight: 700;
              display: -webkit-box; /* 使用 flexbox */
              -webkit-box-orient: vertical; /* 垂直排列子元素 */
              -webkit-line-clamp: 1; /* 限制显示的行数为 2 */
              overflow: hidden; /* 隐藏超出部分 */
              text-overflow: ellipsis;
            }
            .company-content {
              font-size: 15px;
              color: #999999;
              line-height: 22px;
              display: -webkit-box; /* 使用 flexbox */
              -webkit-box-orient: vertical; /* 垂直排列子元素 */
              -webkit-line-clamp: 2; /* 限制显示的行数为 2 */
              overflow: hidden; /* 隐藏超出部分 */
              text-overflow: ellipsis;
              margin: 8px 0;
            }
            .company-flex {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .company-time {
                font-size: 15px;
                color: #999999;
              }
              .company-arrow {
                width: 18px;
                height: 12px;
              }
            }
          }
          .company-news:nth-of-type(2) {
            margin-top: 10px;
          }
          .company-news:hover .company-title {
            color: #0963c4;
          }
          .company-news:hover {
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
          }
        }
      }
    }
    .home-footer-right {
      flex: 1;
      height: 100%;
      padding: 16px;
      box-sizing: border-box;
      .notice-contain {
        height: calc(100% - 40px);
      }
      .notice-body {
        height: 17%;
        display: flex;
        line-height: 26px;
        padding: 12px 0;
        align-items: center;
        border-bottom: 1px solid;
        border-image: linear-gradient(270deg, #ffffff, #d0dded) 1;
        .notice-time {
          display: flex;
          flex-direction: column;
          width: 68px;
          margin-right: 16px;
        }
        .notice-flex {
          flex: 1;
          display: flex;
          flex-direction: column;
        }
        .notice-month {
          color: #999999;
          font-size: 20px;
          font-weight: 700;
          margin-top: 2px;
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        }
        .notice-year {
          color: #999999;
          font-size: 14px;
          font-weight: 700;
        }
        .notice-title {
          color: #0f2a4d;
          font-size: 16px;
          display: -webkit-box; /* 使用 flexbox */
          -webkit-box-orient: vertical; /* 垂直排列子元素 */
          -webkit-line-clamp: 1; /* 限制显示的行数为 2 */
          overflow: hidden; /* 隐藏超出部分 */
          text-overflow: ellipsis;
        }
        .notice-content {
          color: #a1a9b2;
          font-size: 16px;
          display: -webkit-box; /* 使用 flexbox */
          -webkit-box-orient: vertical; /* 垂直排列子元素 */
          -webkit-line-clamp: 1; /* 限制显示的行数为 2 */
          overflow: hidden; /* 隐藏超出部分 */
          text-overflow: ellipsis;
        }
      }
      .notice-body:last-child {
        border: none;
      }
      .notice-body:hover {
        border-radius: 10px;
      }
      .notice-body:hover .notice-title {
        color: #0963c4;
      }
      .notice-body:hover .notice-month {
        color: #0963c4;
      }
      .notice-body:hover .notice-year {
        color: #0963c4;
      }
    }
  }
}
</style>
