<template>
	<div class="wrap">
		<div class="tab-header">
        <span :class="[{'active':status == 1}]" @click="tabClick(1)">{{$t('lever.tdin')}}</span>
        <span :class="[{'active':status == 0}]" @click="tabClick(0)">{{$t('lever.listin')}}</span>
        <!-- <span :class="[{'active':status == 2}]" @click="tabClick(2)">平仓中</span> -->
        <span :class="[{'active':status == 3}]" @click="tabClick(3)">{{$t('lever.closed')}}</span>
        <span :class="[{'active':status == 4}]" @click="tabClick(4)">{{$t('lever.revoked')}}</span>
      </div>

      <ul class="list_head ft14">
        <li class="flex">
          <span class="width2">{{$t('lever.type')}}</span>
          <span class="width1" v-if="status == 0 || status == 4">{{$t('lever.entrustPrice')}}</span>
          <span class="width1" v-else>{{$t('lever.openPrice')}}</span>
          <span class="width1">{{$t('lever.nowPrice')}}</span>
          <span class="width1">{{$t('lever.styPrice')}}</span>
          <span class="width1">{{$t('lever.stsPrice')}}</span>
          <span class="width1">{{$t('lever.bail')}}</span>
          <span class="width1">{{$t('lever.canBail')}}</span>
          <span class="width2">{{$t('lever.openTime')}}</span>
          <span class="width2" v-if="status == 3">{{$t('lever.closeTime')}}</span>
          <span class="width1">{{$t('lever.rate')}}</span>
          <span class="width1">{{$t('lever.nightFee')}}</span>
          <span class="width1">{{$t('lever.loss')}}</span>
          <!-- <span class="width1">{{$t('fat.status')}}</span> -->
          <span class="width1" v-if="status == 0 || status == 1">{{$t('td.do')}}</span>
        </li>
      </ul>
      <ul class="list_content ft12">
        <li v-for="(item,index) in list_content" :key="index" class="flex alcenter center">
          <span
            class="width2"
          >{{item.type == 1? $t('td.buyin'):$t('td.sellout')}} {{item.symbol}} x{{item.share}}(No.{{item.id}})</span>
          <span
            class="width1"
            v-if="status == 0 || status == 4"
          >{{item.origin_price || '0.00' | numFilters(4)}}</span>
          <span class="width1" v-else>{{item.price || '0.00' | numFilters(4)}}</span>
          <span class="width1">{{item.update_price || '0.00' | numFilters(4)}}</span>
          <span class="width1">{{item.target_profit_price || '0.00' | numFilters(4)}}</span>
          <span class="width1">{{item.stop_loss_price || '0.00' | numFilters(4)}}</span>
          <span class="width1">{{item.origin_caution_money || '0.00' | numFilters(4)}}</span>
          <span class="width1">{{item.caution_money || '0.00' | numFilters(4)}}</span>
          <span class="width2">{{item.transaction_time}}</span>
          <span class="width2" v-if="status == 3">{{item.handle_time}}</span>
          <span class="width1">{{item.trade_fee || '0.00' | numFilters(4)}}</span>
          <span class="width1">{{item.overnight_money || '0.00' | numFilters(4)}}</span>
          <span
            class="width1"
            :class="item.profits > 0?'greenColor':'redColor'"
          >{{item.profits || '0.00' | numFilters(4)}}</span>
          <!-- <span class="width1">{{item.status_name}}</span> -->
          <div class="width1 btns tr" v-if="status == 0 || status == 1">
            <button type="button" v-if="status == 0" @click="cannelOrder(item.id)">{{$t('lever.revoke')}}</button>
            <button type="button" v-if="status == 1" @click="closePosition(item.id)">{{$t('lever.ping')}}</button>
          </div>
        </li>
      </ul>
      <!-- <div class="mores" @click="load_more">
        <img v-if="list_content.length == 0" src="../../assets/images/nodata.png" alt>
        <span>{{more}}</span>
      </div>-->
      <!-- 分页 -->
      <el-pagination
        class="mores"
        v-if="total>10"
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      ></el-pagination>
	</div>
</template>
<script>
	export default {
//components: { indexHeader, indexFooter },
filters: {
    numFilters: function (value) {
      if (!value) {
        return '0.0000'
      }
//    value = toString()
      return value.slice(0) + ' '
    }
  },
  data() {
    return {
      legal_id: "",
      currency_id: "",
      list_content: [],
      page: 1,
      more: "加载更多",
      status: 1,
      flag: true,
      total: "",
      skins: localStorage.getItem("skin") || "days"
    };
  },
  created() {
    let that = this;
    // that.legal_id = localStorage.getItem("legal_id");
    // that.currency_id = localStorage.getItem("currency_id");
    that.init();
    if (that.status == 0 || that.status == 1) {
      that.polling();
    }
  },
  beforeCreate() {
    document
      .querySelector("html")
      .setAttribute("style", "background-color:#f7f7f7;");
  },
  beforeDestroy() {
    document.querySelector("html").removeAttribute("style");
  },
  methods: {
    init() {
      let that = this;
      that.more = that.$t('lever.loading');
      if (that.flag) {
        var i = layer.load();
        this.$http({
          url: "/api/" + "lever/my_trade",
          method: "post",
          data: {
            status: that.status,
            legal_id: that.legal_id,
            currency_id: that.currency_id,
            page: that.page
          },
          headers: { Authorization: localStorage.getItem("token") }
        })
          .then(res => {
            layer.close(i);
            that.flag = true;
            if (res.data.type == "ok") {
              that.more = that.$t('td.more');
              // if (that.page == 1) {
              that.list_content = res.data.message.message.data;
              that.total = res.data.message.message.total;
            } else {
              // layer.msg(res.data.message);
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },

    // 轮询数据
    polling() {
      let that = this;
      that.$socket.emit("login", localStorage.getItem("user_id"));
      that.$socket.on("lever_trade", msg => {
        if (msg.type == "lever_trade") {
          if (that.status == 0) {
            var datas = JSON.parse(msg.trades_entrust);
            that.list_content = datas;
          } else if (that.status == 1) {
            let datas = JSON.parse(msg.trades_all);
            that.list_content = datas;
          }
        }
      });
    },
    // // 加载更多
    // load_more() {
    //   this.page++;
    //   this.init();
    //   that.flag = false;
    // },
    // 分页
    handleCurrentChange(val) {
      var that = this;
      that.page = val;
      that.init();
    },
    // 状态切换
    tabClick(type) {
      let that = this;
      that.status = type;
      that.list_content = [];
      that.page = 1;
      that.init();
      that.flag = false;
      if (type == 0 || type == 1) {
        that.polling();
      }
    },
    // 平仓
    closePosition(ids) {
      let that = this;
      this.$alert(that.$t('lever.sureping'), "", {
        confirmButtonText: that.$t('cuy.confirm'),
        customClass: "modalConfirm",
        confirmButtonClass: "confirmBtn",
        closeOnClickModal: true,
        callback: action => {
          if (action == "confirm") {
            that
              .$http({
                url: "/api/" + "lever/close",
                method: "post",
                data: {
                  id: ids
                },
                headers: { Authorization: localStorage.getItem("token") }
              })
              .then(res => {
                if (res.data.type == "ok") {
                  layer.msg(res.data.message);
                  setTimeout(function() {
                    location.reload();
                  }, 1000);
                } else {
                  layer.msg(res.data.message);
                }
              })
              .catch(error => {
                console.log(error);
              });
          }
        }
      });
      // layer.confirm("确定平仓？", function() {
      //   var i = layer.load();
      //   that
      //     .$http({
      //       url: "/api/" + "lever/close",
      //       method: "post",
      //       data: {
      //         id: ids
      //       },
      //       headers: { Authorization: localStorage.getItem("token") }
      //     })
      //     .then(res => {
      //       layer.close(i);
      //       if (res.data.type == "ok") {
      //         layer.msg(res.data.message);
      //         setTimeout(function() {
      //           that.tabClick(that.status);
      //         }, 200);
      //       } else {
      //         layer.msg(res.data.message);
      //       }
      //     })
      //     .catch(error => {
      //       layer.close(i);
      //       console.log(error);
      //     });
      // });
    },
    // 撤单
    cannelOrder(ids) {
      let that = this;
      this.$alert(that.$t('lever.revokeOrder'), "", {
        confirmButtonText: that.$t('cuy.confirm'),
        customClass: "modalConfirm",
        confirmButtonClass: "confirmBtn",
        closeOnClickModal: true,
        callback: action => {
          if (action == "confirm") {
            that
              .$http({
                url: "/api/" + "lever/cancel",
                method: "post",
                data: {
                  id: ids
                },
                headers: { Authorization: localStorage.getItem("token") }
              })
              .then(res => {
                layer.close(i);
                if (res.data.type == "ok") {
                  layer.msg(res.data.message);
                  setTimeout(function() {
                    that.tabClick(that.status);
                  }, 200);
                } else {
                  layer.msg(res.data.message);
                }
              })
              .catch(error => {
                layer.close(i);
                console.log(error);
              });
          }
        }
      });
      // layer.confirm("确定撤消订单吗？", function() {
      //   var i = layer.load();
      //   that
      //     .$http({
      //       url: "/api/" + "lever/cancel",
      //       method: "post",
      //       data: {
      //         id: ids
      //       },
      //       headers: { Authorization: localStorage.getItem("token") }
      //     })
      //     .then(res => {
      //       layer.close(i);
      //       if (res.data.type == "ok") {
      //         layer.msg(res.data.message);
      //         setTimeout(function() {
      //           that.tabClick(that.status);
      //         }, 200);
      //       } else {
      //         layer.msg(res.data.message);
      //       }
      //     })
      //     .catch(error => {
      //       layer.close(i);
      //       console.log(error);
      //     });
      // });
    }
  }
};
</script>
<style scoped>
	.wrap {
		min-height: 500px;
		background: #181b2a;
		width: 100%;
		margin: auto;
		padding: 90px 50px 30px 50px;
	}

	.tab-header {
		margin-bottom: 30px;
		color: #c7cce6;
	}

	.tab-header span {
		padding-bottom: 10px;
		margin-right: 20px;
		cursor: pointer;
	}

	ul li {
		padding: 8px 0;
		line-height: 33px;
	}

	ul li span {
		display: inline-block;
	}

	ul li div {
		display: inline-block;
	}

	ul li div span {
		border-radius: 3px;
		color: white;
		background-color: #638bd4;
		cursor: pointer;
		min-height: 33px;
		min-width: 80px;
		font-size: 14px;
		border: none;
		padding: 0 5px;
		line-height: 33px;
		text-align: center;
	}

	.list_head {
		color: #637085;
		border-bottom: 1px solid #2e333c;
	}

	.red {
		color: #cc4951;
		cursor: pointer;
	}

	.green {
		color: #0d8551;
	}

	.stop-btn {
		margin-right: 10px;
	}

	.mores {
		color: #999;
		font-size: 14px;
		margin-top: 10px;
		cursor: pointer;
		text-align: center;
	}

	.mores img {
		width: 120px;
		height: 120px;
		margin: 30px auto 0;
	}

	.mores span {
		display: block;
		text-align: center;
	}

	.width1 {
		width: 9%;
		text-align: center;
	}

	.width2 {
		width: 13%;
		text-align: center;
	}

	.width3 {
		width: 20%;
		text-align: center;
	}

	.loss-modal {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		justify-content: center;
		align-items: center;
		color: #c7cce6;
	}

	.content {
		width: 500px;
		background-color: #262a42;
		margin: 0 auto;
		border-radius: 5px;
	}

	.loss-modal-header {
		line-height: 40px;
		text-align: center;
		position: relative;
	}

	.loss-modal-header p {
		position: absolute;
		right: 10px;
		top: 0;
	}

	.loss-madal-content {
		margin: 0 15px;
		padding-bottom: 10px;
	}

	.loss-madal-content div {
		line-height: 40px;
		margin-bottom: 10px;
	}

	.loss-madal-content div p {
		display: inline-block;
		border: 1px solid #2e333c;
		border-radius: 3px;
		height: 40px;
		position: relative;
	}

	.loss-madal-content p span {
		display: inline-block;
		width: 60px;
		text-align: center;
		font-size: 30px;
		position: relative;
		top: -3px;
	}

	.loss-madal-content input {
		background-color: rgba(0, 0, 0, 0);
		border-left: 1px solid #2e333c;
		border-right: 1px solid #2e333c;
		line-height: 40px;
		position: relative;
		top: -8px;
		color: #c7cce6;
		text-align: center;
	}

	.modal-text {
		width: 100%;
		text-align: center;
		line-height: 60px;
	}

	.modal-btn {
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		font-size: 0;
	}

	.modal-btn button {
		width: 50%;
		line-height: 50px;
		border: none;
		float: left;
		font-size: 14px;
		color: #fff;
		background: #9db5c7;
	}

	.modal-btn button:last-child {
		border-left: 1px solid #2e333c;
		background: #689cf1;
	}

	.total-pro button {
		border-radius: 3px;
		color: white;
		background-color: #638bd4;
		cursor: pointer;
		min-height: 33px;
		min-width: 80px;
		font-size: 14px;
		border: none;
		padding: 0 5px;
		line-height: 33px;
		text-align: center;
	}

	.stopModal {
		margin: 20px 15px;
		text-align: center;
		padding-bottom: 20px;
	}

	.stopModal span {
		padding: 6px 15px;
		border-radius: 4px;
	}

	.stopall {
		border: 1px solid #638bd4;
		color: #638bd4;
		margin-right: 10px;
	}

	.alls {
		color: #fff;
		background-color: #638bd4;
	}

	.stopbuy {
		border: 1px solid #0d8551;
		color: #0d8551;
		margin-right: 10px;
	}

	.buys {
		color: #fff;
		background-color: #0d8551;
	}

	.stopsell {
		border: 1px solid #cc4951;
		color: #cc4951;
	}

	.sells {
		color: #fff;
		background-color: #cc4951;
	}

	.stop-modal-btns {
		width: 100%;
		font-size: 0;
	}

	.stop-modal-btns button {
		width: 50%;
		float: left;
		font-size: 14px;
		line-height: 40px;
		background-color: #9db5c7;
		border: none;
		outline: none;
		color: #fff;
	}

	.stop-modal-btns button:last-child {
		background-color: #689cf1;
	}

	.btns button {
		border-radius: 3px;
		color: white;
		background-color: #638bd4;
		cursor: pointer;
		min-height: 33px;
		min-width: 80px;
		font-size: 14px;
		border: none;
		padding: 0 5px;
		line-height: 33px;
		text-align: center;
	}
	.alcenter span{
		color: #c7cce6;
	}
</style>

<!--// WEBPACK FOOTER // // src/view/lever/leverList.vue-->
