<template>
    <div class="container">

                <div class="w-left">
                    <div class="grid-content bg-purple el-row--flex">
                        <div class="el-row">
                            <div class="itemText">
                                <div class="border">{{$t("估值保证金")}}</div>
                                <div class="border textRight">{{myMargin}}</div>
                            </div>
                            <div class="itemText">
                                <div class="border">{{$t("总估值损益")}}</div>
                                <div class="border textRight">{{(realTimeProfit+realizedProfit).toFixed(2)}}</div>
                            </div>
<!--                            <div class="itemText">-->
<!--                                <div class="border">估值损益</div>-->
<!--                                <div class="border textRight">{{0}}</div>-->
<!--                            </div>-->
                            <div class="itemText">
                                <div class="border">{{$t("实时盈亏")}}</div>
                                <div class="border textRight">{{realTimeProfit}}</div>
                            </div>
                            <div class="itemText">
                                <div class="border">{{$t("已实现损益")}}</div>
                                <div class="border textRight">{{realizedProfit}}</div>
                            </div>
                            <div class="itemText">
                                <div class="border">{{$t("储备余额")}}</div>
                                <div class="border textRight">{{myMoney}}</div>
                            </div>

                        </div>
                        <div class="el-row">
<!--                            <div class="itemText">-->
<!--                                <div class="border">储备余额</div>-->
<!--                                <div class="border textRight">{{myMoney}}</div>-->
<!--                            </div>-->
<!--                            <div class="itemText">-->
<!--                                <div class="border">平均单价</div>-->
<!--                                <div class="border textRight">{{none}}</div>-->
<!--                            </div>-->
<!--                            <div class="itemText">-->
<!--                                <div class="border">洛切</div>-->
<!--                                <div class="border textRight">{{none}}</div>-->
<!--                            </div>-->
<!--                            <div class="itemText">-->
<!--                                <div class="border">总超额保证金</div>-->
<!--                                <div class="border textRight">{{none}}</div>-->
<!--                            </div>-->
<!--                            <div class="itemText">-->
<!--                                <div class="border">过夜</div>-->
<!--                                <div class="border textRight">{{none}}</div>-->
<!--                            </div>-->

                        </div>
                        <div class="el-column" style="padding-top: 5px">
                            <div class="rowpannel1">
                                <div class="rowpannel1"  >
                                    <el-checkbox v-model="preSellNumChecked">{{$t("止盈")}}</el-checkbox>
                                    <div class="rowpannel1">
                                        <el-input-number size="small" style="padding-left: 5px;width: 80px" v-model="preSellNum" controls-position="right" @change="handleChange" label="手" :min="1" :max="100"></el-input-number>{{$t("格")}}
                                    </div>
                                    <span style="padding-left: 25px">{{$t("持仓数量")}}</span>
                                </div>
                                <div style="display: flex">

                                    <div style="margin-left: 40px" class="textAndInput" >
                                        <span  class="textInputBlue">{{$t("卖出持仓")}}</span>
                                        <el-input
                                                style="width: 50px;"
                                                size = "small"
                                                :placeholder="$t('请输入内容')"
                                                v-model="totalSellNum"
                                                readOnly
                                                class="custom-input">
                                        </el-input>
                                    </div>
                                    <span   class="textInputRed">{{$t("买入持仓")}}</span>
                                    <div class="textAndInput" >

                                        <el-input
                                                style="width: 50px;"
                                                size = "small"

                                                :placeholder="$t('请输入内容')"
                                                v-model="totalBuyNum"
                                                readOnly
                                                class="custom-input">
                                        </el-input>
                                    </div>
                                </div>

                                <el-button style="margin-left: 40px; width: 100px;" size="small" type="info" plain @click="reset">{{$t("重置")}}</el-button>
                            </div>
                            <div class="rowpannel1" style="padding-top: 5px;">
                                <div class="rowpannel1"  >
                                    <el-checkbox v-model="preDownNumChecked">{{$t("止损")}}</el-checkbox>
                                    <div class="rowpannel1">
                                        <el-input-number size="small"  style="padding-left: 5px;;width: 80px " v-model="preDownNum" controls-position="right" @change="handleChange" label="手" :min="1" :max="100"></el-input-number>{{$t("格")}}
                                    </div>
                                    <span style="padding-left: 25px">{{$t("下单数量")}}</span>
                                </div>

                                <div style="display: flex;">

                                    <div style="display: flex;align-items: center">
                                        <el-input-number size="small" style="padding-left: 10px;;width: 80px" v-model="hands" controls-position="right" @change="handleChange" label="手" :min="1" ></el-input-number>{{$t("手")}}
                                    </div>

                                    <div style="display: flex;padding-left: 20px">
                                        <el-button size="small" type="info" plain @click="updateHands(1)">1</el-button>
                                        <el-button size="small" type="info" plain @click="updateHands(2)">2</el-button>
                                        <el-button size="small" type="info" plain @click="updateHands(3)">3</el-button>
                                        <el-button size="small" type="info" plain @click="updateHands(4)">4</el-button>
                                        <el-button size="small" type="info" plain @click="updateHands(5)">5</el-button>
                                        <el-button size="small" type="info" plain @click="updateHands(10)">10</el-button>
                                        <el-button size="small" type="info" plain @click="updateHands(20)">20</el-button>
                                        <el-button size="small" type="info" plain @click="updateHands(50)">50</el-button>
                                        <el-button size="small" type="info" plain @click="updateHands(100)">100</el-button>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="el-row rowpannel">
                        <el-button size="small" type="primary" @click="buyIndex(marketRows[selectedRowIndex].curValue,-1)">{{$t("市价出售")}}(F10)</el-button>
                        <el-button size="small" type="success" @click="sellAll()">{{$t("全品类平仓")}}</el-button>
                        <el-button size="small" type="success" @click="sellCur()">{{$t("现品类平仓")}}</el-button>
                        <el-button size="small" type="danger"  @click="buyIndex(marketRows[selectedRowIndex].curValue,1)">{{$t("市价买入")}}(F11)</el-button>

                    </div>
                    <div class="el-row table-container" ref="tableContainer" >
                        <table>
                            <thead class="fixed-header">
                            <tr>
                                <th style="color:cornflowerblue">MIT</th>
                                <th>{{$t("空持仓")}}</th>
                                <th>{{$t("未成交")}}</th>
                                <th>{{$t("卖出")}}</th>
                                <th>{{$t("价格")}}</th>
                                <th>{{$t("买入")}}</th>
                                <th>{{$t("未成交")}}</th>
                                <th>{{$t("多持仓")}}</th>
                                <th style="color: darkred">MIT</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(row, index) in rows" :key="index" :class="{ 'highlight-row': row.basePrice === currentIndex }">
                                <td style="background-color: #79b6f554">{{ row.mitSell?row.mitSell:''}}</td>
                                <td style="background-color: #79b6f5a6">{{ row.shortPos }}</td>

                                <td>{{ row.sellUnComp }}</td>
                                <td class="buy-row"
                                    @click="buyIndex(row.basePrice,-1)">{{ row.sellNum }}</td>
                                <td  style="background-color: #a1ccfa">{{ row.basePrice }}</td>

                                <td class="buy-row"
                                    @click="buyIndex(row.basePrice,1)">{{ row.buyNum }}</td>
                                <td>{{ row.bugUnComp }}</td>
                                <td style="background-color: #f56c6c9c">{{ row.longPos }}</td>
                                <td style="background-color: #f56c6c42">{{ row.mitBuy?row.mitBuy:''}}</td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>

                                <td>{{ totalsellMit }}</td>
                                <td>{{ totalsell }}</td>
                                <td colspan="1">{{ total_unsell }}</td>
                                <td> </td>
                                <td> </td>
                                <td> </td>
                                <td>{{ total_unbuy }}</td>
                                <td>{{ totalbuy }}</td>
                                <td>{{ totalbuyMit }}</td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                    <div class="rowpannel" style="display: flex; justify-content: space-between;">
                        <el-button size="small" style="flex-grow: 1;" type="info" plain>{{$t("取消")}}</el-button>
                        <el-button size="small" style="flex-grow: 1;" type="primary">{{$t("取消")}}</el-button>
                        <el-button size="small" style="flex-grow: 1;" type="warning" @click="cancelAll">{{$t("全品类取消")}}</el-button>
                        <el-button size="small" style="flex-grow: 1;" type="warning" @click="cancelCur">{{$t("现品类取消")}}</el-button>
                        <el-button size="small" style="flex-grow: 1;" type="primary">{{$t("取消")}}</el-button>
                        <el-button size="small" style="flex-grow: 1; margin-right: 20px;" type="info" plain>{{$t("取消")}}</el-button>
                    </div>

                    <div class="el-row bottom-table"  :style="adjustedHeight">
                        <table>
                            <thead>
                                <tr>
                                    <th>{{$t("方向")}}</th>
                                    <th>{{$t("合约")}}</th>
                                    <th>{{$t("止盈")}}</th>
                                    <th>{{$t("止损")}}</th>
                                    <th>{{$t("仓位")}}</th>
                                    <th>{{$t("价格")}}</th>
                                    <th>{{$t("盈亏")}}</th>
                                    <th>{{$t("操作")}}</th>
                                </tr>
                            </thead>
                            <tbody>

                            <tr v-for="(row, index) in myOrders" :key="index"  >
                                <td> <dict-tag :options="dict.type.trade_type" :value="row.buyType"/> </td>
                                <td>{{ row.name }}</td>
                                <td class="buy-row" @click="openDialog(row)">{{ row.stopSurplus }}<i v-if="row.stopSurplus" class="gray el-icon-error" @click="cancelSurplus(row)"></i></td>
                                <td class="buy-row">{{ row.stopLoss }}<i v-if="row.stopLoss" class="gray el-icon-error" @click="cancelLoss(row)"></i></td>
                                <td>{{ row.hands }}</td>
                                <td>{{ row.baseNum }}</td>
                                <td>{{ row.profit }}</td>
                                <td>
                                    <el-button v-if="row.status === 0" size="mini" type="info" plain @click="cancelOrder(row)">{{$t("取消")}}</el-button>
                                    <el-button v-else size="mini" type="warning" plain @click="sellOrder(row)">{{$t("平仓")}}</el-button>
                                </td>
                            </tr>
                            </tbody>

                        </table>
                    </div>
                </div>
                <div  class="w-right">
                    <div class="" style="border: 1px solid gray">

                        <el-checkbox class="checkbox" v-model="skipChecked" @change="saveToLocalStorage('skipChecked',skipChecked)">{{$t("跳过确认")}}</el-checkbox>
                        <el-checkbox class="checkbox" v-model="oneButtonchecked" @change="saveToLocalStorage('oneButtonchecked',oneButtonchecked)">{{$t("一键下单")}}</el-checkbox>
                        <el-checkbox class="checkbox" v-model="fixCurChecked" @change="saveToLocalStorage('fixCurChecked',fixCurChecked)">{{$t("时价居中")}}</el-checkbox>
                        <el-checkbox class="checkbox" v-model="voiceChecked" @change="saveToLocalStorage('voiceChecked',voiceChecked)">{{$t("语音播报")}}</el-checkbox>

                    </div>
                    <div class="curinfo" v-if="marketRows[selectedRowIndex]">
                        <div class="w50">
                            <div class="vinfo">
                                <span class="vinfokey">{{$t("最新")}}</span>
                                <span class="whitebg">{{marketRows[selectedRowIndex].price}}</span>
                            </div>
                            <div class="vinfo">
                                <span class="vinfokey">{{$t("开盘")}}</span>
                                <span class="whitebg">{{marketRows[selectedRowIndex].Open}}</span>
                            </div>
                            <div class="vinfo">
                                <span class="vinfokey">{{$t("高价")}}</span>
                                <span class="whitebg">{{marketRows[selectedRowIndex].High}}</span>
                            </div>
                            <div class="vinfo">
                                <span class="vinfokey">{{$t("低价")}}</span>
                                <span class="whitebg">{{marketRows[selectedRowIndex].Low}}</span>
                            </div>
                            <div class="vinfo">
                                <span class="vinfokey">{{$t("截止日")}}</span>
                                <span class="whitebg">{{marketRows[selectedRowIndex].Time}}</span>
                            </div>
                        </div>
                        <div class="w50">
                            <div class="vinfo">
                                <span class="vinfokey">{{$t("昨收")}}</span>
                                <span class="whitebg">{{marketRows[selectedRowIndex].LastClose}}</span>
                            </div>
                            <div class="vinfo">
                                <span class="vinfokey">{{$t("幅度")}}</span>
                                <span class="whitebg">{{marketRows[selectedRowIndex].DiffRate}}</span>
                            </div>
                            <div class="vinfo">
                                <span class="vinfokey">{{$t("成交量")}}</span>
                                <span class="whitebg">{{marketRows[selectedRowIndex].TotalVol}}</span>
                            </div>
                            <div class="vinfo">
                                <span class="vinfokey">{{$t("买量")}}</span>
                                <span class="whitebg">{{marketRows[selectedRowIndex].BV1}}</span>
                            </div>
                            <div class="vinfo">
                                <span class="vinfokey">{{$t("卖量")}}</span>
                                <span class="whitebg">{{marketRows[selectedRowIndex].SV1}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="subject-container" style="padding-top: 5px;font-size: 13px">
                        <table>
                            <thead>
                            <tr>
                                <th>{{$t("名称")}}</th>
                                <th>{{$t("代码")}}</th>
                                <th>{{$t("月份")}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(row, index) in marketRows" :key="index" :class="{ 'selected-row': selectedRowIndex === index }" @click="selectRow(index)">
                                <td>{{ row.name }}</td>
                                <td>{{ row.code }}</td>
                                <td>{{ row.contract }}</td>

                            </tr>
                            </tbody>

                        </table>
                    </div>
                    <div class="userbuy-container" :style="adjustedHeightRight">
                        <table style="padding-top: 5px">
                            <thead>
                            <tr>
                                <th style="text-align: center">{{$t("时间")}}</th>
                                <th style="text-align: center">{{$t("价格")}}</th>
                                <th style="text-align: center">{{$t("数量")}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(row, index) in marketTrade" :key="index">
                                <td class="smalltd" style="text-align: center">{{ row.time }}</td>
                                <td class="smalltd" style="text-align: center;color: red">{{ row.price }}</td>
                                <td class="smalltd"  :class="{ 'blue-text': row.amount < 0 }" style="text-align: center">{{ row.amount }}</td>

                            </tr>
                            </tbody>

                        </table>
                    </div>
                </div>
        <audio ref="audioCancel" src="../assets/cancel.mp3"></audio>
        <audio ref="audioSell" src="../assets/sell.mp3"></audio>
        <audio ref="audioOrder" src="../assets/order.mp3"></audio>
        <audio ref="audioBuild" src="../assets/build.mp3"></audio>
        <audio ref="audioStopSurplus" src="../assets/stopSurplus.mp3"></audio>
        <audio ref="audioStopLoss" src="../assets/stopLoss.mp3"></audio>
        <audio ref="audioPrepare" src="../assets/prepare.mp3"></audio>


    </div>
</template>

<script>
    import { getUserProfile,getMyMoney } from "@/api/system/user";
    import {getMarketList,addTrade,cancelOrder,closePositon,myUnfinishOrders,
        getMyMargin,getMyRealTimeProfit,getRealizedProfit ,marketDate,getMyPosition,cancelStrategy,
        sellAll,cancelAll,getLatestOrders
    } from "@/api/market"
    export default {
        name: "order",
        dicts: ['trade_type'],
        props: {
            title: {
                required: false,
                type: String,
                default: ''
            },

        },
        data () {
            return {
                visible:false,
                num: 1,
                none:'',
                socket:null,
                checkList: [],
                input:0,
                myMargin:0,
                realTimeProfit:0,
                realizedProfit:0,
                curValue:{

                },
                rows: [  ],
                myOrders:[
                    {}
                ],
                selectedRowIndex: 0, // 初始化选中的行索引为-1
                marketRows:[],
                marketTrade:[],//市场交易数据 买卖
                checked:false,

                currentIndex: 0, // 当前指数
                hands:1,
                preDownNum:5,//止损
                preSellNum:5,//止赢
                preDownNumChecked:false,
                preSellNumChecked:false,
                voiceChecked:false,
                fixCurChecked:false,
                oneButtonchecked:false,
                skipChecked:false,
                windowHeight: 0,
                mydata:[],
                totalbuy:0,
                total_unbuy:0,
                total_unsell:0,
                totalsell:0,
                totalSellNum:0,
                totalBuyNum:0,
                totalsellMit:0,
                totalbuyMit:0,
                myMoney:0,
                showPointer: false

            };
        },
        computed: {
            adjustedHeightRight() {
                return `height: ${this.windowHeight - 780}px;`;
            },
            adjustedHeight() {
                return `height: ${this.windowHeight - 800}px;`;
            }
        },
        beforeDestroy() {
            // 在组件销毁前移除键盘事件监听器
            document.removeEventListener("keydown", this.handleKeyDown);
        },
        mounted() {

            this.getWindowHeight();
            window.addEventListener('resize', this.getWindowHeight); // 监听窗口大小变化
            // 在组件挂载后，将键盘事件监听器绑定到文档上
            document.addEventListener("keydown", this.handleKeyDown);
            // 计算合计值


            this.skipChecked = JSON.parse(localStorage.getItem("skipChecked"))
            this.oneButtonchecked = JSON.parse(localStorage.getItem("oneButtonchecked"))
            this.fixCurChecked = JSON.parse(localStorage.getItem("fixCurChecked"))
            this.voiceChecked = JSON.parse(localStorage.getItem("voiceChecked"))

            console.log(typeof (this.skipChecked),this.oneButtonchecked,this.fixCurChecked,this.voiceChecked)

            let params={
                pageNum:1,
                pageSize:20,
                orderByColumn:'sort',
                isAsc:'asc'
            }
            getMarketList(params).then(res=>{
                this.marketRows =res.rows
                if (this.marketRows.length > 0) {

                    this.selectRow(0);
                    this.getMarketPre()
                }

            })
            getUserProfile().then(res=>{
                console.log(res)
            })

            this.getMyMargin()
            this.getRealizedProfit()
            this.getMyRealTimeProfit()
            this.getMyOrderList()
            this.getMyPos(1)
            this.getMyPos(-1)
            this.getMyMoney()

        },
        beforeDestroy() {
            window.removeEventListener('resize', this.getWindowHeight); // 移除窗口大小变化监听
        },
        methods:{

            // showPointer() {
            //     this.showPointer = true;
            // },
            // hidePointer() {
            //     this.showPointer = false;
            // },
            openDialog(row) {
                this.userInfoVisible = true
                // 在这里打开对话框，你可以使用你喜欢的对话框库或自定义对话框组件

            },
            cancelSurplus(row) {
                // 取消操作的逻辑

            },
            getMarketPre()
            {
                let query = {
                    targetNo:this.marketRows[this.selectedRowIndex].id,
                    pageNum: 1,
                    pageSize: 10,
                    orderByColumn: "create_time",
                    isAsc: "desc",
                }
                getLatestOrders(query).then(res=>{
                    this.marketTrade = res.data
                })
            },
            setMarketTrade(data)
            {
                console.log('data','************',data);
                if(this.marketRows[this.selectedRowIndex].id == data.contract)
                {
                    this.marketTrade.unshift(data)
                }

            },
            cancelSurplus(row){
                console.log("cancelSurplus")
                this.$confirm(this.$t('确认取消止盈方案吗？'), this.$t('提示'), {
                    confirmButtonText: 'YES',
                    cancelButtonText: 'NO',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        id:row.id,
                        stopSurplus:0
                    }
                    cancelStrategy(params).then(res=>{
                        this.$message.success(this.$t("取消成功"))
                        this.getMyOrderList()
                        this.getMarketDate(this.marketRows[this.selectedRowIndex])

                    })

                }).catch(() => {

                });
            },
            cancelLoss(row){
                console.log("cancelLoss")

                this.$confirm(this.$t('确认取消止损方案吗？'), this.$t('提示'), {
                    confirmButtonText: this.$t('确定'),
                    cancelButtonText: this.$t('取消'),
                    type: 'warning'
                }).then(() => {
                    let params = {
                        id:row.id,
                        stopLoss:0
                    }
                    cancelStrategy(params).then(res=>{
                        this.$message.success(this.$t("取消成功"))
                        this.getMyOrderList()
                        this.getMarketDate(this.marketRows[this.selectedRowIndex])
                    })
                }).catch(() => {

                });
            },
            getMyMoney()
            {
                getMyMoney().then(res=>{
                    console.log(res)
                    this.myMoney = res.data.memberBalance
                })
            },
            getMyPos(direction)
            {
                let params={
                    buyType:direction
                }
                getMyPosition(params).then(res=>{
                    console.log(res)
                    let totalHands = res.data.reduce((total, row) => {
                        return total + row.hands;
                    }, 0);
                    if(direction==1)
                    {
                        this.totalBuyNum = totalHands
                    }
                    else
                    {
                        this.totalSellNum = totalHands
                    }
                })
            },
            setMarketData(row)
            {

                // let foundItem = rows.find(item => item.id ===  this.marketRows[this.selectedRowIndex].id);
                let foundItem = this.marketRows.find(item => item.id ===  row.id);
                if(foundItem)
                {

                    //有仓位才刷新

                    let foundORder = this.myOrders.find(item => item.targetNo ===  row.id);
                    if(foundORder){
                        this.getMyOrderList()
                        this.getMyRealTimeProfit()
                    }


                    console.log(foundItem)
                    foundItem.price = row.Price
                    foundItem.Open = row.Open
                    foundItem.LastClose = row.LastClose
                    foundItem.High = row.High
                    foundItem.Low = row.Low
                    foundItem.Time = row.Time
                    foundItem.LastTime = row.LastTime
                    foundItem.BP1 = row.BP1
                    foundItem.BV1 = row.BV1
                    foundItem.SP1 = row.SP1
                    foundItem.SV1 = row.SV1
                    foundItem.DiffRate= row.DiffRate
                    foundItem.TotalVol= row.TotalVol

                    if(this.marketRows[this.selectedRowIndex].id == row.id)
                    {
                        this.currentIndex = foundItem.price
                        if(this.fixCurChecked)
                        {
                            this.scrollToRow()
                        }
                        console.log('cur value',foundItem.name,this.currentIndex)
                    }

                }
            },
            reset(){
                this.hands=1;
                this.preDownNum = 5;//止损
                this.preSellNum = 5;//止赢
                this.preDownNumChecked=false;
                this.preSellNumChecked=false;
            },
            getWindowHeight() {
                this.windowHeight = window.innerHeight;
            },
            saveToLocalStorage(key,value) {
                // Save the state of the checkbox to local storage
                console.log(key,value)
                localStorage.setItem(key,value)
            },
            handleChange(){

            },
            getMyRealTimeProfit()
            {
                getMyRealTimeProfit().then(res=>{
                    this.realTimeProfit = res.data
                })

            },
            getRealizedProfit()
            {
                getRealizedProfit().then(res=>{
                    this.realizedProfit = res.data
                })

            },
            getMyMargin()
            {
                getMyMargin().then(res=>{
                    this.myMargin = res.data
                })

            },
            getMyOrderList()
            {
               let queryParams = {
                        pageNum: 1,
                        pageSize: 100,
                        orderByColumn: "create_time",
                        isAsc: "desc",
                }
                myUnfinishOrders(queryParams).then(res=>{
                    this.myOrders = res.rows
                })
            },
            sellOrder(row)
            {
                closePositon(row).then(res=>{
                    if(this.voiceChecked)
                    {
                        this.handleClickSound(this.$refs.audioSell)

                        this.refreshData()

                    }
                })

            },
            buildSuccess()
            {
                if(this.voiceChecked)
                {
                    this.handleClickSound(this.$refs.audioBuild)

                    this.getMyOrderList()
                }
            },
            cancelOrder(row)
            {
                cancelOrder(row).then(res=>{
                    this.$message.success(this.$t("取消成功"))
                    if(this.voiceChecked)
                    {
                        this.handleClickSound(this.$refs.audioCancel)

                       this.refreshData();

                    }
                })
            },
            refreshData()
            {
                this.getMyOrderList()
                this.getMarketDate(this.marketRows[this.selectedRowIndex])

                this.getMyMargin()
                this.getRealizedProfit()
                this.getMyRealTimeProfit()
                this.getMyPos(1)
                this.getMyPos(-1)
                this.getMyMoney()
            },
            updateHands(value) {
                this.hands = value;
            },
            sellAll()
            {
                this.$confirm(this.$t('确认要全部平仓吗？！！！'), this.$t('提示'), {
                    confirmButtonText: this.$t('确定'),
                    cancelButtonText: this.$t('取消'),
                    type: 'warning'
                }).then(() => {

                    sellAll().then(res=>{
                        console.log(res)
                        this.handleClickSound(this.$refs.audioSell)
                        this.refreshData()
                    })

                }).catch(() => {

                });

            },
            sellCur()
            {
                if(this.skipChecked)
                {
                    sellAll(this.marketRows[this.selectedRowIndex].id).then(res=>{
                        console.log(res)
                        this.handleClickSound(this.$refs.audioSell)
                        this.refreshData()
                    })
                }
                else
                {
                    this.$confirm(this.$t('确认要当前平仓吗？！！！'), this.$t('提示'), {
                        confirmButtonText: this.$t('确定'),
                        cancelButtonText: this.$t('取消'),
                        type: 'warning'
                    }).then(() => {

                        sellAll(this.marketRows[this.selectedRowIndex].id).then(res=>{
                            console.log(res)
                            this.handleClickSound(this.$refs.audioSell)
                            this.refreshData()
                        })

                    }).catch(() => {

                    });
                }



            },
            cancelAll()
            {
                this.$confirm(this.$t('确认要全部取消吗？'), this.$t('提示'), {
                    confirmButtonText: this.$t('确定'),
                    cancelButtonText: this.$t('取消'),
                    type: 'warning'
                }).then(() => {

                    cancelAll().then(res=>{
                        console.log(res)
                        this.handleClickSound(this.$refs.audioCancel)
                        this.refreshData()
                    })

                }).catch(() => {

                });

            },
            cancelCur()
            {
                if(this.skipChecked)
                {
                    cancelAll(this.marketRows[this.selectedRowIndex].id).then(res=>{
                        console.log(res)
                        this.handleClickSound(this.$refs.audioCancel)
                        this.refreshData()
                    })
                }
                else {
                    this.$confirm(this.$t('确认要全部取消吗？'), this.$t('提示'), {
                        confirmButtonText: this.$t('确定'),
                        cancelButtonText: this.$t('取消'),
                        type: 'warning'
                    }).then(() => {

                        cancelAll(this.marketRows[this.selectedRowIndex].id).then(res=>{
                            console.log(res)
                            this.handleClickSound(this.$refs.audioCancel)
                            this.refreshData()
                        })

                    }).catch(() => {

                    });
                }


            },
            handleKeyDown(event) {
                // 获取按下的键值
                const key = event.key;
                // 在这里根据按下的键执行相应的操作
                console.log("按下了键：" + key);
                if(key === 'F11')
                {
                    this.buyIndex(this.marketRows[this.selectedRowIndex].curValue,1)
                }
                else if(key === 'F10')
                {
                    this.buyIndex(this.marketRows[this.selectedRowIndex].curValue,-1)
                }

            },
            makeDeal(data)
            {
                if(data.msg=="deal")
                {
                    console.log("******订单成功*********")
                }
                else if(data.msg=="stopLoss")
                {
                    console.log("止损单成交")
                }
                else if(data.msg=="stopSurplus")
                {
                    console.log("止赢单成交")
                }
                this.handleSound(data.msg)
                this.getMyMoney()
                this.getMyMargin()
                this.getMarketDate(this.marketRows[this.selectedRowIndex])
            },
            buyIndex(index,type) {
                if(this.skipChecked)
                {
                    this.toBuy(index,type)
                }
                else {
                    this.$confirm(this.$t('确认要买入 ')+this.marketRows[this.selectedRowIndex].name+' '+this.hands+this.$t('手吗?'), this.$t('提示'), {
                        confirmButtonText: this.$t('确定'),
                        cancelButtonText: this.$t('取消'),
                        type: 'warning'
                    }).then(() => {
                        this.toBuy(index,type)
                    }).catch(() => {

                    });
                }

            },
            toBuy(index,type)
            {
                let preDownNum = null
                if(this.preDownNumChecked)
                {
                    preDownNum = this.preDownNum
                }
                let preSellNum = null
                if(this.preSellNumChecked)
                {
                    preSellNum = this.preSellNum
                }
                let data={
                    buyType:type,
                    targetNo:this.marketRows[this.selectedRowIndex].id,
                    baseNum:index,
                    hands:this.hands,
                    status:0,
                    stopSurplus:preSellNum,
                    stopLoss:preDownNum,
                }
                addTrade(data).then(res=>{
                    if(this.voiceChecked)
                    {
                        this.handleClickSound(this.$refs.audioOrder)

                    }

                    // this.$message.success("买入成功")

                    this.refreshData();


                })
            },
            // 在你的方法中添加点击事件处理函数
            handleClickSound(obj) {
                // 获取 audio 元素的引用
                if(this.voiceChecked)
                {
                    const audioSell = obj;

                    // 如果音频正在播放，则先暂停
                    if (!audioSell.paused) {
                        audioSell.pause();
                        audioSell.currentTime = 0; // 重新设置播放位置到开始
                    }

                    // 开始播放音频
                    audioSell.play();
                }

            },
            handleSound(msg) {
                // 获取 audio 元素的引用
                let audioSell = null;
                if(msg==='deal')
                {
                    audioSell = this.$refs.audioPrepare
                }
                else if(msg==='stopLoss')
                {
                    audioSell = this.$refs.audioStopLoss
                }
                else if(msg==='stopSurplus')
                {
                    audioSell =this.$refs.audioStopSurplus
                }

                // 开始播放音频
                if(this.voiceChecked&&audioSell)
                {
                    audioSell.play();
                }

            },
            resetRow(index) {
                // 重置特效：恢复背景色
                this.rows[index].highlight = false;
            },
            scrollToRow() {
                // 获取高亮行的索引
                const highlightedRowIndex = this.rows.findIndex(row => row.basePrice === this.currentIndex);
                if (highlightedRowIndex !== -1) {
                    // 计算需要滚动的距离
                    const tableContainer = document.querySelector('.table-container');
                    const rowHeight = tableContainer.querySelector('tbody tr').offsetHeight;
                    const scrollTop = ( highlightedRowIndex -5) * rowHeight;
                    console.log(highlightedRowIndex,scrollTop,rowHeight)
                    // 使用动画滚动到正确位置
                    tableContainer.scrollTo({
                        top: scrollTop,
                        behavior: 'smooth'
                    });
                }
            },


            selectRow(index) {
                this.selectedRowIndex = index; // 设置选中的行索引


                this.getMarketDate(this.marketRows[this.selectedRowIndex])
                this.getMarketPre();

            },
            getMarketDate(data){
                marketDate(data).then(res=>{
                    this.rows = res.data.data

                    this.totalsell = this.rows.reduce((total, row) => total + row.shortPos, 0);
                    this.total_unsell = this.rows.reduce((total, row) => total + row.sellUnComp, 0);
                    this.total_unbuy = this.rows.reduce((total, row) => total + row.bugUnComp, 0);
                    this.totalbuy = this.rows.reduce((total, row) => total + row.longPos, 0);
                    this.totalbuyMit = this.rows.reduce((total, row) => total + row.mitBuy, 0);

                    this.totalsellMit = this.rows.reduce((total, row) => total + row.mitSell, 0);
                    if(data.price)
                    {
                        this.currentIndex = data.price
                    }
                    else
                    {
                        this.currentIndex = res.data.curV
                    }
                    this.$nextTick(() => {
                        this.scrollToRow();
                    });


                })
            }


        }
    }


</script>帮我转成uniapp 移动端