<template>
  <div class="info">
    <div class="show_head">
      <img
        src="../../../static/shoucang_false.png"
        v-if="!collection"
        @click="isCollection"
        class="show_head_icon"
      />
      <img
        src="../../../static/shoucang_true.png"
        v-if="collection"
        @click="isCollection"
        class="show_head_icon"
      />
    </div>
    <div class="market_top_nav_text">
      <div
        v-for="(item, index) in marketNav"
        :key="index"
        :style="{ color: item.is ? '#EC7C00' : '#999999' }"
        @click="marketNavClick(item.name)"
      >
        {{ item.name }}
      </div>
    </div>
    <div>
      <div id="showMyChart" :style="{ width: '100%', height: '550px' }"></div>
    </div>
    <div class="breakeven_nav">
      <div class="breakeven_nav2">
        <div
          v-for="(item, index) in breakevenNav"
          :key="index"
          @click="breakevenNavClick(item.name)"
        >
          <div :class="{ breakeven_nav1: item.is }">{{ item.name }}</div>
          <div class="breakeven_line_box" v-if="item.is">
            <div class="breakeven_line"></div>
          </div>
        </div>
      </div>
      <div>
        <el-date-picker
          v-model="date"
          type="date"
          placeholder="选择日期"
          style="width: 150px"
          @change="dateChange"
        >
        </el-date-picker>
      </div>
    </div>
    <div v-if="!bottomLoad">
      <div v-if="breakevenNav[0].is">
        <div
          id="showColumnar"
          :style="{ width: '100%', height: '300px' }"
        ></div>
        <div class="columnar_value">
          <span style="color: #d9001b">上涨{{ rose }}家</span>
          <span style="color: #999999">平盘{{ equal }}家</span>
          <span style="color: #6fbb60">下跌{{ fall }}家</span>
        </div>
      </div>
      <div class="list" v-if="!breakevenNav[0].is">
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="securityCode" label="股票代码">
          </el-table-column>
          <el-table-column prop="securityName" label="股票名称">
          </el-table-column>
          <el-table-column prop="businessDate" label="交易日期">
          </el-table-column>
          <el-table-column prop="openingPrice" label="开盘价" width="90">
          </el-table-column>
          <el-table-column prop="closingPrice" label="收盘价" width="90">
          </el-table-column>
          <el-table-column prop="highestPrice" label="最高价">
          </el-table-column>
          <el-table-column prop="lowestPrice" label="最低价"> </el-table-column>
          <el-table-column label="当日涨跌幅">
            <template slot-scope="scope">
              <div>{{ scope.row.riseLossesCurrentDay.toFixed(2) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="volume" label="成交量"> </el-table-column>
          <el-table-column prop="turnover" label="成交额"> </el-table-column>
          <el-table-column
            prop="freeCapitalization"
            label="自由流通市值"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="totalInstitutionalPositions"
            label="机构持仓合计"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="dongCaiIndustryIndexCode2"
            label="所属东财行业指数2级"
          >
          </el-table-column>
        </el-table>
        <div class="pagination" v-if="total > 20" ref="footer">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            background
            :page-size="20"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="bottom_loading" v-else></div>
  </div>
</template>

<script>
import {
  riseLossesDetail,
  riseLossesStatistics,
  kLine,
  addQuery,
  delQuery,
  queryIsCollect,
} from "@/api/user";
export default {
  data() {
    return {
      // 导航栏
      marketNav: [
        {
          name: "上证指数",
          is: true,
          current: "SH",
          code: "000001",
        },
        {
          name: "深证指数",
          is: false,
          current: "SZ",
          code: "399001",
        },
        {
          name: "创业板",
          is: false,
          current: "30",
          code: "399006",
        },
        {
          name: "科创板",
          is: false,
          current: "688",
          code: "000688",
        },
      ],
      marketNavIndex: "SZ",
      marketNavCode: "000001",
      // 涨跌区间选择
      breakevenNav: [
        {
          name: "涨跌区间",
          is: true,
        },
        {
          name: "涨跌个股",
          is: false,
          current: 1,
        },
        {
          name: "跌停个股",
          is: false,
          current: 0,
        },
      ],
      // k线图
      showMyChart: null,
      // 柱状图
      showColumnar: null,
      bottomLoad: false,
      list: [
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
      ],
      total: 20,
      date: "",
      rose: "",
      fall: "",
      equal: "",
      roseOrFall: "",
      collection: false,
    };
  },
  created() {
    this.date = this.getTime(Date.parse(new Date()));
    this.queryCollection();
  },
  mounted() {
    this.$nextTick(() => {
      //  执行echarts方法
      this.initEcharts();
      this.initEchartsK();
    });
  },
  methods: {
    // 是否收藏
    isCollection() {
      this.marketNav.forEach((item) => {
        if (item.is) {
          if (this.collection == false) {
            addQuery({
              securityCode: item.code,
              securityType: item.current,
            })
              .then((res) => {
                console.log(res);
                if (res.code == 200) {
                  this.$message({
                    type: "success",
                    message: "收藏成功!",
                  });
                }

                this.collection = true;
              })
              .catch(() => {
                // this.shareLoading = false;
              });
          } else {
            delQuery({
              securityCode: item.code,
              securityType: item.current,
            })
              .then((res) => {
                console.log(res);
                if (res.code == 200) {
                  this.$message({
                    type: "none",
                    message: "已取消收藏！",
                  });
                }
                this.collection = false;
              })
              .catch(() => {
                // this.shareLoading = false;
              });
          }
        }
      });

      // this.collection = !this.collection;
    },
    // 大盘信息柱状图选择
    marketNavClick(name) {
      this.marketNav.forEach((item) => {
        if (item.name == name) {
          item.is = true;
          this.marketNavIndex = item.current;
          this.marketNavCode = item.code;
          this.initEcharts();
          this.initEchartsK();
          this.queryCollection();
        } else {
          item.is = false;
        }
      });
    },
    // 涨跌选择
    breakevenNavClick(name) {
      this.bottomLoad = true;
      this.breakevenNav.forEach((item) => {
        if (item.name == name) {
          setTimeout(() => {
            this.bottomLoad = false;
            this.$nextTick(() => {
              //  执行echarts方法
              this.initEcharts();
            });
          }, 2000);
          this.roseOrFall = item.current;
          this.getList();
          item.is = true;
        } else {
          item.is = false;
        }
      });
    },
    currentChange(e) {
      console.log(e);
    },
    // 查询是否收藏
    queryCollection() {
      queryIsCollect({
        securityCode: this.marketNavCode,
      })
        .then((res) => {
          console.log(res);
          res.data == 1 ? (this.collection = true) : (this.collection = false);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    //
    //
    // 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;
    },
    // 初始化柱状图
    initEcharts() {
      riseLossesStatistics({
        businessDate: this.date,
        securityType: this.marketNavIndex,
      })
        .then((res) => {
          this.rose = res.data.riseNum;
          this.fall = res.data.lossesNum;
          this.equal = res.data.equalNum;
          var option;
          this.showColumnar = this.$echarts.init(
            document.getElementById("showColumnar")
          );
          this.showColumnar.setOption(
            (option = {
              xAxis: {
                type: "category",
                data: [
                  "≥10%",
                  "≥7%",
                  "7-5%",
                  "5-3%",
                  "3-0%",
                  "平",
                  "-3至-5%",
                  "-5至-7%",
                  "≤-7%",
                  "≤-10%",
                ],
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  data: res.data.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: "top", //在上方显示
                        textStyle: {
                          //数值样式
                          // color: "black",
                          fontSize: 14,
                        },
                      },
                    },
                  },
                },
              ],
            }),
            true
          );
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    initEchartsK() {
      kLine({
        securityCode: this.marketNavCode,
        securityType: "",
      })
        .then((res) => {
          const upColor = "#00da3c";
          const downColor = "#ec0000";
          var option;
          this.showMyChart = this.$echarts.init(
            document.getElementById("showMyChart")
          );
          var data = this.splitData(res.data);
          // console.log(data);
          this.showMyChart.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
          );
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });

      this.showMyChart.dispatchAction({
        type: "brush",
        areas: [
          {
            brushType: "lineX",
            coordRange: ["2000-01-24", "2013-03-26"],
            xAxisIndex: 0,
          },
        ],
      });
    },
    getList() {
      riseLossesDetail({
        businessDate: this.date,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        riseOrLosses: this.roseOrFall,
        securityType: this.marketNavIndex,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          // this.privateList = res.data.list;
          this.list = res.data.list;
          this.total = this.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = 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}`;
    },
    dateChange() {
      this.date = this.getTime(this.date);
      this.getList();
      if (this.breakevenNav[0].is) {
        this.initEcharts();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.info {
  margin-top: 20px;
  height: calc(100vh - 20vh);
  overflow-y: auto;
  overflow-x: hidden;
}
.market_top_nav_text {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.market_top_nav_text > div {
  margin-right: 20px;
  cursor: pointer;
}
.breakeven_nav {
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.breakeven_nav2 {
  display: flex;
  align-items: center;
}
.breakeven_nav2 > div {
  margin-right: 30px;
  cursor: pointer;
}
.breakeven_nav1 {
  font-weight: bold;
  color: #333;
}
.breakeven_line_box {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  .breakeven_line {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background-color: #ec7c00;
  }
}
.columnar_value {
  display: flex;
  align-items: center;
  justify-content: center;
}
.columnar_value > span {
  margin-right: 30px;
}
.bottom_loading {
  top: 100px;
  left: 48%;
  position: relative;
  width: 30px;
  height: 30px;
  border: 2px solid #000;
  border-top-color: rgba(0, 0, 0, 0.2);
  border-right-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  animation: circle infinite 0.75s linear;
}
@keyframes circle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
::v-deep .el-table td {
  text-align: center;
  border: 0;
}
::v-deep .el-table th.is-leaf {
  text-align: center;
  background-color: #fff9f3;
  color: #333333;
  padding: 13px 0;
}
.list {
  margin-top: 20px;
}
.pagination {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.show_head {
  font-size: 20px;
  display: flex;
  font-weight: bold;
  align-items: center;
  justify-content: flex-end;
  padding-right: 30px;
  color: #333333;
  cursor: pointer;
  .show_head_icon {
    margin-left: 10px;
    width: 18px;
    height: 18px;
  }
}
</style>
