<template>
  <div class="home-page">
    <div class="task-body">
      <!-- 左侧菜单 -->
      <div class="menu">
        <div class="taskManager">任务管理</div>
        <div
          v-for="(item, index) in menuItems"
          :key="index"
          class="menu-item"
          @click="selectMenu(item.value)"
        >
          <img :src="item.url" alt="" class="menu-img">
          <div v-if="item.badge !== 0">
            <el-badge  :value="item.badge" class="badge">
              <div :class="['menu-text', { active: selectedMenu === item.value }]">{{ item.label }}</div>
            </el-badge>
          </div>
          <div v-else :class="['menu-text', { active: selectedMenu === item.value }]">{{ item.label }}</div>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="content">
        <div v-if="newsList.length>0" class="task-relative">
          <div>
            <div class="company-news" v-for="(item,index) in newsList" :key="index" :title="item.title" @click="taskChange(item)">
              <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 class="task-page">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="newsList.length">
            </el-pagination>
          </div>
        </div>
        <el-empty v-else description="暂无数据" class="task-empty"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedMenu: 'new',
      menuItems: [
        { label: '企业新闻', value: 'new',url: require('@/assets/img/homePage/new1.png') },
        { label: '通知公告', value: 'notice',url: require('@/assets/img/homePage/new2_s.png')},
      ],
      newsList:[],
      page:1,
    }
  },
  created() {
    this.selectedMenu = this.$route.query.type

    if(this.selectedMenu === 'new'){
      this.newsList = [{
        id:'1',
        title:'昆仑集团召开复工复产动员会',
        content:'2月10日，昆仑集团在蓉召开复工复产动员会，动员全体干部职工收心归位、抖擞精神，鼓足干劲、加压奋进，以“开局就是决战、起步就要冲刺”的昂扬姿态，紧紧抓住机遇、顺势而上，全力实现一季度“开门红”，奋力推动集团公司高质量发展实现良好开局。',
        time:'2025-02-11'
      },{
        id:'2',
        title:'昆仑集团党委理论学习中心组举行2025年第1次集中学习暨专题研讨会',
        content:'1月25日，昆仑集团党委理论学习中心组举行2025年第1次集中学习暨专题研讨会，深入学习贯彻党中央全面从严治党要求，认真学习习近平总书记近期重要讲话精神，传达学习中国铁建2025年党的建设暨党风廉政建设和反腐败工作会议精神及有关文件精神，并结合2024年中国铁建党委巡视审计发现的问题及巡视通报，开展专题研讨。昆仑集团党委书记、董事长贾洪主持会议。',
        time:'2025-01-25'
      },{
        id:'3',
        title:'昆仑集团党委召开2024年度党组织书记抓基层党建述职评议大会',
        content:'1月17日，昆仑集团党委在蓉召开2024年度党组织书记抓基层党建述职评议大会，深入学习贯彻习近平总书记在全国国有企业党的建设工作会议上的重要讲话精神，全面检验一年来所属各单位党建工作成果，切实推动全面从严治党向纵深发展，以高质量党建引领保障高质量发展。',
        time:'2025-01-17'
      }]
    }else{
      this.newsList = [{
        id:'4',
        time:'2025-02-14',
        title:'桂东至新田（宁远）高速公路郴州至桂阳段工程项目土建工程施工招标公告',
        content:'桂东至新田（宁远）高速公路郴州至桂阳段工程已由湖南省发展和改革委员会（湘发改基础〔2023〕845号）批准建设，项目初步设计已批复，招标人为中国铁建昆仑投资集团有限公司桂新工程总承包指挥部。项目已具备招标条件，受招标人委托，北京中铁国际招标有限公司现对该项目的土建工程施工进行招标'
      },{
        id:'5',
        time:'2025-01-13',
        title:'内江至大足高速公路（四川境）项目竣工环境保护验收调查报告验收公示',
        content:'根据《国务院关于修改<建设项目环境保护管理条例>的决定》及企业自行验收相关规定和要求，于2025年1月14日将本项目验收情况予以公告，公示期为公示之日起20个工作日，如有建议意见，请于公示期内提出。'
      },{
        id:'6',
        time:'2024-12-05',
        title:'中国铁建昆仑投资集团有限公司企业形象片拍摄制作项目采购公告',
        content:'中国铁建昆仑投资集团有限公司企业形象片拍摄制作项目主要内容包括：制定宣传片拍摄制作方案及宣传文本，拍摄宣传片所需视频素材，提供宣传片所需配音配乐，完成宣传片剪辑制作。'
      },{
        id:'7',
        time:'2024-08-27',
        title:'贵州省乌当（羊昌）至长顺高速公路PPP项目交通安全设施工程施工招标评标结果公示',
        content:'贵州省乌当（羊昌）至长顺高速公路PPP项目交通安全设施工程施工招标，评标委员会根据相关法律、法规的规定和招标文件载明的评标办法完成评标工作，现将评标结果公示如下：'
      }]
    }
  },
  methods: {
    // 左边菜单点击
    selectMenu(value) {
      this.selectedMenu = value
      if(value === 'new'){
        this.newsList = [{
          id:'1',
          title:'昆仑集团召开复工复产动员会',
          content:'2月10日，昆仑集团在蓉召开复工复产动员会，动员全体干部职工收心归位、抖擞精神，鼓足干劲、加压奋进，以“开局就是决战、起步就要冲刺”的昂扬姿态，紧紧抓住机遇、顺势而上，全力实现一季度“开门红”，奋力推动集团公司高质量发展实现良好开局。',
          time:'2025-02-11'
        },{
          id:'2',
          title:'昆仑集团党委理论学习中心组举行2025年第1次集中学习暨专题研讨会',
          content:'1月25日，昆仑集团党委理论学习中心组举行2025年第1次集中学习暨专题研讨会，深入学习贯彻党中央全面从严治党要求，认真学习习近平总书记近期重要讲话精神，传达学习中国铁建2025年党的建设暨党风廉政建设和反腐败工作会议精神及有关文件精神，并结合2024年中国铁建党委巡视审计发现的问题及巡视通报，开展专题研讨。昆仑集团党委书记、董事长贾洪主持会议。',
          time:'2025-01-25'
        },{
          id:'3',
          title:'昆仑集团党委召开2024年度党组织书记抓基层党建述职评议大会',
          content:'1月17日，昆仑集团党委在蓉召开2024年度党组织书记抓基层党建述职评议大会，深入学习贯彻习近平总书记在全国国有企业党的建设工作会议上的重要讲话精神，全面检验一年来所属各单位党建工作成果，切实推动全面从严治党向纵深发展，以高质量党建引领保障高质量发展。',
          time:'2025-01-17'
        }]
      }else{
        this.newsList = [{
          id:'4',
          time:'2025-02-14',
          title:'桂东至新田（宁远）高速公路郴州至桂阳段工程项目土建工程施工招标公告',
          content:'桂东至新田（宁远）高速公路郴州至桂阳段工程已由湖南省发展和改革委员会（湘发改基础〔2023〕845号）批准建设，项目初步设计已批复，招标人为中国铁建昆仑投资集团有限公司桂新工程总承包指挥部。项目已具备招标条件，受招标人委托，北京中铁国际招标有限公司现对该项目的土建工程施工进行招标'
        },{
          id:'5',
          time:'2025-01-13',
          title:'内江至大足高速公路（四川境）项目竣工环境保护验收调查报告验收公示',
          content:'根据《国务院关于修改<建设项目环境保护管理条例>的决定》及企业自行验收相关规定和要求，于2025年1月14日将本项目验收情况予以公告，公示期为公示之日起20个工作日，如有建议意见，请于公示期内提出。'
        },{
          id:'6',
          time:'2024-12-05',
          title:'中国铁建昆仑投资集团有限公司企业形象片拍摄制作项目采购公告',
          content:'中国铁建昆仑投资集团有限公司企业形象片拍摄制作项目主要内容包括：制定宣传片拍摄制作方案及宣传文本，拍摄宣传片所需视频素材，提供宣传片所需配音配乐，完成宣传片剪辑制作。'
        },{
          id:'7',
          time:'2024-08-27',
          title:'贵州省乌当（羊昌）至长顺高速公路PPP项目交通安全设施工程施工招标评标结果公示',
          content:'贵州省乌当（羊昌）至长顺高速公路PPP项目交通安全设施工程施工招标，评标委员会根据相关法律、法规的规定和招标文件载明的评标办法完成评标工作，现将评标结果公示如下：'
        }]
      }
    },
    // 右边内容点击
    taskChange(item){
      this.$router.push({ path: '/platLayout/detailsPage', query: { id: item.id } });
    },
    handleSizeChange(){},
    handleCurrentChange(){}
  }
}
</script>

<style scoped lang="scss">
.home-page{
  width: 100%;
  background: #F5F8FA;
  display: flex;
  justify-content: center;
  .task-body{
    width: 1200px;
    display: flex;
    margin: 16px 0;
  }
}
.menu {
  width: 200px;
  padding: 16px;
  box-sizing: border-box;
  margin-right: 10px;
  background-color: #ffffff;
  border-radius: 10px;
  .taskManager{
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #333333;
    padding-bottom: 16px;
    border-bottom: 1px solid #E6E6E6;
  }
  .menu-item {
    display: flex;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
    cursor: pointer;
    .menu-img{
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
    .menu-text{
      transition: all 0.3s;
      color: #999999;
      font-size: 18px;
      font-family: Microsoft YaHei, Microsoft YaHei;
    }
  }
  .menu-item:hover{
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  }
  .menu-item:hover .menu-text{
    color: #1150A0;
  }
  .menu-item .active  {
    color: #1150A0;
  }
}
.content {
  width: 990px;
  padding: 16px;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #fff;
  .task-relative{
    position: relative;
    top: 0;
    left: 0;
  }
  .task-page{
    width: calc(990px - 32px);
    text-align: center;
    position: fixed;
    bottom: 32px;
  }
  .task-empty{
    margin-top: 150px;
  }
  .company-news{
    width: 100%;
    //box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 16px;
    box-sizing: border-box;
    cursor: pointer;
    margin-top: 16px;
    border-bottom: 1px solid;
    border-image: linear-gradient(270deg,#ffffff,#D0DDED) 1;
    .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: 25px;
      display: -webkit-box;          /* 使用 flexbox */
      -webkit-box-orient: vertical; /* 垂直排列子元素 */
      -webkit-line-clamp: 2;        /* 限制显示的行数为 2 */
      overflow: hidden;              /* 隐藏超出部分 */
      text-overflow: ellipsis;
      margin: 12px 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:first-child{
    margin-top: 0;
  }
  .company-news:hover .company-title{
    color: #0963C4;
  }
  .company-news:hover{
    border: none;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  }
}
</style>
