<template>
  <div>
    <div class="card h292">
      <screen-title-zd>
        <div slot="left" class="screen-title-left">国家战略</div>
        <div slot="right" class="screen-title-right" @click="set_ldhg(true)">
          <span>更多</span>
        </div>
      </screen-title-zd>
      <div class="card-item-ldgh">
        <div class="title">根植“厚土”，“新枝”茁壮</div>
        <div class="content">
          <div class="content-image">
            <img src="@/assets/images/index/bannerX.png" alt="" />
          </div>
          <div class="content-txt">
            “农业现代化，种子是基础，必须把民族种业搞上去”。
            习近平总书记对种业振兴念兹在兹，党的十八大以来，多次作出重要指示，
            强调“只有用自己的手攥紧中国种子，才能端稳中国饭碗，才能实现粮食安全”。
          </div>
        </div>
      </div>
    </div>
    <div class="card h292" style="margin-top: 8px">
      <screen-title-zd>
        <div
          slot="left"
          class="screen-title-left"
          @click="handelClickEmap"
          style="cursor: pointer"
        >
          优势条件
        </div>
      </screen-title-zd>
      <div class="card-item-yfys">
        <div class="item">
          <div class="item-image">
            <ul class="bg-bubbles">
              <li v-for="i in 10" :key="i"></li>
            </ul>
            <img src="@/assets/images/index/yfys1-icon.png" alt="" />
          </div>
          <div class="right">
            <div class="top">战略机遇赋能</div>
            <div class="center yellow"><span class="num">3</span> 年</div>
            <div class="bot">中央1号文件</div>
          </div>
        </div>
        <div class="item">
          <div class="item-image">
            <ul class="bg-bubbles">
              <li v-for="i in 10" :key="i"></li>
            </ul>
            <img src="@/assets/images/index/yfys3-icon.png" alt="" />
          </div>
          <div class="right">
            <div class="top">区位交通便利</div>
            <div class="center violet"><span class="num">1</span> 小时</div>
            <div class="bot">交通辐射圈</div>
          </div>
        </div>
        <div class="item">
          <div class="item-image">
            <ul class="bg-bubbles">
              <li v-for="i in 10" :key="i"></li>
            </ul>
            <img src="@/assets/images/index/yfys2-icon.png" alt="" />
          </div>
          <div class="right">
            <div class="top">自然禀赋优越</div>
            <div class="center green">北纬 <span class="num">36°</span></div>
            <div class="bot">黄金育种地带</div>
          </div>
        </div>
        <div class="item">
          <div class="item-image">
            <ul class="bg-bubbles">
              <li v-for="i in 10" :key="i"></li>
            </ul>
            <img src="@/assets/images/index/yfys4-icon.png" alt="" />
          </div>
          <div class="right">
            <div class="top">产业链融合</div>
            <div class="center blue"><span class="num">5.2</span> 亿元</div>
            <div class="bot">种子年销售额</div>
          </div>
        </div>
        <div class="item" @click="openPdf()">
          <div class="item-image">
            <ul class="bg-bubbles">
              <li v-for="i in 10" :key="i"></li>
            </ul>
            <img src="@/assets/images/index/yfys5-icon.png" alt="" />
          </div>
          <div class="right">
            <div class="top">规划布局科学</div>
            <div class="center orange"><span class="num">种业</span> 主导</div>
            <div class="bot">产业链融合</div>
          </div>
        </div>
      </div>
    </div>
    <div class="card h318 m-top12">
      <screen-title-zd>
        <div slot="left" class="screen-title-left">农品动态</div>
        <!-- <div slot="right" @click="set_yfcj(true)" class="screen-title-right">
          <span>发展历程</span>
        </div> -->
      </screen-title-zd>
      <div class="npdt">
        <div class="npdt-shichang">
          <div class="npdt-title">今日市场</div>
          <div class="npdt-shichang-header">
            <div>品名</div>
            <div>均价(元/公斤)</div>
            <div>较昨日</div>
          </div>
          <div style="height: 180px; overflow: hidden">
            <vue-seamless-scroll
              :class-option="optionHover1"
              :data="shichangList"
            >
              <div class="scroll-box">
                <div
                  class="scroll-item"
                  v-for="(item, index) in shichangList"
                  :key="'dyfc' + index"
                >
                  <div class="npdt-shichang-row">
                    <div>{{ item.Name }}</div>
                    <div>{{ item.price && item.price.toFixed(2) }}</div>
                    <div style="display: flex">
                      <div style="width: 38px">
                        {{
                          item.jzrPrice != "暂无"
                            ? item.jzrPrice.toFixed(2)
                            : "暂无"
                        }}
                      </div>
                      <img
                        v-if="item.jzrPrice >= 0 && item.jzrPrice != '暂无'"
                        width="16px"
                        height="16px"
                        src="@/assets/images/icon/upRed.png"
                        alt=""
                      />
                      <img
                        v-else-if="item.jzrPrice != '暂无'"
                        width="16px"
                        height="16px"
                        src="@/assets/images/icon/downLv.png"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </vue-seamless-scroll>
            <div
              v-if="shichangList.length == 0"
              style="text-align: center; line-height: 170px; font-weight: 300"
            >
              暂无最新数据
            </div>
          </div>
        </div>
        <div class="npdt-yfclz">
          <div class="npdt-title">移风菜篮子</div>
          <div class="npdt-yfclz-header">
            <div>品名</div>
            <div>产量(吨)</div>
          </div>
          <div style="height: 180px; overflow: hidden">
            <vue-seamless-scroll
              :class-option="optionHover1"
              :data="shichangList"
            >
              <div class="scroll-box" @click="openClz">
                <div
                  class="scroll-item"
                  v-for="(item, index) in yfclzList"
                  :key="'dyfc' + index"
                >
                  <div class="npdt-yfclz-row">
                    <div>{{ item.name }}</div>
                    <div>{{ item.num && item.num.toFixed(2) }}</div>
                  </div>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { prcCollectionListForGov } from '@/api/zdyf'
export default {
  data () {
    return {
      shichangList: [
        {
          name: '豌豆荚',
          num: 14,
          jzr: 1
        },
        {
          name: '白玉菇',
          num: 14,
          jzr: 1
        },
        {
          name: '生菜球',
          num: 14,
          jzr: -1
        },
        {
          name: '秋葵',
          num: 14,
          jzr: -1
        },
        {
          name: '苦菊',
          num: 14,
          jzr: 1
        },
        {
          name: '白菜',
          num: 14,
          jzr: 1
        }
      ],
      yfclzList: [
        {
          name: '豌豆荚',
          num: 460
        },
        {
          name: '白玉菇',
          num: 389
        },
        {
          name: '生菜球',
          num: 322
        },
        {
          name: '秋葵',
          num: 266
        },
        {
          name: '苦菊',
          num: 198
        },
        {
          name: '白菜',
          num: 890
        }
      ],
      optionHover1: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000 // 单步运动停止的时间(默认值1000ms)
      },
      params: {
        Country: 0,
        FEndDate: this.$moment().format('yyyy-MM-DD'),
        FParentPartyID: 1,
        FPartyName: '青岛移风蔬菜批发市场有限公司',
        FPartyType: 1010,
        FStartDate: this.$moment().format('yyyy-MM-DD'),
        FStoreId: 1,
        Name: '全部',
        page: 1,
        pageSize: 10,
        singletype: 0,
        sort: ''
      },
      times: this.$moment().subtract(1, 'days').format('yyyy-MM-DD'),
      dayList: [],
      tDayList: []
    }
  },
  created () {
    this.getDayScData()
  },
  methods: {
    ...mapActions({
      showGlobalDialog: 'showGlobalDialog',
      set_yfcj: 'SET_YFCJ',
      set_viewPdf: 'SET_VIEWPDF',
      set_yfclz: 'SET_YFCLZ',
      set_ldhg: 'SET_LDGH'
    }),
    openClz () {
      this.set_yfclz(true)
    },
    openPdf () {
      this.set_viewPdf(true)
    },
    deduplicationJs (arr) {
      const data = []
      arr.forEach((item, index) => {
        if ((index + 1) % 2 === 0) {
          const num = (arr[index - 1].AvgPrice + item.AvgPrice) / 2
          data.push({ ...item, price: num })
        }
      })
      return data
    },
    getDayScData (data) {
      prcCollectionListForGov({ ...this.params, ...data }).then((res) => {
        if (res.priceslist.length > 0) {
          this.dayList = res.priceslist
          this.getDayScTData()
        } else {
          this.times = this.$moment(this.times)
            .subtract(1, 'days')
            .format('yyyy-MM-DD')
          this.getDayScData({
            FEndDate: this.$moment(this.times)
              .subtract(1, 'days')
              .format('yyyy-MM-DD'),
            FStartDate: this.$moment(this.times)
              .subtract(1, 'days')
              .format('yyyy-MM-DD')
          })
        }
      })
    },
    getDayScTData () {
      prcCollectionListForGov({
        ...this.params,
        FEndDate: this.times,
        FStartDate: this.times
      }).then((res1) => {
        if (res1.priceslist.length > 0) {
          this.shichangList = this.getScData(this.dayList, res1.priceslist)
        } else {
          this.times = this.$moment(this.times)
            .subtract(1, 'days')
            .format('yyyy-MM-DD')
          this.getDayScTData()
        }
      })
    },
    getScData (arr, arr1) {
      const dataD = this.deduplicationJs(arr)
      const dataTd = this.deduplicationJs(arr1)
      return dataD.map((item, index) => {
        const priceTd = dataTd.filter((item1) => item.Name === item1.Name)
        // [0].price
        if (priceTd.length > 0) {
          const jzrPrice = item.price - priceTd[0].price
          return {
            ...item,
            jzrPrice
          }
        } else {
          return {
            ...item,
            jzrPrice: '暂无'
          }
        }
      })
    },
    handelClickEmap () {
      this.$EventBus.$emit('switcMapType', 'Emap')
    }
  },
  components: {},
  computed: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.scroll-box {
  justify-content: space-around;
  overflow: hidden;
}
.npdt {
  padding: 16px;
  display: flex;
  &-shichang {
    width: 233px;
    &-header {
      display: flex;
      font-family: Microsoft YaHei;
      font-weight: 300;
      font-size: 14px;
      color: #ffffff;
      line-height: 24px;
      div:nth-child(1) {
        width: 79px;
        opacity: 0.76;
      }
      div:nth-child(2) {
        width: 109px;
        opacity: 0.76;
      }
      div:nth-child(3) {
        width: 58px;
        opacity: 0.76;
      }
    }
    &-row {
      display: flex;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      line-height: 32px;
      height: 32px;
      border-bottom: 1px dashed #d9fdff;
      img {
        margin-top: 7px;
        width: 18px;
        height: 18px;
      }
      div:nth-child(1) {
        width: 79px;
      }
      div:nth-child(2) {
        width: 109px;
      }
      div:nth-child(3) {
        width: 58px;
      }
    }
  }
  &-yfclz {
    margin-left: 32px;
    width: 154px;
    &-header {
      display: flex;
      font-family: Microsoft YaHei;
      font-weight: 300;
      font-size: 14px;
      color: #ffffff;
      line-height: 24px;
      div:nth-child(1) {
        width: 99px;
        opacity: 0.76;
      }
      div:nth-child(2) {
        width: 100px;
        opacity: 0.76;
      }
    }
    &-row {
      display: flex;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      line-height: 32px;
      height: 32px;
      border-bottom: 1px dashed #d9fdff;
      img {
        width: 18px;
        height: 18px;
      }
      div:nth-child(1) {
        width: 99px;
      }
      div:nth-child(2) {
        width: 100px;
      }
    }
  }
  &-title {
    background-size: 100% 100%;
    padding-left: 27px;
    background: url("~@/assets/images/icon/ncpdt.png") no-repeat;
  }
}
</style>
<style lang="scss" scoped>
@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0);
  }
}
@keyframes rise {
  0% {
    bottom: -100px;
  }
  50% {
    bottom: 100%;
  }
  100% {
    bottom: -100px;
  }
}
.card {
  width: 100%;
  height: 292px;

  &-item-ldgh {
    padding: 16px;
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    // @include flex(column);
    // justify-content: space-around;
    position: relative;
    .title {
      text-align: center;
      font-family: FZZhengHeiS-B-GB;
      font-size: 24px;
      font-weight: 600;
    }
    .content {
      padding-top: 24px;
      width: 100%;
      overflow: auto;
      .content-image {
        float: left;
        width: 218px;
        height: 120px;
        img {
          width: 206px;
          height: 120px;
        }
      }
      .content-txt {
      width: 100%;
        height: 170px;
        line-height: 24px;
        font-weight: 400;
        font-size: 16px;
        text-indent: 2em;
        color: #ffffff;
        letter-spacing: 45;
      }
    }
    img {
      height: 110px;
      width: 100%;
    }

    span {
      color: #fff;
      font-size: 16px;
      text-indent: 2em;
    }
  }

  &-item-yfys {
    padding: 16px;
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .item {
      width: 33%;
      color: #fff;
      display: flex;
      align-items: center;

      .right {
        flex: 1;

        .top {
          font-size: 14px;
          background-size: 100% 100%;
          background: url("~@/assets/images/index/yfyskuang.png") no-repeat;
        }

        .center {
          .num {
            font-family: pangmenzhengdao;
            font-size: 22px;
          }
        }

        .bot {
          color: #bcd0f0;
          font-size: 14px;
        }
      }
      &-image {
        position: relative;
        width: 48px;
        height: 48px;
        img {
          position: relative;
          top: -190px;
          width: 28px;
          height: 28px;
          margin-right: 10px;
          margin-left: 10px;
          z-index: 99999;
          animation: moveUpDown 3s infinite linear;
        }
      }
    }
    .item:nth-child(1) {
      .item-image {
        background: url("~@/assets/images/index/yfys1.png") no-repeat;
        background-position-y: 0px;
        background-size:100% 100%;
        background-attachment:fixed;

        .bg-bubbles li {
          background-color: rgba(247, 220, 111, 0.467);
        }
      }
    }
    .item:nth-child(2) {
      .item-image {
        background: url("~@/assets/images/index/yfys3.png") no-repeat;
        background-position-y: 0px;
        background-size:100% 100%;
        background-attachment:fixed;

        .bg-bubbles li {
          background-color: rgba(173, 117, 222, 0.5);
        }
      }
    }
    .item:nth-child(3) {
      .item-image {
        background: url("~@/assets/images/index/yfys2.png") no-repeat;
        background-position-y: 0px;
        background-size:100% 100%;
        background-attachment:fixed;

        .bg-bubbles li {
          background-color: rgba(98, 205, 179, 5);
        }
      }
    }
    .item:nth-child(4) {
      .item-image {
        background: url("~@/assets/images/index/yfys4.png") no-repeat;
        background-position-y: 0px;
        background-size:100% 100%;
        background-attachment:fixed;

        .bg-bubbles li {
          background-color: rgba(70, 126, 226, 0.45);
        }
      }
    }
    .item:nth-child(5) {
      .item-image {
        background: url("~@/assets/images/index/yfys5.png") no-repeat;
        background-position-y: 0px;
        background-size:100% 100%;
        background-attachment:fixed;

        .bg-bubbles li {
          background-color: rgba(255, 130, 61, 0.45);
        }
      }
    }
  }
}

.yellow {
  color: #ffdfa7;
}

.green {
  color: #25e3b6;
}

.violet {
  color: #ca8aed;
}

.blue {
  color: #d4e7ff;
}

.orange {
  color: rgba(255, 130, 61, 1);
}

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

  to {
    transform: rotate(360deg);
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.bg-bubbles {
  // position: absolute;
  position: relative;
  top: -40px;
  left: -6px;
  width: 16px;
  height: 160px;
  // background: linear-gradient(to bottom right, #50A3A2, #53E3A6);
  overflow: hidden;
}

.bg-bubbles li {
  position: absolute;
  bottom: 26px;
  width: 4px;
  height: 4px;
  opacity: 0;
  list-style: none;
  animation: square 10s infinite;
  transition-timing-function: linear;
  border-radius: 2px;
}

.bg-bubbles li:nth-child(1) {
  left: 16%;
}

.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  animation-delay: 2s;
  animation-duration: 7s;
}

.bg-bubbles li:nth-child(3) {
  left: 30%;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  animation-delay: 4s;
}

.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 6px;
  height: 6px;
  animation-duration: 8s;
  border-radius: 3px;
}

.bg-bubbles li:nth-child(5) {
  left: 50%;
}

.bg-bubbles li:nth-child(6) {
  left: 60%;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  animation-delay: 3s;
}

.bg-bubbles li:nth-child(7) {
  left: 70%;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  animation-delay: 2s;
}

.bg-bubbles li:nth-child(8) {
  left: 75%;
  width: 7px;
  height: 7px;
  animation-delay: 4s;
  border-radius: 3.5px;
  animation-duration: 15s;
}

.bg-bubbles li:nth-child(9) {
  left: 80%;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  animation-delay: 5s;
}

@keyframes square {
  0% {
    opacity: 0;
    transform: translateY(-70px);
  }

  25% {
    opacity: 0.75;
    transform: translateY(-95px);
  }
  50% {
    opacity: 1;
    transform: translateY(-109px);
  }

  100% {
    opacity: 0;
    transform: translateY(-130px);
  }
}
</style>
