<template>
  <div id="searchPage">
    <Header :searchBarState="true"/>
    <div class="main">
      <div class="left">
        <div class="th-title">筛选</div>
        <div class="form-box">
          <div class="search-bar">
            <label>来源</label>
            <a-input-search placeholder="所有系统" @search="onSearch" />
          </div>
          <div class="search-bar">
            <label>类型</label>
            <a-input-search placeholder="所有类型" @search="onSearch" />
          </div>
          <div class="search-bar">
            <label>发布时间</label>
            <!-- <a-input-search placeholder="" @search="onSearch" /> -->
            <a-range-picker @change="onChange" />
          </div>
        </div>
        <div class="hot-search">
          <h2 class="hot-title">热搜</h2>
          <ul class="hot-list">
            <li v-for="(item, index) in hotListData" :key="index">
              <span>{{ item.sort }}</span>
              <a :title="item.title" href="#">{{ item.title }}</a>
            </li>

          </ul>

        </div>
      </div>
      <div class="right">
        <!-- <div class="sift-bar">
          排序方式：
          <a :class="[{active:activeIndex === index},'tag']" v-for="(item,index) in tagData" @click="selectItem(item,index)" :key="index">
            {{ item }}
            <i></i>
          </a>
        </div>
        <div class="th-title-list">
          <div>标题信息</div>
          <div>类型</div>
          <div>来源</div>
          <div>发布人</div>
          <div>发布时间</div>
        </div> -->

        <div class="list-box">
          <List :dataSoure="listDataSoure" />
        </div>

      </div>

    </div>
    <Footer />
  </div>
</template>
<script>
import '../systemNavComponents/js'

import Header from '../systemNavComponents/Header'
import Footer from '../systemNavComponents/Footer'
import List from './components/List'

export default {
  components: {
    Header,
    Footer,
    List
  },
  data () {
    return {
      activeIndex: 0,
      tagData: ['默认', '最新'],
      hotListData: [
        { sort: '1', title: '曹妃甸公司唐山LNG外输管线项目主体焊接完成' },
        { sort: '2', title: '河北省委副书记、代省长王正谱到曹妃甸公司宣讲党的十九届六中全会精神并调研检查' },
        { sort: '3', title: '新港公司签订首单长期LNG资源采购协议' },
        { sort: '4', title: '公司召开2022年度工资集体协商会议' },
        { sort: '5', title: '新天绿色能源股份有限公司荣获2021“金责奖”最佳环境（E）责任奖' }
      ],

      listDataSoure: [
        {
          title: '众志成城 同心抗疫——河北省天然气公司用爱心助力香港中华煤气携手抗疫',
          content:
            '香港的疫情持续发展，高居不下，时时牵动着集团公司、新天公司和河北省天然气公司上下的心。疫情无情人有情，集团公司和新天公司作为香港中华煤气长期的合作伙伴，一直关注着香港疫情动态。3月上旬，河北省天然气公司在集团公司和新天公司的统一部署下，第一时间与香港中华煤气主动对接，紧急协调防疫物资，积极支持香港中华煤气的防疫抗疫工作。集团系统上下也心系疫情发展，希望香港疫情能够尽快得到有效控制，恢复正常的生活和秩序。在香港防疫物资紧缺的形势下，河北省天然气公司积极行动，为尽绵薄之力多方奔走，第一时间将抗疫物资发往深圳，但是由于药品特殊性以及疫情管控措施的影响，物资物流传递困难重重，无法送达。为此，河北省天然气公司多渠道筹措最终协调以岭药业集团将40余箱莲花清温的抗疫药品送至香港中华煤气，助其早日渡过难关。相知无远近，万里尚为邻。通过此次防疫物资协调，充分体现了集团公司与香港中华煤气两岸守望相助、同舟共济的真情实意，让我们汇聚起同心战“疫”的磅礴力量，携手与共迎接抗疫胜利的到来。',
          type: '新闻公告',
          source: '天然气公司',
          name: '姚一明',
          time: '2022/02/02'
        },
        {
          title: '新天公司组织召开数智化建设委员会启动会',
          content: '为全面推进“数字新天”建设，进一步贯彻落实新天系统各部门及管理单元的数智化转型工作，3月7日新天公司召开数智化建设委员会（以下简称“委员会”）启动会。新天公司党委书记、总裁梅春晓及领导班子成员出席会议，新天公司副总裁、数智化建设工作组组长谭建鑫主持，各部门单位负责人参加了会议。',
          type: '新闻公告',
          source: '智慧仓',
          name: '田月超',
          time: '2022/03/09'
        },
        {
          title: '国务院安委会第十五督导组到天然气公司检查指导安全生产工作',
          content: '2月18日，由国家铁路局安全监察司司长王启铭带队的国务院安委会第十五督导检查组到天然气公司检查安全生产工作。河北省应急管理厅厅长薛永纯，新天公司副总裁、天然气公司总经理丁鹏及相关人员陪同检查。检查期间，检查组依次到调控中心、应急指挥中心、热线中心、维抢修中心、石家庄站工艺区进行了现场检查。随后，督导组听取了天然气公司春节、冬奥期间安全生产工作情况和《全国城镇燃气安全排查整治工作》文件的落实情况。听取汇报后，检查组对天然气公司安全生产工作给予充分肯定，并要求天然气公司要进一步深入查找安全生产工作的薄弱环节和突出问题，有效研究落实稳定安全形势和从源头上防范重大风险的对策，全面彻底排查整治事故隐患，确保生产运行安全平稳。',
          type: '新闻公告',
          source: '天然气公司',
          name: '胡伟供',
          time: '2022/02/23'
        },
        {
          title: '新能源公司纪委召开2022年度党风廉政警示教育大会',
          content: '为宣贯党的十九届中央纪委六次全会精神，贯彻落实全面从严治党的要求，严明党的政治纪律和政治规矩，结合公司纪委工作安排，1月26日下午，新能源公司纪委召开2022年度党风廉政警示教育会议。会议以视频的方式召开。公司系统中高层管理人员、驻石党员、发展对象及入党积极分子代表参会，各系统企业视频参会。',
          type: '新闻公告',
          source: '新能源公司',
          name: '赵灿',
          time: '2022/01/29'
        },
        {
          title: '新天绿色能源股份有限公司组织召开党性教育大会 党委书记讲专题党课',
          content: '022年1月21日，新天公司党委书记、总裁梅春晓以《坚持正确思想指引 埋头苦干勇毅前行》为题，通过线下线上相结合的方式，对系统内各级领导班子成员、中层管理人员及全体员工进行党性教育。梅春晓在党课中主要引导广大党员干部对习近平总书记“新年第一课”——《继续把党史总结学习教育宣传引向深入 更好把握和运用党的百年奋斗历史经验》进行深入学习，同时对习近平总书记近期发表的重要讲话精神进行了深刻阐述和解读。',
          type: '新闻公告',
          source: '供稿党委办公室',
          name: '郑丹',
          time: '2022/01/24'
        },
        {
          title: '新港公司签订首单长期LNG资源采购协议',
          content: '12月8日，新港公司与Qatar Liquefied Gas Company Limited (2)签署LNG购买和销售协议。根据协议，新港公司将从2022年底左右开始向QG2采购LNG，每个合同年的年度合同量约为100万吨，合同期限为15年。新港公司自2019年9月在香港注册成立以来，作为新天公司LNG贸易专业实体平台，积极面向国际天然气市场开展贸易采购业务。此次与QG2合作为新港公司开展工作以来的首单长期资源采购，是新港公司以及新天公司迈向国际天然气市场的重要一步，标志着公司打通了天然气上游长期采购渠道，自主掌握海外LNG资源。新港公司采购气源将通过新天唐山LNG项目接卸、气化、外输，能够较大提高唐山LNG项目接收站及外输管线的利用率和盈利能力，有利于新天公司天然气业务全产业链配合联动，确保公司按照战略规划方向发展，助力实现“碳达峰”“碳中和”目标。',
          type: '新闻公告',
          source: '新港公司',
          name: '范梦涵',
          time: '2021/12/09'
        },
        {
          title: '新天绿色能源股份有限公司荣获2021“金责奖”最佳环境（E）责任奖',
          content: '近日，新天绿色能源股份公司荣获2021中国企业ESG“金责奖”——最佳环境（E）责任奖，获此殊荣的还有阳光电源、万科、中国神华、京东集团，共10家行业知名企业。该奖项由新浪财经组织评选，旨在通过“金责奖”平台，嘉奖那些对中国ESG事业做出卓越贡献的企业和机构。“金责”二字，取意“责任像金子一样宝贵与厚重”，意在表达业界对负责任企业的认可，更旨在引导更多企业重视和践行ESG行动。',
          type: '新闻公告',
          source: '董事会办公室',
          name: '王状',
          time: '2021/12/04'
        }
      ]
    }
  },
  methods: {
    onSearch () {},
    selectItem (item, index) {
      this.activeIndex = index
      // this.$emit('getPerListData', index)
    },
    onChange (date, dateString) {
      console.log(date, dateString)
    }
  }
}
</script>
<style lang='less' scoped>
ol,
ul,
li {
  list-style: none;
  margin: 0;
}
#searchPage {
  width: 100%;
  .main {
    display: grid;
    grid-template-columns: 25% 75%;
    padding: 0 4rem;
    // height: calc(100vh - 165px);
    height: auto;
    margin-top: -3rem;

    .th-title,
    .th-title-list div {
      font-size: 1.8rem;
      color: #171d33;
      line-height: 8rem;
      margin-bottom: 1rem;
    }
    .th-title-list div {
      line-height: 5rem;
      margin-top: 2rem;
    }
    .th-title-list {
      width: calc(100% - 4rem);
      margin-left: 4rem;
      display: grid;
      grid-template-columns: 38% 12% 14% 12% 12%;
    }
    .left {
      border-right: 1px solid rgba(233, 239, 243, 1);
      .form-box {
        width: 100%;
        padding: 0 4rem 0 4%;
        .search-bar {
          width: 100%;
          margin-bottom: 3rem;
          label {
            color: #333;
            font-size: 2rem;
            font-weight: Bold;
            margin-bottom: 1.8rem;
            display: block;
            width: 100%;
          }
          .ant-calendar-picker {
            height: 4.6rem;
            border-radius: 6px;
            background: rgba(244, 244, 244, 1);
            border: none;
            /deep/.ant-input {
              height: 100%;
              padding-left: 2rem;
              border-radius: 6px;
              background: rgba(244, 244, 244, 1);
              font-size: 1.6rem;
              color: #999999;
            }
          }

          .ant-input-search {
            height: 4.6rem;
            border-radius: 6px;
            background: rgba(244, 244, 244, 1);
            border: none;
            /deep/input {
              height: 100%;
              padding-left: 2rem;
              border-radius: 6px;
              background: rgba(244, 244, 244, 1);
              font-size: 1.6rem;
              color: #999999;
            }
          }
          /deep/.ant-input-affix-wrapper:hover .ant-input {
            padding-right: 3rem;
            background: #fff !important;
            color: #000 !important;
          }
          /deep/.ant-input-suffix {
            display: none;
          }
        }
      }
      .hot-search {
        width: 100%;
        padding: 0 4rem 0 4%;
        text-align: left;
        margin-top: 4rem;
        .hot-title {
          color: #333;
          font-size: 2rem;
          font-weight: Bold;
          text-align: left;
          margin-bottom: 1.8rem;
          display: block;
          width: 100%;
        }
        .hot-list {
          padding: 0;
          & > li {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
            padding: 0;
            line-height: 4rem;
            span {
              color: #9195a3;
              width: 4rem;
              font-size: 1.8rem;
            }
            a {
              margin: 0;
              max-width: 70%;
              font-size: 1.6rem;
              color: #333;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              vertical-align: middle;
              display: inline-block;
              -webkit-line-clamp: 1;
              &:hover {
                cursor: pointer;
                color: #2440b3;
                text-decoration: underline;
              }
              &:alink {
                color: #2440b3;
              }
            }
          }
          & > li:first-child span {
            color: #f60;
          }
          & > li:nth-child(2) span {
            color: #faa90e;
          }
        }
      }
    }
    .right {
      .sift-bar {
        width: calc(100% - 4rem);
        margin-left: 4rem;
        margin-top: 2rem;
        font-weight: Bold;
        font-size: 2rem;
        color: #333;
        .tag {
          font-size: 1.8rem;
          color: #171d33;
          line-height: 4.2rem;
          text-align: center;
          margin: 0px 2rem 0;
          cursor: pointer;
          display: inline-block;
          position: relative;
          top: -1px;
          i {
            display: block;
            opacity: 0;
            width: 2rem;
            height: 2px;
            border-radius: 1px;
            background: rgba(0, 159, 226, 1);
            margin: 0 auto;
          }
        }
        .tag.active {
          color: #009fe2;
          i {
            opacity: 1;
          }
        }
      }
      .list-box {
        width: calc(100% - 4rem);
        margin-left: 4rem;
      }
    }
  }
}
</style>
