<template>
  <view class="all_breakeven">
    <view class="center">
      <view class="private_serch" @tap="toSerch">
        <view class="private_serch_left">
          <u-icon name="search" size="20"></u-icon>
          <input
            type="text"
            placeholder="请输入请输入个股代码、板块或名称"
            class="private_serch_ipt"
            style="margin-left: 8rpx"
            v-model="serchValue"
          />
        </view>
        <view @tap="submitSerch">搜索</view>
      </view>
      <view class="private_screening">
        <view class="private_screening_list" @tap="showPrivateMarket = true">
          <view>{{ currentMarket }}</view>
          <image
            src="../../static/jiangxu_false.png"
            class="private_screening_icon"
            mode="scaleToFill"
          />
        </view>
        <!-- <view class="private_screening_list" @tap="showPrivatePlate = true">
          <view>{{ currentPlate }}</view>
          <image
            src="../../static/jiangxu_false.png"
            class="private_screening_icon"
            mode="scaleToFill"
          />
        </view> -->
        <view class="private_screening_list" @tap="showPrivatePrice = true">
          <view>{{ currentPrice }}</view>
          <image
            src="../../static/jiangxu_false.png"
            class="private_screening_icon"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>
    <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"
      :key="index"
      @tap="toBreakevenDetail(item.securityCode, item.securityName)"
    >
      <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">
          {{ item.buyDate }}
        </view>
        <view class="table_list_gains">
          {{ item.sellDate }}
        </view>
      </view>
      <view
        class="table_list_totalMoney"
        :class="{ table_list_gains1: item.totalMoney < 0 }"
        >{{ item.totalMoney }}</view
      >
    </view>
    <!-- 个股筛选大盘 -->
    <u-picker
      :show="showPrivateMarket"
      :columns="columnsMarket"
      keyName="name"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="showPrivateMarket = false"
      @confirm="confirmPrivateMarket"
    ></u-picker>
    <!-- 个股筛选板块 -->
    <u-picker
      :show="showPrivatePlate"
      :columns="columnsPlate"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="showPrivatePlate = false"
      @confirm="confirmPrivatePlate"
    ></u-picker>
    <!-- 个股筛选价格 -->
    <u-picker
      :show="showPrivatePrice"
      :columns="columnsPrice"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="showPrivatePrice = false"
      @confirm="confirmPrivatePrice"
    ></u-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 个股筛选价格
        showPrivatePrice: false,
        currentPrice: '全部盈亏',
        currentPriceIndex: '',
        columnsPrice: [['全部盈亏', '盈利个股', '亏损个股']],
        // 个股筛选板块
        showPrivatePlate: false,
        currentPlate: '全部板块',
        columnsPlate: [
          ['全部板块', '上证指数', '深证指数', '创业板', '科创板'],
        ],
        // 个股筛选大盘
        showPrivateMarket: false,
        currentMarket: '全部大盘',
        columnsMarket: [
          [
            { name: '全部大盘', current: '' },
            { name: '上证指数', current: 'SZ' },
            { name: '深证指数', current: 'SH' },
            { name: '创业板', current: '30' },
            { name: '科创版', current: '688' },
          ],
        ],
        currentMarketId: '',
        list: [],
        pagenum: 1,
        last_page: null,
        serchValue: '',
      }
    },
    onLoad(options) {
      this.rending()
    },
    onReachBottom() {
      if (this.pagenum < this.last_page) {
        this.getnewGoods()
      }
    },

    methods: {
      rending() {
        this.$api
          .post('/transaction/profitOrLoss', {
            endDate: '',
            keyWord: this.serchValue,
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
            securityType: this.currentMarketId,
            sortAmount: 1,
            startDate: '',
            type: this.currentPriceIndex,
          })
          .then(r => {
            if (r) {
              // this.data = r
              this.list = r.list
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      // 确认个股筛选大盘
      confirmPrivateMarket(e) {
        this.pagenum = 1
        this.currentMarket = e.value[0].name
        this.currentMarketId = e.value[0].current
        this.rending()
        this.showPrivateMarket = false
      },
      // 确认个股筛选板块
      confirmPrivatePlate(e) {
        this.currentPlate = e.value[0]
        this.showPrivatePlate = false
      },
      // 确认个股筛选价格
      confirmPrivatePrice(e) {
        this.pagenum = 1
        this.currentPrice = e.value[0]
        if (this.currentPrice == '全部盈亏') {
          this.currentPriceIndex = ''
        } else if (this.currentPrice == '盈利个股') {
          this.currentPriceIndex = 1
        } else {
          this.currentPriceIndex = 2
        }
        this.rending()
        this.showPrivatePrice = false
      },
      // 上拉加载
      getnewGoods() {
        this.pagenum = this.pagenum + 1
        this.rending1()
        // 1.展示loading效果
        uni.showLoading({
          title: '数据加载中...',
        })
        // 2.开启节流阀
        this.isLoading = true
        // 3.发起网络请求

        // 无论成功与否都会调用该方法
        // 4.隐藏loading效果
        uni.hideLoading()
        // 5.关闭节流阀
        this.isLoading = false
      },
      // 前往个股详情
      toBreakevenDetail(id, name) {
        uni.navigateTo({
          url: `/pages/user/breakevenDetail?id=${id}&name=${name}`,
        })
      },
      submitSerch() {
        this.rending()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .center {
    padding: 24rpx 24rpx;
  }
  .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_screening {
    padding: 32rpx 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24rpx;
    .private_screening_list {
      display: flex;
      align-items: center;
    }
  }
  .private_screening_icon {
    width: 18rpx;
    height: 10rpx;
    margin-left: 24rpx;
  }
  .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: 150rpx;
      }
      .private_head_price {
        width: 180rpx;
        text-align: center;
      }
      .private_head_gains {
        width: 180rpx;
        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: 150rpx;
      }
      .table_list_code {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #999999;
      }
      .table_list_price {
        width: 180rpx;
        text-align: center;
      }
      .table_list_totalMoney {
        color: #d9001b;
      }
      .table_list_gains {
        width: 180rpx;
        text-align: center;
      }
      .table_list_gains1 {
        color: #6fbb60;
      }
    }
  }
  .private_screening_icon {
    width: 18rpx;
    height: 10rpx;
    margin-left: 24rpx;
  }
  .table_list_totalMoney {
    color: #d9001b;
  }
  .table_list_gains1 {
    color: #6fbb60;
  }
</style>
