<template>
  <view class="collection">
    <view class="nav center">
      <view>
        <text :class="{ nav_select: !isPrivate }" @tap="selectNav(false)">
          指数/板块
        </text>
        <text :class="{ nav_select: isPrivate }" @tap="selectNav(true)">
          个股
        </text>
      </view>
    </view>
    <view class="center" style="padding-top: 0">
      <view class="private_serch">
        <view class="private_serch_left">
          <u-icon name="search" size="20"></u-icon>
          <input
            type="text"
            v-model="serchValue"
            placeholder="请输入请输入个股代码、板块或名称"
            class="private_serch_ipt"
            style="margin-left: 8rpx"
          />
        </view>
        <view @tap="submit">搜索</view>
      </view>
    </view>
    <view v-if="!showLoad">
      <view class="private_table_head">
        <view class="private_table_head_left">
          <view class="private_head_name">股票名称</view>
          <view class="private_head_price">价格</view>
          <view class="private_head_gains">涨幅</view>
        </view>
        <view class="private_table_head_right" @tap="privateBelong">
          <view>关注日期</view>
        </view>
      </view>
      <view
        class="private_table_list"
        v-for="(item, index) in list"
        @tap="to(item.securityName, item.securityCode)"
        :key="index"
      >
        <view class="private_table_list_left">
          <view class="table_list_name">
            <view>{{ item.securityName }}</view>
            <view class="table_list_code">{{ item.securityCode }}</view>
          </view>
          <view
            class="table_list_price"
            :class="{ table_list_price1: item.riseLossesCurrentDay < 0 }"
          >
            {{ item.closingPrice }}
          </view>
          <view
            class="table_list_gains"
            :class="{ table_list_gains1: item.riseLossesCurrentDay < 0 }"
          >
            <span v-if="item.riseLossesCurrentDay"
              >{{ item.riseLossesCurrentDay.toFixed(2) }}%</span
            >
          </view>
        </view>
        <view>{{ item.collectDate }}</view>
      </view>
    </view>
    <view v-else class="show_load">
      <u-loading-icon></u-loading-icon>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showLoad: false,
        // 指数/板块or个股
        isPrivate: false,
        list: [],
        pagenum: 1,
        last_page: null,
        serchValue: '',
      }
    },
    onLoad(options) {
      this.rending()
    },
    onReachBottom() {
      if (this.pagenum < this.last_page) {
        this.getnewGoods()
      }
    },

    methods: {
      // 前往搜索页
      // toSerch() {
      //   uni.navigateTo({
      //     url: `/pages/user/collectionSerch`,
      //   })
      // },
      submit() {
        this.isPrivate ? this.privateRending() : this.rending()
      },
      selectNav(is) {
        this.pagenum = 1
        this.showLoad = true
        this.isPrivate = is
        this.serchValue = ''
        if (is) {
          this.privateRending()
        } else {
          this.rending()
        }
      },
      // 请求个股数据
      privateRending() {
        // /collect/query
        this.$api
          .post('/collect/query', {
            businessDate: '',
            keyWord: this.serchValue,
            market: '',
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
            plateOrA: 2,
          })
          .then(r => {
            if (r) {
              this.list = r.list
              console.log(this.list)
              this.last_page = r.totalPage
              this.showLoad = false
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      privateRending1() {
        this.showLoad = false
        // /collect/query
        this.$api
          .post('/collect/query', {
            businessDate: '',
            keyWord: this.serchValue,
            market: '',
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
            plateOrA: 2,
          })
          .then(r => {
            if (r) {
              this.list = [...this.list, ...r.list]
              this.last_page = r.totalPage
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      rending() {
        this.$api
          .post('/collect/query', {
            businessDate: '',
            keyWord: this.serchValue,
            market: '',
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
            plateOrA: 1,
          })
          .then(r => {
            if (r) {
              this.list = r.list
              this.last_page = r.totalPage
              this.showLoad = false
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      rending1() {
        this.$api
          .post('/collect/query', {
            businessDate: '',
            keyWord: this.serchValue,
            market: '',
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
            plateOrA: 1,
          })
          .then(r => {
            if (r) {
              this.list = [...this.list, ...r.list]
              this.last_page = r.totalPage
              this.showLoad = false
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      // 上拉加载
      getnewGoods() {
        this.pagenum = this.pagenum + 1
        if (this.isPrivate) {
          this.privateRending1()
        } else {
          this.rending1()
        }
        // 1.展示loading效果
        uni.showLoading({
          title: '数据加载中...',
        })
        // 2.开启节流阀
        this.isLoading = true
        // 3.发起网络请求

        // 无论成功与否都会调用该方法
        // 4.隐藏loading效果
        uni.hideLoading()
        // 5.关闭节流阀
        this.isLoading = false
      },
      to(name, id) {
        if (this.isPrivate) {
          uni.navigateTo({
            url: `/pages/home/private/privateDetail?name=${name}&id=${id}`,
          })
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .center {
    padding: 32rpx 24rpx;
  }
  .nav {
    font-size: 24rpx;
    color: #999999;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav text {
    margin-right: 32rpx;
  }
  .nav_select {
    font-weight: bold;
    font-size: 32rpx;
    color: #ec7c00;
  }
  .private_serch {
    padding: 24rpx 32rpx;
    border: 2rpx solid #dedede;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24rpx;
    border-radius: 12rpx;
    color: #ec7c00;
    .private_serch_ipt {
      width: 400rpx;
      font-size: 24rpx;
    }
    .private_serch_left {
      display: flex;
      align-items: center;
    }
  }
  .private_table_head {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    font-weight: bold;
    background-color: #fff9f3;
    padding: 20rpx 24rpx;
    justify-content: space-between;
    .private_table_head_right {
      display: flex;
      align-items: center;
    }
    .private_table_head_left {
      display: flex;
      align-items: center;
      .private_head_name {
        width: 200rpx;
      }
      .private_head_price {
        width: 150rpx;
        text-align: center;
      }
      .private_head_gains {
        width: 150rpx;
        text-align: center;
      }
    }
  }
  .private_table_list {
    padding: 24rpx 24rpx;
    border-bottom: 2rpx solid #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    .private_table_list_left {
      display: flex;
      align-items: center;
      .table_list_name {
        width: 200rpx;
      }
      .table_list_code {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #999999;
      }
      .table_list_price {
        width: 150rpx;
        text-align: center;
        color: #d9001b;
      }
      .table_list_price1 {
        color: #8fc320;
      }
      .table_list_gains {
        width: 150rpx;
        text-align: center;
        color: #d9001b;
      }
      .table_list_gains1 {
        color: #8fc320;
      }
    }
  }
  .private_screening_icon {
    width: 18rpx;
    height: 10rpx;
    margin-left: 24rpx;
  }
  .show_load {
    margin-top: 100rpx;
  }
</style>
