<template>
  <u-loading-page v-if="load" :loading="load"></u-loading-page>
  <view class="trade_stats" v-else>
    <view class="head" :class="{ head1: totalEarnings < 0 }">
      <view class="head_top">
        <view class="all_breakeven">{{ name }}</view>
        <view class="all_money">{{ totalProfit }}</view>
        <view>收益率 {{ totalEarnings.toFixed(2) }}%</view>
      </view>
      <view class="head_bottom">
        <view
          v-for="(item, index) in nav"
          :key="index"
          class="head_bottom_list"
          @tap="selectNav(item.name)"
        >
          <view :class="{ bottom_list: item.is }">{{ item.name }}</view>
          <image
            v-if="item.is"
            src="../../static/collection_select.png"
            class="select_icon"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>
    <view class="main">
      <view class="main_date" v-if="nav[3].is == true">
        <input
          type="text"
          class="main_date_ipt"
          disabled
          placeholder="请选择开始日期"
          v-model="startDate"
          @tap="selectStartDate"
        />
        <u-icon name="minus" size="20" style="padding: 0 20rpx"></u-icon>
        <input
          type="text"
          disabled
          class="main_date_ipt"
          placeholder="请选择截至日期"
          v-model="endDate"
          @tap="selectEndDate"
        />
        <view class="main_date_serch">搜索</view>
      </view>
      <view class="main_nav">
        <view
          :class="{ main_nav_color: isEarnings }"
          @tap="selectMainNav(true)"
        >
          收益率
        </view>
        <view
          style="margin-left: 72rpx"
          :class="{ main_nav_color: !isEarnings }"
          @tap="selectMainNav(false)"
        >
          盈亏金额
        </view>
      </view>
      <view style="height: 600rpx; width: 100%; padding-top: 60rpx">
        <l-echart ref="chart"></l-echart>
      </view>
    </view>
    <!-- 筛选/开始时间选择 -->
    <u-datetime-picker
      :show="startDateShow"
      v-model="date"
      mode="date"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="startDateShow = false"
      @confirm="confirmStartDate"
    ></u-datetime-picker>
    <!-- 筛选/结束时间选择 -->
    <u-datetime-picker
      :show="endDateShow"
      v-model="date"
      mode="date"
      :minDate="minDate"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="endDateShow = false"
      @confirm="confirmEndDate"
    ></u-datetime-picker>
  </view>
</template>

<script>
  import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
  export default {
    data() {
      return {
        totalProfit: '',
        totalEarnings: '',
        bgcColor: {
          background: '',
        },
        nav: [
          {
            name: '本月',
            is: true,
            current: 0,
          },
          {
            name: '近一月',
            is: false,
            current: 1,
          },
          {
            name: '近三月',
            is: false,
            current: 2,
          },
          {
            name: '自定义',
            is: false,
            current: 0,
          },
        ],
        navIndex: 0,
        // 收益率or盈亏金额
        isEarnings: true,
        // 自定义开始日期
        startDate: '',
        // 选择开始时间
        startDateShow: false,
        // 自定义截至日期
        endDate: '',
        // 选择截至时间
        endDateShow: false,
        minDate: null,
        name: '',
        load: true,
      }
    },
    onLoad(options) {
      this.name = options.name
      this.code = options.id
      this.rending()
    },
    mounted() {
      this.$nextTick(() => {
        //  执行echarts方法
        this.initEchartsZ()
      })
    },
    methods: {
      // 选择导航
      selectNav(name) {
        this.nav.forEach(item => {
          if (item.name === name) {
            item.is = true
            this.navIndex = item.current
            this.initEchartsZ()
          } else {
            item.is = false
          }
        })
      },
      // 选择收益率or盈亏金额
      selectMainNav(is) {
        this.isEarnings = is
      },
      // 确定开始时间
      confirmStartDate(e) {
        this.$nextTick(() => {
          this.minDate = new Date(e.value).getTime()
          console.log(this.minDate)
          this.startDate = this.getTime(e.value)
        })

        this.startDateShow = false
      },
      // 确定截至时间
      confirmEndDate(e) {
        this.$nextTick(() => {
          this.endDate = this.getTime(e.value)
        })
        this.endDateShow = false
      },
      // 选择开始时间
      selectStartDate() {
        if (!this.endDateShow) {
          this.startDateShow = true
        }
      },
      // 选择截至时间
      selectEndDate() {
        if (this.startDate) {
          if (!this.startDateShow) {
            this.endDateShow = true
          }
        } else {
          uni.showToast({
            title: '请先选择开始时间',
            icon: 'none',
          })
        }
      },
      // 格式化时间戳
      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}`
      },
      rending() {
        this.$api
          .post('/transaction/totalEarnings', {
            securityCode: this.code,
          })
          .then(r => {
            if (r) {
              // this.data = r
              this.totalProfit = r.totalEarnings
              this.totalEarnings = r.earningsRate
              if (r.earningsRate > 0) {
                setTimeout(() => {
                  uni.setNavigationBarColor({
                    frontColor: '#ffffff',
                    backgroundColor: '#F93938',
                  })
                }, 100)
              } else {
                setTimeout(() => {
                  uni.setNavigationBarColor({
                    frontColor: '#ffffff',
                    backgroundColor: '#568EFF',
                  })
                }, 100)
              }
              this.load = false
              console.log(r)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      initEchartsZ() {
        this.$api
          .post('/transaction/earningsLine', {
            endDate: this.endDate,
            securityCode: '',
            startDate: this.startDate,
            timeType: this.navIndex,
            type: this.isEarnings ? 1 : 2,
          })
          .then(r => {
            if (r) {
              console.log(r)
              // this.data = r
              this.$refs.chart.init(echarts, chart => {
                let option = {
                  tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                      return [pt[0], '10%']
                    },
                  },
                  title: {
                    left: 'center',
                    text: 'Large Ara Chart',
                  },
                  toolbox: {
                    feature: {
                      dataZoom: {
                        yAxisIndex: 'none',
                      },
                      restore: {},
                      saveAsImage: {},
                    },
                  },
                  xAxis: {
                    type: 'time',
                    boundaryGap: false,
                  },
                  yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                  },
                  dataZoom: [
                    {
                      type: 'inside',
                      start: 0,
                      end: 100,
                    },
                    {
                      show: false,
                      start: 0,
                      end: 100,
                    },
                  ],
                  series: [
                    {
                      name: '数据',
                      type: 'line',
                      smooth: true,
                      symbol: 'none',
                      // 背景色
                      // areaStyle: {},
                      data: r,
                    },
                  ],
                }
                chart.setOption(option)
              })

              console.log(r)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .head {
    height: 300rpx;
    color: white;
    background: linear-gradient(180deg, #f93938 0%, #fa4c0d 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .head_top {
    text-align: center;
    font-size: 28rpx;
    .all_breakeven {
      color: rgba(255, 255, 255, 0.7);
    }
    .all_money {
      margin: 20rpx 0;
      font-size: 60rpx;
      font-weight: bold;
    }
  }
  .head_bottom {
    padding: 0 24rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;

    color: rgba(255, 255, 255, 0.7);
    .head_bottom_list {
      position: relative;
      display: flex;
      margin-right: 64rpx;
      padding-bottom: 24rpx;
      justify-content: center;
    }
    .bottom_list {
      color: white;
    }
    .select_icon {
      position: absolute;
      bottom: 0;
      width: 24rpx;
      height: 14rpx;
    }
  }
  .head1 {
    background: linear-gradient(180deg, #568eff 0%, #4479eb 100%);
  }
  .main {
    margin-top: 32rpx;
    .main_date {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      padding: 0 24rpx;
      .main_date_ipt {
        width: 170rpx;
        padding: 10rpx 46rpx;
        border: 2rpx solid #999999;
        border-radius: 8rpx;
        height: 36rpx;
        text-align: center;
      }
      .main_date_serch {
        color: #ec7c00;
        margin-left: 32rpx;
      }
      /deep/.u-icon--right {
        padding: 0 16rpx !important;
      }
    }
    .main_nav {
      margin-top: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #999999;
    }
    .main_nav_color {
      color: #ec7c00;
    }
  }
  .line {
    height: 20rpx;
    background-color: #f6f6f6;
  }

  .footer {
    .footer_nav {
      padding: 32rpx 24rpx;
      display: flex;
      font-weight: bold;
      align-items: center;
      justify-content: space-between;
      .footer_nav_right {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999999;
        font-weight: 500;
      }
      .right_icon {
        width: 24rpx;
        height: 24rpx;
        margin-left: 10rpx;
      }
    }
    .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_gains {
          width: 180rpx;
          text-align: center;
        }
      }
    }
    .private_screening_icon {
      width: 18rpx;
      height: 10rpx;
      margin-left: 24rpx;
    }
    .see_more {
      padding: 32rpx 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: #ec7c00;
    }
    .more_icon {
      width: 22rpx;
      height: 22rpx;
      margin-left: 10rpx;
    }
  }
</style>
