<template>
  <u-loading-page v-if="load" :loading="load"></u-loading-page>
  <view class="home" v-else>
    <view class="center">
      <view class="nav">
        <view>
          <text :class="{ nav_select: isMarket }" @tap="isMarket = true">
            大盘信息
          </text>
          <text :class="{ nav_select: !isMarket }" @tap="isMarketNav">
            个股信息
          </text>
        </view>
        <view class="date" v-if="isMarket">
          <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>
    <view class="main">
      <!-- 大盘信息 -->
      <view v-if="isMarket">
        <view class="market_head">
          <view
            @tap="toMarketDetail(item)"
            class="indicators_box"
            v-for="(item, index) in indicatorsList"
            :key="index"
          >
            <view class="indcators_num">
              {{ item.totalAmount }}
            </view>
            <view class="indcators_name">
              {{ item.securityName }}
            </view>
            <view class="indcators_footer">
              <text class="indcators_rose">涨{{ item.riseNum }}家</text>
              <text style="color: #999999">平{{ item.equalNum }}家</text>
              <text class="indcators_fell">跌{{ item.lossesNum }}家</text>
            </view>
          </view>
          <view class="indicators_box" @tap="toAllMarket">
            <view class="indicators_all" style="font-weight: bold">
              {{ AllMarketData.securityName }}
            </view>
            <view class="indcators_footer indcators_footer1">
              <text class="indcators_rose"
                >涨{{ AllMarketData.riseNum }}家</text
              >
              <text style="color: #999999">
                平{{ AllMarketData.equalNum }}家
              </text>
              <text class="indcators_fell">
                跌{{ AllMarketData.lossesNum }}家
              </text>
            </view>
          </view>
        </view>
        <view class="market_line"></view>
        <view class="market_module" @tap="toModuleDateil">
          <view class="market_module_text">趋势板块</view>
          <view class="market_module_right">
            <view>查看所有</view>
            <image
              src="../../static/right_all.png"
              style="width: 24rpx; height: 24rpx"
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="trend_box">
          <view class="trend_box_left">
            <view
              class="trend"
              :class="{ trend1: item.is }"
              v-for="(item, index) in trendList"
              :key="index"
              @tap.stop="selectTrend(item.name)"
            >
              {{ item.name }}
            </view>
          </view>
          <image
            src="../../static/home_sift.png"
            class="trend_icon"
            mode="scaleToFill"
            @tap.stop="openSelectTrend"
          />
        </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="moduleList.length > 0">
          <view
            class="module_list"
            v-for="(item, index) in moduleList"
            :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>
      <!-- 个股信息 -->
      <view v-else>
        <view class="private_info">
          <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"
              />
            </view>
            <view>搜索</view>
          </view>
          <view class="private_screening">
            <view class="private_screening_list" @tap="PrivateMarket">
              <view>{{ currentMarket }}</view>
              <image
                src="../../static/jiangxu_false.png"
                class="private_screening_icon"
                mode="scaleToFill"
              />
            </view>
            <!-- <view class="private_screening_list" @tap="PrivatePlate">
              <view>{{ currentPlate }}</view>
              <image
                src="../../static/jiangxu_false.png"
                class="private_screening_icon"
                mode="scaleToFill"
              />
            </view> -->
            <view class="private_screening_list" @tap="PrivatePrice">
              <view>{{ currentPrice }}</view>
              <image
                src="../../static/jiangxu_false.png"
                class="private_screening_icon"
                mode="scaleToFill"
              />
            </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>{{ currentBelong }}</view> -->
              <view>所属板块</view>
              <!-- <image
                src="../../static/jiangxu_false.png"
                class="private_screening_icon"
                mode="scaleToFill"
              /> -->
            </view>
          </view>
          <view v-if="privateList.length > 0">
            <view
              class="private_table_list"
              v-for="(item, index) in privateList"
              :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">
                  <span
                    v-if="item.riseLossesCurrentDay > 0"
                    style="color: #d9001b"
                    >{{ item.closingPrice }}</span
                  >
                  <span v-else style="color: #6fbb60">{{
                    item.closingPrice
                  }}</span>
                </view>
                <view class="table_list_gains">
                  <span
                    v-if="item.riseLossesCurrentDay > 0"
                    style="color: #d9001b"
                  >
                    {{ item.riseLossesCurrentDay.toFixed(2) }}%
                  </span>
                  <span v-else style="color: #6fbb60"
                    >{{ item.riseLossesCurrentDay.toFixed(2) }}%</span
                  >
                </view>
              </view>
              <view>{{ item.dongCaiIndustryIndexCode2 }}</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>
      </view>
    </view>
    <!-- 选择时间 -->
    <u-datetime-picker
      :show="dateShow"
      v-model="date"
      mode="date"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="cancelDate"
      @confirm="confirmDate"
    ></u-datetime-picker>
    <!-- 趋势板块筛选弹出层 -->
    <u-popup :show="trendShow" mode="bottom" :round="8">
      <view>
        <view class="trend_show_nav">
          <view @tap="closeTrendShow">取消</view>
          <view @tap="confirmTrendShow">确定</view>
        </view>
        <view class="trend_show_main">
          <view style="font-weight: bold">筛选类型</view>
          <view>
            <view class="trend_show_left">
              <view
                class="show_trend"
                :class="{ trend1: item.is }"
                v-for="(item, index) in showTrendList"
                :key="index"
                @tap="selectShowTrend(item.name)"
              >
                {{ item.name }}
              </view>
            </view>
          </view>
          <view class="show_ranking_num">排名展示数量</view>
          <view style="margin-top: 24rpx">
            <u-input
              placeholder="请输入展示数量"
              border="surround"
              v-model="trendShowNum"
              fontSize="24rpx"
            ></u-input>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 个股筛选大盘 -->
    <u-picker
      :show="showPrivateMarket"
      :columns="columnsMarket"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      keyName="name"
      @cancel="cancelPrivateMarket"
      @confirm="confirmPrivateMarket"
    ></u-picker>
    <!-- 个股筛选板块 -->
    <u-picker
      :show="showPrivatePlate"
      :columns="columnsPlate"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="cancelPrivatePlate"
      @confirm="confirmPrivatePlate"
    ></u-picker>
    <!-- 个股筛选价格 -->
    <u-picker
      :show="showPrivatePrice"
      :columns="columnsPrice"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="cancelPrivatePrice"
      @confirm="confirmPrivatePrice"
    ></u-picker>
    <!-- 个股所属板块 -->
    <u-picker
      :show="showPrivateBelong"
      :columns="columnsBelong"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="cancelPrivateBelong"
      @confirm="confirmPrivateBelong"
    ></u-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        AllMarketData: {},
        // 个股所属板块
        showPrivateBelong: false,
        currentBelong: '所属板块',
        columnsBelong: [['所属板块', '成交量']],
        // 个股筛选价格
        showPrivatePrice: false,
        currentPrice: '全部价格',
        columnsPrice: [['全部价格', '价格升序', '价格降序']],
        // 个股筛选板块
        showPrivatePlate: false,
        currentPlate: '全部板块',
        columnsPlate: [
          ['全部板块', '上证指数', '深证指数', '创业板', '科创板'],
        ],
        // 个股筛选大盘
        showPrivateMarket: false,
        currentMarket: '全部大盘',
        currentMarketId: '',
        columnsMarket: [
          // ['全部板块', '上证指数', '深证指数', '创业板', '科创板'],
          [
            { name: '全部大盘', current: '' },
            { name: '上证指数', current: 'SH' },
            { name: '深证指数', current: 'SZ' },
            { name: '创业板', current: '30' },
            { name: '科创版', current: '688' },
          ],
        ],
        // 展示数量
        trendShowNum: '',
        // 趋势筛选
        trendShow: false,
        // 时间选择
        dateShow: false,
        // 大盘信息or个股信息
        isMarket: true,
        // 板块列表排名升序or降序
        marketRank: true,
        // 趋势选择
        trendList: [
          {
            name: '当日趋势',
            is: true,
            current: 1,
          },
          {
            name: '5日趋势',
            is: false,
            current: 5,
          },
          {
            name: '10日趋势',
            is: false,
            current: 10,
          },
          {
            name: '15日趋势',
            is: false,
            current: 15,
          },
        ],
        // 弹出层趋势选择
        showTrendList: [
          {
            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,
          },
        ],
        trendCurrent: 1,
        date: '',
        indicatorsList: [
          // {
          //   name: '上证指数',
          //   num: '3270.54',
          //   zhang: '10',
          //   ping: '15',
          //   die: '20',
          // },
          // {
          //   name: '深证指数',
          //   num: '3270.54',
          //   zhang: '10',
          //   ping: '15',
          //   die: '20',
          // },
          // {
          //   name: '创业板',
          //   num: '3270.54',
          //   zhang: '10',
          //   ping: '15',
          //   die: '20',
          // },
          // {
          //   name: '科创版',
          //   num: '3270.54',
          //   zhang: '10',
          //   ping: '15',
          //   die: '20',
          // },
        ],
        // 趋势板块
        moduleList: [
          {
            date: '2023-03-14',
            name: '半导体',
            ranking: '1',
            riseOrDecline: 2,
            state: 3,
          },
          {
            date: '2023-03-14',
            name: '电子设备制造',
            ranking: '1',
            riseOrDecline: 2,
            state: 1,
          },
          {
            date: '2023-03-14',
            name: '电子设备制',
            ranking: '1',
            riseOrDecline: 3,
            state: 2,
          },
        ],
        // 个股信息
        privateList: [
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
          },
        ],
        sortWay: '',
        last_page: null,
        pagenum: 1,
        load: true,
      }
    },
    onLoad(options) {
      this.date = this.getTime(Date.parse(new Date()))
      // 请求当前页面数据
      this.isMarket ? this.marketRending() : this.isMarketNav()
      // this.getModuleList()
    },
    onReachBottom() {
      if (!this.isMarket) {
        if (this.pagenum < this.last_page) {
          this.getnewGoods()
        }
      }
    },
    methods: {
      // 个股信息数据
      isMarketNav() {
        this.isMarket = false
        this.$api
          .post('/stock/originalIssueStockDetail', {
            businessDate: '',
            keyWord: '',
            market: '',
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
          })
          .then(r => {
            if (r) {
              // this.data = r
              this.privateList = r.list
              this.last_page = r.totalPage
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      isMarketNav1() {
        this.isMarket = false
        this.$api
          .post('/stock/originalIssueStockDetail', {
            businessDate: '',
            keyWord: '',
            market: '',
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
          })
          .then(r => {
            if (r) {
              // this.data = r
              this.privateList = [...this.privateList, ...r.list]
              this.last_page = r.totalPage
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      getnewGoods() {
        this.pagenum = this.pagenum + 1
        // 1.展示loading效果
        uni.showLoading({
          title: '数据加载中...',
        })
        // 2.开启节流阀
        this.isLoading = true
        // 3.发起网络请求
        this.isMarketNav1()
        // 无论成功与否都会调用该方法
        // 4.隐藏loading效果
        uni.hideLoading()
        // 5.关闭节流阀
        this.isLoading = false
      },
      // 获取趋势板块列表
      getModuleList() {
        console.log(1)
        this.$api
          .post('/stock/trendPlate', {
            businessDate: this.date,
            pageModel: {
              pageNo: 1,
              pageSize: 10,
              sortField: 'sort',
              sortWay: this.marketRank ? 'asc' : 'desc',
            },
            trendType: this.trendCurrent,
          })
          .then(r => {
            if (r) {
              // this.data = r
              this.moduleList = r.list
              console.log(r)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      // 大盘信息板块列表排名选择
      marketRankSelect() {
        this.marketRank = !this.marketRank
        this.$api
          .post('/stock/trendPlate', {
            businessDate: this.date,
            pageModel: {
              pageNo: 1,
              pageSize: 10,
              sortField: 'sort',
              sortWay: this.marketRank ? 'asc' : 'desc',
            },
            trendType: this.trendCurrent,
          })
          .then(r => {
            if (r) {
              // this.data = r
              this.moduleList = r.list
              console.log(r)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      // 格式化时间戳
      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}`
      },
      // 前一日
      beforeDay(date) {
        this.date = this.getTime(new Date(date).getTime() - 24 * 60 * 60 * 1000)
        this.marketRending()
        // this.getModuleList()
      },
      // 后一日
      afterDay(date) {
        this.date = this.getTime(new Date(date).getTime() + 24 * 60 * 60 * 1000)
        this.marketRending()
        // this.getModuleList()
      },
      // 打开时间选择器
      selectDate() {
        this.dateShow = true
        uni.hideTabBar({})
      },
      // 关闭时间选择器
      cancelDate() {
        this.dateShow = false
        uni.showTabBar({})
      },
      // 确认当前选中时间
      confirmDate(e) {
        this.$nextTick(() => {
          this.date = this.getTime(e.value)
          this.marketRending()
          // this.getModuleList()
        })
        this.dateShow = false
        uni.showTabBar({})
      },
      // 选择趋势
      selectTrend(name) {
        this.trendList.forEach(item => {
          if (item.name === name) {
            item.is = true
            this.trendCurrent = item.current
            this.getModuleList()
          } else {
            item.is = false
          }
        })
      },
      // 选择弹出层趋势
      selectShowTrend(name) {
        this.showTrendList.forEach(item => {
          if (item.name === name) {
            item.is = true
            this.trendCurrent = item.current
          } else {
            item.is = false
          }
        })
      },
      // 打开趋势筛选弹出层
      openSelectTrend() {
        uni.hideTabBar({})
        this.trendShow = true
      },
      // 取消选择趋势弹出层
      closeTrendShow() {
        this.trendShow = false
        uni.showTabBar({})
      },
      // 确认选择趋势
      confirmTrendShow() {
        this.$api
          .post('/stock/trendPlate', {
            businessDate: this.date,
            pageModel: {
              pageNo: 1,
              pageSize: this.trendShowNum,
              sortField: 'sort',
              sortWay: this.marketRank ? 'asc' : 'desc',
            },
            trendType: this.trendCurrent,
          })
          .then(r => {
            if (r) {
              this.moduleList = r.list
              // this.data = r
              console.log(r)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
        this.trendShow = false
        uni.showTabBar({})
      },
      // 请求大盘信息数据
      marketRending() {
        this.moduleList.forEach(item => {
          item.state == 1 ? (item.color = '#D9001B') : (item.color = '#8FC320')
        })
        this.$api
          .post('/stock/appRiseLossesStatistics', {
            businessDate: this.date,
            securityCode: '',
            securityType: '',
          })
          .then(r => {
            if (r) {
              // this.data = r
              let array = []

              r.list.forEach(item => {
                if (item.securityName == '全部股票') {
                  this.AllMarketData = item
                } else {
                  array.push(item)
                }
              })
              this.indicatorsList = array
              this.load = false
              console.log(r)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
        this.getModuleList()
      },
      // 前往所有趋势板块详情页
      toModuleDateil() {
        uni.navigateTo({
          url: `/pages/home/market/allTrendModule?date=${this.date}`,
        })
      },
      // 前往大盘详情
      toMarketDetail(item) {
        uni.navigateTo({
          url: `/subpkgA/marketIndex?name=${item.securityName}&date=${this.date}`,
        })
      },
      // 前往全部大盘
      toAllMarket() {
        uni.navigateTo({
          url: `/pages/home/market/allMarket`,
        })
      },
      // 前往趋势详情页
      toTrendDetail(name, id, type) {
        uni.navigateTo({
          url: `/pages/home/market/trendDetail?name=${name}&id=${id}&type=${type}&date=${this.date}`,
        })
      },
      // 前往个股详情
      toPrivateDetail(name, id) {
        uni.navigateTo({
          url: `/pages/home/private/privateDetail?name=${name}&id=${id}`,
        })
      },
      //
      //
      //
      //
      //
      // 前往搜索页
      toSerch() {
        uni.navigateTo({
          url: `/pages/home/private/serch`,
        })
      },
      // 打开个股筛选大盘弹出层
      PrivateMarket() {
        uni.hideTabBar({})
        this.showPrivateMarket = true
      },
      // 取消个股筛选大盘弹出层
      cancelPrivateMarket() {
        this.showPrivateMarket = false
        uni.showTabBar({})
      },
      // 确认个股筛选大盘
      confirmPrivateMarket(e) {
        console.log(e)
        this.pagenum = 1
        this.currentMarket = e.value[0].name
        this.currentMarketId = e.value[0].current
        this.$api
          .post('/stock/originalIssueStockDetail', {
            businessDate: '',
            keyWord: '',
            market: this.currentMarketId,
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: this.sortWay ? 'sort' : '',
              sortWay: this.sortWay,
            },
          })
          .then(r => {
            if (r) {
              // this.data = r
              this.privateList = r.list
              console.log(this.privateList)
              console.log(r)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
        this.showPrivateMarket = false
        uni.showTabBar({})
      },
      // 打开个股筛选板块弹出层
      PrivatePlate() {
        uni.hideTabBar({})
        this.showPrivatePlate = true
      },
      // 取消个股筛选板块弹出层
      cancelPrivatePlate() {
        this.showPrivatePlate = false
        uni.showTabBar({})
      },
      // 确认个股筛选板块
      confirmPrivatePlate(e) {
        this.currentPlate = e.value[0]
        this.showPrivatePlate = false
        uni.showTabBar({})
      },
      //  打开个股筛选价格弹出层
      PrivatePrice() {
        uni.hideTabBar({})
        this.showPrivatePrice = true
      },
      // 取消个股筛选价格弹出层
      cancelPrivatePrice() {
        this.showPrivatePrice = false
        uni.showTabBar({})
      },
      // 确认个股筛选价格
      confirmPrivatePrice(e) {
        this.pagenum = 1
        this.currentPrice = e.value[0]
        this.currentPrice == '价格升序'
          ? (this.sortWay = 'asc')
          : (this.sortWay = 'desc')
        this.$api
          .post('/stock/originalIssueStockDetail', {
            businessDate: '',
            keyWord: '',
            market: '',
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: this.sortWay ? 'sort' : '',
              sortWay: this.sortWay,
            },
          })
          .then(r => {
            if (r) {
              // this.data = r
              this.privateList = r.list
              console.log(this.privateList)
              console.log(r)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
        this.showPrivatePrice = false
        uni.showTabBar({})
      },
      // 打开个股所属模块弹出层
      privateBelong() {
        uni.hideTabBar({})
        this.showPrivateBelong = true
      },
      // 取消个股所属模块弹出层
      cancelPrivateBelong() {
        this.showPrivateBelong = false
        uni.showTabBar({})
      },
      // 确认个股所属模块
      confirmPrivateBelong(e) {
        this.currentBelong = e.value[0]
        this.showPrivateBelong = false
        uni.showTabBar({})
      },
    },
  }
</script>

<style lang="scss" scoped>
  .center {
    padding: 0 24rpx;
    .nav {
      margin-top: 24rpx;
      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;
    }
  }
  .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;
    }
  }
  .main {
    padding: 24rpx;
  }
  .market_head {
    margin-right: -24rpx;
    display: flex;
    flex-wrap: wrap;

    .indicators_box {
      margin-top: 18rpx;
      width: 342rpx;
      height: 216rpx;
      border-radius: 12rpx;
      background-color: #fffaf5;
      text-align: center;
      margin-right: 16rpx;
      .indicators_all {
        margin-top: 60rpx;
      }
      .indcators_num {
        margin-top: 48rpx;
        font-weight: bold;
      }
      .indcators_name {
        font-size: 24rpx;
        margin-top: 10rpx;
      }
      .indcators_footer {
        font-size: 24rpx;
        margin-top: 30rpx;
        .indcators_rose {
          color: #d9001b;
          margin-right: 10rpx;
        }
        .indcators_fell {
          color: #6fbb60;
          margin-left: 20rpx;
        }
      }
      .indcators_footer1 {
        margin-top: 60rpx;
      }
    }
  }
  .market_line {
    margin-top: 24rpx;
    height: 20rpx;
    width: 750rpx;
    margin-left: -24rpx;
    background-color: #f6f6f6;
  }
  .market_module {
    margin-top: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .market_module_text {
      font-weight: bold;
    }
    .market_module_right {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #999999;
    }
  }
  .trend_box {
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .trend_box_left {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #999999;
      .trend {
        padding: 8rpx 20rpx;
        border: 2rpx solid #999999;
        border-radius: 8rpx;
        margin-right: 24rpx;
      }
      .trend1 {
        border-color: #ec7c00;
        color: #ec7c00;
        background-color: #fffcf9;
      }
    }
    .trend_icon {
      width: 34rpx;
      height: 34rpx;
    }
  }
  .trend_show_nav {
    padding: 32rpx 24rpx;
    border-bottom: 2rpx solid #f6f6f6;
    font-size: 28rpx;
    color: #ec7c00;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .trend_show_main {
    padding: 40rpx 24rpx;
    .trend_show_left {
      margin-right: -24rpx;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      font-size: 24rpx;
      color: #999999;
      .show_trend {
        margin-top: 24rpx;
        padding: 12rpx 30rpx;
        border: 2rpx solid #999999;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
      .trend1 {
        border-color: #ec7c00;
        color: #ec7c00;
        background-color: #fffcf9;
      }
    }
    .show_ranking_num {
      margin-top: 40rpx;
      font-size: 32rpx;
    }
  }
  .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 {
    }
    .module_list_name {
      width: 400rpx;
      text-align: center;
    }
    .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;
    }
  }
  .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;
    margin-left: -24rpx;
    margin-right: -24rpx;
    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 0;
    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;
      }
      .table_list_gains {
        width: 150rpx;
        text-align: center;
      }
    }
  }
</style>
