<template>
  <div class="wrapper">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <!-- 公告 -->
      <div class="top">
        <img :src="imgUrl.xlb" alt />
        <div class="div-v" v-if="cd !== 0">
          <!-- <aside class="animation" v-for="(list,index) in bgValue.announcement" :key="index">
            <span>{{list.name + list.pro_content}}</span>
            <time>{{list.protime}}</time>
          </aside>-->
          <span>{{
            bgValue.announcement[0].name + bgValue.announcement[0].pro_content
          }}</span>
          <time>{{ bgValue.announcement[0].protime }}</time>
        </div>
        <div v-else>
          <span>暂无项目申报内容</span>
          <time>{{
            new Date().getFullYear() +
              "-" +
              (new Date().getMonth() + 1) +
              "-" +
              new Date().getDate()
          }}</time>
        </div>
      </div>
      <div class="bottom">
        <!-- 表格 -->
        <div class="table">
          <div class="top-p">项目概览</div>
          <div class="top-b">
            <div>
              <section>
                <span>初筛通过</span>
                <span>{{ bgValue.overview_one }}</span>
              </section>
            </div>
            <div>
              <section>
                <span>立项通过</span>
                <span>{{ bgValue.overview_two }}</span>
              </section>
            </div>
            <div>
              <section>
                <span>执行中</span>
                <span>{{ bgValue.overview_three }}</span>
              </section>
            </div>
            <div>
              <section>
                <span>已完结</span>
                <span>{{ bgValue.overview_four }}</span>
              </section>
            </div>
          </div>
        </div>
        <!-- 下拉框 -->
        <div class="select">
          <div class="block">
            <el-date-picker
              v-model="value_date"
              type="daterange"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="bolting()"
            ></el-date-picker>
          </div>
          <select
            class="two"
            v-model="type_value"
            name="type"
            @change="bolting()"
          >
            <option>项目类型</option>
            <template v-for="(type, index) in bgValue.type">
              <option :key="index" :value="index">{{ type }}</option>
            </template>
          </select>
          <select
            class="two"
            v-model="status_value"
            name="status"
            @change="bolting()"
          >
            <option>项目状态</option>
            <template v-for="(status, index) in bgValue.status">
              <option :key="index" :value="index">{{ status }}</option>
            </template>
          </select>
          <select
            class="three"
            v-model="area_value"
            name="area"
            @change="bolting()"
          >
            <option>落地区域</option>
            <template v-for="(area, index) in bgValue.area">
              <option :key="index" :value="index">{{ area }}</option>
            </template>
          </select>
          <span @click="$jump('application')">项目申报</span>
        </div>
        <!-- container -->
        <div class="con">
          <!-- 导航 -->
          <div class="top-t">
            <h3
              @click="btn(index)"
              v-for="(item, index) in text"
              :key="index"
              :class="sub == index ? 'style' : ''"
            >
              {{ item }}
            </h3>
          </div>
          <!-- 主题内容 -->
          <div class="cc">
            <template v-if="cd > 0">
              <div
                class="list"
                v-for="(item, index) in bgData.info"
                :key="index"
                @click="
                  item.tid == 1000
                    ? $jP('application', { id: item.id })
                    : $jParams('schedule', { id: item.id })
                "
              >
                <div class="div">
                  <div class="bb">
                    <h3>{{ item.name }}</h3>
                    <h5>项目</h5>
                  </div>
                  <time>{{ item.protime }}</time>
                </div>
                <dl>
                  <dt>
                    <img :src="imgUrl.tg" v-if="item.tid == 5" />
                    <img
                      :src="imgUrl.btg"
                      v-else-if="item.tid == 4 || item.tid == 9"
                    />
                    <img :src="imgUrl.zxz" v-else-if="item.tid == 10" />
                    <img :src="imgUrl.wtj" v-else-if="item.tid == 1000" />
                    <img :src="imgUrl.shz" v-else />
                  </dt>
                  <dd>
                    <span class="iconfont icon-zuzhijiegou"></span>
                    <span>{{ item.party_id }}</span>
                  </dd>
                  <dd>
                    <span class="iconfont icon-weizhi"></span>
                    <span>{{ item.postaladdress }}</span>
                  </dd>
                  <dd>
                    <span class="iconfont icon-shenhetongguo1"></span>
                    <span class="block-k">
                      <b>项目状态：</b>
                      {{ item.status }}
                    </span>
                  </dd>
                </dl>
              </div>
            </template>
            <template v-else>
              <span>您搜索的内容暂无！</span>
            </template>
          </div>
        </div>
        <!-- 分页按钮 -->
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :pager-count="5"
            background
            layout="prev, pager, next"
            :total="totalCount"
          ></el-pagination>
        </div>
      </div>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
import HeaderNav from '../../components/HeaderNav'
import FooterNav from '../../components/FooterNav'
export default {
  components: {
    HeaderNav,
    FooterNav
  },
  props: {},
  data () {
    return {
      index_num: 2,
      pageSize: 1,
      currentPage: 1,
      totalCount: 1,
      imgUrl: {
        xlb: require('../../../static/img/xlb.png'),
        tg: require('../../../static/img/tg.png'),
        btg: require('../../../static/img/btg.png'),
        shz: require('../../../static/img/shz.png'),
        zxz: require('../../../static/img/zxz.png'),
        wtj: require('../../../static/img/wtj.png')
      },
      // text: ["全部", "项目初筛", "项目立项"],
      text: ['全部'],
      sub: 0,
      bgData: [],
      bgValue: [],
      type_value: '项目类型',
      status_value: '项目状态',
      area_value: '落地区域',
      value_date: '',
      start_time: '',
      end_time: '',
      cd: Number
    }
  },
  computed: {},
  watch: {},
  methods: {
    /** 筛选函数 */
    bolting () {
      this.start_time = this.value_date[0]
      this.end_time = this.value_date[1]
      this.getDataTwo(
        this.start_time,
        this.end_time,
        this.type_value,
        this.status_value,
        this.area_value
      )
    },
    /** 获取项目列表 */
    getDataTwo (
      start_time = this.start_time,
      end_time = this.end_time,
      type = this.type_value,
      status = this.status_value,
      area = this.area_value
    ) {
      if (type === '项目类型') {
        this.type_value = ''
        type = ''
      }
      if (status === '项目状态') {
        this.status_value = ''
        status = ''
      }
      if (area === '落地区域') {
        this.area_value = ''
        area = ''
      }

      let _this = this
      this.$http({
        method: 'get',
        url: 'v1/project/list',
        params: {
          start_time: start_time,
          end_time: end_time,
          type: type,
          area: area,
          status: status,
          page: _this.currentPage,
          num: 6
        }
      })
        .then(res => {
          if (res.data.code === 200) {
            _this.bgData = res.data.data.data
            _this.totalCount = _this.bgData.allPage
            _this.cd = _this.bgData.info.length
          } else {
            _this.$message.error('请求数据有问题！')
          }
        })
        // eslint-disable-next-line handle-callback-err
        .catch(err => {
          console.log(err)
        })

      if (this.type_value === '') {
        this.type_value = '项目类型'
      }
      if (this.status_value === '') {
        this.status_value = '项目状态'
      }
      if (this.area_value === '') {
        this.area_value = '落地区域'
      }
    },
    /** 获取下拉框数据 */
    getDataOne () {
      let _this = this
      this.$http({
        method: 'get',
        url: 'v1/project/get-info',
        data: {}
      })
        .then(res => {
          if (res.data.code === 200) {
            _this.bgValue = res.data.data
            _this.cd = _this.bgValue.announcement.length
          } else {
            _this.$message.error('请求数据有问题！')
          }
        })
        // eslint-disable-next-line handle-callback-err
        .catch(err => {
          console.log(err)
        })
    },
    btn (index) {
      let s = this.sub
      s = index
      this.sub = s
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getPackData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getDataTwo()
      this.getPackData()
    },
    getPackData () {}
  },
  created () {
    this.currentPage = Number(localStorage.getItem('page')) || 1
    this.handleCurrentChange(this.currentPage)
    this.getDataOne()
  },
  mounted () {},
  beforeUpdate () {
    localStorage.setItem('page', this.currentPage)
  },
  beforeDestroy () {
    localStorage.setItem('page', 1)
  },
  destroyed () {
    localStorage.removeItem('page')
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  min-width: 1280px;
  box-sizing: border-box;

  .footer {
    margin-top: 80px;
  }

  #box {
    margin: 0 auto;
    width: 1200px;
    box-sizing: border-box;

    .bottom {
      padding: 35px 30px 100px;
      box-sizing: border-box;
      width: 1200px;
      // height: 1320px;

      box-sizing: border-box;
      background-color: #ffffff;

      .page {
        margin-top: 60px;
        height: 36px;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        /deep/ .el-pagination.is-background .el-pager li {
          color: #333 !important;
        }

        /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
          background-color: #e60012;
          color: #fff !important;
        }

        /deep/ .el-icon.el-icon-arrow-left::before {
          content: "上一页";
          font-family: "MicrosoftYaHei";
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 1px;
          color: #666;
        }

        /deep/ .el-pagination .btn-prev {
          width: 80px;
        }

        /deep/ .el-pagination .btn-next {
          width: 80px;
        }

        /deep/ .el-icon.el-icon-arrow-right::before {
          content: "下一页";
          font-family: "MicrosoftYaHei";
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 1px;
          color: #666;
        }
      }

      .con {
        width: 1140px;
        // height: 773px;

        .cc::after {
          content: "";
          width: 367px;
          display: block;
          height: 0px;
        }

        .cc {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: flex-start;

          .list {
            margin-bottom: 60px;
            width: 367px;
            height: 184px;
            background-color: #ffffff;
            box-shadow: 0px 19px 21px 3px rgba(145, 142, 142, 0.1);
            border-radius: 10px;
            padding: 19px 29px 0px 16px;
            box-sizing: border-box;

            dl {
              width: 100%;
              height: 97px;
              margin-top: 25px;
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              dd {
                height: 20px;
                display: flex;
                align-items: center;

                .iconfont {
                  font-size: 17px;
                  color: #ccc;
                  margin-right: 16px;
                }
                span {
                  font-family: "MicrosoftYaHei";
                  font-size: 14px;
                  font-weight: normal;
                  font-stretch: normal;
                  letter-spacing: 0px;
                  color: #666666;
                }

                .block-k {
                  width: 288px;
                  display: inline-block;
                  /* overflow: hidden;*/
                  text-overflow: ellipsis;
                  white-space: nowrap;

                  b {
                    font-weight: 900;
                  }
                }
              }

              dt {
                img {
                  position: absolute;
                  right: -8.5%;
                  bottom: -26%;
                  width: 120px;
                  height: 90px;
                }
              }
            }

            .div {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              time {
                font-family: "MicrosoftYaHei";
                font-size: 14px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #999999;
              }
              .bb {
                display: flex;
                justify-content: center;
                align-items: center;
                h5 {
                  margin-left: 6px;
                  height: 18px;
                  color: #f6ad35;
                  text-align: center;
                  line-height: 18px;
                  border: 1px solid #f6ad35;
                  border-radius: 4px;
                  font-size: 12px;
                }
                h3 {
                  font-family: "MicrosoftYaHei";
                  font-size: 16px;
                  font-weight: normal;
                  font-stretch: normal;
                  letter-spacing: 0px;
                  color: #333333;
                }
              }
            }
          }
        }

        .top-t {
          width: 1140px;
          height: 38px;
          padding-left: 12px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          border-bottom: 1px solid #ccc;
          margin-bottom: 60px;

          h3 {
            text-align: center;
            margin-right: 78px;
            width: 90px;
            font-family: "MicrosoftYaHei";
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333;
          }

          .style {
            color: #e60012;
            position: relative;
            &::after {
              content: "";
              width: 91px;
              height: 2px;
              background-image: linear-gradient(#e60012, #e60012),
                linear-gradient(#ff7f7f, #ff7f7f);
              background-blend-mode: normal, normal;
              position: absolute;
              left: 0%;
              bottom: -94%;
            }
          }
        }
      }

      .select {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 50px;
        margin-bottom: 50px;

        .block {
          /deep/.el-range-editor.el-input__inner {
            width: 325px;
            background: url("../../../static/img/xa.png") 90% center no-repeat;
            background-color: #f9f8f8;
          }

          /deep/.el-date-editor .el-range-input {
            background-color: #f9f8f8;
            font-family: "MicrosoftYaHei";
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 33px;
            letter-spacing: 0px;
            color: #666666;
          }

          /deep/.el-input__inner {
            border: 1px solid #c7c7c7;
          }

          /deep/.el-date-editor .el-range-separator {
            font-family: "MicrosoftYaHei";
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 33px;
            letter-spacing: 0px;
            color: #666666;
          }

          /deep/ .el-input__icon {
            width: 0px;
          }
        }

        .one {
          // padding-left: 30px;
          box-sizing: border-box;
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 90% center no-repeat;
          background-size: 14px 8px;
          // width: 325px;
          padding: 0px 30px;
          height: 38px;
          background-color: #f9f8f8;
          border-radius: 4px;
          border: solid 1px #c7c7c7;
          outline: none;
          font-size: 18px;
          color: #666;
        }

        .two {
          // padding-left: 30px;
          // padding-right: 48px;
          box-sizing: border-box;
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 90% center no-repeat;
          background-size: 14px 8px;
          // width: 134px;
          padding: 0px 30px;
          height: 38px;
          background-color: #f9f8f8;
          border-radius: 4px;
          border: solid 1px #c7c7c7;
          outline: none;
          font-size: 18px;
          color: #666;
          text-align: center;
        }

        .three {
          // padding-left: 30px;
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 90% center no-repeat;
          background-size: 14px 8px;
          // width: 134px;
          padding: 0 35px 0 30px;
          box-sizing: border-box;
          height: 38px;
          background-color: #f9f8f8;
          border-radius: 4px;
          border: solid 1px #c7c7c7;
          outline: none;
          font-size: 18px;
          color: #666;
          text-align: center;
        }
        span {
          display: inline-block;
          text-align: center;
          line-height: 32px;
          width: 96px;
          height: 32px;
          background-image: linear-gradient(
              69deg,
              #cc263f 0%,
              #f42b47 100%,
              #ed162d 100%,
              #e60012 100%
            ),
            linear-gradient(#e60012, #e60012);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #ffffff;
        }
      }

      .table {
        width: 1137px;
        height: 181px;
        border: solid 1px #dadada;
        background-color: #f6f6f6;
        box-sizing: border-box;

        .top-b {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          div {
            width: 283px;
            height: 139px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

            section {
              width: 72px;
              height: 67px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;

              span:first-child {
                font-family: "MicrosoftYaHei";
                font-size: 18px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #666666;
              }

              span:last-child {
                font-family: "MicrosoftYaHei";
                font-size: 24px;
                font-weight: bold;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #e60012;
              }
            }
          }
        }

        .top-p {
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
          width: 1136px;
          height: 40px;
          background-color: #f6f6f6;
          text-align: center;
          line-height: 40px;
          border-bottom: 1px solid #dadada;
          border-right: 1px solid #dadada;
          box-sizing: border-box;
        }
      }
    }

    .top {
      width: 732px;
      height: 40px;
      margin: 30px 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      /*

      .div-v {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
      }

      .animation {
        display: flex;
        justify-content: space-between;
        animation: myMove 15s linear infinite;
        animation-fill-mode: forwards;
        width: 95%;
        height: 100%;
        margin-bottom: 25px;
        margin-left: 25px;
      }
      */

      img {
        width: 33px;
        height: 27px;
      }
      div {
        width: 672px;
        height: 21px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #666666;
        }

        time {
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          letter-spacing: 0px;
          color: #999999;
        }
      }
    }
  }
}

/*文字无缝滚动*/
@keyframes myMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-150px);
  }
}
</style>
