<template>
  <div class="app-container">
    <div class="box" ref="container">
      <div ref="head">
        <div class="serch">
          <el-input
            v-model="inputSerch"
            placeholder="请输入个股代码或名称"
            class="iptSerch"
          >
            <div slot="suffix" class="serch_text">搜索</div>
          </el-input>
        </div>
        <div class="sift_box">
          <div class="sift_box_left">
            <div class="head_date">
              <i class="el-icon-arrow-left" @click="beforeDay(tradeDate)"></i>
              <div style="padding: 0 15px" class="hide_input">
                <el-date-picker
                  @change="dateChenge"
                  v-model="tradeDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  >//日期格式
                </el-date-picker>
                {{ tradeDate }}
              </div>
              <i class="el-icon-arrow-right" @click="afterDay(tradeDate)"></i>
            </div>
            <div class="trade_type">
              <el-select v-model="tradeTypeValue" placeholder="交易类别">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 300px; margin-left: 30px"
            >
            </el-date-picker>
            <button class="btn_serch" @click="submitSerch">搜索</button>
          </div>
          <div style="display: flex">
            <el-upload
              class="avatar-uploader"
              action="http://192.168.110.199:8001/ssdmn-gupiao-api/import/transactionRecord"
              :show-file-list="false"
              :headers="token"
              :on-success="uploadSuccess"
              :on-change="beforeAvatarUpload"
            >
              <button class="edit_btn">导入</button>
            </el-upload>
            <button class="edit_btn" @click="addList">录入</button>
            <button class="edit_btn" @click="selectedRemove">删除</button>
          </div>
        </div>
      </div>
      <div class="list">
        <el-table
          :data="list"
          style="width: 100%"
          @row-click="rowClick"
          :height="tableHeight"
          ref="multipleTable"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="transactionDate" label="交易日期">
          </el-table-column>
          <el-table-column prop="securityCode" label="股票代码">
          </el-table-column>
          <el-table-column prop="securityName" label="股票名称">
          </el-table-column>
          <el-table-column prop="transactionPrice" label="成交价">
          </el-table-column>
          <el-table-column prop="transactionAmount" label="成交金额">
          </el-table-column>
          <el-table-column prop="premium" label="手续费"> </el-table-column>
          <el-table-column label="交易类别">
            <template slot-scope="scope">
              <div
                style="color: #d9001b"
                v-if="scope.row.transactionCategory == '证券买入'"
              >
                证券买入
              </div>
              <div style="color: #6fbb60" v-else>证券卖出</div>
            </template>
          </el-table-column>
          <el-table-column prop="zhangting" label="操作">
            <template slot-scope="scope">
              <div class="list_edit">
                <span @click="edit(scope.row)">编辑</span>
                <span @click="remove(scope.row.id)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination" ref="footer" v-if="total > 20">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            background
            :page-size="20"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="交易记录-交易详情"
      :visible.sync="showEdit"
      width="50%"
      v-if="showEdit"
    >
      <el-form
        :model="editData"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="交易日期" prop="date">
          <el-date-picker
            v-model="editData.date"
            type="datetime"
            placeholder="选择日期时间"
            class="ipt"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="股票代码" prop="code">
          <el-input v-model="editData.code" class="ipt"></el-input>
        </el-form-item>
        <el-form-item label="股票名称" prop="name">
          <el-input v-model="editData.name" class="ipt"></el-input>
        </el-form-item>
        <el-form-item label="成交价" prop="price">
          <el-input
            v-model="editData.price"
            @input="changePrice"
            class="ipt"
          ></el-input>
        </el-form-item>
        <el-form-item label="成交量" prop="num">
          <el-input
            v-model="editData.num"
            @input="changeNum"
            class="ipt"
          ></el-input>
        </el-form-item>
        <el-form-item label="成交金额">
          <el-input v-model="editData.money" disabled class="ipt"></el-input>
        </el-form-item>
        <el-form-item label="手续费">
          <el-input
            v-model="editData.formalities"
            disabled
            class="ipt"
          ></el-input>
        </el-form-item>
        <el-form-item label="手续费(%)" prop="rates">
          <el-input
            v-model="editData.rates"
            @input="changeRates"
            class="ipt"
          ></el-input>
        </el-form-item>
        <el-form-item label="交易类别" prop="type">
          <el-select
            v-model="editData.type"
            placeholder="请选择交易类别"
            class="ipt"
          >
            <el-option label="证券买入" value="证券买入"></el-option>
            <el-option label="证券卖出" value="证券卖出"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="show_footer">
        <button class="show_btn" @click="submit">确定</button>
      </div>
    </el-dialog>
    <el-dialog
      title="交易记录-交易详情"
      :visible.sync="listDetail"
      width="40%"
      v-if="listDetail"
    >
      <div style="padding-bottom: 20px">
        <div class="show_list">
          <div class="show_list_left">交易日期</div>
          <div class="show_list_right">{{ dataDetail.transactionTime }}</div>
        </div>
        <div class="show_list">
          <div class="show_list_left">股票代码</div>
          <div class="show_list_right">{{ dataDetail.securityCode }}</div>
        </div>
        <div class="show_list">
          <div class="show_list_left">股票名称</div>
          <div class="show_list_right">{{ dataDetail.securityName }}</div>
        </div>
        <div class="show_list">
          <div class="show_list_left">成交价</div>
          <div class="show_list_right">{{ dataDetail.transactionPrice }}</div>
        </div>
        <div class="show_list">
          <div class="show_list_left">成交量</div>
          <div class="show_list_right">{{ dataDetail.volume }}</div>
        </div>
        <div class="show_list">
          <div class="show_list_left">成交金额</div>
          <div class="show_list_right">{{ dataDetail.transactionAmount }}</div>
        </div>
        <div class="show_list">
          <div class="show_list_left">手续费</div>
          <div class="show_list_right">{{ dataDetail.premium }}</div>
        </div>
        <div class="show_list">
          <div class="show_list_left">手续费率</div>
          <div class="show_list_right">{{ dataDetail.premiumRatio }}%</div>
        </div>
        <div class="show_list">
          <div class="show_list_left">交易类别</div>
          <div
            class="show_list_right"
            :style="{
              color:
                dataDetail.transactionCategory == '证券买入'
                  ? '#D9001B'
                  : '#6FBB60',
            }"
          >
            {{ dataDetail.transactionCategory }}
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { findPage, delByIds, getDetailById, saveOrUpdate } from "@/api/user";
export default {
  data() {
    return {
      token: { Authorization: "" },
      // 数据详情
      listDetail: false,
      // 交易时间
      tradeDate: "",
      // 交易类别
      tradeTypeValue: "",
      // 搜索内容
      inputSerch: "",
      options: [
        {
          value: "证券买入",
          label: "证券买入",
        },
        {
          value: "证券卖出",
          label: "证券卖出",
        },
      ],
      // 时间范围
      dateRange: "",
      list: [
        {
          id: 1,
          code: "301157.SZ",
          date: "2023-3-27  10:54:14",
          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板",
          price: "99.99",
          num: "100000",
          money: "722000",
          formalities: "7245",
          rates: "5",
          type: "1",
        },
        {
          id: 2,
          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板",
        },
        {
          id: 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板",
        },
        {
          id: 1,
          code: "2023-3-27  10:54:14",
          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板",
        },
        {
          id: 2,
          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板",
        },
        {
          id: 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板",
        },
        {
          id: 1,
          code: "2023-3-27  10:54:14",
          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板",
        },
        {
          id: 2,
          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板",
        },
        {
          id: 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板",
        },
        {
          id: 1,
          code: "2023-3-27  10:54:14",
          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板",
        },
        {
          id: 2,
          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板",
        },
        {
          id: 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板",
        },
        {
          id: 1,
          code: "2023-3-27  10:54:14",
          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板",
        },
        {
          id: 2,
          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板",
        },
        {
          id: 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",
          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板",
        },
      ],
      // 选中的数据
      selectedList: [],
      // 总数据
      total: 20,
      tableHeight: null,
      // 编辑弹框
      showEdit: false,
      editData: {
        id: 0,
        // 交易时间
        date: "",
        // 股票代码
        code: "",
        // 股票名称
        name: "",
        // 成交价
        price: "",
        // 成交量
        num: "",
        // 成交金额
        money: "",
        // 手续费
        formalities: "",
        // 手续费率
        rates: "",
        // 交易类型
        type: "",
      },
      dataDetail: {},
      rules: {
        date: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        code: [{ required: true, message: "请输入股票代码", trigger: "blur" }],
        name: [
          { required: true, message: "请输入股票名称", trigger: "blur" },
          { min: 1, max: 4, message: "长度在 1 到 4 个字符", trigger: "blur" },
        ],
        rates: [{ required: true, message: "请输入手续费率", trigger: "blur" }],
        price: [{ required: true, message: "请输入成交价", trigger: "blur" }],
        num: [{ required: true, message: "请输入成交量", trigger: "blur" }],
        type: [
          { required: true, message: "请选择交易类别", trigger: "change" },
        ],
      },
    };
  },
  created() {
    document.title = "交易记录";
    this.tradeDate = this.getTime(Date.parse(new Date()));
    this.rending();
    this.token.Authorization = Cookies.get("vue_admin_template_token");
  },
  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 - 20;
      } else {
        this.tableHeight = rect.height - head.height - 25;
      }
      console.log(this.tableHeight);
    });
  },
  methods: {
    uploadSuccess(res, file) {
      console.log(res, file);
    },
    rending() {
      findPage({
        endTime: "",
        keyWord: "",
        num: "",
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        startTime: "",
        transactionCategory: "",
        // transactionDate: "",
        transactionDate: this.tradeDate,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          this.list = res.data.list;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 前一日
    beforeDay(date) {
      this.tradeDate = this.getTime(
        new Date(date).getTime() - 24 * 60 * 60 * 1000
      );
      this.rending();
    },
    dateChenge() {
      this.rending();
    },
    // 后一日
    afterDay(date) {
      this.tradeDate = this.getTime(
        new Date(date).getTime() + 24 * 60 * 60 * 1000
      );
      this.rending();
    },
    // 格式化时间戳
    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}`;
    },
    // 格式化时间戳
    getDate(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} ${h}:${mm}:${s}`;
    },
    // 当前点击的行
    rowClick(e, k) {
      if (k.label != "操作") {
        // this.dataDetail = e;
        getDetailById(e.id)
          .then((res) => {
            // this.tendencyList = res.data.list;
            this.dataDetail = res.data;
            console.log(res);
          })
          .catch(() => {
            // this.shareLoading = false;
          });

        this.listDetail = true;
      }
    },
    handleSelectionChange(e) {
      this.selectedList = e;
      console.log(this.selectedList);
    },
    // 删除单个
    remove(id) {
      this.$alert("确认删除当前数据吗？", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          console.log(action);
          // let ids = [];
          // ids.push(id);
          if (action === "confirm") {
            delByIds({
              ids: id,
            })
              .then((res) => {
                this.rending();
                this.$message({
                  type: "success",
                  message: "当前数据删除成功!",
                });
              })
              .catch(() => {});
          }
        },
      });
    },
    // 批量删除
    selectedRemove() {
      if (this.selectedList.length) {
        this.$alert("确认删除选中的数据吗？", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            if (action === "confirm") {
              let ids = [];
              this.selectedList.forEach((item) => {
                ids.push(item.id);
              });
              console.log(this.selectedList.id);
              ids = ids.join(",");
              console.log(ids);
              delByIds({
                ids,
              })
                .then((res) => {
                  this.rending();
                  this.$message({
                    type: "success",
                    message: "数据删除成功!",
                  });
                })
                .catch(() => {
                  // this.shareLoading = false;
                });
            }
          },
        });
      } else {
        this.$message({
          type: "warning",
          message: "请选择要删除的数据!",
        });
      }
    },
    // 编辑
    edit(item) {
      // this.editData = item;

      this.editData.id = item.id;
      this.editData.date = item.transactionDate;
      this.editData.code = item.securityCode;
      this.editData.name = item.securityName;
      this.editData.price = item.transactionPrice;
      this.editData.num = item.volume;
      this.editData.money = item.transactionAmount;
      this.editData.formalities = item.premium;
      this.editData.rates = item.premiumRatio;
      this.editData.type = item.transactionCategory;
      this.showEdit = true;
      console.log(this.editData.id);
    },
    addList() {
      this.editData = {};
      this.showEdit = true;
    },
    // 输入成交价格
    changePrice(e) {
      if (this.editData.num) {
        this.editData.money = this.editData.price * this.editData.num;
        this.editData.money = this.editData.money.toFixed(2);
        if (this.editData.rates) {
          this.editData.formalities = this.editData.money * this.editData.rates;
          this.editData.formalities = this.editData.formalities / 100;
          this.editData.formalities = this.editData.formalities.toFixed(2);
        }
      }
    },
    // 输入成交数量
    changeNum(e) {
      if (this.editData.price) {
        this.editData.money = this.editData.price * this.editData.num;
        this.editData.money = this.editData.money.toFixed(2);
        if (this.editData.rates) {
          this.editData.formalities = this.editData.money * this.editData.rates;
          this.editData.formalities = this.editData.formalities / 100;
          this.editData.formalities = this.editData.formalities.toFixed(2);
        }
      }
    },
    // 输入手续费率
    changeRates() {
      if (this.editData.money) {
        this.editData.formalities = this.editData.money * this.editData.rates;
        this.editData.formalities = this.editData.formalities / 100;
        this.editData.formalities = this.editData.formalities.toFixed(2);
      }
    },
    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}`;
    },
    // 筛选搜索
    submitSerch() {
      if (this.dateRange[0]) {
        var star = this.getTime(this.dateRange[0]);
      }
      if (this.dateRange[1]) {
        var end = this.getTime(this.dateRange[1]);
      }
      findPage({
        endTime: end,
        keyWord: "",
        num: "",
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        startTime: star,
        transactionCategory: this.tradeTypeValue,
        transactionDate: "",
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          this.list = res.data.list;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 保存
    submit() {
      // console.log(this.editData.date);
      saveOrUpdate({
        createTime: "",
        id: this.editData.id,
        premium: this.editData.formalities,
        premiumRatio: this.editData.rates,
        securityCode: this.editData.code,
        securityName: this.editData.name,
        securityType: "",
        transactionAmount: this.editData.money,
        transactionCategory: this.editData.type,
        transactionDate: this.getTime(this.editData.date),
        transactionPrice: this.editData.price,
        transactionTime: this.getDate(this.editData.date),
        userId: 0,
        volume: this.editData.num,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          // this.privateList = res.data.list;
          this.rending();
          this.showEdit = false;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    beforeAvatarUpload(file, fileList) {
      console.log(file, fileList);
      const typeArry = [".xlsx", ".xls"];
      const type = file.name.substring(file.name.lastIndexOf("."));
      const isImage = typeArry.indexOf(type) > -1;
      if (!isImage) {
        this.$message.error("上传文件只能是 xlsx/xls 格式!");
      } else {
        return;
      }

      // if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
      //   return;
      // } else {
      //   this.$message.error("上传图片只能是 JPG/PNG 格式!");
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px;
  width: 100%;
}
.box {
  width: 100%;
  height: calc(100vh - 90px);
  background-color: white;
  .serch {
    padding: 20px;
    .iptSerch {
      width: 600px;
      height: 40px;
      border-radius: 4px;
      .serch_text {
        line-height: 40px;
        padding-right: 15px;
        color: #ec7c00;
      }
    }
  }
  .sift_box {
    display: flex;
    align-items: center;
    padding: 0 20px;
    justify-content: space-between;
    .sift_box_left {
      display: flex;
      align-items: center;
      .head_date {
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 20px 10px;
        height: 40px;
        background-color: white;
        border-radius: 4px;
        font-size: 14px;
        border: 1px solid #dedede;
      }
      .trade_type {
        margin-left: 30px;
      }
      .ipt_date {
        width: 200px;
        text-align: center;
      }
      .btn_serch {
        margin-left: 40px;
        height: 40px;
        width: 100px;
        color: white;
        background-color: #ec7c00;
        border: none;
        border-radius: 4px;
        font-size: 14px;
      }
    }
    .edit_btn {
      cursor: pointer;
      width: 100px;
      height: 40px;
      font-size: 14px;
      color: #ec7c00;
      border: 1px solid #ec7c00;
      background-color: white;
      border-radius: 4px;
      margin-left: 40px;
    }
  }
  ::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;
  }
  ::v-deep .el-table__header {
  }
  .list {
    margin-top: 20px;
    .list_edit {
      color: #ec7c00;
      cursor: pointer;
    }
    .list_edit > span {
      margin-right: 15px;
    }
  }
  ::v-deep .el-checkbox__inner {
    border: 1px solid #333;
  }
  .pagination {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.ipt {
  width: 400px;
}
.show_footer {
  display: flex;
  justify-content: flex-end;
}
.show_btn {
  height: 40px;
  width: 100px;
  color: white;
  background-color: #ec7c00;
  border: 4px;
  cursor: pointer;
}
::v-deep .el-dialog {
  margin-top: 10vh !important;
}
.show_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 250px;
  margin-top: 30px;
  .show_list_left {
    font-weight: bold;
  }
}
.hide_input {
  position: relative !important;
}
//修改控件自带的css
.hide_input .el-date-editor {
  position: absolute; //绝对定位
  top: 0;
  left: 0;
  opacity: 0; //设置完全透明
}
</style>
