<template>
  <view class="all_market">
    <view class="head">
      <view class="head_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>
    <view class="main_chart">
      <l-echart ref="columnar"></l-echart>
    </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" @tap="showGains = true">
          <view>{{ RiseOrDecline }}</view>
          <image
            src="../../../static/jiangxu_false.png"
            class="private_screening_icon"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="private_table_head_right" @tap="privateBelong">
        <view>{{ currentBelong }}</view>
        <!-- <image
          src="../../../static/jiangxu_false.png"
          class="private_screening_icon"
          mode="scaleToFill"
        /> -->
      </view>
    </view>
    <view v-if="list.length > 0">
      <view
        class="private_table_list"
        v-for="(item, index) in list"
        :key="index"
        @tap="toPrivateDetail(item.securityName, item.securityCode)"
      >
        <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_price1: item.riseLossesCurrentDay < 0 }"
          >
            {{ item.riseLossesCurrentDay.toFixed(2) }}
          </view>
        </view>
        <view>{{ item.dongCaiIndustryIndexLevel2 }}</view>
      </view>
    </view>
    <view v-else>
      <u-empty
        mode="data"
        icon="http://cdn.uviewui.com/uview/empty/data.png"
        marginTop="50"
      >
      </u-empty>
    </view>
    <!-- 选择时间 -->
    <u-datetime-picker
      :show="dateShow"
      v-model="date"
      mode="date"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="cancelDate"
      @confirm="confirmDate"
    ></u-datetime-picker>
    <!-- 个股所属板块 -->
    <u-picker
      :show="showPrivateBelong"
      :columns="columnsBelong"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="cancelPrivateBelong"
      @confirm="confirmPrivateBelong"
    ></u-picker>
    <!-- 数据上涨还是下降筛选 -->
    <u-picker
      :show="showGains"
      :columns="columnsGains"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="showGains = false"
      @confirm="confirmGains"
    ></u-picker>
  </view>
</template>

<script>
  import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
  export default {
    data() {
      return {
        // 筛选上涨or下降
        RiseOrDecline: '涨停',
        showGains: false,
        columnsGains: [['涨停', '跌停']],
        date: '2023-04-10',
        // 时间选择
        dateShow: false,
        list: [
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10.06%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10.05%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
        ],
        // 个股所属板块
        showPrivateBelong: false,
        currentBelong: '所属板块',
        columnsBelong: [['所属板块', '成交量']],
        pagename: 1,
        last_page: null,
      }
    },
    onLoad(options) {
      this.date = this.getTime(Date.parse(new Date()))
      this.rending()
    },
    onReachBottom() {
      if (this.pagenum < this.last_page) {
        this.getnewGoods()
      }
    },
    mounted() {
      this.$nextTick(() => {
        //  执行echarts方法
        // this.initEcharts()
        this.columnarInitCharts()
      })
    },
    methods: {
      rending() {
        // /stock/riseLossesDetail
        this.$api
          .post('/stock/originalIssueStockDetail', {
            businessDate: this.date,
            pageModel: {
              pageNo: this.pagename,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
            riseOrLosses: 1,
            securityCode: '',
            securityType: '',
          })
          .then(r => {
            if (r) {
              // this.data = r
              this.list = r.list
              // this.last_page = r.totalPage
              // this.privateList = r.list
              this.last_page = r.totalPage
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      rending1() {
        // /stock/riseLossesDetail
        this.$api
          .post('/stock/originalIssueStockDetail', {
            businessDate: this.date,
            pageModel: {
              pageNo: this.pagename,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
            riseOrLosses: 1,
            securityCode: '',
            securityType: '',
          })
          .then(r => {
            if (r) {
              // this.data = r
              this.list = [...this.list, ...r.list]
              // this.privateList = r.list
              this.last_page = r.totalPage
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      // 前一日
      beforeDay(date) {
        this.pagenum = 1
        this.date = this.getTime(new Date(date).getTime() - 24 * 60 * 60 * 1000)
        this.columnarInitCharts()
        this.rending()
      },
      // 后一日
      afterDay(date) {
        this.pagenum = 1
        this.date = this.getTime(new Date(date).getTime() + 24 * 60 * 60 * 1000)
        this.columnarInitCharts()
        this.rending()
      },
      // 打开时间选择器
      selectDate() {
        this.dateShow = true
      },
      // 关闭时间选择器
      cancelDate() {
        this.dateShow = false
      },
      // 确认当前选中时间
      confirmDate(e) {
        this.pagenum = 1
        this.$nextTick(() => {
          this.date = this.getTime(e.value)
          this.columnarInitCharts()
          this.rending()
        })
        this.dateShow = false
      },
      // 打开个股所属模块弹出层
      privateBelong() {
        this.showPrivateBelong = true
      },
      // 取消个股所属模块弹出层
      cancelPrivateBelong() {
        this.showPrivateBelong = false
      },
      // 确认个股所属模块
      confirmPrivateBelong(e) {
        this.currentBelong = e.value[0]
        this.showPrivateBelong = false
      },
      // 确认当前选中涨幅
      confirmGains(e) {
        this.RiseOrDecline = e.value[0]
        this.$api
          .post('/stock/originalIssueStockDetail', {
            businessDate: this.date,
            pageModel: {
              pageNo: 1,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
            riseOrLosses: this.RiseOrDecline == '涨停' ? 1 : 0,
            securityCode: '',
            securityType: '',
          })
          .then(r => {
            if (r) {
              // this.data = r
              this.list = r.list
              // this.privateList = r.list
              this.last_page = r.totalPage
            }
          })
          .catch(fall => {
            console.log(fall)
          })
        this.showGains = false
      },
      // 格式化时间戳
      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}`
      },
      // 柱状图初始化
      columnarInitCharts() {
        this.$api
          .post('/stock/riseLossesStatistics', {
            businessDate: this.date,
            securityCode: '',
            securityType: '',
          })
          .then(r => {
            if (r) {
              // this.data = r
              this.$refs.columnar.init(echarts, chart => {
                let option = {
                  xAxis: {},
                  yAxis: {
                    // type: 'value',
                    type: 'category',
                    data: [
                      '≥10%',
                      '≥7%',
                      '7-5%',
                      '5-3%',
                      '3-0%',
                      '平',
                      '-3至-5%',
                      '-5至-7%',
                      '≤-7%',
                      '≤-10%',
                    ],
                  },
                  series: [
                    {
                      data: r.data,
                      type: 'bar',
                      itemStyle: {
                        normal: {
                          //这里是重点
                          color: function (params) {
                            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                            var colorList = [
                              '#D9001B',
                              '#D9001B',
                              '#D9001B',
                              '#D9001B',
                              '#D9001B',
                              '#999999',
                              '#6FBB60',
                              '#6FBB60',
                              '#6FBB60',
                              '#6FBB60',
                            ]
                            return colorList[params.dataIndex]
                          },
                          label: {
                            show: true, //开启显示
                            position: 'right', //在上方显示
                            textStyle: {
                              //数值样式
                              // color: "black",
                              fontSize: 14,
                            },
                          },
                        },
                      },
                    },
                  ],
                  grid: {
                    top: '5%',
                  },
                }
                chart.setOption(option)
              })
            }
          })
          .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
      },
      // 前往个股详情
      toPrivateDetail(name, id) {
        uni.navigateTo({
          url: `/pages/home/private/privateDetail?name=${name}&id=${id}`,
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .head {
    display: flex;
    padding: 32rpx 24rpx;
  }
  .head_date {
    padding: 16rpx 32rpx;
    border-radius: 8rpx;
    border: 2rpx solid #ec7c00;
    display: flex;
    align-items: center;
    .ipt_date {
      color: #ec7c00;
      width: 180rpx;
      font-size: 24rpx;
      text-align: center;
    }
    .date_icon {
      width: 24rpx;
      height: 24rpx;
    }
  }
  .select_days {
    margin-left: 40rpx;
    padding: 16rpx 32rpx;
    border-radius: 8rpx;
    border: 2rpx solid #999999;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .select_days_icon {
      margin-left: 40rpx;
      width: 18rpx;
      height: 10rpx;
    }
  }
  .main_chart {
    // height: 550rpx;
    // background-color: pink;
  }
  .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;
        display: flex;
        align-items: center;
        justify-content: 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_gains {
        width: 150rpx;
        text-align: center;
        color: #d9001b;
      }
      .table_list_price1 {
        color: #6fbb60;
      }
    }
  }
  .private_screening_icon {
    width: 18rpx;
    height: 10rpx;
    margin-left: 24rpx;
  }
</style>
