<template>
  <v-page>
    <v-header class="nav-head" :title="$t('transfer.a8')">
      <template #right>
        <v-link to="/pages/transfer/bill">
          <van-icon class="fn-20 m-t-xs" name="todo-list-o" />
        </v-link>
      </template>
    </v-header>
    <view class="backcor-black" style="height: 100%;">
    	<main>
    	  <view style="height: var(--status-bar-height)"></view>
    	  <view class="top">
    	    <view style="height: var(--status-bar-height)"></view>
    	  </view>
    	  <view class="panel-box m-x-md rounded p-y-md bg-panel-3">
    	   <v-picker
    	      :list="fromList"
    	      v-model="form.from_account"
    	      class="from item border-b p-y-xs p-l-md"
    	    >
    	      <view class="label fn-sm color-gray-6">{{ $t("transfer.a9") }}</view>
    	      <view class="select d-flex align-center">
    	       <span class="fn-lg color-light">{{
    	          accountMap[form.from_account]
    	        }}</span>
    			<!-- <span class="fn-lg color-light" v-if="tag == 1">
    			  {{ $t("transfer.a4") }}
    			</span>
    			<span class="fn-lg color-light" v-if="tag == 2">
    			  {{ $t("transfer.a5") }}
    			</span> -->
    	        <van-icon class="m-l-xs fn-lg" name="arrow" />
    	      </view>
    	   </v-picker>
    	   <v-picker
    	      :list="toList"
    	      v-model="form.to_account"
    	      class="to item p-y-xs p-l-md"
    	    >
    	      <view class="label fn-sm color-gray-6">{{ $t("transfer.b0") }}</view>
    	      <view class="select d-flex align-center">
    	       <span class="fn-lg color-light">{{
    	          accountMap[form.to_account]
    	        }}</span>
    			<!-- <span class="fn-lg color-light" v-if="tag == 1" >
    			  {{ $t("transfer.a5") }}
    			</span>
    			<span class="fn-lg color-light" v-if="tag ==2" >
    			  {{ $t("transfer.a4") }}
    			</span> -->
    	        <van-icon class="m-l-xs fn-lg" name="arrow" />
    	      </view>
    	    </v-picker>
    	    <view class=""></view>
    	    <view
    	      class="exchange d-flex justify-center align-center bg-panel-3 link-active"
    	      @click="swap"
    	    >
    	      <van-icon style="transform:rotateZ(90deg)" class="fn-22 color-light" name="exchange" />
    	    </view>
    	  </view>
    	  <v-picker
    	    :list="coinList"
    	    v-model="form.coin_name"
    	    range-label="coin_name"
    	    range-value="coin_name"
    	    class=""
    	  >
    	    <view class="m-md p-md d-flex rounded bg-panel-3">
    	      <view class="flex-fill">
    						 {{ $t("transfer.b1") }}
    						<!--{{ $t("transfer.b5") }}11111111-->
    					</view>
    	      <view class="color-light">{{ form.coin_name }}</view>
    	      <van-icon class="m-l-xs" name="arrow" />
    	    </view>
    	  </v-picker>
    	  <view class="m-md p-md rounded bg-panel-3">
    	    <view class="label fn-sm d-flex justify-between">
    	      <view>{{ $t("transfer.b1") }}</view>
    	      <view class=" fn-sm"
    	        >{{ $t("transfer.b2") }}：{{ activeCoin.usable_balance }}</view
    	      >
    	    </view>
    	    <view class="m-t-md">
    	      <v-input placeholder="0.000" v-model="form.amount" class="fn-20">
    	        <template #right>
    	          <view class="d-flex fn-md">
    	            <view class="m-r-xs">{{ form.coin_name }}</view>
    	            <view
    	              class="border-l color-buy p-l-xs"
    	              @click="change"
    	              >{{ $t("transfer.b3") }}</view
    	            >
    	          </view>
    	        </template>
    	      </v-input>
    	    </view>
    	
    	  </view>
    	
    	</main>
    	<view class="m-x-md">
    		<view class="  rounded-md ">
    		  <v-button
    		    class="w-max rounded-md"
    		    block
    		    type="white"
    		    ref="btn"
    		    @click="fundsTransfer"
    		    >{{ $t("common.confirm") }}</v-button
    		  >
    		</view>
    	</view>
    </view>
  </v-page>
</template>
<script>
import Wallet from "@/api/wallet";
import { mapGetters } from "vuex";
import lodash from "lodash";
export default {
  data() {
    return {
      coinList: [],
      accountsList: [],
      //
	  tag:1,
      accountMap: {},
      // 转换映射列表
      transferList: {},
      form: {
        from_account: 1,
        to_account: 2,
        amount:''
      },
      activeCoin: {},
    };
  },
  computed: {
    fromList() {
      return Object.keys(this.transferList).map((item) => {
        return {
          label: this.accountMap[item],
          value: item,
        };
      });
    },
    toList() {
      if (!this.transferList[this.form.from_account]) return [];
      return this.transferList[this.form.from_account].map((item) => {
        return {
          label: this.accountMap[item],
          value: item,
        };
      });
    },
    ...mapGetters(["themeStyle"]),
  },
  watch: {
    // 切换取默认值
    ["form.from_account"](n) {
      if (!this.transferList[n].includes(this.form.to_account)) {
        this.form.to_account = this.transferList[n][0];
      }

      this.getUserCoinAssets();
    },
    coinList() {
      if (!this.coinList.includes(this.form.coin_name)) {
        if (this.coinList[0]) {
          this.form.coin_name = this.coinList[0].coin_name;
        } else {
          this.form.coin_name = "";
        }
      }
    },
  },
  methods: {
    // 互换位置
    swap() {
      [this.form.from_account, this.form.to_account] = [
        this.form.to_account,
        this.form.from_account,
      ];
	  if(this.tag == 1){
		  this.tag = 2
	  }else{
		  this.tag = 1
	  }
	  console.log( this.accountMap )
    },
    // 划转
    fundsTransfer() {
      Wallet.transfer(this.form)
        .then(() => {
          this.$toast.success(this.$t("transfer.b4"));
          this.form.amount = "";
          this.getUserCoinAssets();
        })
        .catch(() => {});
    },
    // 获取划转币种
    getUserCoinAssets: lodash.debounce(function () {
      Wallet.coinList({
        from_account: this.form.from_account,
        to_account: this.form.to_account,
      })
        .then((res) => {
          this.coinList = res.data;
          if (this.coinList[0]) {
            this.form.coin_name = this.coinList[0].coin_name;
            this.getBalance();
          }
        })
        .catch(() => {});
    }, 300),
    // 获取划转类型
    accounts() {
      Wallet.accounts().then((res) => {
        this.accountsList = res.data;
        // 生成map
        this.accountsList.forEach((item) => {
          this.accountMap[item.id] = item.name;
        });
        // 生成映射 (谁转换谁)
        this.transferList = {};
        this.accountsList.forEach((item) => {
          let sourceId = this.accountsList.find(
            (item) => item.account == "UserWallet"
          ).id; //账户资产 可以转其他的资金，其他资金不能 转账户资产
          if (sourceId != item.id) {
            this.transferList[item.id] = [sourceId];
            if (!this.transferList[sourceId]) this.transferList[sourceId] = [];
            this.transferList[sourceId].push(item.id);
          }
        });
        this.getUserCoinAssets();
      });
    },
    // 获取余额
    getBalance: lodash.debounce(function () {
      let data = {
        account: this.form.from_account,
        coin_name: this.form.coin_name,
      };
      Wallet.getBalance(data).then((res) => {
        this.activeCoin = res.data;
      });
    }),
    change(){
      this.form.amount = this.activeCoin.usable_balance
    }
  },
  created() {
    this.accounts()
	// let list = this.$t('transfer')
	//  this.accountMap =  {}
	//  this.accountMap = {
	//      1: list.a4,
	//      2: list.a5
	//  }

 //    console.log(list.a4)
    // var fun=lodash.throttle((e)=>{
    //   console.log(1,e)
    // },1000)
    // setInterval(() => {
    //   fun(2)
    // }, 60);
  },
};
</script>
<style lang="scss" scoped>
.nav-head {
  position: absolute;
  left: 0;
  width: 100%;
  // background: transparent;
  &::after {
    border: none;
  }
}
.top {
  // background: linear-gradient(180deg, #c86b49, $theme-1);
  height: 150px;
}
.panel-box {
  margin-top: -70px;
  position: relative;
  .line {
    position: absolute;
    height: 100%;
    width: 1px;
    background: $border-color;
    transform: scale(0.5);
    top: 0;
    &::before,
    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }
    &::before {
      top: 0;
      background: $blue;
    }
    &::after {
      bottom: 0;
      background: $red;
    }
  }
  .exchange {
    position: absolute;
    right: $padding-sm;
    top: 50%;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    transform: translateY(-50%);
  }
}
.bg-panel-3{
	background-color: #121212;
}
</style>
