<template>
    <div class="simulateContainer" ref='simulateContainer' style='height: 215px;'>
        <div class="collapseWrap" ref='collapseWrap'>
            <p class="block" :class='{"hide":IsCollapse}' @click='collapseContainer'></p>
        </div>
        <div class="topAccountInfo" ref='topAccountInfo'>
            <!-- 底部数据 -->
            <p><span>{{TopAccountData.Account.Value}}</span></p>
            <p><span>{{TopAccountData.TotalMoney.Text}}</span><span>{{TopAccountData.TotalMoney.Value}}</span></p>
            <p><span>{{TopAccountData.Available.Text}}</span><span>{{TopAccountData.Available.Value}}</span></p>
            <p><span>{{TopAccountData.TotalMarketValue.Text}}</span><span>{{TopAccountData.TotalMarketValue.Value}}</span>
            </p>
            <p><span>{{TopAccountData.TotalProfitRate.Text}}</span><span>{{TopAccountData.TotalProfitRate.Value}}</span>
            </p>
        </div>
        <div class="oprContainer" :style="{height:OprContainerH+'px'}">
            <div class="oprType" ref='oprType'>
                <div class="" v-for='(item,index) in DefaultOprType' :key='index'
                    :class='{active:OprTypeIndex == index}' @click='ChangeOprType(item,index)'>
                    <span>{{item.Text}} <i :class="OprTypeIndex == index ? 'el-icon-arrow-up colorWhite' : 'el-icon-arrow-down'" v-show='item.Children.length > 0'></i></span>
                    <div class="menuTwo" v-show='OprTypeIndex == index'>
                        <p v-for='(child,ind) in item.Children' :key='ind' :class='{active:ind == OprMenuTwoIndex}'
                            @click.stop='CheckTrade(item,child,ind)'>{{child}}</p>
                    </div>
                </div>
            </div>
            <div class="oprInfo" v-show='IsShow.Buy' ref='oprInfoBuy'>
                <!-- 买入 -->
                <div class="symbolWrap"><span class="title">证券代码</span>
                    <div class="inputBox"><input type="text" maxlength="9" v-model='Symbol' @keyup='SpellSock()'>
                        <div class="stockList" v-show='IsShow.SpellListEle'>
                            <p class="item" v-for='(item,index) in SpellStockData' @click='hideSpellList(item.Symbol)'
                                :key='index'><span class="symbol">{{item.Symbol}}</span><span>{{item.Name}}</span></p>
                        </div>
                    </div>
                </div>
                <div class="aa"><span class="title">买入价格</span>
                    <div class="inputCalu"><span class="min" @click='MinPriceValue'>-</span><input type="text"
                            v-model='BuyInputData.Price'><span class="add" @click='AddPriceValue'>+</span></div>
                    <div></div>
                </div>
                <div class="volWrap"><span class="title">可买数量</span>
                    <div class="inputBox"><input type="text" v-model='BuyInputData.Amount'><span>股</span></div>
                </div>
                <div class="aa"><span class="title">买入数量</span>
                    <div class="inputCalu"><span class="min" @click='MinVolValue'>-</span><input type="text"
                            v-model='BuyInputData.Vol'><span class="add" @click='AddVolValue'>+</span></div>
                    <span>股</span>
                </div>
                <div class="rates"><span v-for='(item,index) in RateList' :key='index'
                        @click='CalVolByRate(item.Value)'>{{item.Text}}</span></div>
                <div class="oprBtn"><span class="buyBtn" @click='QueryApi'>买入</span></div>
            </div>
            <div class="oprInfo" v-show='IsShow.Sell' ref='oprInfoSell'>
                <!-- 卖出 -->
                <div class="symbolWrap"><span class="title">证券代码</span>
                    <div class="inputBox"><input type="text" maxlength="9" v-model='Symbol' @keyup='SpellSock()'>
                        <div class="stockList" v-show='IsShow.SpellListEle'>
                            <p class="item" v-for='(item,index) in SpellStockData' @click='hideSpellList(item.Symbol)'
                                :key='index'><span class="symbol">{{item.Symbol}}</span><span>{{item.Name}}</span></p>
                        </div>
                    </div>
                </div>
                <div class="aa"><span class="title">卖出价格</span>
                    <div class="inputCalu"><span class="min" @click='MinPriceValue'>-</span><input type="text"
                            v-model='SellInputData.Price'><span class="add" @click='AddPriceValue'>+</span></div>
                    <div></div>
                </div>
                <div class="volWrap"><span class="title">可卖数量</span>
                    <div class="inputBox"><input type="text" v-model='SellInputData.Amount'><span>股</span></div>
                </div>
                <div class="aa"><span class="title">卖出数量</span>
                    <div class="inputCalu"><span class="min" @click='MinVolValue'>-</span><input type="text"
                            v-model='SellInputData.Vol'><span class="add" @click='AddVolValue'>+</span></div>
                    <span>股</span>
                </div>
                <div class="rates"><span v-for='(item,index) in RateList' :key='index'
                        @click='CalVolByRate(item.Value)'>{{item.Text}}</span></div>
                <div class="oprBtn"><span class="sellBtn" @click='QueryApi'>卖出</span></div>
            </div>
            <div class="tradeInfo" v-show='IsShow.TradeInfo' :style="{width:TradeInfoWidth+'px'}">
                <el-table :max-height='TableMaxheight' :data="CapitalTableData"
                    style="width: 100%" :row-class-name="ClassNameByRate" highlight-current-row @current-change="selectCurrentRow">
                    <el-table-column v-for='(item,index) in CapitalTHeader' :key='index' :prop='item.Prop' :label='item.Label' :align="index>1 ? 'right':'left'"></el-table-column>
                </el-table>
            </div>
            <div class="CancelContainer" v-show='IsShow.Cancel' :style="{width:CheckWidth+'px'}">
                <!-- 撤单 -->
                <div class="tableTopSelct" ref='tableTopSelct'><span class="countText">共{{CancelTableData.length}}条</span>
                    <p><span class="borderBtn" @click='QueryCancelApi'>撤单</span><span class="borderBtn" @click='QueryEntrustApi'>刷新</span></p>
                </div>
                <el-table ref='tabelForCancel' :max-height="CancelTableMaxheight" :data="CancelTableData" style="width: 100%" highlight-current-row @current-change="selectCurrentRow"
                    :row-class-name="ClassNameByBuySell">
                    <el-table-column v-for='(item,index) in EntrustTHeader' :key='index' :prop='item.Prop' :align="index > 1 ? 'right' : 'left'"
                        :label='item.Label'></el-table-column>
                </el-table>
            </div>
            <div class="checkTableContainer" v-show='IsShow.Check' :style="{width:CheckWidth+'px'}">
                <!-- 右侧查询部分 -->
                <div class="dateSelect" ref='dateSelect' v-show='IsShow.DateRange'>
                    查询日期
                    <el-date-picker v-model="dateValue1" type="date" placeholder="选择日期" @change='GetStartDate'></el-date-picker>
                    <span class='spaceText'>至</span>
                    <el-date-picker v-model="dateValue2" type="date" placeholder="选择日期" @change='GetEndDate'></el-date-picker>
                    <span class='borderBtn' @click='QueryHistory'>查询</span>
                </div>

                <el-table v-show='IsShow.CheckTable.Capital' :max-height="TableMaxheight" @current-change="selectCurrentRow" :data="CapitalTableData"
                    style="width: 100%" :row-class-name="ClassNameByRate">
                    <el-table-column v-for='(item,index) in CapitalTHeader' :key='index' :prop='item.Prop' :align="index>1 ? 'right':'left'"
                        :label='item.Label'></el-table-column>
                </el-table>

                <el-table v-show='IsShow.CheckTable.Entrust' :max-height="TableMaxheight" :data="EntrustTableData" @current-change="selectCurrentRow"
                    style="width: 100%" :row-class-name="ClassNameByBuySell">
                    <el-table-column v-for='(item,index) in EntrustTHeader' :key='index' :prop='item.Prop' :align="index > 3 ? 'right' : 'left'"
                        :label='item.Label'></el-table-column>
                </el-table>

                <el-table v-show='IsShow.CheckTable.Deal' :max-height="TableMaxheight" :data="DealTableData" style="width: 100%" @current-change="selectCurrentRow"
                    :row-class-name="ClassNameByBuySell">
                    <el-table-column v-for='(item,index) in DealTHeader' :key='index' :prop='item.Prop' :align="index > 2 ? 'right' : 'left'"
                        :label='item.Label'></el-table-column>
                </el-table>

                <el-table v-show='IsShow.CheckTable.HistoryEntrust' :max-height="HistoryTableMaxheight" :data="HistoryEntrustTableData" @current-change="selectCurrentRow"
                    style="width: 100%" :row-class-name="ClassNameByBuySell">
                    <el-table-column v-for='(item,index) in HistoryEntrustTHeader' :key='index' :prop='item.Prop' :align="index > 3 ? 'right' : 'left'"
                        :label='item.Label'></el-table-column>
                </el-table>

                <el-table v-show='IsShow.CheckTable.HistoryDeal' :max-height="HistoryTableMaxheight" :data="HistoryDealTableData" @current-change="selectCurrentRow"
                    style="width: 100%" :row-class-name="ClassNameByBuySell">
                    <el-table-column v-for='(item,index) in HistoryDealTHeader' :key='index' :prop='item.Prop' :align="index > 3 ? 'right' : 'left'"
                        :label='item.Label'></el-table-column>
                </el-table>
            </div>
            
        </div>
    </div>
</template>

<script>

    import JSCommonStock from '../umychart.vue/umychart.stock.vue.js'
    import JSCommon from '../umychart.vue/umychart.vue.js'

    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import '../../../node_modules/element-ui/lib/theme-default/index.css';
    import locale from '../../../node_modules/element-ui/lib/locale/lang/en'

    Vue.use(ElementUI,{ locale })

    function DefaultData(){}

    DefaultData.SetBuyInput = function(){
        return { Symbol: '', Name: '', Price: 0, Amount: 0, Vol: 0 };  /* Amount 可买数量 */
    }

    DefaultData.SetSellInput = function(){
        return { Symbol: '', Price: 0, Amount: 0, Vol: 0 };  /* Amount 可卖数量 */
    }

    export default
        {
            name: 'SimulateTrade',
            data() {
                return {
                    BuyInputData: DefaultData.SetBuyInput(),
                    SellInputData: DefaultData.SetSellInput(),
                    CancelData: {},
                    Symbol: '',
                    SearchStock: null,
                    SpellStockData: [],
                    IsSpell: true, //是否要联想
                    DefaultOprType: [
                        {
                            Text: '买入',
                            ActiveIndex: -1,
                            Children: [],
                        },
                        {
                            Text: '卖出',
                            ActiveIndex: -1,
                            Children: [],
                        },
                        {
                            Text: '撤单',
                            ActiveIndex: -1,
                            Children: [],
                        },
                        {
                            Text: '查询',
                            ActiveIndex: 0,
                            Children: ['资金股份', '当日委托', '当日成交', '历史委托', '历史成交'],
                        },
                    ],
                    IsCollapse:false, //收起容器
                    dateValue1:'', //日期选择
                    dateValue2:'',
                    DatePicker:{
                        Start:0,
                        End:0
                    },
                    OprType: '买入',
                    IsShow: {
                        SpellListEle: false,
                        // MenuTwo:false,
                        Buy: true,
                        TradeInfo: true,
                        Sell: false,
                        Cancel: false,
                        DateRange: false,
                        CheckTable: {
                            Capital: true,
                            Entrust: false,
                            Deal: false,
                            HistoryEntrust: false,
                            HistoryDeal: false
                        }
                    },
                    RateList: [
                        { Text: '1/4', Value: 1 / 4 },
                        { Text: '1/3', Value: 1 / 3 },
                        { Text: '1/2', Value: 1 / 2 },
                        { Text: '全部', Value: 1 }
                    ],
                    Domain: 'https://opensource.zealink.com/API/',

                    tableData: [],
                    currentRow: {},
                    BuySellRow:{},
                    EntrustTHeader: [
                        { Prop: 'time', Label: '委托时间', Width: '180' },
                        { Prop: 'oprid', Label: '操作标志', Width: '180' },
                        { Prop: 'symbol', Label: '证券代码', Width: '180' },
                        { Prop: 'name', Label: '证券名称', Width: '180' },
                        { Prop: 'status', Label: '状态说明', Width: '180' },
                        { Prop: 'price', Label: '委托价格', Width: '180' },
                        { Prop: 'vol', Label: '委托数量', Width: '180' },
                        { Prop: 'tradeVol', Label: '成交数量', Width: '180' },
                        { Prop: 'bookid', Label: '申报编号', Width: '180' }
                    ],
                    DealTHeader: [
                        { Prop: 'time', Label: '成交时间', Width: '180' },
                        { Prop: 'symbol', Label: '证券代码', Width: '180' },
                        { Prop: 'name', Label: '证券名称', Width: '180' },
                        { Prop: 'oprid', Label: '操作标志', Width: '180' },
                        { Prop: 'vol', Label: '成交数量', Width: '180' },
                        { Prop: 'price', Label: '成交价格', Width: '180' },
                        { Prop: 'amount', Label: '成交金额', Width: '180' },
                        { Prop: 'bookid', Label: '申报编号', Width: '180' }
                    ],
                    HistoryEntrustTHeader: [
                        { Prop: 'date', Label: '委托日期', Width: '180' },
                        { Prop: 'oprid', Label: '操作标志', Width: '180' },
                        { Prop: 'symbol', Label: '证券代码', Width: '180' },
                        { Prop: 'name', Label: '证券名称', Width: '180' },
                        { Prop: 'status', Label: '状态说明', Width: '180' },
                        { Prop: 'price', Label: '委托价格', Width: '180' },
                        { Prop: 'vol', Label: '委托数量', Width: '180' },
                        { Prop: 'tradeVol', Label: '成交数量', Width: '180' },
                        { Prop: 'bookid', Label: '委托编号', Width: '180' }
                    ],
                    HistoryDealTHeader: [
                        { Prop: 'date', Label: '成交日期', Width: '180' },
                        { Prop: 'time', Label: '成交时间', Width: '180' },
                        { Prop: 'symbol', Label: '证券代码', Width: '180' },
                        { Prop: 'name', Label: '证券名称', Width: '180' },
                        { Prop: 'oprid', Label: '操作标志', Width: '180' },
                        { Prop: 'vol', Label: '成交数量', Width: '180' },
                        { Prop: 'price', Label: '成交价格', Width: '180' },
                        { Prop: 'amount', Label: '成交金额', Width: '180' },
                        { Prop: 'bookid', Label: '委托编号', Width: '180' }
                    ],
                    CapitalTHeader: [
                        { Prop: 'symbol', Label: '证券代码', Width: '' },
                        { Prop: 'Name', Label: '证券名称', Width: '100' },
                        { Prop: 'Vol', Label: '证券数量', Width: '100' },
                        { Prop: 'TradeVol', Label: '可卖数量', Width: '' },
                        { Prop: 'FlowProfit', Label: '浮动盈亏', Width: '' },
                        { Prop: 'FlowProfitRate', Label: '盈亏比例', Width: '' },
                        { Prop: 'OprPrice', Label: '参考成本价', Width: '' },
                        { Prop: 'Price', Label: '市价', Width: '180' },
                        { Prop: 'MarketValue', Label: '参考市值', Width: '' }
                    ],

                    // Defaultdefaultu: 'lixq',
                    BuyApiObj: { "userid": "", "symbol": "", "name": "", "price": 0, "vol": 0 },
                    SellApiObj: { "userid": "", "symbol": "", "price": 0, "vol": 0 },
                    CancelApiObj: { "userid": "", "bookid": 0 },
                    EntrustApiObj: { "userid": "", "type": 0 },
                    DealApiObj: { "userid": "", "type": 1 },
                    HistoryEntrustApiObj: { "userid": "", "querydate": { "StartDate": 0, "EndDate": 0 }, "type": 0 },
                    HistoryDealApiObj: { "userid": "", "querydate": { "StartDate": 0, "EndDate": 0 }, "type": 1 },
                    AccountApiObjPostion: { "userid": "", "stock": "true" },//请求账户+持仓
                    AccountApiObj: { "userid": "", "stock": "false" },//请求账户

                    CapitalTableData: [],
                    EntrustTableData: [],
                    DealTableData: [],
                    HistoryEntrustTableData: [],
                    HistoryDealTableData: [],

                    CancelTableData: [],
                    AccountPostionData: { Available: 0, Balance: 0, Stock: [] },

                    TableMaxheight:0,
                    HistoryTableMaxheight:0,
                    CancelTableMaxheight:0,
                    TradeInfoWidth:0,  //左，中，右-账户信息
                    CheckWidth:0, //左，右-查询(撤单)信息
                    OprContainerH:0, //上，下-操作信息

                    TableList: [], //{Symbol:'',Name:'',Amount:0,TradeVol:0,FloatingPL:0,PLRate:0,MetaPrice:0,Price:0,MarketValue:0}
                    JsStock: null,
                    ID: JSCommon.JSChart.CreateGuid(),
                    IDForPosition: JSCommon.JSChart.CreateGuid(),
                    OprTypeIndex: 0,
                    OprMenuTwoIndex: 0,
                    TopAccountData: {
                        Account: { Text: '', Value: '' },
                        TotalMoney: { Text: '总资产：', Value: 0 },
                        Available: { Text: '可用资金：', Value: 0 },
                        TotalMarketValue: { Text: '股票市值：', Value: 0 },
                        TotalProfitRate: { Text: '总盈亏：', Value: 0 }
                    }

                };

            },
            watch: {
            },

            props:
                [
                    'DefaultUserID'
                ],

            //创建
            created: function () {
                this.JsStock = JSCommonStock.JSStockInit();
                this.InitalStock();
                this.JsStock.ReqeustData();



                this.QueryAccountApi();
            },

            mounted: function () {
                var _self = this;
                $(document).click(function (event) {
                    var target = $('.symbolWrap');
                    if (!target.is(event.target) && target.has(event.target).length == 0) {
                        _self.IsShow.SpellListEle = false;
                    }
                });

                this.OnSize();
            },

            methods:
            {
                collapseContainer(){ //收起容器
                    
                    this.IsCollapse = !this.IsCollapse;
                    console.log('[this.IsCollapse]',this.IsCollapse);
                    var simulateContainer = this.$refs.simulateContainer;
                    var collapseWrap = this.$refs.collapseWrap;
                    var defaultHeight = 215;
                    var currentHeight = 0;
                    if(this.IsCollapse){
                        currentHeight = collapseWrap.offsetHeight;
                    }else{
                        currentHeight = defaultHeight;
                    }
                    simulateContainer.style.height = currentHeight + 'px';
                    this.$emit('collapsediv',currentHeight);
                },
                selectCurrentRow(val){
                    if(this.OprType == '买入' || this.OprType == '卖出' ){
                        this.AddToBuySell(val);
                    }else if(this.OprType == '撤单'){
                        this.CancelCurrentChange(val)
                    }
                    this.$emit('selectRow',val.symbol);
                },
                AddToBuySell(val){
                    this.BuySellRow = val;
                    this.Symbol = val.symbol;
                    if(this.OprType == '买入'){
                        this.BuyInputData.Symbol = val.symbol;
                        var arySymbol = new Array();
                        arySymbol.push(this.BuyInputData.Symbol);
                        console.log('simulatetrade::AddToBuySell this.Symbol',this.Symbol);
                        this.InitalStock();
                        this.QueryStockInfo(null, arySymbol, null, this.JsStock);
                        this.JsStock.ReqeustData();
                        //请求价格
                    }else if(this.OprType == '卖出'){
                        this.SellInputData.Symbol = val.symbol;
                        this.SellInputData.Amount = val.TradeVol;
                        var arySymbol = new Array();
                        arySymbol.push(this.SellInputData.Symbol);
                        this.InitalStock();
                        this.QueryStockInfo(null, arySymbol, null, this.JsStock);
                        this.JsStock.ReqeustData();
                    }
                    
                },
                ClassNameByRate(row,index){
                    if(row.FlowProfitRate != ''){
                        var flowProfitRate = row.FlowProfitRate.substring(0,row.FlowProfitRate.length - 2);
                        if(flowProfitRate > 0){
                            return 'buy-row';
                        }else{
                            return 'sell-row';
                        }
                    }
                },
                ClassNameByBuySell(row,index){
                    if(row.oprid == '买入'){
                        return 'buy-row';
                    }else if(row.oprid == '卖出'){
                        return 'sell-row';
                    }
                },
                SpellSock() {
                    this.SearchStock = JSCommonStock.JSStock.GetSearchStock(this.SpellCallback);
                    var type = this.OprType;
                    var symbol = this.Symbol;                 
                    if(symbol != ''){
                        this.SearchStock.Search(symbol, 0);
                    }
                },
                GetStartDate(val){
                    if(val != undefined){
                        var dateAry = val.split('-');
                        var dateStr = '';
                        dateAry.forEach(item => {
                            dateStr += item;
                        });
                        this.DatePicker.Start = Number(dateStr);
                    }
                    
                },
                GetEndDate(val){
                    if(val != undefined){
                        var dateAry = val.split('-');
                        var dateStr = '';
                        dateAry.forEach(item => {
                            dateStr += item;
                        });
                        this.DatePicker.End = Number(dateStr);
                    }
                    
                },
                OnSize(){
                    var simulateContainer = this.$refs.simulateContainer;
                    var topAccountInfo = this.$refs.topAccountInfo;
                    var oprType = this.$refs.oprType;
                    var oprInfoBuy = this.$refs.oprInfoBuy;
                    var dateSelect = this.$refs.dateSelect;
                    var tableTopSelct = this.$refs.tableTopSelct;
                    var collapseWrap = this.$refs.collapseWrap;

                    var height = simulateContainer.clientHeight;
                    var width = simulateContainer.clientWidth;
                    var collapseWrapHeight = collapseWrap.offsetHeight;
                    var topAccountInfoHeight = topAccountInfo.offsetHeight;
                    var oprContainerH = height - topAccountInfoHeight - collapseWrapHeight;  //仿真部分高度
                    
                    this.OprContainerH = oprContainerH;
                    this.TableMaxheight = oprContainerH;
                    this.TradeInfoWidth = width - oprType.offsetWidth - oprInfoBuy.offsetWidth;
                    this.CancelTableMaxheight = oprContainerH - 30 - collapseWrapHeight;
                    this.HistoryTableMaxheight = oprContainerH - 30 - collapseWrapHeight;

                    this.CheckWidth = width - oprType.offsetWidth;
                },
                SpellCallback(data) {
                    var stocks = data.Data;
                    this.SpellStockData = stocks;
                    this.showSpellList();
                },
                QueryHistory() {
                    var startDate = this.DatePicker.Start;
                    var endDate = this.DatePicker.End;
                    if(startDate != 0 && endDate != 0){  //时间范围判断
                        if (this.OprType == '历史委托') {
                            this.QueryHistoryEntrustApi(startDate, endDate);
                        } else if (this.OprType == '历史成交') {
                            this.QueryHistoryDealApi(startDate, endDate);
                        }
                    }else{
                        this.$message('请选择时间范围');
                    }
                    
                },
                CancelCurrentChange(val) {
                    this.currentRow = val;
                },
                QueryHistoryEntrustApi(start, end) { //历史委托
                    this.HistoryEntrustApiObj.userid = this.DefaultUserID;
                    this.HistoryEntrustApiObj.querydate.StartDate = start;
                    this.HistoryEntrustApiObj.querydate.EndDate = end;
                    this.QueryApiJSTemplate(this.HistoryEntrustApiObj, 'VTradeQuery', this.HistoryEntrustCallback);
                },
                QueryHistoryDealApi(start, end) {  //历史成交
                    this.HistoryDealApiObj.userid = this.DefaultUserID;
                    this.HistoryDealApiObj.querydate.StartDate = start;
                    this.HistoryDealApiObj.querydate.EndDate = end;
                    this.QueryApiJSTemplate(this.HistoryDealApiObj, 'VTradeQuery', this.HistoryDealCallback);
                },
                HistoryEntrustCallback(res) {
                    let _self = this;
                    _self.HistoryEntrustTableData.splice(0,_self.HistoryEntrustTableData.length);
                    if (res.code == 0) {
                        let statusAry = ['已报待撤', '待委托', '已撤单', '已委托', '部分成交', '完全成交']; //数据对应:下标-2
                        var entrustAry = res.entrust;
                        entrustAry.forEach(item => {
                            var historyEnTr = {
                                date: JSCommon.IFrameSplitOperator.FormatDateString(item.date),
                                oprid: item.operationid > 0 ? '卖出' : '买入',
                                symbol: item.symbol,
                                name: item.name,
                                status: statusAry[item.status + 2],
                                price: JSCommon.IFrameSplitOperator.FormatValueString(item.price,2),
                                vol: JSCommon.IFrameSplitOperator.FormatValueThousandsString(item.vol,0),
                                tradeVol: JSCommon.IFrameSplitOperator.FormatValueThousandsString(item.dealvol,0),
                                bookid: item.bookid
                            }
                            _self.HistoryEntrustTableData.push(historyEnTr);
                        });
                    } else {
                        this.$message(res.message);
                    }

                },
                HistoryDealCallback(res) {
                    let _self = this;
                    _self.HistoryDealTableData.splice(0,_self.HistoryDealTableData.length);
                    if (res.code == 0) {
                        var DealAry = res.deal;
                        DealAry.forEach(item => {
                            var historyDealTr = {
                                date: JSCommon.IFrameSplitOperator.FormatDateString(item.date),
                                time: JSCommon.IFrameSplitOperator.FormatTimeString(item.time),
                                symbol: item.symbol,
                                name: item.name,
                                oprid: item.operationid > 0 ? '卖出' : '买入',
                                vol: item.vol,
                                price: item.price,
                                amount: item.vol * item.price,
                                bookid: item.bookid
                            }
                            _self.HistoryDealTableData.push(historyDealTr);
                        });
                    } else {
                        this.$message(res.message);
                    }
                },
                CheckTrade(menuOne, child, ind) {
                    this.OprType = child;
                    this.OprMenuTwoIndex = ind;
                    switch (child) {
                        case '资金股份':
                            this.IsShow.DateRange = false;
                            this.IsShow.CheckTable = {
                                Capital: true,
                                Entrust: false,
                                Deal: false,
                                HistoryEntrust: false,
                                HistoryDeal: false
                            };
                            break;
                        case '当日委托':
                            this.QueryEntrustApi(); //当日委托
                            this.IsShow.DateRange = false;
                            this.IsShow.CheckTable = {
                                Capital: false,
                                Entrust: true,
                                Deal: false,
                                HistoryEntrust: false,
                                HistoryDeal: false
                            };
                            break;
                        case '当日成交':
                            this.QueryDealApi(); //当日成交
                            this.IsShow.DateRange = false;
                            this.IsShow.CheckTable = {
                                Capital: false,
                                Entrust: false,
                                Deal: true,
                                HistoryEntrust: false,
                                HistoryDeal: false
                            };
                            break;
                        case '历史委托':
                            this.dateValue1 = '';
                            this.dateValue2 = '';
                            this.DatePicker.start = 0;
                            this.DatePicker.End = 0;
                            this.QueryHistoryEntrustApi(20190315, 20190325);
                            this.IsShow.DateRange = true;
                            this.IsShow.CheckTable = {
                                Capital: false,
                                Entrust: false,
                                Deal: false,
                                HistoryEntrust: true,
                                HistoryDeal: false
                            };
                            break;
                        case '历史成交':
                            this.dateValue1 = '';
                            this.dateValue2 = '';
                            this.DatePicker.start = 0;
                            this.DatePicker.End = 0;
                            this.QueryHistoryDealApi(20190315, 20190325);
                            this.IsShow.DateRange = true;
                            this.IsShow.CheckTable = {
                                Capital: false,
                                Entrust: false,
                                Deal: false,
                                HistoryEntrust: false,
                                HistoryDeal: true
                            };
                            break;
                    }
                },
                hideSpellList(symbol) {
                    this.IsShow.SpellListEle = false;
                    let type = this.OprType;
                    this.Symbol = symbol;
                    if(type == '买入'){
                        this.BuyInputData.Symbol = symbol;
                    }else if(type == '卖出'){
                        this.SellInputData.Symbol = symbol;
                    }
                    this.IsSpell = false;
                    if(symbol != ''){
                        var arySymbol = new Array();
                        arySymbol.push(symbol);
                        this.InitalStock();
                        this.QueryStockInfo(null, arySymbol, null, this.JsStock);
                        this.JsStock.ReqeustData();
                    }
                    
                    this.$emit('selectedsymbol',symbol)
                },
                QueryApi() {
                    var type = this.OprType;
                    console.log('::QueryApi type', type);
                    switch (type) {
                        case '买入':
                            this.QueryBuyApi();
                            break;
                        case '卖出':
                            this.QuerySellApi();
                            break;
                    }
                },
                QueryAccountApi() {  //查询账户信息
                    this.AccountApiObjPostion.userid = this.DefaultUserID;
                    this.QueryApiJSTemplate(this.AccountApiObjPostion, 'VTradeUser', this.AccountCallback);
                },
                AccountCallback(res) {
                    if (res.code == 0) {
                        this.AccountPostionData.Available = res.available;
                        this.AccountPostionData.Balance = res.balance;
                        this.AccountPostionData.Stock = res.stock;
                        let stocks = this.AccountPostionData.Stock;
                        var _self = this;

                        _self.TopAccountData.Account.Value = this.DefaultUserID;
                        _self.TopAccountData.Available.Value = Number(res.available).toFixed(2);
                        let arySymbol = [];
                        stocks.forEach(stock => {
                            var positionTableItem = {
                                symbol: stock.symbol,
                                Name: stock.name,
                                Vol: JSCommon.IFrameSplitOperator.FormatValueThousandsString(stock.vol,0),
                                TradeVol: JSCommon.IFrameSplitOperator.FormatValueThousandsString(stock.tradevol,0),
                                FlowProfit: '', //(市价 - stock.price) * stock.vol
                                FlowProfitRate: '', //(市价 - stock.price) / stock.price
                                OprPrice: JSCommon.IFrameSplitOperator.FormatValueString(stock.price,2),
                                Price: '',//市价
                                MarketValue: ''  //市价 * stock.vol
                            };
                            _self.CapitalTableData.push(positionTableItem);

                            arySymbol.push(stock.symbol);
                        });

                        this.InitalStockAry(arySymbol);
                        this.QueryStockAryInfo(null, arySymbol, null, this.JsStock);
                        this.JsStock.ReqeustData();
                    } else {
                        this.$message(res.message);
                    }

                },
                QueryCancelApi() {
                    if(this.currentRow.bookid){
                        this.CancelApiObj.userid = this.DefaultUserID;
                        this.CancelApiObj.bookid = this.currentRow.bookid;  //测试订单号
                        this.QueryApiJSTemplate(this.CancelApiObj, 'VTradeCanel', this.CancelCallback);
                    }else{
                        this.$message('请选择订单');
                    }
                    
                },
                CancelCallback(res) {
                    if (res.code == 0) {
                        this.$message('撤单成功');
                    } else {
                        this.$message(res.message);
                    }
                },
                QueryEntrustApi() {
                    this.EntrustApiObj.userid = this.DefaultUserID;
                    this.QueryApiJSTemplate(this.EntrustApiObj, 'VTradeQuery', this.EntrustCallback);
                },
                EntrustCallback(res) { //委托数据中包含撤单信息
                    let _self = this;
                    if (res.code == 0) {
                        let statusAry = ['已报待撤', '待委托', '已撤单', '已委托', '部分成交', '完全成交']; //数据对应:下标-2
                        var entrusts = res.entrust;
                        entrusts.forEach(item => {
                            var entrustItem = {
                                time: JSCommon.IFrameSplitOperator.FormatTimeString(item.time),
                                oprid: item.operationid > 0 ? '卖出' : '买入',
                                symbol: item.symbol,
                                name: item.name,
                                status: statusAry[item.status + 2],
                                price: JSCommon.IFrameSplitOperator.FormatValueString(item.price,2),
                                vol: JSCommon.IFrameSplitOperator.FormatValueThousandsString(item.vol,0),
                                tradeVol: JSCommon.IFrameSplitOperator.FormatValueThousandsString(item.dealvol,0),
                                bookid: item.bookid,
                            };
                            this.EntrustTableData.push(entrustItem);
                        });
                        _self.GetCancelData(this.EntrustTableData);
                    } else {
                        this.$message(res.message);
                    }
                },
                GetCancelData(data) {
                    data.forEach(item => {
                        if (item.status == 0) {
                            this.CancelTableData.push(item);
                        }
                    });
                },
                QueryDealApi() {
                    this.DealApiObj.userid = this.DefaultUserID;
                    this.QueryApiJSTemplate(this.DealApiObj, 'VTradeQuery', this.DealCallback);
                },
                DealCallback(res) {
                    if (res.code == 0) {
                        var dealAry = res.deal;
                        dealAry.forEach(item => {
                            var dealTrItem = {
                                time: JSCommon.IFrameSplitOperator.FormatTimeString(item.time),
                                symbol: item.symbol,
                                name: item.name,
                                oprid: item.operationid > 0 ? '卖出' : '买入',
                                vol: JSCommon.IFrameSplitOperator.FormatValueThousandsString(item.vol,0),
                                price: item.price,
                                amount: JSCommon.IFrameSplitOperator.FormatValueThousandsString(item.vol * item.price,2),
                                bookid: item.bookid
                            };
                            this.DealTableData.push(dealTrItem);
                        });
                    } else {
                        this.$message(res.message);
                    }
                },
                QueryBuyApi() {
                    this.BuyApiObj.userid = this.DefaultUserID;
                    this.BuyApiObj.symbol = this.BuyInputData.Symbol;
                    this.BuyApiObj.name = this.BuyInputData.Name;
                    this.BuyApiObj.price = this.BuyInputData.Price;
                    this.BuyApiObj.vol = this.BuyInputData.Vol;
                    this.QueryApiJSTemplate(this.BuyApiObj, 'VTradeBuy', this.BuyCallback);
                },
                BuyCallback(res) {
                    if (res.code == 0) {
                        this.$message('委托成功');
                    } else {
                        this.$message(res.message);
                    }
                },
                QuerySellApi() {
                    this.SellApiObj.userid = this.DefaultUserID;
                    this.SellApiObj.symbol = this.SellInputData.Symbol;
                    this.SellApiObj.price = this.SellInputData.Price;
                    this.SellApiObj.vol = this.SellInputData.Vol;
                    this.QueryApiJSTemplate(this.SellApiObj, 'VTradeSell', this.SellCallback);
                },
                SellCallback(res) {
                    if (res.code == 0) {
                        this.$message('委托成功');
                    } else {
                        this.$message(res.message);
                    }
                },
                QueryApiJSTemplate(queryObj, apiUrl, callback) {
                    $.ajax({
                        url: this.Domain + apiUrl,
                        method: 'POST',
                        data: queryObj,
                        dataType: 'json',
                        success(res) {
                            callback(res);
                        }
                    });
                },
                QueryStockInfo(id, arySymbol, dataType, jsStock) {  //拿到数据
                    console.log('[simulatetrade::QueryStockInfo]', id, arySymbol, dataType, jsStock, this.ID);
                    if (id != this.ID) return;
                    var type = this.OprType;
                    var symbol = '';
                    if(type == '买入'){
                        symbol = this.BuyInputData.Symbol;
                    }else if(type == '卖出'){
                        symbol = this.SellInputData.Symbol;
                    }
                    if (arySymbol.indexOf(symbol) < 0 || symbol == '') return;

                    let read = jsStock.GetStockRead(this.ID, this.QueryStockInfo); //获取一个读取数据类,并绑定id和更新数据方法
                    var price = read.Get(symbol, JSCommonStock.STOCK_FIELD_NAME.PRICE);

                    if (type == '买入') {
                        this.BuyInputData.Price = price;
                        var balance = this.AccountPostionData.Balance;
                        var amount = this.BuyInputData.Price == 0 ? 0 : Math.floor(balance / this.BuyInputData.Price / 100) * 100;
                        this.BuyInputData.Amount = amount;
                    } else if (type == '卖出') {
                        this.SellInputData.Price = price;
                        var tradeVol = 0;
                        let stocks = this.AccountPostionData.Stock;
                        stocks.forEach(item => {
                            if(item.symbol == symbol){
                                tradeVol = item.tradevol;
                                return;
                            }
                        });
                        var amount = Math.floor(tradeVol / 100) * 100;
                        this.SellInputData.Amount = amount;
                    }
                },
                QueryStockAryInfo(id, arySymbol, dataType, jsStock) { //获取持仓所有股票信息
                    console.log('[simulatetrade::QueryStockAryInfo]', id, arySymbol, dataType, jsStock, this.IDForPosition);
                    if (id != this.IDForPosition) return;

                    var read = jsStock.GetStockRead(this.IDForPosition, this.QueryStockAryInfo);
                    let stocks = this.AccountPostionData.Stock;
                    var _self = this;
                    _self.TopAccountData.TotalMarketValue.Value = 0;
                    _self.TopAccountData.TotalProfitRate.Value = 0;
                    stocks.forEach((stock, index) => {
                        var price = read.Get(stock.symbol, JSCommonStock.STOCK_FIELD_NAME.PRICE);
                        var yclose = read.Get(stock.symbol, JSCommonStock.STOCK_FIELD_NAME.YCLOSE);

                        var flowProfit = (price - stock.price) * stock.vol;
                        var flowProfitRate = (price - stock.price) / stock.price * 100;
                        var Price = price != null ? price : yclose;   //停牌，取收盘价
                        // Price = Number(Price);
                        var marketValue = price * stock.vol;
                        _self.CapitalTableData[index].FlowProfit = JSCommon.IFrameSplitOperator.FormatValueThousandsString(flowProfit,2);
                        _self.CapitalTableData[index].FlowProfitRate = JSCommon.IFrameSplitOperator.FormatValueString(flowProfitRate,2) + '%';
                        _self.CapitalTableData[index].Price = JSCommon.IFrameSplitOperator.FormatValueString(Price,2);
                        _self.CapitalTableData[index].MarketValue = JSCommon.IFrameSplitOperator.FormatValueThousandsString(marketValue,2);

                        _self.TopAccountData.TotalMarketValue.Value += price != undefined ? Price * stock.vol : 0;
                        _self.TopAccountData.TotalProfitRate.Value += price != undefined ? (Price - stock.price) * stock.vol : 0;
                    });
                    _self.TopAccountData.TotalMarketValue.Value = Number(_self.TopAccountData.TotalMarketValue.Value).toFixed(2);
                    _self.TopAccountData.TotalProfitRate.Value = Number(_self.TopAccountData.TotalProfitRate.Value).toFixed(2);
                    var available = Number(_self.TopAccountData.Available.Value);
                    var totalMarketValue = Number(_self.TopAccountData.TotalMarketValue.Value);
                    _self.TopAccountData.TotalMoney.Value = Number(totalMarketValue + available).toFixed(2);
                },
                
                InitalStock() {  //订阅数据
                    let read = this.JsStock.GetStockRead(this.ID, this.QueryStockInfo);         //获取一个读取数据类,并绑定id和更新数据方法
                    const stockField = [
                        JSCommonStock.STOCK_FIELD_NAME.PRICE
                    ];
                    if(this.Symbol != ''){
                        read.SetQueryField(this.Symbol, stockField);
                    }
                },
                InitalStockAry(arySymbol) {
                    let read = this.JsStock.GetStockRead(this.IDForPosition, this.QueryStockAryInfo);         //获取一个读取数据类,并绑定id和更新数据方法
                    const stockField = [
                        JSCommonStock.STOCK_FIELD_NAME.PRICE,
                        JSCommonStock.STOCK_FIELD_NAME.YCLOSE
                    ];
                    arySymbol.forEach(symbol => {
                        if(symbol != ''){
                            read.SetQueryField(symbol, stockField);
                        }
                    });
                },
                showSpellList() {
                    this.IsShow.SpellListEle = true;
                },
                ChangeOprType(item, index) {
                    this.OprType = item.Text;
                    this.OprTypeIndex = index;
                    switch (index) {
                        case 0:
                            this.IsShow.Buy = true;
                            this.IsShow.TradeInfo = true;
                            this.IsShow.Sell = false;
                            this.IsShow.Cancel = false;
                            this.IsShow.Check = false;

                            this.BuyInputData = DefaultData.SetBuyInput();
                            this.Symbol = '';
                            break;
                        case 1:  //卖出
                            this.IsShow.Buy = false;
                            this.IsShow.TradeInfo = true;
                            this.IsShow.Sell = true;
                            this.IsShow.Cancel = false;
                            this.IsShow.Check = false;

                            this.SellInputData = DefaultData.SetSellInput();
                            this.Symbol = '';
                            break;
                        case 2:  //撤单
                            this.IsShow.Buy = false;
                            this.IsShow.TradeInfo = false;
                            this.IsShow.Sell = false;
                            this.IsShow.Cancel = true;
                            this.IsShow.Check = false;
                            this.QueryEntrustApi();
                            break;
                        case 3:
                            this.IsShow.Buy = false;
                            this.IsShow.TradeInfo = false;
                            this.IsShow.Sell = false;
                            this.IsShow.Cancel = false;
                            this.IsShow.Check = true;
                            break;
                    }
                },
                MinPriceValue() { //减少
                    var type = this.OprType;
                    var value = 0;
                    if (type == '买入') {
                        value = Number(this.BuyInputData.Price);
                        this.BuyInputData.Price = Number(value - 0.1).toFixed(2);
                    } else if(type == '卖出'){
                        value = Number(this.SellInputData.Price);
                        this.SellInputData.Price = Number(value - 0.1).toFixed(2);;
                    }
                },
                AddPriceValue() { //增加
                    var type = this.OprType;
                    var value = 0;
                    if (type == '买入') {
                        value = Number(this.BuyInputData.Price);
                        this.BuyInputData.Price = Number(value + 0.1).toFixed(2);
                    } else if(type == '卖出'){
                        value = Number(this.SellInputData.Price);
                        this.SellInputData.Price = Number(value + 0.1).toFixed(2);
                    }
                },
                MinVolValue() { //减少
                    var type = this.OprType;
                    var value = 0;
                    if (type == '买入') {
                        value = Number(this.BuyInputData.Vol);
                        this.BuyInputData.Vol = Math.floor(value - 100)
                    } else if(type == '卖出'){
                        value = Number(this.SellInputData.Vol);
                        this.SellInputData.Vol = Math.floor(value - 100);
                    }
                },
                AddVolValue() { //增加
                    var type = this.OprType;
                    var value = 0;
                    if (type == '买入') {
                        value = Number(this.BuyInputData.Vol);
                        this.BuyInputData.Vol = Math.floor(value + 100)
                    } else if(type == '卖出'){
                        value = Number(this.SellInputData.Vol);
                        this.SellInputData.Vol = Math.floor(value + 100);
                    }
                },
                CalVolByRate(rate) {
                    var type = this.OprType;
                    var vol = 0;
                    if (type == '买入') {
                        vol = Number(this.BuyInputData.Amount);
                        this.BuyInputData.Vol = Math.floor(vol * rate / 100) * 100;
                    } else if(type == '卖出'){
                        vol = Number(this.SellInputData.Amount);
                        this.SellInputData.Vol = Math.floor(vol * rate / 100) * 100;
                    }
                }

            }
        }

</script>

<style lang="scss">

    .simulateContainer {
        * {
            font: 14px/normal 'Microsoft Yahei';
            color: #333;
            margin: 0;
            padding: 0;
        }

        li,
        ol {
            list-style: none;
        }

        a {
            text-decoration: none;
        }
        $border: 1px solid #e1ecf2;
        overflow: hidden;

        .upColor {
            color: #ee1515;
        }

        .lowColor {
            color: #22ac38;
        }

        ::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 10px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 10px;
        }

        ::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #535353;
        }

        ::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #EDEDED;
        }
        .collapseWrap {
            height: 8px;
            .block{
                width: 30px;
                height: 100%;
                background-color: #ddd;
                margin: 0 auto;
                position: relative;
            }
            .block::after {
                width: 0;
                height: 0;
                content:'';
                border-style: solid;
                border-width: 3px 6px 0 6px;
                border-color: #535353 transparent transparent transparent;
                position: absolute;
                left: 9px;
                top: 3px;
            }
            .block.hide::after{
                border-width: 0 6px 3px 6px;
                border-color: transparent transparent #535353 transparent;
            }
        }

        .topAccountInfo {
            height: 25px;
            padding-left: 20px;
            border: $border;

            >p {
                display: inline-block;
                line-height: 25px;
                margin-right: 15px;
            }
        }

        .oprContainer {
            width: 100%;
            position: relative;
            overflow-x: hidden;
            >div {
                position: absolute;
                top: 0;
            }
            /*element ui 表格*/
            .el-table {border: none;}
            .el-table .buy-row td div{
                color: #ee1515;
            }
            .el-table .sell-row td div{
                color: #22ac38;
            }
            .el-table td, .el-table th {
                height: 28px;
            }
            .el-table th>.cell{
                line-height: 28px;
            }
            .el-table td{
                border-bottom: none;
            }
            .el-table th {
                background-color: #fff;
            }
            .el-table th.gutter{
                display: table-cell!important;
            }
            .el-table colgroup.gutter{
                display: table-cell!important;
            }
            .el-table::before {height: 0;}
            .el-table__footer-wrapper thead div, .el-table__header-wrapper thead div {background-color: #fff;}
            .oprType {
                left: 0;
                width: 134px;
                height: 100%;
                overflow-y: auto;
                border-right: $border;

                >div {
                    width: 100%;

                    >span {
                        display: block;
                        width: 100%;
                        height: 34px;
                        box-sizing: border-box;
                        padding-left: 34px;
                        cursor: pointer;
                        line-height: 34px;
                        cursor: pointer;
                        >i {
                            margin-left: 5px;
                        }
                        .colorWhite {
                            color: #fff;
                        }
                    }

                    .menuTwo {
                        width: 100%;

                        >p {
                            padding-left: 41px;
                            line-height: 28px;
                            cursor: pointer;
                        }

                        >p.active {
                            color: #093e8a;
                            background-color: #e1ecf2;
                        }
                    }
                }

                >div.active {
                    >span {
                        background-color: #093e8a;
                        color: #fff;
                    }
                }
            }

            .oprInfo {
                left: 135px;
                width: 281px;
                height: 100%;
                box-sizing: border-box;
                padding-top: 10px;
                padding-left: 10px;
                border-right: $border;

                >div {
                    height: 22px;
                    margin-bottom: 5px;

                    .title {
                        margin-right: 19px;
                    }

                    input[type='text'] {
                        border: none;
                        height: 16px;
                        outline: none;
                    }

                    .inputBox {
                        display: inline-block;
                        border: $border;
                        height: 20px;
                        padding-left: 5px;
                    }

                    .inputCalu {
                        display: inline-block;
                        border: $border;

                        .min,
                        .add {
                            display: inline-block;
                            width: 20px;
                            height: 20px;
                            text-align: center;
                            line-height: 20px;
                            border-right: $border;
                            cursor: pointer;
                        }

                        .add {
                            border-right: none;
                            border-left: $border;
                        }

                        input {
                            width: 82px;
                            height: 18px;
                            margin-left: 5px;
                        }
                    }

                }

                .symbolWrap {
                    position: relative;
                    z-index: 333;

                    .stockList {
                        position: absolute;
                        top: 21px;
                        left: 75px;
                        height: 120px;
                        overflow-y: auto;
                        background-color: #e1ecf2;
                        border: $border;
                        padding: 6px 0;

                        p {
                            line-height: 22px;
                            padding: 0 6px;
                            color: #666;

                            .symbol {
                                margin-right: 12px;
                            }
                        }

                        p:hover,
                        p.active {
                            background-color: #217cd9;
                            color: #fff;
                        }
                    }

                    .inputBox {
                        width: 82px;

                        input {
                            width: 100%;
                        }
                    }
                }

                .volWrap {
                    .inputBox {
                        width: 151px;

                        input {
                            width: 128px;
                            margin-right: 2px;
                        }
                    }
                }

                .rates {
                    padding-left: 75px;

                    >span {
                        display: inline-block;
                        width: 34px;
                        height: 20px;
                        line-height: 20px;
                        text-align: center;
                        color: #217cd9;
                        background-color: #e1ecf2;
                        margin-right: 5px;
                        cursor: pointer;
                    }

                    >span:hover {}
                }

                .oprBtn {
                    padding-left: 75px;
                    height: 24px;

                    >span {
                        width: 156px;
                        height: 24px;
                        line-height: 24px;
                        text-align: center;
                        color: #fff;
                        background-color: #ccc;
                        display: inline-block;
                        cursor: pointer;
                    }

                    .buyBtn {
                        background-color: #ff4343;
                    }

                    .sellBtn {
                        background-color: #22ac38;
                    }
                }
            }

            .CancelContainer {
                left: 135px;
                width: 1776px;

                .tableTopSelct {
                    height: 30px;
                    line-height: 30px;
                    padding-left: 10px;
                    border-bottom: $border;

                    .countText {
                        color: #ee1515;
                        margin-right: 40px;
                    }

                    .borderBtn {
                        width: 48px;
                        height: 18px;
                        line-height: 18px;
                        border: $border;
                        text-align: center;
                        display: inline-block;
                        cursor: pointer;
                        margin-right: 10px;
                    }

                    .borderBtn.active {
                        color: #fff;
                        background-color: #093e8a;
                    }

                    >div,
                    >p {
                        display: inline-block;
                    }
                }
            }

            .checkTableContainer {
                left: 135px;
                width: 1776px;

                .dateSelect {
                    height: 25px;
                    padding-top: 5px;
                    .el-date-editor:first-child {
                        margin-left:15px;
                    }
                    .el-date-editor.el-input{
                        width: 128px;
                    }
                    .spaceText {
                        margin: 0 4px;
                    }
                    .el-input__inner {
                        border-radius:0;
                        height:20px;
                    }
                    .borderBtn {
                        display: inline-block;
                        height: 20px;
                        padding: 0 10px;
                        line-height:1;
                        box-sizing: border-box;
                        border: $border;
                        vertical-align: top;
                    }
                }
            }

            .tradeInfo {
                left: 416px;
                width: 1490px;
                height: 100%;
            }
        }
    }
</style>