<template>
  <div class="app-container">
    <div class="main">
      <div class="total_breakeven">
        <div class="total_head">
          <div>
            <div>总盈亏</div>
            <div class="breakeven_money">{{ totalBreakeven }}</div>
            <div>收益率{{ totalEarnings.toFixed(2) }}%</div>
          </div>
        </div>
        <div class="total_sift">
          <div>
            <el-select
              v-model="earningsOrBreakeven"
              @change="earningsOrBreakevenChange"
              placeholder="请选择"
              class="select_ipt"
            >
              <el-option label="收益率" value="1"></el-option>
              <el-option label="盈亏金额" value="2"></el-option>
            </el-select>
            <el-select
              v-model="timePeriod"
              @change="timePeriodChange"
              placeholder="请选择"
              class="select_ipt"
            >
              <el-option label="本月" value="0"></el-option>
              <el-option label="近三月" value="1"></el-option>
              <el-option label="近一年" value="2"></el-option>
            </el-select>
          </div>
          <div class="total_date_sift">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 400px"
            >
            </el-date-picker>
            <button class="total_sift_btn" @click="serchDateRange">搜索</button>
          </div>
        </div>
        <div>
          <div id="polylines" :style="{ width: '100%', height: '400px' }"></div>
        </div>
      </div>
      <div class="profit_box" ref="container">
        <div ref="profit_head">
          <div class="profit_nav_text">盈利个股</div>
          <div class="profit_sift">
            <div>
              <el-select
                v-model="profitMarket"
                placeholder="请选择"
                @change="profitMarketChange"
                class="profit_sift_ipt"
              >
                <el-option
                  v-for="item in profitMarketList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- <el-select
                v-model="profitPlate"
                placeholder="请选择"
                class="profit_sift_ipt"
                @change="profitPlateChange"
              >
                <el-option
                  v-for="item in profitPlateList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
              <el-select
                v-model="profitSiftMoney"
                @change="profitMoneyChange"
                placeholder="请选择"
                class="profit_sift_ipt"
              >
                <el-option label="金额升序" value="1"></el-option>
                <el-option label="金额降序" value="0"></el-option>
              </el-select>
            </div>
            <div class="profit_serch">
              <el-input
                v-model="profitValue"
                placeholder="请输入个股代码/名称/板块"
              ></el-input>
              <button class="profit_serch_btn" @click="profitSerch">
                搜索
              </button>
            </div>
          </div>
        </div>
        <div class="list">
          <el-table
            :data="profitList"
            style="width: 100%"
            @row-click="profitRowClick"
            :height="profitTableHeight"
          >
            <el-table-column prop="securityName" label="股票名称">
            </el-table-column>
            <el-table-column prop="buyDate" label="买入时间" width="100px">
            </el-table-column>
            <el-table-column prop="buyPrice" label="买入价格">
            </el-table-column>
            <el-table-column prop="sellDate" label="卖出时间" width="100px">
            </el-table-column>
            <el-table-column prop="sellPrice" label="卖出价格">
            </el-table-column>
            <el-table-column label="盈利金额">
              <template slot-scope="scope">
                <div style="color: #d9001b">{{ scope.row.totalMoney }}</div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination" v-if="profitTotal > 20" ref="profit_footer">
            <el-pagination
              layout="prev, pager, next"
              :total="profitTotal"
              background
              :page-size="20"
              @current-change="profitCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="profit_box">
        <div ref="loss_head">
          <div class="profit_nav_text">亏损个股</div>
          <div class="profit_sift">
            <div>
              <el-select
                v-model="lossMarket"
                @change="lossMarketChange"
                placeholder="请选择"
                class="profit_sift_ipt"
              >
                <el-option
                  v-for="item in lossMarketList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- <el-select
                v-model="lossPlate"
                @change="lossPlateChange"
                placeholder="请选择"
                class="profit_sift_ipt"
              >
                <el-option
                  v-for="item in lossPlateList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
              <el-select
                v-model="lossSiftMoney"
                @change="lossMoneyChange"
                placeholder="请选择"
                class="profit_sift_ipt"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="金额升序" value="1"></el-option>
                <el-option label="金额降序" value="0"></el-option>
              </el-select>
            </div>
            <div class="profit_serch">
              <el-input
                v-model="lossValue"
                placeholder="请输入个股代码/名称/板块"
              ></el-input>
              <button class="profit_serch_btn" @click="lossSerch">搜索</button>
            </div>
          </div>
        </div>
        <div class="list">
          <el-table
            :data="lossList"
            style="width: 100%"
            @row-click="lossRowClick"
            :height="lossTableHeight"
          >
            <el-table-column prop="securityName" label="股票名称">
            </el-table-column>
            <el-table-column prop="buyDate" label="买入时间" width="100px">
            </el-table-column>
            <el-table-column prop="buyPrice" label="买入价格">
            </el-table-column>
            <el-table-column prop="sellDate" label="卖出时间" width="100px">
            </el-table-column>
            <el-table-column prop="sellPrice" label="卖出价格">
            </el-table-column>
            <el-table-column label="亏损金额">
              <template slot-scope="scope">
                <div style="color: #6fbb60">{{ scope.row.totalMoney }}</div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination" v-if="lossTotal > 20" ref="loss_footer">
            <el-pagination
              layout="prev, pager, next"
              :total="lossTotal"
              background
              :page-size="20"
              @current-change="lossCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      v-if="dialogVisible"
      :open="open()"
    >
      <div slot="title">{{ data.securityName }}-盈亏统计</div>
      <div class="show_head">
        <div>
          <div>总盈亏</div>
          <div class="show_breakeven_money">{{ singleBreakeven }}</div>
          <div>收益率{{ singleEarnings.toFixed(2) }}%</div>
        </div>
      </div>
      <div class="show_total_sift">
        <div>
          <el-select
            v-model="showEarningsOrBreakeven"
            @change="showEarningsOrBreakevenChange"
            placeholder="请选择"
            class="show_select_ipt"
          >
            <el-option label="收益率" value="1"></el-option>
            <el-option label="盈亏金额" value="2"></el-option>
          </el-select>
          <el-select
            v-model="showTimePeriod"
            @change="showTimePeriodChange"
            placeholder="请选择"
            class="show_select_ipt"
          >
            <el-option label="本月" value="0"></el-option>
            <el-option label="近三月" value="1"></el-option>
            <el-option label="近一年" value="2"></el-option>
          </el-select>
        </div>
        <div class="show_date_sift">
          <el-date-picker
            v-model="showDateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 300px"
          >
          </el-date-picker>
          <button class="show_sift_btn" @click="showSerchDate">搜索</button>
        </div>
      </div>
      <div id="showPolylines" :style="{ width: '100%', height: '400px' }"></div>
    </el-dialog>
  </div>
</template>

<script>
import { profitOrLoss, totalEarnings, earningsLine } from "@/api/user";
export default {
  data() {
    return {
      // 单股总盈亏
      singleBreakeven: "",
      // 单股总收益
      singleEarnings: 0,
      // 总盈亏
      totalBreakeven: "",
      // 总收益
      totalEarnings: 0,
      // 筛选收益率or盈亏金额
      earningsOrBreakeven: "1",
      // 时间段筛选
      timePeriod: "0",
      // 日期范围
      dateRange: "",
      // 弹出层筛选收益率or盈亏金额
      showEarningsOrBreakeven: "1",
      // 弹出层时间段筛选
      showTimePeriod: "0",
      // 弹出层日期范围
      showDateRange: "",
      // 盈利个股市场筛选
      profitMarket: "",
      profitMarketList: [
        {
          value: "",
          label: "全部大盘",
        },
        {
          value: "SZ",
          label: "上证指数",
        },
        {
          value: "SH",
          label: "深证指数",
        },
        {
          value: "30",
          label: "创业板",
        },
        {
          value: "688",
          label: "科创板",
        },
      ],
      // 盈利个股版本筛选
      profitPlate: "全部板块",
      profitPlateList: [
        {
          value: "全部板块",
          label: "全部板块",
        },
        {
          value: "半导体",
          label: "半导体",
        },
      ],
      // 盈利个股金额筛选
      profitSiftMoney: "1",
      // 盈利数据
      profitList: [
        {
          name: "长城汽车",
          mairudate: "2022-3-24",
          mairu: "54.25",
          maichu: "60.24",
          maichudate: "2022-4-24",
          yingli: "1.24万",
        },
      ],
      // 盈利搜索
      profitValue: "",
      profitTotal: 20,
      profitTableHeight: null,
      // 亏损搜索
      lossValue: "",
      // 亏损个股市场筛选
      lossMarket: "",
      lossMarketList: [
        {
          value: "",
          label: "全部大盘",
        },
        {
          value: "SZ",
          label: "上证指数",
        },
        {
          value: "SH",
          label: "深证指数",
        },
        {
          value: "30",
          label: "创业板",
        },
        {
          value: "688",
          label: "科创板",
        },
      ],
      // 亏损个股版本筛选
      lossPlate: "全部板块",
      lossPlateList: [
        {
          value: "全部板块",
          label: "全部板块",
        },
        {
          value: "半导体",
          label: "半导体",
        },
      ],
      // 亏损个股金额筛选
      lossSiftMoney: "1",
      // 亏损数据
      lossList: [
        {
          name: "长城汽车",
          mairudate: "2022-3-24",
          mairu: "54.25",
          maichu: "60.24",
          maichudate: "2022-4-24",
          yingli: "1.24万",
        },
      ],
      lossTotal: 20,
      lossTableHeight: null,
      dialogVisible: false,
      data: {},
      showCode: "",
    };
  },
  created() {
    document.title = "交易统计";
  },
  mounted() {
    this.$nextTick(() => {
      this.initEchartsZ();
      const rect = this.$refs.container.getBoundingClientRect();
      const head = this.$refs.profit_head.getBoundingClientRect();
      const lossHead = this.$refs.loss_head.getBoundingClientRect();
      if (this.profitTotal > 20) {
        const footer = this.$refs.profit_footer.getBoundingClientRect();
        this.profitTableHeight = rect.height - head.height - footer.height - 20;
      } else {
        this.profitTableHeight = rect.height - head.height - 20;
      }
      if (this.lossTotal > 20) {
        const footer = this.$refs.loss_footer.getBoundingClientRect();
        this.lossTableHeight =
          rect.height - lossHead.height - footer.height - 20;
      } else {
        this.lossTableHeight = rect.height - lossHead.height - 20;
      }
      console.log(this.profitTableHeight, head.height);
      this.rending();
    });
  },
  methods: {
    // 格式化时间戳
    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}`;
    },
    rending() {
      totalEarnings({
        securityCode: "",
      })
        .then((res) => {
          this.totalBreakeven = res.data.totalEarnings;
          this.totalEarnings = res.data.earningsRate;
          // this.tendencyList = res.data.list;
          // this.profitList = res.data.list;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
      profitOrLoss({
        endDate: "",
        keyWord: "",
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        securityType: this.profitMarket,
        sortAmount: 1,
        startDate: "",
        type: 1,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          this.profitList = res.data.list;
          this.profitTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
      profitOrLoss({
        endDate: "",
        keyWord: "",
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        securityType: this.lossMarket,
        sortAmount: 1,
        startDate: "",
        type: 0,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          this.lossList = res.data.list;
          this.lossTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 盈利点击行
    profitRowClick(r) {
      this.data = r;
      totalEarnings({
        securityCode: r.securityCode,
      })
        .then((res) => {
          this.singleBreakeven = res.data.totalEarnings;
          this.singleEarnings = res.data.earningsRate;
          // this.tendencyList = res.data.list;
          // this.profitList = res.data.list;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
      // this.singleBreakeven =
      this.showCode = r.securityCode;
      this.dialogVisible = true;
    },
    // 亏损点击行
    lossRowClick(r) {
      this.data = r;
      totalEarnings({
        securityCode: r.securityCode,
      })
        .then((res) => {
          this.singleBreakeven = res.data.totalEarnings;
          this.singleEarnings = res.data.earningsRate;
          // this.tendencyList = res.data.list;
          // this.profitList = res.data.list;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
      this.dialogVisible = true;
    },
    // 盈利换页
    profitCurrentChange(e) {
      profitOrLoss({
        endDate: "",
        keyWord: "",
        pageModel: {
          pageNo: e,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        securityType: "",
        sortAmount: 1,
        startDate: "",
        type: 1,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          this.profitList = res.data.list;
          this.profitTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 亏损换页
    lossCurrentChange(e) {
      profitOrLoss({
        endDate: "",
        keyWord: "",
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        securityType: "",
        sortAmount: 1,
        startDate: "",
        type: 0,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          this.lossList = res.data.list;
          this.lossTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    lossSerch() {
      profitOrLoss({
        endDate: "",
        keyWord: this.lossValue,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        securityType: this.lossMarket,
        sortAmount: 1,
        startDate: "",
        type: 0,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          this.lossList = res.data.list;
          this.lossTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    profitSerch() {
      profitOrLoss({
        endDate: "",
        keyWord: this.profitValue,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        securityType: this.profitMarket,
        sortAmount: 1,
        startDate: "",
        type: 1,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          this.profitList = res.data.list;
          this.profitTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 收益率or盈亏金额
    earningsOrBreakevenChange(e) {
      this.initEchartsZ();
      console.log(e);
    },
    // 弹出层收益率or盈亏金额
    showEarningsOrBreakevenChange(e) {
      console.log(e);
      this.showInitEcharts();
    },
    // 时间段筛选
    timePeriodChange(e) {
      // console.log(e);
      this.initEchartsZ();
    },
    // 时间搜索
    serchDateRange() {
      console.log(this.dateRange);
      earningsLine({
        endDate: this.getTime(this.dateRange[1]),
        securityCode: "",
        startDate: this.getTime(this.dateRange[0]),
        timeType: this.timePeriod,
        type: this.earningsOrBreakeven,
      })
        .then((res) => {
          console.log(res);
          var option;
          this.polylines = this.$echarts.init(
            document.getElementById("polylines")
          );
          // let base = +new Date(2000, 8, 3);
          // let oneDay = 24 * 3600 * 1000;
          // let data = [[base, Math.random() * 300]];
          // for (let i = 1; i < 700; i++) {
          //   let now = new Date((base += oneDay));
          //   data.push([
          //     +now,
          //     Math.round((Math.random() - 0.5) * 20 + data[i - 1][1]),
          //   ]);
          // }
          // console.log(res.data.data);
          this.polylines.setOption(
            (option = {
              tooltip: {
                trigger: "axis",
                position: function (pt) {
                  return [pt[0], "10%"];
                },
              },
              toolbox: {
                feature: {
                  dataZoom: {
                    yAxisIndex: "none",
                  },
                  restore: {},
                  saveAsImage: {},
                },
              },
              xAxis: {
                type: "time",
                boundaryGap: false,
              },
              yAxis: {
                type: "value",
                boundaryGap: [0, "100%"],
              },
              dataZoom: [
                {
                  type: "inside",
                  start: 0,
                  end: 100,
                },
                {
                  show: false,
                  start: 0,
                  end: 100,
                },
              ],
              series: [
                {
                  name: "数据",
                  type: "line",
                  smooth: true,
                  symbol: "none",
                  // 背景色
                  // areaStyle: {},
                  data: res.data,
                },
              ],
            }),
            true
          );
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 弹出层时间搜索
    showSerchDate() {
      earningsLine({
        endDate: this.getTime(this.showDateRange[1]),
        securityCode: this.showCode,
        startDate: this.getTime(this.showDateRange[0]),
        timeType: this.showTimePeriod,
        type: this.showEarningsOrBreakeven,
      })
        .then((res) => {
          console.log(res);
          var option;
          this.showPolylines = this.$echarts.init(
            document.getElementById("showPolylines")
          );
          this.showPolylines.setOption(
            (option = {
              tooltip: {
                trigger: "axis",
                position: function (pt) {
                  return [pt[0], "10%"];
                },
              },
              title: {
                left: "center",
                text: "Large Ara Chart",
              },
              toolbox: {
                feature: {
                  dataZoom: {
                    yAxisIndex: "none",
                  },
                  restore: {},
                  saveAsImage: {},
                },
              },
              xAxis: {
                type: "time",
                boundaryGap: false,
              },
              yAxis: {
                type: "value",
                boundaryGap: [0, "100%"],
              },
              dataZoom: [
                {
                  type: "inside",
                  start: 0,
                  end: 100,
                },
                {
                  show: false,
                  start: 0,
                  end: 100,
                },
              ],
              series: [
                {
                  name: "数据",
                  type: "line",
                  smooth: true,
                  symbol: "none",
                  // 背景色
                  // areaStyle: {},
                  data: res.data,
                },
              ],
            }),
            true
          );
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 弹出层时间段筛选
    showTimePeriodChange(e) {
      console.log(e);
      this.showInitEcharts();
    },
    // 盈利个股市场筛选
    profitMarketChange(e) {
      profitOrLoss({
        endDate: "",
        keyWord: "",
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        securityType: this.profitMarket,
        sortAmount: 1,
        startDate: "",
        type: 1,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          this.profitList = res.data.list;
          this.profitTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
      console.log(e);
    },
    // 盈利个股板块筛选
    profitPlateChange(e) {},
    // 盈利个股金额筛选
    profitMoneyChange(e) {
      profitOrLoss({
        endDate: "",
        keyWord: "",
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        securityType: this.profitMarket,
        sortAmount: this.profitSiftMoney,
        startDate: "",
        type: 1,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          this.profitList = res.data.list;
          this.profitTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
      console.log(e);
      console.log(e);
    },
    // 亏损个股市场筛选
    lossMarketChange(e) {
      console.log(e);
      profitOrLoss({
        endDate: "",
        keyWord: "",
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        securityType: this.lossMarket,
        sortAmount: 1,
        startDate: "",
        type: 0,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          this.lossList = res.data.list;
          this.lossTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 盈利个股板块筛选
    lossPlateChange(e) {
      console.log(e);
    },
    // 盈利个股金额筛选
    lossMoneyChange(e) {
      profitOrLoss({
        endDate: "",
        keyWord: "",
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        securityType: this.lossMarket,
        sortAmount: this.lossSiftMoney,
        startDate: "",
        type: 0,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          this.lossList = res.data.list;
          this.lossTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 初始化折线图
    initEchartsZ() {
      earningsLine({
        endDate: "",
        securityCode: "",
        startDate: "",
        timeType: this.timePeriod,
        type: this.earningsOrBreakeven,
      })
        .then((res) => {
          console.log(res);
          var option;
          this.polylines = this.$echarts.init(
            document.getElementById("polylines")
          );
          // let base = +new Date(2000, 8, 3);
          // let oneDay = 24 * 3600 * 1000;
          // let data = [[base, Math.random() * 300]];
          // for (let i = 1; i < 700; i++) {
          //   let now = new Date((base += oneDay));
          //   data.push([
          //     +now,
          //     Math.round((Math.random() - 0.5) * 20 + data[i - 1][1]),
          //   ]);
          // }
          // console.log(res.data.data);
          this.polylines.setOption(
            (option = {
              tooltip: {
                trigger: "axis",
                position: function (pt) {
                  return [pt[0], "10%"];
                },
              },
              toolbox: {
                feature: {
                  dataZoom: {
                    yAxisIndex: "none",
                  },
                  restore: {},
                  saveAsImage: {},
                },
              },
              xAxis: {
                type: "time",
                boundaryGap: false,
              },
              yAxis: {
                type: "value",
                boundaryGap: [0, "100%"],
              },
              dataZoom: [
                {
                  type: "inside",
                  start: 0,
                  end: 100,
                },
                {
                  show: false,
                  start: 0,
                  end: 100,
                },
              ],
              series: [
                {
                  name: "数据",
                  type: "line",
                  smooth: true,
                  symbol: "none",
                  // 背景色
                  // areaStyle: {},
                  data: res.data,
                },
              ],
            }),
            true
          );
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 初始化弹框折线图
    showInitEcharts() {
      earningsLine({
        endDate: "",
        securityCode: this.showCode,
        startDate: "",
        timeType: this.showTimePeriod,
        type: this.showEarningsOrBreakeven,
      })
        .then((res) => {
          console.log(res);
          var option;
          this.showPolylines = this.$echarts.init(
            document.getElementById("showPolylines")
          );
          this.showPolylines.setOption(
            (option = {
              tooltip: {
                trigger: "axis",
                position: function (pt) {
                  return [pt[0], "10%"];
                },
              },
              toolbox: {
                feature: {
                  dataZoom: {
                    yAxisIndex: "none",
                  },
                  restore: {},
                  saveAsImage: {},
                },
              },
              xAxis: {
                type: "time",
                boundaryGap: false,
              },
              yAxis: {
                type: "value",
                boundaryGap: [0, "100%"],
              },
              dataZoom: [
                {
                  type: "inside",
                  start: 0,
                  end: 100,
                },
                {
                  show: false,
                  start: 0,
                  end: 100,
                },
              ],
              series: [
                {
                  name: "数据",
                  type: "line",
                  smooth: true,
                  symbol: "none",
                  // 背景色
                  // areaStyle: {},
                  data: res.data,
                },
              ],
            }),
            true
          );
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    open() {
      this.$nextTick(() => {
        this.showInitEcharts();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px;
  width: 100%;
  .main {
    width: 100%;
    height: calc(100vh - 90px);
    // background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .main > div {
    width: 32.5%;
    height: 100%;
    background-color: white;
    border-radius: 8px;
  }
  .total_breakeven {
    padding: 20px 0;
    .total_head {
      height: 156px;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      background-image: url(../../static/jiaoyi_bgc.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .breakeven_money {
        font-size: 20px;
        font-weight: bold;
        padding: 5px 0;
      }
    }
    .total_sift {
      padding: 20px;
      .select_ipt {
        width: 120px;
        margin-right: 20px;
      }
      .total_date_sift {
        margin-top: 20px;
        display: flex;
        align-items: center;
      }
      .total_sift_btn {
        margin-left: 20px;
        width: 70px;
        height: 37px;
        color: white;
        font-size: 12px;
        border: 0;
        border-radius: 4px;
        background-color: #ec7c00;
      }
    }
  }
  .profit_box {
    .profit_nav_text {
      padding: 20px;
      font-weight: bold;
      font-size: 20px;
    }
    .profit_sift {
      padding: 0 20px;
      .profit_sift_ipt {
        width: 130px;
        margin-right: 20px;
      }
      .profit_serch {
        margin-top: 20px;
        display: flex;
        align-items: center;
        .profit_serch_btn {
          width: 74px;
          height: 37px;
          background-color: #ec7c00;
          color: white;
          font-size: 12px;
          border: 0;
          border-radius: 4px;
          margin-left: 20px;
        }
      }
    }
  }
  .list {
    margin-top: 20px;
  }
  ::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;
  }
  .pagination {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.show_head {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 120px;
  background-image: url(../../static/jiaoyi_bgc.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #333333;
  .show_breakeven_money {
    font-size: 20px;
    font-weight: bold;
    padding: 5px 0;
  }
}
.show_total_sift {
  padding: 20px;
  .show_select_ipt {
    width: 120px;
    margin-right: 20px;
  }
  .show_date_sift {
    margin-top: 20px;
    display: flex;
    align-items: center;
  }
  .show_sift_btn {
    margin-left: 20px;
    width: 70px;
    height: 37px;
    color: white;
    font-size: 12px;
    border: 0;
    border-radius: 4px;
    background-color: #ec7c00;
  }
}
::v-deep .el-dialog {
  margin-top: 5vh !important;
  margin-bottom: 5vh !important;
}
</style>
