<template>
  <div class="app-container">
    <div class="box" ref="container">
      <!-- <div id="myChart" :style="{ width: '0', height: '0' }"></div> -->
      <div class="head" ref="head">
        <el-input
          v-model="inputSerch"
          placeholder="请输入个股代码/名称/板块"
          class="iptSerch"
        >
          <div slot="suffix" class="serch_text" @click="submitSerch">搜索</div>
        </el-input>
        <div class="head_date">
          <i class="el-icon-arrow-left" @click="beforeDay(privateDate)"></i>
          <div style="padding: 0 10px" class="hide_input">
            <el-date-picker
              @change="dateChenge"
              v-model="privateDate"
              type="date"
              value-format="yyyy-MM-dd"
              >//日期格式
            </el-date-picker>
            {{ privateDate }}
          </div>
          <i class="el-icon-arrow-right" @click="afterDay(privateDate)"></i>
        </div>
        <div class="belong">
          <el-select
            v-model="belongValue"
            placeholder="所属大盘"
            @change="changeMarket"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- <div class="plate">
          <el-select v-model="plateValue" placeholder="选择板块">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div> -->
        <!-- <button class="btn_serch">搜索</button> -->
      </div>
      <div class="list">
        <el-table
          :data="list"
          style="width: 100%"
          @row-click="rowClick"
          :height="tableHeight"
        >
          <el-table-column prop="securityCode" label="股票代码">
          </el-table-column>
          <el-table-column prop="securityName" label="股票名称">
          </el-table-column>
          <el-table-column prop="openingPrice" label="开盘价">
          </el-table-column>
          <el-table-column prop="closingPrice" label="收盘价">
          </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
                style="color: #d9001b"
                v-if="scope.row.riseLossesCurrentDay > 0"
              >
                {{ scope.row.riseLossesCurrentDay.toFixed(2) }}%
              </div>
              <div style="color: #6fbb60" v-else>
                -{{ scope.row.riseLossesCurrentDay.toFixed(2) }}%
              </div>
            </template>
          </el-table-column>
          <el-table-column label="是否涨停">
            <!-- riseStop -->
            <template slot-scope="scope">
              {{ scope.row.riseStop == 1 ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column label="是否跌停">
            <template slot-scope="scope">
              {{ scope.row.lossesStop == 1 ? "是" : "否" }}
            </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="自由流通市值">
          </el-table-column>
          <el-table-column
            prop="totalInstitutionalPositions"
            label="机构持仓合计"
          >
          </el-table-column>
          <!-- <el-table-column prop="ban" label="几天几板" width="150"> -->
          <!-- </el-table-column> -->
          <el-table-column prop="dayAndPlate" width="150">
            <template slot="header" slot-scope="scope">
              <div class="plate_sift" @click="selectPlateSift">
                <div>几天几板</div>
                <div class="module_head_icon" v-if="plateSift">
                  <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>
            </template>
          </el-table-column>
          <el-table-column
            prop="dongCaiIndustryIndexLevel2"
            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>
    <el-dialog :visible.sync="dialogVisible" 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 {
  originalIssueStockDetail,
  getByCode,
  kLine,
  addQuery,
  delQuery,
} from "@/api/user";
const upColor = "#00da3c";
const downColor = "#ec0000";

export default {
  data() {
    return {
      dialogVisible: false,
      // 搜索内容
      inputSerch: "",
      // 筛选日期
      privateDate: "",
      // 所属大盘
      options: [
        {
          value: "",
          label: "全部大盘",
        },
        {
          value: "SH",
          label: "上证指数",
        },
        {
          value: "SZ",
          label: "深证指数",
        },
        {
          value: "30",
          label: "创业板",
        },
        {
          value: "688",
          label: "科创版",
        },
      ],
      belongValue: "",
      // 板块
      options1: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      plateValue: "",
      total: 20,
      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板",
        },
      ],
      listDetail: {},
      // 几天几板筛选
      plateSift: true,
      myChart: null, //k线容器
      collection: false,
      tableHeight: null,
      marketValue: "",
      clickrCode: "",
    };
  },
  created() {
    document.title = "个股";
    this.privateDate = this.getTime(Date.parse(new Date()));
    this.rending();
  },
  mounted() {
    this.$nextTick(() => {
      const rect = this.$refs.container.getBoundingClientRect();
      const head = this.$refs.head.getBoundingClientRect();
      if (this.total > 20) {
        const footer = this.$refs.footer.getBoundingClientRect();
        this.tableHeight = rect.height - head.height - footer.height;
      } else {
        this.tableHeight = rect.height - head.height;
      }
      console.log(this.tableHeight);
    });
  },
  methods: {
    // 大盘筛选
    changeMarket(e) {
      console.log(e);
      this.marketValue = e;
      this.rending();
    },
    rending() {
      originalIssueStockDetail({
        businessDate: this.privateDate,
        keyWord: "",
        securityType: this.marketValue,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        plate: "",
        dayAndPlateSort: this.plateSift ? 1 : 0,
      })
        .then((res) => {
          this.list = res.data.list;
          this.total = res.data.totalCount;
          console.log(this.total);
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 初始化echarts
    initEcharts(id) {
      kLine({
        securityCode: id,
        securityType: "",
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          // this.privateList = res.data.list;
          console.log(res);
          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,
              },
            ],
          });
        })
        .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}`;
    },
    // 前一日
    beforeDay(date) {
      this.privateDate = this.getTime(
        new Date(date).getTime() - 24 * 60 * 60 * 1000
      );
      this.rending();
    },
    dateChenge() {
      this.rending();
    },
    // 后一日
    afterDay(date) {
      this.privateDate = this.getTime(
        new Date(date).getTime() + 24 * 60 * 60 * 1000
      );
      this.rending();
    },
    // 几天几板筛选
    selectPlateSift() {
      this.plateSift = !this.plateSift;
      this.rending();
    },
    // 表格行点击事件
    rowClick(r) {
      // console.log(r.name);
      // this.listDetail = r;
      this.clickrCode = r.securityCode;
      getByCode({
        businessDate: this.privateDate,
        securityCode: r.securityCode,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          this.listDetail = res.data;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
      this.dialogVisible = true;
    },
    // 分页
    currentChange(e) {
      console.log(e);
      originalIssueStockDetail({
        businessDate: this.privateDate,
        keyWord: "",
        securityType: this.marketValue,
        pageModel: {
          pageNo: e,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        plate: "",
      })
        .then((res) => {
          this.list = res.data.list;
          this.total = res.data.totalCount;
          console.log(this.total);
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    isCollection() {
      // this.collection = !this.collection;
      if (this.listDetail.isCollect == 1) {
        delQuery({
          securityCode: this.listDetail.securityCode,
          securityType: this.listDetail.securityType,
        })
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.$message({
                type: "none",
                message: "已取消收藏!",
              });
            }
            this.listDetail.isCollect = null;
          })
          .catch(() => {
            // this.shareLoading = false;
          });
      } else {
        addQuery({
          securityCode: this.listDetail.securityCode,
          securityType: this.listDetail.securityType,
        })
          .then((res) => {
            console.log(res);
            this.listDetail.isCollect = 1;
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "收藏成功!",
              });
            }
          })
          .catch(() => {
            // this.shareLoading = false;
          });
      }
    },
    // 弹层
    open() {
      this.$nextTick(() => {
        //  执行echarts方法
        this.initEcharts(this.clickrCode);
      });
    },
    // 搜索
    submitSerch() {
      originalIssueStockDetail({
        businessDate: this.privateDate,
        keyWord: this.inputSerch,
        securityType: this.marketValue,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        plate: "",
      })
        .then((res) => {
          this.list = res.data.list;
          this.total = res.data.totalCount;
          console.log(this.total);
          console.log(res);
        })
        .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;
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px;
  width: 100%;
}
.head {
  padding: 20px;
  display: flex;
}
.box {
  width: 100%;
  height: calc(100vh - 100px);
  background-color: white;
  overflow-y: auto;
  .iptSerch {
    width: 400px;
    height: 40px;
    border-radius: 4px;
    .serch_text {
      line-height: 40px;
      padding-right: 15px;
      color: #ec7c00;
      cursor: pointer;
    }
  }
  .head_date {
    margin-left: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 40px;
    background-color: white;
    border-radius: 4px;
    font-size: 14px;
    border: 1px solid #dedede;
  }
  .belong {
    margin-left: 30px;
  }
  .plate {
    margin-left: 30px;
  }
  .btn_serch {
    margin-left: 40px;
    height: 40px;
    width: 100px;
    color: white;
    background-color: #ec7c00;
    border: none;
    border-radius: 4px;
    font-size: 14px;
  }
}
::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;
}
.plate_sift {
  display: flex;
  justify-content: center;
  cursor: pointer;
  .module_head_icon {
    margin-left: 4px;
    display: flex;
    flex-direction: column;
    margin-top: 3px;
    .head_icon {
      width: 9px;
      height: 5px;
      margin-top: 2px;
    }
  }
}
.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;
  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;
}
.list {
}
.hide_input {
  position: relative !important;
}
//修改控件自带的css
.hide_input .el-date-editor {
  position: absolute; //绝对定位
  top: 0;
  left: 0;
  opacity: 0; //设置完全透明
}
</style>
