<template>
  <view class="all_trend_module">
    <view class="center">
      <view class="date">
        <image
          src="../../../static/home_left.png"
          class="date_icon"
          mode="scaleToFill"
          @tap="beforeDay(date)"
        />
        <input
          type="text"
          v-model="date"
          disabled
          class="ipt_date"
          @tap="selectDate"
        />
        <image
          src="../../../static/home_right.png"
          class="date_icon"
          mode="scaleToFill"
          @tap="afterDay(date)"
        />
      </view>
      <view class="nav">
        <view
          class="nav_select"
          @tap="selectTrend(item.name)"
          :class="{ nav_select1: item.is }"
          v-for="(item, index) in navList"
          :key="index"
        >
          {{ item.name }}
        </view>
      </view>
      <view class="module_head">
        <view>交易日期</view>
        <view class="module_head_name">东财行业指数2级</view>
        <view class="module_head_rank" @tap="marketRankSelect">
          <view>板块排名</view>
          <view class="module_head_icon" v-if="marketRank">
            <image
              src="../../../static/shengxu_true.png"
              class="head_icon"
              mode="scaleToFill"
            />
            <image
              src="../../../static/jiangxu_false.png"
              class="head_icon"
              mode="scaleToFill"
            />
          </view>
          <view class="module_head_icon" v-else>
            <image
              src="../../../static/shengxu_false.png"
              class="head_icon"
              mode="scaleToFill"
            />
            <image
              src="../../../static/jiangxu_true.png"
              class="head_icon"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
      <view v-if="list.length > 0">
        <view
          class="module_list"
          v-for="(item, index) in list"
          :key="index"
          @tap="
            toTrendDetail(
              item.securityName,
              item.securityCode,
              item.securityType
            )
          "
        >
          <view class="module_list_date">{{ item.businessDate }}</view>
          <view class="module_list_name">{{ item.securityName }}</view>
          <view class="module_list_ranking">
            <view>
              {{ item.sort }}
            </view>
            <view class="list_ranking_right">
              <image
                v-if="item.sortChange > 0"
                src="../../../static/home_paiming_shangsheng.png"
                class="module_list_icon"
                mode="scaleToFill"
              />
              <image
                v-if="item.sortChange < 0"
                src="../../../static/home_paiming_xiajiang.png"
                class="module_list_icon"
                mode="scaleToFill"
              />
              <u-icon
                name="minus"
                v-if="item.sortChange == 0"
                size="12"
              ></u-icon>
              <view
                v-if="item.sortChange != 0"
                class="rise_decline"
                :style="{ color: item.color }"
              >
                {{ Math.abs(item.sortChange) }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <u-empty
          mode="data"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
          marginTop="50"
        >
        </u-empty>
      </view>
    </view>
    <!-- 选择时间 -->
    <u-datetime-picker
      :show="dateShow"
      v-model="date"
      mode="date"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="cancelDate"
      @confirm="confirmDate"
    ></u-datetime-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        navList: [
          {
            name: '当日趋势',
            is: true,
            current: 1,
          },
          {
            name: '5日趋势',
            is: false,
            current: 5,
          },
          {
            name: '10日趋势',
            is: false,
            current: 10,
          },
          {
            name: '15日趋势',
            is: false,
            current: 15,
          },
          {
            name: '20日趋势',
            is: false,
            current: 20,
          },
          {
            name: '30日趋势',
            is: false,
            current: 30,
          },
        ],
        // 数据
        list: [],
        // 板块列表排名升序or降序
        marketRank: true,
        trendCurrent: 1,
        date: '',
        pagenum: 1,
        last_page: null,
        dateShow: false,
      }
    },
    onLoad(options) {
      this.date = options.date
      this.rending()
    },
    onReachBottom() {
      if (this.pagenum < this.last_page) {
        this.getnewGoods()
      }
    },
    methods: {
      // 大盘信息板块列表排名选择
      marketRankSelect() {
        this.marketRank = !this.marketRank
        this.rending()
      },
      // 选择趋势
      selectTrend(name) {
        this.navList.forEach(item => {
          if (item.name === name) {
            item.is = true
            this.trendCurrent = item.current
            this.rending()
          } else {
            item.is = false
          }
        })
      },
      rending() {
        this.$api
          .post('/stock/trendPlate', {
            businessDate: this.date,
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: 'sort',
              sortWay: this.marketRank ? 'asc' : 'desc',
            },
            trendType: this.trendCurrent,
          })
          .then(r => {
            if (r) {
              console.log(r.list)
              this.list = r.list
              this.last_page = r.totalPage
              // this.data = r
              console.log(r)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      rending1() {
        this.$api
          .post('/stock/trendPlate', {
            businessDate: this.date,
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: 'sort',
              sortWay: this.marketRank ? 'asc' : 'desc',
            },
            trendType: this.trendCurrent,
          })
          .then(r => {
            if (r) {
              console.log(r.list)
              this.list = [...this.list, ...r.list]
              this.last_page = r.totalPage
              // this.data = r
              console.log(r)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      getnewGoods() {
        this.pagenum = this.pagenum + 1
        // 1.展示loading效果
        uni.showLoading({
          title: '数据加载中...',
        })
        // 2.开启节流阀
        this.isLoading = true
        // 3.发起网络请求
        this.rending1()
        // 无论成功与否都会调用该方法
        // 4.隐藏loading效果
        uni.hideLoading()
        // 5.关闭节流阀
        this.isLoading = false
      },
      toTrendDetail(name, id, type) {
        uni.navigateTo({
          url: `/pages/home/market/trendDetail?name=${name}&id=${id}&type=${type}&date=${this.date}`,
        })
      },
      // 前一日
      beforeDay(date) {
        this.pagenum = 1
        this.date = this.getTime(new Date(date).getTime() - 24 * 60 * 60 * 1000)
        this.rending()
      },
      // 后一日
      afterDay(date) {
        this.pagenum = 1
        this.date = this.getTime(new Date(date).getTime() + 24 * 60 * 60 * 1000)
        this.rending()
      },
      // 格式化时间戳
      getTime(date) {
        let time = new Date(date)
        let y = time.getFullYear()
        let m = time.getMonth() + 1
        let d = time.getDate()
        let h = time.getHours()
        let mm = time.getMinutes()
        let s = time.getSeconds()
        if (s < 10) {
          s = '0' + s
        }
        if (h < 10) {
          h = '0' + h
        }
        if (mm < 10) {
          mm = '0' + mm
        }
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        return `${y}-${m}-${d}`
      },
      // 打开时间选择器
      selectDate() {
        this.dateShow = true
        uni.hideTabBar({})
      },
      // 关闭时间选择器
      cancelDate() {
        this.dateShow = false
        uni.showTabBar({})
      },
      // 确认当前选中时间
      confirmDate(e) {
        this.pagenum = 1
        this.$nextTick(() => {
          this.date = this.getTime(e.value)
          this.rending()
        })
        this.dateShow = false
        uni.showTabBar({})
      },
    },
  }
</script>

<style lang="scss" scoped>
  .center {
    padding: 24rpx;
  }
  .nav {
    display: flex;
    align-items: center;
    overflow-x: auto;
  }
  .nav_select {
    flex-shrink: 0;
    margin-top: 24rpx;
    padding: 10rpx 20rpx;
    border: 2rpx solid #999999;
    border-radius: 8rpx;
    margin-right: 20rpx;
    font-size: 24rpx;
    color: #999999;
  }
  .nav_select1 {
    border-color: #ec7c00;
    color: #ec7c00;
    background-color: #fffcf9;
  }
  .module_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24rpx;
    font-size: 24rpx;
    font-weight: bold;
    padding: 20rpx 28rpx 20rpx 36rpx;
    width: 686rpx;
    margin-left: -24rpx;
    background-color: #fff9f3;
    .module_head_name {
      margin-left: 64rpx;
    }
    .module_head_rank {
      display: flex;
      align-items: center;
    }
    .module_head_icon {
      margin-left: 8rpx;
      display: flex;
      flex-direction: column;

      .head_icon {
        width: 18rpx;
        height: 10rpx;
        margin-top: 4rpx;
      }
    }
  }
  .module_list {
    padding-top: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    .module_list_date {
      // margin-right: 120rpx;
    }
    .module_list_name {
      width: 400rpx;
      text-align: center;
      // margin-left: 120rpx;
    }

    .module_list_ranking {
      display: flex;
      align-items: center;
      margin-right: 16rpx;
    }
    .list_ranking_right {
      margin-left: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40rpx;
      .rise_decline {
        font-size: 24rpx;
        margin-left: 4rpx;
      }
    }
    .module_list_icon {
      text-align: center;
      width: 18rpx;
      height: 10rpx;
      line-height: 10rpx;
      font-size: 28rpx;
      color: #999999;
    }
  }
  .date {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .ipt_date {
      width: 180rpx;
      font-size: 24rpx;
      text-align: center;
    }
    .date_icon {
      width: 24rpx;
      height: 24rpx;
    }
  }
</style>
