<template>
  <div class="app-container">
    <div class="date_box">
      <div>交易日期</div>
      <div>
        <div class="market_top_nav_date">
          <i class="el-icon-arrow-left" @click="beforeDay(tradeDate)"></i>
          <div style="padding: 0 8px" class="hide_input">
            <el-date-picker
              @change="dateChenge"
              v-model="tradeDate"
              type="date"
              value-format="yyyy-MM-dd"
              >//日期格式
            </el-date-picker>
            {{ tradeDate }}
          </div>
          <i class="el-icon-arrow-right" @click="afterDay(tradeDate)"></i>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="all">
        <div class="all_head">
          <div
            v-for="(item, index) in trendTimePeriod"
            :key="index"
            :style="{ color: item.is ? '#EC7C00' : '#999999' }"
            @click="trendTimePeriodClick(item.name)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="all_list_head">
          <div class="all_head_left">
            <div class="all__head_date">交易日期</div>
            <div class="all_head_name">东财行业指数2级</div>
            <div class="all_head_breakeven">涨停</div>
            <div class="all_head_breakeven">跌停</div>
            <div class="head_plate_box">
              <div class="all__head_plate" @click="selectPlateRank">
                板块排名
              </div>
              <div class="module_head_icon" v-if="allPlateRank">
                <img
                  src="../../static/shengxu_true.png"
                  class="head_icon"
                  mode="scaleToFill"
                />
                <img
                  src="../../static/jiangxu_false.png"
                  class="head_icon"
                  mode="scaleToFill"
                />
              </div>
              <div class="module_head_icon" v-else>
                <img
                  src="../../static/shengxu_false.png"
                  class="head_icon"
                  mode="scaleToFill"
                />
                <img
                  src="../../static/jiangxu_true.png"
                  class="head_icon"
                  mode="scaleToFill"
                />
              </div>
            </div>
          </div>
          <div class="head_ranking_box" @click="selectRankChange">
            <div>排名变化</div>
            <div class="module_head_icon" v-if="allRankChange">
              <img
                src="../../static/shengxu_true.png"
                class="head_icon"
                mode="scaleToFill"
              />
              <img
                src="../../static/jiangxu_false.png"
                class="head_icon"
                mode="scaleToFill"
              />
            </div>
            <div class="module_head_icon" v-else>
              <img
                src="../../static/shengxu_false.png"
                class="head_icon"
                mode="scaleToFill"
              />
              <img
                src="../../static/jiangxu_true.png"
                class="head_icon"
                mode="scaleToFill"
              />
            </div>
          </div>
        </div>
        <div
          v-if="tendencyList.length == 0"
          style="
            font-weight: bold;
            color: #999999;
            text-align: center;
            margin-top: 50px;
          "
        >
          暂无数据
        </div>
        <div v-else>
          <div
            class="all_list"
            v-for="(item, index) in tendencyList"
            :key="index"
            @click="rowClick(item)"
          >
            <div class="all_list_left">
              <div class="all_list_date">
                {{ item.businessDate }}
              </div>
              <div class="all_list_name">
                {{ item.securityName }}
              </div>
              <div class="all__list_breakeven">涨停</div>
              <div class="all__list_breakeven">跌停</div>
              <div class="list_plate_box">
                <div>{{ item.sort }}</div>
                <div>
                  <div v-if="item.sortChange > 0" class="plate_box_right">
                    <img
                      src="../../static/home_paiming_shangsheng.png"
                      class="liate_box_icon"
                    />
                    <div style="color: #d9001b">{{ item.sortChange }}</div>
                  </div>
                  <div v-if="item.sortChange == 0" class="plate_box_right">
                    <div>-</div>
                  </div>
                  <div v-if="item.sortChange < 0" class="plate_box_right">
                    <img
                      src="../../static/home_paiming_xiajiang.png"
                      class="liate_box_icon"
                    />
                    <div style="color: #8fc320">
                      {{ Math.abs(item.sortChange) }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="all_list_right">
              {{ item.sortChange }}
            </div>
          </div>
        </div>
        <div class="all_pagination" v-if="allTotal > 20">
          <el-pagination
            layout="prev, pager, next"
            :total="allTotal"
            background
            :page-size="20"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </div>
      <div class="rosefall">
        <div class="rosefall_head">
          <div
            v-for="(item, index) in trendTimePeriod"
            :key="index"
            :style="{ color: item.is ? '#EC7C00' : '#999999' }"
            @click="trendTimePeriodClick(item.name)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="rosefall_list_head">
          <div class="rosefall_head_left">
            <div class="arosefall__head_date">交易日期</div>
            <div class="rosefall_head_name">东财行业指数2级</div>
            <div class="rosefall_head_breakeven">涨停数</div>
            <div class="rosefall_head_breakeven">涨停数变化</div>
            <div class="rosefall_head_plate_box">
              <div class="rosefall_head_plate" @click="selectPlateRank">
                排名
              </div>
              <div class="rosefall_module_head_icon" v-if="allPlateRank">
                <img
                  src="../../static/shengxu_true.png"
                  class="rosefall_head_icon"
                  mode="scaleToFill"
                />
                <img
                  src="../../static/jiangxu_false.png"
                  class="rosefall_head_icon"
                  mode="scaleToFill"
                />
              </div>
              <div class="rosefall_module_head_icon" v-else>
                <img
                  src="../../static/shengxu_false.png"
                  class="rosefall_head_icon"
                  mode="scaleToFill"
                />
                <img
                  src="../../static/jiangxu_true.png"
                  class="rosefall_head_icon"
                  mode="scaleToFill"
                />
              </div>
            </div>
          </div>
          <div class="rosefall_head_ranking_box" @click="selectRankChange">
            <div>排名变化</div>
            <div class="rosefall_module_head_icon" v-if="allRankChange">
              <img
                src="../../static/shengxu_true.png"
                class="rosefall_head_icon"
                mode="scaleToFill"
              />
              <img
                src="../../static/jiangxu_false.png"
                class="rosefall_head_icon"
                mode="scaleToFill"
              />
            </div>
            <div class="rosefall_module_head_icon" v-else>
              <img
                src="../../static/shengxu_false.png"
                class="rosefall_head_icon"
                mode="scaleToFill"
              />
              <img
                src="../../static/jiangxu_true.png"
                class="rosefall_head_icon"
                mode="scaleToFill"
              />
            </div>
          </div>
        </div>
        <div
          v-if="tendencyList.length == 0"
          style="
            font-weight: bold;
            color: #999999;
            text-align: center;
            margin-top: 50px;
          "
        >
          暂无数据
        </div>
        <div v-else>
          <div
            class="rosefall_all_list"
            v-for="(item, index) in tendencyList"
            :key="index"
            @click="rowClick(item)"
          >
            <div class="rosefall_all_list_left">
              <div class="rosefall_all_list_date">
                {{ item.businessDate }}
              </div>
              <div class="rosefall_all_list_name">
                {{ item.securityName }}
              </div>
              <div class="rosefall_all__list_breakeven">涨停</div>
              <div class="rosefall_all__list_breakeven">跌停</div>
              <div class="rosefall_list_plate_box">
                <div>{{ item.sort }}</div>
                <div>
                  <div v-if="item.sortChange > 0" class="rosefall_plate_box_right">
                    <img
                      src="../../static/home_paiming_shangsheng.png"
                      class="rosefall_liate_box_icon"
                    />
                    <div style="color: #d9001b">{{ item.sortChange }}</div>
                  </div>
                  <div v-if="item.sortChange == 0" class="rosefall_plate_box_right">
                    <div>-</div>
                  </div>
                  <div v-if="item.sortChange < 0" class="rosefall_plate_box_right">
                    <img
                      src="../../static/home_paiming_xiajiang.png"
                      class="rosefall_liate_box_icon"
                    />
                    <div style="color: #8fc320">
                      {{ Math.abs(item.sortChange) }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="rosefall_all_list_right">
              {{ item.sortChange }}
            </div>
          </div>
        </div>
        <div class="rosefall_all_pagination" v-if="allTotal > 20">
          <el-pagination
            layout="prev, pager, next"
            :total="allTotal"
            background
            :page-size="20"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </div>
      <div class="highlow">
      </div>
      <!--
      <div class="rose">
        <div class="rose_head">涨停个股</div>
        <div class="rose_list_head">
          <div class="rose_head_left">
            <div class="rose__head_date">股票代码</div>
            <div class="rose_head_name">股票名称</div>
            <div class="rose_head_breakeven">开盘价</div>
            <div class="rose_head_breakeven">收盘价</div>
            <div class="head_plate_box">当日涨跌幅</div>
          </div>
          <div class="head_ranking_box" @click="selectRoseSift">
            <div>几天几板</div>
            <div class="module_head_icon" v-if="roseSift">
              <img
                src="../../static/shengxu_true.png"
                class="head_icon"
                mode="scaleToFill"
              />
              <img
                src="../../static/jiangxu_false.png"
                class="head_icon"
                mode="scaleToFill"
              />
            </div>
            <div class="module_head_icon" v-else>
              <img
                src="../../static/shengxu_false.png"
                class="head_icon"
                mode="scaleToFill"
              />
              <img
                src="../../static/jiangxu_true.png"
                class="head_icon"
                mode="scaleToFill"
              />
            </div>
          </div>
        </div>
        <div
          v-if="roseList.length == 0"
          style="
            font-weight: bold;
            color: #999999;
            text-align: center;
            margin-top: 50px;
          "
        >
          暂无数据
        </div>
        <div v-else>
          <div
            class="rose_list"
            v-for="(item, index) in roseList"
            :key="index"
            @click="rowClickChange(item)"
          >
            <div class="rose_list_left">
              <div class="rose_list_date">
                {{ item.securityCode }}
              </div>
              <div class="rose_list_name">
                {{ item.securityName }}
              </div>
              <div class="rose__list_breakeven">
                {{ item.openingPrice }}
              </div>
              <div class="rose__list_breakeven">
                {{ item.closingPrice }}
              </div>
              <div class="list_plate_box">
                <div>{{ item.riseLossesCurrentDay.toFixed(2) }}%</div>
              </div>
            </div>
            <div class="rose_list_right">
              {{ item.dayAndPlate }}
            </div>
          </div>
        </div>
        <div class="rose_pagination" v-if="roseTotal > 20">
          <el-pagination
            layout="prev, pager, next"
            :total="roseTotal"
            background
            :page-size="20"
            @current-change="roseCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
      <div class="fall">
        <div class="rose_head">跌停个股</div>
        <div class="rose_list_head">
          <div class="rose_head_left">
            <div class="rose__head_date">股票代码</div>
            <div class="rose_head_name">股票名称</div>
            <div class="rose_head_breakeven">开盘价</div>
            <div class="rose_head_breakeven">收盘价</div>
            <div class="head_plate_box">当日涨跌幅</div>
          </div>
          <div class="head_ranking_box" @click="selectFallSift">
            <div>几天几板</div>
            <div class="module_head_icon" v-if="fallSift">
              <img
                src="../../static/shengxu_true.png"
                class="head_icon"
                mode="scaleToFill"
              />
              <img
                src="../../static/jiangxu_false.png"
                class="head_icon"
                mode="scaleToFill"
              />
            </div>
            <div class="module_head_icon" v-else>
              <img
                src="../../static/shengxu_false.png"
                class="head_icon"
                mode="scaleToFill"
              />
              <img
                src="../../static/jiangxu_true.png"
                class="head_icon"
                mode="scaleToFill"
              />
            </div>
          </div>
        </div>
        <div
          v-if="fallList.length == 0"
          style="
            font-weight: bold;
            color: #999999;
            text-align: center;
            margin-top: 50px;
          "
        >
          暂无数据
        </div>
        <div v-else>
          <div
            class="rose_list"
            v-for="(item, index) in fallList"
            :key="index"
            @click="rowClickChange(item)"
          >
            <div class="rose_list_left">
              <div class="rose_list_date">
                {{ item.securityCode }}
              </div>
              <div class="rose_list_name">
                {{ item.securityName }}
              </div>
              <div class="rose__list_breakeven">
                {{ item.openingPrice }}
              </div>
              <div class="rose__list_breakeven">
                {{ item.closingPrice }}
              </div>
              <div class="list_plate_box">
                <div>{{ item.riseLossesCurrentDay.toFixed(2) }}%</div>
              </div>
            </div>
            <div class="rose_list_right">
              {{ item.dayAndPlate }}
            </div>
          </div>
        </div>
        <div class="rose_pagination" v-if="fallTotal > 20">
          <el-pagination
            layout="prev, pager, next"
            :total="fallTotal"
            background
            :page-size="20"
            @current-change="fallCurrentChange"
          >
          </el-pagination>
        </div>
      </div>-->
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="80%"
      v-if="DetailId"
      @close="DetailId = ''"
    >
      <div slot="title" class="show_title">
        <div>{{ tendencyClickName }}-板块详情</div>
        <div @click="isCollectionTendency">
          <img
            src="../../static/shoucang_true.png"
            v-if="collection"
            class="show_head_icon"
          />
          <img
            src="../../static/shoucang_false.png"
            v-else
            class="show_head_icon"
          />
        </div>
      </div>
      <div>
        <TrendDetail :id="DetailId" :date="tradeDate" />
      </div>
    </el-dialog>
    <el-dialog :visible.sync="privateDialogVisible" width="85%" @open="open()">
      <div slot="title" class="show_head">
        <div @click="isCollection">{{ listDetail.securityName }}</div>
        <div @click="isCollection">
          <img
            src="../../static/shoucang_true.png"
            v-if="listDetail.isCollect == 1"
            class="show_head_icon"
          />
          <img
            src="../../static/shoucang_false.png"
            v-else
            class="show_head_icon"
          />
        </div>
      </div>
      <div>
        <div id="myChart" :style="{ width: '100%', height: '550px' }"></div>
      </div>
      <div class="show_footer">
        <div class="footer_info_text">基本信息</div>
        <div class="show_footer_info">
          <div>可交易数：</div>
          <div>{{ listDetail.numberDaysAvailable }}</div>
        </div>
        <div class="show_footer_info">
          <div>首发上市日期：</div>
          <div>{{ listDetail.initialListingDate }}</div>
        </div>
        <div class="show_footer_info">
          <div>机构持仓合计：</div>
          <div>{{ listDetail.totalInstitutionalPositions }}</div>
        </div>
        <div class="show_footer_info">
          <div>所属东财行业指数2级：</div>
          <div>{{ listDetail.dongCaiIndustryIndexLevel2 }}</div>
        </div>
        <div class="show_footer_info">
          <div>所属东财行业指数3级：</div>
          <div>{{ listDetail.dongCaiIndustryIndexLevel3 }}</div>
        </div>
        <div class="show_footer_info">
          <div>所属东财行业指数代码：</div>
          <div>{{ listDetail.dongCaiIndustryIndexCode2 }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  trendPlate,
  riseLossesDetail,
  stockSortChange,
  addQuery,
  delQuery,
  getByCode,
  kLine,
  queryIsCollect,
} from "@/api/user";
const upColor = "#00da3c";
const downColor = "#ec0000";
export default {
  components: {
    TrendDetail: () => import("./components/TrendDetail.vue"),
  },
  data() {
    return {
      // 选择交易日期
      tradeDate: "",
      // 趋势时间段选择
      trendTimePeriod: [
        {
          name: "当日趋势",
          is: true,
        },
        {
          name: "5日趋势",
          is: false,
        },
        {
          name: "10日趋势",
          is: false,
        },
        {
          name: "20日趋势",
          is: false,
        },
        {
          name: "30日趋势",
          is: false,
        },
      ],
      // 趋势板块所有数据
      tendencyList: [
        {
          id: 1,
          name: "半导体",
          date: "2023-03-27",
          plate_rank: 1,
          rank_change: 1,
        },
        {
          id: 2,
          name: "电子设备制造",
          date: "2023-03-27",
          plate_rank: 1,
          rank_change: 1,
        },
        {
          name: "电子设备制造",
          date: "2023-03-27",
          plate_rank: 1,
          rank_change: 1,
        },
        {
          name: "电子设备制造",
          date: "2023-03-27",
          plate_rank: 1,
          rank_change: 1,
        },
        {
          name: "电子设备制造",
          date: "2023-03-27",
          plate_rank: 1,
          rank_change: 1,
        },
        {
          name: "电子设备制造",
          date: "2023-03-27",
          plate_rank: 1,
          rank_change: 1,
        },
        {
          name: "电子设备制造",
          date: "2023-03-27",
          plate_rank: 1,
          rank_change: 1,
        },
        {
          name: "电子设备制造",
          date: "2023-03-27",
          plate_rank: 1,
          rank_change: 1,
        },
        {
          name: "电子设备制造",
          date: "2023-03-27",
          plate_rank: 1,
          rank_change: 1,
        },
        {
          name: "电子设备制造",
          date: "2023-03-27",
          plate_rank: 1,
          rank_change: 1,
        },
        {
          name: "电子设备制造",
          date: "2023-03-27",
          plate_rank: 1,
          rank_change: 1,
        },
        {
          name: "电子设备制造",
          date: "2023-03-27",
          plate_rank: 1,
          rank_change: 1,
        },
        {
          name: "电子设备制造",
          date: "2023-03-27",
          plate_rank: 1,
          rank_change: 1,
        },
        {
          name: "电子设备制造",
          date: "2023-03-27",
          plate_rank: 1,
          rank_change: 1,
        },
      ],
      // 涨停数据
      roseList: [
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99%",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99%",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99%",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99%",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99%",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99%",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99%",
          ban: "20天3板",
        },
      ],
      // 跌停数据
      fallList: [
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99%",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99%",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99%",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99%",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99%",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99%",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99%",
          ban: "20天3板",
        },
      ],
      // 趋势板块数据条数
      allTotal: 20,
      allPlateRank: true, // 趋势板块排名升序or降序
      allRankChange: true, // 趋势排名变化升序or降序
      roseSift: true, // 涨停几天几板升序or降序
      fallSift: true, // 跌停几天几板升序or降序
      roseTotal: 20,
      // 跌停数据条数
      fallTotal: 20,
      // 收藏
      collection: false,
      // 弹框
      dialogVisible: false,
      DetailId: "",
      tendencyNavIndex: 1,
      tendencyClickName: "",
      DetailData: {},
      // 涨跌个股点击详情数据
      listDetail: {},
      privateDialogVisible: false,
      // 涨跌个股点击code
      clickrCode: "",
    };
  },
  created() {
    document.title = "趋势板块";
    this.tradeDate = this.getTime(Date.parse(new Date()));
    this.getTendencyList(1);
    this.getroseList();
  },
  methods: {
    // 获取趋势板块数据
    getTendencyList(id) {
      trendPlate({
        businessDate: this.tradeDate,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        trendType: id,
      })
        .then((res) => {
          this.tendencyList = res.data.list;
          this.allTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {});
    },
    // 获取跌停涨停数据
    getroseList() {
      // 涨停
      riseLossesDetail({
        businessDate: this.tradeDate,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        riseOrLosses: 1,
        dayAndPlateSort: this.plateSift ? 1 : 0,
      })
        .then((res) => {
          this.roseList = res.data.list;
          this.roseTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {});
      // 跌停
      riseLossesDetail({
        businessDate: this.tradeDate,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        riseOrLosses: 0,
        dayAndPlateSort: this.plateSift ? 1 : 0,
      })
        .then((res) => {
          this.fallList = res.data.list;
          this.fallTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {});
    },
    // 个股点击数据
    rowClickChange(item) {
      this.clickrCode = item.securityCode;
      getByCode({
        businessDate: this.tradeDate,
        securityCode: item.securityCode,
      })
        .then((res) => {
          this.listDetail = res.data;
          console.log(this.listDetail);
          this.privateDialogVisible = true;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
      // this.listDetail = item;
    },
    // 格式化时间戳
    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}`;
    },
    // 趋势时间段选择
    trendTimePeriodClick(name) {
      this.trendTimePeriod.forEach((item) => {
        if (item.name == name) {
          item.is = true;
        } else {
          item.is = false;
        }
      });
      if (this.trendTimePeriod[0].is) {
        this.getTendencyList(1);
        this.tendencyNavIndex = 1;
      } else if (this.trendTimePeriod[1].is) {
        this.getTendencyList(5);
        this.tendencyNavIndex = 5;
      } else if (this.trendTimePeriod[2].is) {
        this.getTendencyList(10);
        this.tendencyNavIndex = 10;
      } else if (this.trendTimePeriod[3].is) {
        this.getTendencyList(20);
        this.tendencyNavIndex = 20;
      } else if (this.trendTimePeriod[4].is) {
        this.getTendencyList(30);
        this.tendencyNavIndex = 30;
      }
    },
    // 趋势排名变化升序or降序
    selectRankChange() {
      this.allRankChange = !this.allRankChange;
      trendPlate({
        businessDate: this.tradeDate,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          // sortField: "板块排名,排名变化",
          sortField: "sort,sortChange",
          sortWay:
            (this.allPlateRank ? "asc" : "desc") +
            "," +
            (this.allRankChange ? "asc" : "desc"),
        },
        trendType: this.tendencyNavIndex,
      })
        .then((res) => {
          this.tendencyList = res.data.list;
          console.log(res);
        })
        .catch(() => {});
    },
    // 趋势板块排名升序or降序
    selectPlateRank() {
      this.allPlateRank = !this.allPlateRank;
      // console.log(this.plateRank);
      trendPlate({
        businessDate: this.tradeDate,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          // sortField: "板块排名,排名变化",
          sortField: "sort,sortChange",
          sortWay: this.allPlateRank ? "asc" : "desc",
        },
        trendType: this.tendencyNavIndex,
      })
        .then((res) => {
          this.tendencyList = res.data.list;
          console.log(res);
        })
        .catch(() => {});
    },
    // 涨停几天几板升序or降序
    selectRoseSift() {
      this.roseSift = !this.roseSift;
      riseLossesDetail({
        businessDate: this.tradeDate,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        riseOrLosses: 1,
        dayAndPlateSort: this.plateSift ? 1 : 0,
      })
        .then((res) => {
          this.roseList = res.data.list;
          this.roseTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {});
    },
    // 跌停几天几板升序or降序
    selectFallSift() {
      this.fallSift = !this.fallSift;
      riseLossesDetail({
        businessDate: this.tradeDate,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        riseOrLosses: 0,
        dayAndPlateSort: this.plateSift ? 1 : 0,
      })
        .then((res) => {
          this.fallList = res.data.list;
          this.fallTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {});
    },
    // 前一日
    beforeDay(date) {
      this.tradeDate = this.getTime(
        new Date(date).getTime() - 24 * 60 * 60 * 1000
      );
      this.getroseList();
      trendPlate({
        businessDate: this.tradeDate,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          // sortField: "板块排名,排名变化",
          sortField: "sort,sortChange",
          sortWay:
            (this.allPlateRank ? "asc" : "desc") +
            "," +
            (this.allRankChange ? "asc" : "desc"),
        },
        trendType: this.tendencyNavIndex,
      })
        .then((res) => {
          this.tendencyList = res.data.list;
          console.log(res);
        })
        .catch(() => {});
    },
    // 后一日
    afterDay(date) {
      this.tradeDate = this.getTime(
        new Date(date).getTime() + 24 * 60 * 60 * 1000
      );
      this.getroseList();
      trendPlate({
        businessDate: this.tradeDate,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          // sortField: "板块排名,排名变化",
          sortField: "sort,sortChange",
          sortWay:
            (this.allPlateRank ? "asc" : "desc") +
            "," +
            (this.allRankChange ? "asc" : "desc"),
        },
        trendType: this.tendencyNavIndex,
      })
        .then((res) => {
          this.tendencyList = res.data.list;
          console.log(res);
        })
        .catch(() => {});
    },
    // 趋势板块分页
    currentChange(e) {
      trendPlate({
        businessDate: this.tradeDate,
        pageModel: {
          pageNo: e,
          pageSize: 20,
          // sortField: "板块排名,排名变化",

          sortField: "sort,sortChange",
          sortWay:
            (this.plateRank ? "asc" : "desc") +
            "," +
            (this.rankChange ? "asc" : "desc"),
        },
        trendType: this.tendencyNavIndex,
      })
        .then((res) => {
          this.tendencyList = res.data.list;
          console.log(res);
        })
        .catch(() => {});
    },
    // 涨停分页
    roseCurrentChange(e) {
      console.log(e);
      riseLossesDetail({
        businessDate: this.tradeDate,
        pageModel: {
          pageNo: e,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        riseOrLosses: 1,
      })
        .then((res) => {
          this.roseList = res.data.list;
          this.roseTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {});
    },
    // 跌停分页
    fallCurrentChange(e) {
      console.log(e);
      riseLossesDetail({
        businessDate: this.tradeDate,
        pageModel: {
          pageNo: e,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        riseOrLosses: 0,
      })
        .then((res) => {
          this.fallList = res.data.list;
          this.fallTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {});
    },
    // 收藏
    isCollection() {
      console.log(this.listDetail.isCollect);
      if (this.listDetail.isCollect == 1) {
        delQuery({
          securityCode: this.listDetail.securityCode,
          securityType: this.listDetail.securityType,
        })
          .then((res) => {
            console.log(res);
            if (this.res.code == 200) {
              this.$message({
                type: "none",
                message: "已取消收藏!",
              });
              console.log(this.listDetail.isCollect);
              this.listDetail.isCollect = null;
            }
          })
          .catch(() => {
            // this.shareLoading = false;
          });
      } else {
        addQuery({
          securityCode: this.listDetail.securityCode,
          securityType: this.listDetail.securityType,
        })
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.listDetail.isCollect = 1;
              console.log(this.listDetail.isCollect);
              this.$message({
                type: "success",
                message: "收藏成功!",
              });
            }
          })
          .catch(() => {
            // this.shareLoading = false;
          });
      }
    },
    isCollectionTendency() {
      if (this.collection == true) {
        delQuery({
          securityCode: this.DetailData.securityCode,
          securityType: this.DetailData.securityType,
        })
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.$message({
                type: "none",
                message: "已取消收藏!",
              });
              this.collection = false;
            }
          })
          .catch(() => {
            // this.shareLoading = false;
          });
      } else {
        addQuery({
          securityCode: this.DetailData.securityCode,
          securityType: this.DetailData.securityType,
        })
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.collection = true;
              this.$message({
                type: "success",
                message: "收藏成功!",
              });
            }
          })
          .catch(() => {
            // this.shareLoading = false;
          });
      }
    },
    // 点击行
    rowClick(item) {
      console.log(item);
      this.tendencyClickName = item.securityName;
      this.DetailId = item.securityCode;
      // 查询是否收藏

      queryIsCollect({
        securityCode: item.securityCode,
      })
        .then((res) => {
          this.DetailData = item;
          res.data == 1 ? (this.collection = true) : (this.collection = false);
          console.log(this.DetailData.isCollect);
          this.dialogVisible = true;
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 弹层
    open() {
      this.$nextTick(() => {
        //  执行echarts方法
        this.initEcharts(this.clickrCode);
      });
    },
    // K线图
    splitData(rawData) {
      let categoryData = [];
      let values = [];
      let volumes = [];
      for (let i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i]);
        volumes.push([
          i,
          rawData[i][4],
          rawData[i][0] > rawData[i][1] ? 1 : -1,
        ]);
      }
      // volumes.push();
      return {
        categoryData: categoryData,
        values: values,
        volumes: volumes,
      };
    },
    calculateMA(dayCount, data) {
      var result = [];
      for (var i = 0, len = data.values.length; i < len; i++) {
        if (i < dayCount) {
          result.push("-");
          continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
          sum += data.values[i - j][1];
        }
        result.push(+(sum / dayCount).toFixed(3));
      }
      // console.log(result);
      return result;
    },
    // 初始化echarts
    initEcharts(id) {
      kLine({
        securityCode: id,
        securityType: "",
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          // this.privateList = res.data.list;
          var option;
          this.myChart = this.$echarts.init(document.getElementById("myChart"));
          var data = this.splitData(res.data);
          // console.log(data);
          this.myChart.setOption(
            (option = {
              animation: false,
              legend: {
                top: 10,
                left: "center",
                data: ["日K", "MA5", "MA10", "MA20", "MA30"],
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "cross",
                },
                formatter: function (param) {
                  // let param1 = param[1];
                  if (param[0].data.length < 6) {
                    param = param[1];
                    console.log(param);
                    return [
                      "日期: " +
                        param.axisValue +
                        '<hr size=1 style="margin: 3px 0">',
                      "开盘: " + param.data[1] + "<br/>",
                      "关盘: " + param.data[2] + "<br/>",
                      "最低: " + param.data[3] + "<br/>",
                      "最高: " + param.data[4] + "<br/>",
                      "成交额: " + param.data[5] + "<br/>",
                    ].join("");
                  } else {
                    param = param[0];
                    console.log(param);
                    return [
                      "日期: " +
                        param.axisValue +
                        '<hr size=1 style="margin: 3px 0">',
                      "开盘: " + param.data[1] + "<br/>",
                      "关盘: " + param.data[2] + "<br/>",
                      "最低: " + param.data[3] + "<br/>",
                      "最高: " + param.data[4] + "<br/>",
                      "成交额: " + param.data[5] + "<br/>",
                    ].join("");
                  }
                },
                borderWidth: 1,
                borderColor: "#ccc",
                padding: 10,
                textStyle: {
                  color: "#000",
                },
                position: function (pos, params, el, elRect, size) {
                  const obj = {
                    top: 10,
                  };
                  obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                  return obj;
                },
                // extraCssText: 'width: 170px'
              },
              axisPointer: {
                link: [
                  {
                    xAxisIndex: "all",
                  },
                ],
                label: {
                  backgroundColor: "#777",
                },
              },
              toolbox: {
                feature: {
                  dataZoom: {
                    yAxisIndex: false,
                  },
                  brush: {
                    type: ["lineX", "clear"],
                  },
                },
              },
              brush: {
                xAxisIndex: "all",
                brushLink: "all",
                outOfBrush: {
                  colorAlpha: 0.1,
                },
              },
              visualMap: {
                show: false,
                seriesIndex: 5,
                dimension: 2,
                pieces: [
                  {
                    value: 1,
                    color: upColor,
                  },
                  {
                    value: -1,
                    color: downColor,
                  },
                ],
              },
              grid: [
                {
                  left: "10%",
                  right: "8%",
                  height: "50%",
                },
                {
                  left: "10%",
                  right: "8%",
                  top: "63%",
                  height: "16%",
                },
              ],
              xAxis: [
                {
                  type: "category",
                  data: data.categoryData,
                  boundaryGap: false,
                  axisLine: { onZero: false },
                  splitLine: { show: false },
                  min: "dataMin",
                  max: "dataMax",
                  axisPointer: {
                    z: 100,
                  },
                },
                {
                  type: "category",
                  gridIndex: 1,
                  data: data.categoryData,
                  boundaryGap: false,
                  axisLine: { onZero: false },
                  axisTick: { show: false },
                  splitLine: { show: false },
                  axisLabel: { show: false },
                  min: "dataMin",
                  max: "dataMax",
                },
              ],
              yAxis: [
                {
                  scale: true,
                  splitArea: {
                    show: true,
                  },
                },
                {
                  scale: true,
                  gridIndex: 1,
                  splitNumber: 2,
                  axisLabel: { show: false },
                  axisLine: { show: false },
                  axisTick: { show: false },
                  splitLine: { show: false },
                },
              ],
              dataZoom: [
                {
                  type: "inside",
                  xAxisIndex: [0, 1],
                  start: 0,
                  end: 100,
                },
                {
                  show: false,
                  xAxisIndex: [0, 1],
                  type: "slider",
                  top: "85%",
                  start: 0,
                  end: 100,
                },
              ],
              series: [
                {
                  name: "日K",
                  type: "candlestick",
                  data: data.values,
                  itemStyle: {
                    color: downColor,
                    color0: upColor,
                    borderColor: undefined,
                    borderColor0: undefined,
                  },
                  tooltip: {
                    formatter: function (param) {
                      console.log(param);
                      param = param[0];
                      return [
                        "Date: " +
                          param.name +
                          '<hr size=1 style="margin: 3px 0">',
                        "开盘: " + param.data[0] + "<br/>",
                        "Close: " + param.data[1] + "<br/>",
                        "Lowest: " + param.data[2] + "<br/>",
                        "Highest: " + param.data[3] + "<br/>",
                      ].join("");
                    },
                  },
                },
                {
                  name: "MA5",
                  type: "line",
                  data: this.calculateMA(5, data),
                  smooth: true,
                  lineStyle: {
                    opacity: 0.5,
                  },
                },
                {
                  name: "MA10",
                  type: "line",
                  data: this.calculateMA(10, data),
                  smooth: true,
                  lineStyle: {
                    opacity: 0.5,
                  },
                },
                {
                  name: "MA20",
                  type: "line",
                  data: this.calculateMA(20, data),
                  smooth: true,
                  lineStyle: {
                    opacity: 0.5,
                  },
                },
                {
                  name: "MA30",
                  type: "line",
                  data: this.calculateMA(30, data),
                  smooth: true,
                  lineStyle: {
                    opacity: 0.5,
                  },
                },
                {
                  name: "Volume",
                  type: "bar",
                  xAxisIndex: 1,
                  yAxisIndex: 1,
                  itemStyle: {
                    // normal: {
                    //   color: function (param) {
                    //     return downColor;
                    //   },
                    // },
                  },
                  data: data.volumes,
                },
              ],
            }),
            true
          );
          this.myChart.dispatchAction({
            type: "brush",
            areas: [
              {
                brushType: "lineX",
                coordRange: ["2000-01-24", "2013-03-26"],
                xAxisIndex: 0,
              },
            ],
          });
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    dateChenge() {
      this.getroseList();
      trendPlate({
        businessDate: this.tradeDate,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          // sortField: "板块排名,排名变化",
          sortField: "sort,sortChange",
          sortWay:
            (this.allPlateRank ? "asc" : "desc") +
            "," +
            (this.allRankChange ? "asc" : "desc"),
        },
        trendType: this.tendencyNavIndex,
      })
        .then((res) => {
          this.tendencyList = res.data.list;
          console.log(res);
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}
.date_box {
  display: flex;
  align-items: center;

  .market_top_nav_date {
    margin-left: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background-color: white;
    border-radius: 4px;
    font-size: 14px;
  }
}
.main {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main > div {
  width: 33%;
  height: calc(100vh - 150px);
  background-color: white;
  border-radius: 8px;
  overflow-y: auto;
}
.all {
  .all_head {
    padding: 20px 0;
    display: flex;
    align-items: center;
    font-size: 14px;
    position: sticky;
    top: 0;
    background-color: white;
  }
  .all_head > div {
    margin-left: 20px;
    cursor: pointer;
  }
  .all_list_head {
    position: sticky;
    top: 56px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background-color: #fff9f3;
    .all_head_left {
      display: flex;
      align-items: center;
      .all__head_date {
        width: 80px;
      }
      .all_head_name {
        width: 120px;
        text-align: center;
      }
      .all_head_breakeven {
        width: 60px;
        text-align: center;
      }
      .head_plate_box {
        text-align: center;
        width: 90px;
        display: flex;
        justify-content: center;
        cursor: pointer;
        .module_head_icon {
          margin-left: 4px;
          display: flex;
          flex-direction: column;

          .head_icon {
            width: 9px;
            height: 5px;
            margin-top: 2px;
          }
        }
      }
    }
    .head_ranking_box {
      text-align: center;
      width: 100px;
      display: flex;
      justify-content: center;
      cursor: pointer;
      .module_head_icon {
        margin-left: 4px;
        display: flex;
        flex-direction: column;
        .head_icon {
          width: 9px;
          height: 5px;
          margin-top: 2px;
        }
      }
    }
  }
  .all_list {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    border-bottom: 1px solid #ececec;
    .all_list_left {
      display: flex;
      align-items: center;
      .all_list_date {
        width: 80px;
      }
      .all_list_name {
        width: 120px;
        text-align: center;
      }
      .all__list_breakeven {
        width: 60px;
        text-align: center;
      }
      .list_plate_box {
        text-align: center;
        width: 90px;
        display: flex;
        justify-content: center;
        .plate_box_right {
          display: flex;
          align-items: center;
          margin-left: 10px;
        }
        .liate_box_icon {
          width: 9px;
          height: 5px;
        }
      }
    }
    .all_list_right {
      text-align: center;
      flex: 1;
    }
  }
  .all_pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
  }
}
.rosefall {
  .rosefall_head {
    padding: 20px 0;
    display: flex;
    align-items: center;
    font-size: 14px;
    position: sticky;
    top: 0;
    background-color: white;
  }
  .rosefall_head > div {
    margin-left: 20px;
    cursor: pointer;
  }
  .rosefall_list_head {
    position: sticky;
    top: 56px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background-color: #fff9f3;
    .rosefall_head_left {
      display: flex;
      align-items: center;
      .rosefall__head_date {
        width: 80px;
      }
      .rosefall_head_name {
        width: 140px;
        text-align: center;
      }
      .rosefall_head_breakeven {
        width: 90px;
        text-align: center;
      }
      .rosefall_head_plate_box {
        text-align: center;
        width: 60px;
        display: flex;
        justify-content: center;
        cursor: pointer;
        .rosefall_module_head_icon {
          margin-left: 4px;
          display: flex;
          flex-direction: column;

          .rosefall_head_icon {
            width: 9px;
            height: 5px;
            margin-top: 2px;
          }
        }
      }
    }
    .rosefall_head_ranking_box {
      text-align: center;
      width: 100px;
      display: flex;
      justify-content: center;
      cursor: pointer;
      .rosefall_module_head_icon {
        margin-left: 4px;
        display: flex;
        flex-direction: column;
        .rosefall_head_icon {
          width: 9px;
          height: 5px;
          margin-top: 2px;
        }
      }
    }
  }
  .rosefall_all_list {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    border-bottom: 1px solid #ececec;
    .rosefall_all_list_left {
      display: flex;
      align-items: center;
      .rosefall_all_list_date {
        width: 80px;
      }
      .rosefall_all_list_name {
        width: 140px;
        text-align: center;
      }
      .rosefall_all__list_breakeven {
        width: 70px;
        text-align: center;
      }
      .rosefall_list_plate_box {
        text-align: center;
        width: 90px;
        display: flex;
        justify-content: center;
        .rosefall_plate_box_right {
          display: flex;
          align-items: center;
          margin-left: 10px;
        }
        .rosefall_liate_box_icon {
          width: 9px;
          height: 5px;
        }
      }
    }
    .rosefall_all_list_right {
      text-align: center;
      flex: 1;
    }
  }
  .rosefall_all_pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
  }
}
.rose_head {
  font-weight: bold;
  padding: 20px;
  position: sticky;
  top: 0;
  background-color: white;
}
.rose_list_head {
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background-color: #fff9f3;
  position: sticky;
  top: 59px;
  .rose_head_left {
    display: flex;
    align-items: center;
    .rose__head_date {
      width: 80px;
    }
    .rose_head_name {
      width: 120px;
      text-align: center;
    }
    .rose_head_breakeven {
      width: 60px;
      text-align: center;
    }
    .head_plate_box {
      text-align: center;
      width: 90px;
      display: flex;
      justify-content: center;
    }
  }
  .head_ranking_box {
    text-align: center;
    width: 100px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    .module_head_icon {
      margin-left: 4px;
      display: flex;
      flex-direction: column;
      .head_icon {
        width: 9px;
        height: 5px;
        margin-top: 2px;
      }
    }
  }
}
.rose_list {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  border-bottom: 1px solid #ececec;
  .rose_list_left {
    display: flex;
    align-items: center;
    .rose_list_date {
      width: 80px;
    }
    .rose_list_name {
      width: 120px;
      text-align: center;
    }
    .rose__list_breakeven {
      width: 60px;
      text-align: center;
    }
    .list_plate_box {
      text-align: center;
      width: 90px;
      display: flex;
      justify-content: center;
      .plate_box_right {
        display: flex;
        align-items: center;
        margin-left: 10px;
      }
      .liate_box_icon {
        width: 9px;
        height: 5px;
      }
    }
  }
  .rose_list_right {
    text-align: center;
    flex: 1;
  }
}
.rose_pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  position: relative;
  bottom: 0;
}
.show_title {
  display: flex;
  align-items: center;
  .show_head_icon {
    margin-left: 10px;
    width: 18px;
    height: 18px;
  }
}
.show_head {
  font-size: 20px;
  display: flex;
  font-weight: bold;
  align-items: center;
  color: #333333;
  cursor: pointer;
}
.footer_info_text {
  font-weight: bold;
  color: #333333;
  font-size: 18px;
}
.show_footer_info {
  margin-top: 16px;
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
::v-deep .el-dialog {
  margin-top: 5vh !important;
  margin-bottom: 5vh !important;
}
.show_head_icon {
  margin-left: 10px;
  width: 18px;
  height: 18px;
}
.hide_input {
  position: relative !important;
}
//修改控件自带的css
.hide_input .el-date-editor {
  position: absolute; //绝对定位
  top: 0;
  left: 0;
  opacity: 0; //设置完全透明
}
</style>
