<template>
  <div>
    <el-table :data="datalist" style="width: 100%">
      <el-table-column  prop="code" label="交易品种" width="100"  align="center"/>
      <el-table-column prop="currency" label="名称" align="center" />
      <el-table-column label="卖价" align="center" prop="sellPic"/>
      <el-table-column label="买价" align="center" prop="buyPic" />
      <el-table-column prop="diffAmo" label="涨跌金额" align="center"  />
      <el-table-column prop="diffPer" label="涨跌率" align="center"  />
      <el-table-column prop="range" label="振幅" align="center" />
      <el-table-column  label="操作" align="center">
      <template slot-scope="scope">
        <el-button type="primary" size="mini" @click="trading(scope.row)">交易</el-button>
      </template>
      </el-table-column>
    </el-table>
    <pagination :total="10" />
    <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in tabsArr"
        :key="index"
        :label="item.label"
        :name="item.name"
      >
        <components :is="item.name" v-if="item.name == nowName" :id="id"/>
      </el-tab-pane>
    </el-tabs>
    <!-- 交易 -->
    <el-dialog title="交易" :visible.sync="colseDialogVisible" width="30%" append-to-body>
      <el-form :model="tradingVolume" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="交易品种:">
          <el-select v-model="tradingVolume.tradingCode" placeholder="活动区域" style="width: 100%">
            <el-option :label="tradingVolume.code" :value="tradingVolume.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="名  称:">
          <el-input v-model="tradingVolume.name"  autocomplete="off" />
        </el-form-item>
        <el-form-item label="类  型:">
          <el-select v-model="tradingVolume.transactionType" placeholder="请选择开仓类型" style="width: 100%" @change="transaction">
            <el-option label="市价开仓" value="市价开仓" />
            <el-option label="挂单开仓" value="挂单开仓" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="RegistrationVisible" label="买卖类型:">
          <el-select placeholder="活动区域" style="width: 100%" v-model="tradingVolume.buySellType">
            <el-option label="限价买进" value="buyLimit" />
            <el-option label="限价卖出" value="sellLimit" />
            <el-option label="止损买进" value="buyStop" />
            <el-option label="止损卖出" value="sellStop"/>
          </el-select>
        </el-form-item>
        <el-form-item v-if="tradingVolume.transactionType !== '挂单开仓'" label="买  卖">
          <el-radio-group v-model="tradingVolume.buySellType">
            <el-radio label="买入" ></el-radio>
            <el-radio label="卖出" ></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="交 易 量:">
          <el-input v-model="tradingVolume.transactionVolume" />
        </el-form-item>
        <el-form-item v-if="RegistrationVisible" label="价  位:">
          <el-input v-model="tradingVolume.priceCommission" />
        </el-form-item>
        <div class="dialog-inline" style="display: flex">
          <el-form-item label="止  损:">
            <el-input placeholder="请输入" v-model="tradingVolume.stopLoss" />
          </el-form-item>
          <el-form-item label="止  盈:">
            <el-input placeholder="请输入" v-model="tradingVolume.stopWin" />
          </el-form-item>
        </div>
        <el-form-item v-if="RegistrationVisible" label="有效期限">
          <el-date-picker v-model="tradingVolume.validityTime" style="width: 100%;" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item label="可用资金:">
          <template>
            <span style=" font-size: 18px;  font-weight: bold; font-family: Microsoft YaHei;  color: #1d2129;  ">9661.00美元</span>
            <div class="price">6.90494 / 6.90498</div>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="determine">确定</el-button>
        <el-button type="info" @click="colseDialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import tabs1 from './components/current.vue'
import tabs3 from './components/deals.vue'
import tabs2 from './components/orders.vue'
import * as Simulated from "@/api/Simulated.js"
import { getmemberId } from "@/utils/auth.js"
export default {
  props:{
    id:{
      type:String,
      default:''
    }
  },
  components: {
    tabs1,
    tabs2,
    tabs3
  },
  data() {
    return {
      activeName: 'tabs1',
      nowName: 'tabs1',
      colseDialogVisible: false,
      RegistrationVisible: false,
     
      value1: '',
      varietieslist:[],
      datalist:null,
      tabsArr: [
        {
          label: '当前持仓',
          name: 'tabs1'
        },
        {
          label: '现有挂单',
          name: 'tabs2'
        },
        {
          label: '历史成交',
          name: 'tabs3'
        }
      ],
      member: [],
   
      tradingVolume:{
        tradingCode:'',
        name:'',
        transactionType:'',
        buySellType:'',
        transactionVolume:null,
        stopLoss:null,
        stopWin:null,
        memberId: getmemberId(),
        trainingId:this.$route.query.id,
        priceCommission:null,
        validityTime:null
      }

    }
  },
  created(){
    this.getlist()
  },
  methods: {
    getlist(){
      Simulated.getMarketQuotation().then((res)=>{
        this.datalist=res.filter(item=>item.currency!== "美元指数")
      })
    },
    handleClick(tab) {
      tab.name == 'tabs1' ? this.nowName = tab.name : (tab.name = 'tabs2' ? this.nowName = tab.name : this.nowName = tab.name)
    },
    transaction(value) {
      if (value !== '挂单开仓' || value === '') {
        this.RegistrationVisible = false
      } else {
        this.RegistrationVisible = true
      }
    },
    availableFunds() {
      Simulated.getMemberById(this.tradingVolume.memberId).then((res)=>{
        this.member=res
      })
    },
    Price(code){
      Simulated.getMarketQuotationByCode(code).then((res)=>{
        console.log(res,'code');
      })
    },
    trading(data){
      console.log(data,'data');
      this.colseDialogVisible=true
      this.availableFunds()
      this.Price(data.code)
      this.tradingVolume.tradingCode=data.code
      this.tradingVolume.name=data.currency
    },
    determine(){
      this.tradingVolume.transactionType === '市价开仓' ? this.tradingVolume.transactionType = 'sjkc' : this.tradingVolume.transactionType = 'gdkc'
      this.tradingVolume.buySellType == '买入' ? this.tradingVolume.buySellType = 'buy' : this.tradingVolume.buySellType = 'sell'
      Simulated.transactionMarketQuotation(this.tradingVolume).then((res)=>{
        console.log(res,'res');
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.el-radio {
  margin-right: 70px;
}
::v-deep.el-tabs {
  background: #f8f8f9;
  padding: 0 20px;
  .el-tabs__nav-wrap::after {
    background: transparent;
  }
  .el-tabs__item {
    background: #f8f8f9 !important;
    margin-right: 0px !important;
    &.is-active {
      background-color: #3c9cf5;
      color: #3c9cf5 !important;
    }
  }
}
.pagination-container {
  margin-bottom: 20px !important;
}
::v-deep .price {
  max-width: calc(100% - 136px);
  min-height: 60px;
  background: #f2f3f4;
  border-radius: 4px;
  margin-left: 20px;
  text-align: center;
  line-height: 60px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1d2129;
}
</style>
