<template>
  <div class="wallet">
    <a-breadcrumb separator=">">
      <a-breadcrumb-item>Home</a-breadcrumb-item>
      <a-breadcrumb-item href=""> Application Center </a-breadcrumb-item>
      <a-breadcrumb-item href=""> Application List </a-breadcrumb-item>
      <a-breadcrumb-item>An Application</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="top">
      <div class="mywallet">
        <div class="topinfo">
          <div class="title">我的钱包</div>

          <div class="topbtn" @click="navto(2)">立即提现</div>
          <div class="topbtn topbtn1" @click="navto(3)">提现记录</div>
        </div>
        <div class="line"></div>
        <div class="accounts">
          <div class="left" @click="listchange(1)">
            <img src="@/static/images/account.png" alt="" class="pic" />
            <div class="texts">
              <div>绑定用户</div>
              <div class="num">{{accountlist.length}}</div>
            </div>
          </div>
          <div class="linecolumn"></div>
          <div class="left" @click="listchange(2)">
            <img src="@/static/images/money.png" alt="" class="pic" />
            <div class="texts">
              <div>账户余额</div>
              <div class="num">
                <span class="moneyicon" v-if="ifchina">￥</span>
                <span class="moneyicon" v-else> $ </span>
                <!-- {{store.state.userinfo.moneyValue}} -->
                
                <!-- {{store.state.userinfo.money.split('.')[0]}}
                 <span class="float">{{store.state.userinfo.money.split('.')[1]?'.'+store.state.userinfo.money.split('.')[1]:''}}</span> -->
                
                <!-- <span class="float">{{'$0'.split('.')}}</span> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="add" @click="navto(1)">
        <img src="@/static/images/walletadd.png" alt="" class="icon" />
        <div>添加新的账户</div>
      </div>
    </div>

    <div class="accountlist" v-if="ifchina && listindex==1">
      <div class="accountitem" v-for="(i,j) in accountlist" :key="j">
        <div class="hostinfo">
          <div v-if="i.type==4">
            <img src="@/static/images/bank.png" alt="" class="icon" />
            <span class="accounttype">银行卡</span>
          </div>
           <div v-if="i.type==2">
            <img
              src="@/static/images/walletzfb.png"
              alt=""
              class="icon icon1"
            />
            <span class="accounttype">支付宝</span>
          </div>
             <div v-if="i.type==1">
            <img
              src="@/static/images/walletweixin.png"
              alt=""
              class="icon icon1"
            />
            <span class="accounttype">微信</span>
          </div>
          <div class="btns">
            <div class="btn"  @click="navto(1,i.wallectid)">修改</div>
            <div class="btn1" @click="del(i.wallectid)">删除</div>
          </div>
        </div>
         <div class="zhanghao" v-if="i.type==4">账号 <span>{{i.bankcode}}</span></div>
        <div class="zhanghao" v-else>账号 <span>{{i.account}}</span></div>
      </div>

      <!-- <div class="accountitem">
        <div class="hostinfo">
          <div>
            <img
              src="@/static/images/walletzfb.png"
              alt=""
              class="icon icon1"
            />
            <span class="accounttype">支付宝</span>
          </div>

          <div class="btns">
            <div class="btn">修改</div>
            <div class="btn1">删除</div>
          </div>
        </div>
        <div class="zhanghao">账号：6217 **** **** **** 175</div>
      </div> -->

      <!-- <div class="accountitem">
        <div class="hostinfo">
          <div>
            <img
              src="@/static/images/walletweixin.png"
              alt=""
              class="icon icon1"
            />
            <span class="accounttype">微信</span>
          </div>

          <div class="btns">
            <div class="btn">修改</div>
            <div class="btn1">删除</div>
          </div>
        </div>
        <div class="zhanghao">账号：6217 **** **** **** 175</div>
      </div> -->
    </div>
    <div class="accountlist" v-if="!ifchina && listindex==1">
      <!-- <div class="accountitem">
        <div class="hostinfo">
          <div>
            <img src="@/static/images/foreignbank.png" alt="" class="icon" />
            <span class="accounttype">银行卡</span>
          </div>

          <div class="btns">
            <div class="btn">修改</div>
            <div class="btn1">删除</div>
          </div>
        </div>
        <div class="zhanghao">账号：6217 **** **** **** 175</div>
      </div> -->

      <div class="accountitem" v-for="(i,j) in accountlist" :key="j">
        <div class="hostinfo">
          <div v-if="i.type==4">
            <img src="@/static/images/foreignbank.png" alt="" class="icon" />
            <span class="accounttype">银行卡</span>
          </div>

          <div v-else>
            <img src="@/static/images/paypi.png" alt="" class="icon icon1" />
            <span class="accounttype">paypal</span>
          </div>

          <div class="btns">
              <div class="btn"  @click="navto(1,i.wallectid)">修改</div>
            <div class="btn1" @click="del(i.wallectid)">删除</div>
          </div>
        </div>
         <div class="zhanghao" v-if="i.type==4">账号 <span>{{i.bankcode}}</span></div>
        <div class="zhanghao" v-else>账号 <span>{{i.account}}</span></div>
      </div>
    </div>
    <div class="mingxilist" v-if="ifchina && listindex==2">
      <div class="mingxitop">
        <div class="tabs">
          <span class="tabtitle">明细查询</span>

          <div :class="tabindex == 0 ? 'on' : ''" @click="tabchange(0)">
            全部
          </div>
          <div :class="tabindex == 1 ? 'on' : ''" @click="tabchange(1)">
            收入
          </div>
          <div :class="tabindex == 2 ? 'on' : ''" @click="tabchange(2)">
            支出
          </div>
        </div>
        <a-range-picker @change="onChange" class="choosedate"  :placeholder="['请选择开始日期', '请选择结束日期']"/>
      </div>
 
      <div>
        <table class="table">
          <thead>
            <tr class="head">
              <th>日期</th>
              <th>类型</th>
              <th>金额</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(i,j) in salelist" :key="j">
              <td>{{i.created_at}}</td>
              <td>{{i.typename}}</td>
              <td class="moneyadd moneyreverse" v-if="i.type==2">-￥{{i.money}}</td>
              <td class="moneyadd " v-else>+￥{{i.money}}</td>
              <td @click="navto(3,i.accountid)">查看详情{{i.accountid}}</td>
            </tr>
         
          </tbody>
        </table>
      </div>
    </div>
    <NavBottom class="navbottom"></NavBottom>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, toRaw } from "vue";
import NavBottom from "@/components/NavBottom.vue";
import router from "@/router";
import store from '@/store';
import { deleteaccount, getwallect, saleinfo } from "@/api";
export default defineComponent({
  name: "Wallet",
  components: {
    NavBottom,
  },
  setup() {
    const ifchina = true;
    const ifmingxi = false;
    const salelist=ref<Array<any>>([])
    const accountlist =ref<Array<any>>([])
    const listindex=ref<number>(1)
    const state=ref<number>(0)
    const dates=ref<Array<string>>(["",""])
    onMounted(async () => {

      salelist.value = await saleinfo();
      accountlist.value=await  getwallect();
      console.log(store.state.userinfo)
    });
    const tabindex = ref(0);
    async function tabchange(e: number): Promise<void> {
      tabindex.value = e;
      state.value=e
      salelist.value=await saleinfo({status:e,bdate:dates.value[0],edate:dates.value[1]});
      // console.log(videolist)
    }
    function listchange(e: number){
      listindex.value=e
    }
    async function onChange(e: any,dateString:string){
      console.log(dateString)
      dates.value[0]=dateString[0]
      dates.value[1]=dateString[1]
      salelist.value=await saleinfo({bdate:dateString[0],edate:dateString[1],status:state.value});
    }
    async function del(e: number){
      deleteaccount(e)
    }
    function navto(index: number,id?:number) {
      let url = "";
      switch (index) {
        case 1:
          
          url = "/mine/addaccount"
          console.log(url)
          break;
        case 2:
          url = "/mine/cashout";
          break;
        case 3:
          url = "/mine/transactionxq"
      }
      if(id){
        router.push({
          path: url,
          query:{id:id}
        });
      }else{
        router.push({
          path: url
        });
      }
   
    }
    return {
      ifchina,
      ifmingxi,
      navto,
      tabindex,
      tabchange,
      salelist,
      accountlist,
      listchange,
      listindex,
      onChange,
      dates,
      del,
      store
    };
  },
});
</script>
<style lang="scss" scoped>
.wallet ::v-deep(.ant-breadcrumb) > span:last-child {
  color: #08ae98;
}
.wallet ::v-deep(.ant-calendar-picker) {
  width: 271px;
  height: 25px;
}
.wallet ::v-deep(.ant-calendar-range-picker-input){
  height: 25px;
  font-size:9px;
}
.wallet ::v-deep(.ant-calendar-date){
  font-size: 12px;
}
.wallet {
  .tabs {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: bold;
    color: #111;
    padding: 11px 0;
    .tabtitle {
      width: 60px;
      margin-right: 30px;
    }
    > div {
      margin-right: 38px;
      cursor: pointer;
      text-align: center;
      width: 40px;
      font-size:11px;
    }
    .on {
      color: #08ae98;
      position: relative;
      &::before {
        content: "";
        display: block;
        position: absolute;
        bottom: -6px;
        left: 8px;
        width: 25px;
        height: 1px;
        background-color: #08ae98;
      }
    }
  }
  .mywallet {
    width: 761px;
    margin-right: 18px;
    background: white;
    border-radius: 17px;
  }
  .top {
    // width: 761px;
    // height: 228px;
    margin-top: 23px;
    display: flex;
    .topinfo {
      display: flex;
    }
    .title {
      color: #111111;
      font-size: 11px;
      font-weight: bold;
      padding-left: 40px;
      padding-top: 40px;
      margin-right: 506px;
    }
    .topbtn {
      width: 57px;
      height: 18px;
      font-size: 10px;
      text-align: center;
      line-height: 18px;
      color: #08ae98;
      font-weight: 500;
      border: 1px solid #08ae98;
      border-radius: 3px;
      margin-top: 35px;
      margin-right: 12px;
    }
    .topbtn1 {
      color: #d22c2e;
      border: 1px solid #d22c2e;
    }
    .line {
      width: 682px;
      height: 1px;
      background: #eeeeee;
      margin: 0 auto;
      margin-top: 11px;
    }
    .accounts {
      width: 682px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      padding-bottom: 10px;
      .left {
        width: 50%;
        display: flex;
        justify-content: center;
        color: #111111;
        font-size: 11px;
        .texts {
          margin: auto 0;
          margin-left: 23px;
          .moneyicon {
            font-size: 14px;
          }
          .float {
            font-size: 13px;
          }
        }
        .pic {
          width: 98px;
          height: 100px;
          margin: auto 0;
        }
        .num {
          color: #08ae98;
          font-size: 26px;
        }
      }
      .linecolumn {
        width: 1px;
        height: 142px;
        background: #eeeeee;
        margin: auto 0;
      }
    }
    .add {
      width: 371px;
      height: 228px;

      background: #ffffff;
      border-radius: 17px;
      color: #08ae98;
      font-weight: 500;
      font-size: 11px;
      margin-left: 18px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      .icon {
        width: 31px;
        height: 31px;
        margin: 0 auto;
        margin-bottom: 11px;
      }
    }
  }

  .accountlist {
    margin-top: 17px;
    display: flex;
    width:1170px;
    flex-wrap: wrap;
    .accountitem {
      width: 372px;
      height: 226px;
      background: white;
      border-radius: 17px;
      margin-left: 17px;
      margin-bottom: 17px;
      .hostinfo {
        display: flex;
        justify-content: space-around;
        padding-top: 38px;
        .icon {
          width: 47px;
          height: 29px;
          margin-right: 11px;
        }
        .icon1 {
          width: 29px !important;
          height: 29px !important;
        }
        .accounttype {
          font-size: 13px;
          color: #111111;
          font-weight: 500;
        }
        .btns {
          display: flex;
        }
        .btn {
          width: 46px;
          height: 23px;
          border: 1px solid #febd3b;
          border-radius: 3px;
          color: #febd3b;
          font-size: 11px;
          text-align: center;
          line-height: 23px;
          margin-right: 11px;
        }
        .btn1 {
          width: 46px;
          height: 23px;
          border: 1px solid #d12c2e;
          border-radius: 3px;
          font-size: 11px;
          text-align: center;
          line-height: 23px;
          color: #d12c2e;
        }
      }
      .zhanghao {
        color: #111111;
        font-size: 11px;
        margin-top: 119px;
        margin-left: 34px;
        >span{
          margin-left:15px
        }
      }
    }
  }

  .mingxilist {
    width: 1150px;
    max-height: 533px;
    background: white;
    border-radius: 18px;
    margin-top: 18px;
    .mingxitop {
      display: flex;
      justify-content: space-between;
    }
    .choosedate{
      margin:auto 0;
      margin-right: 39px;
    }
    .tabs {
      display: flex;
      flex-wrap: nowrap;
      padding-top: 35px;
      padding-left: 40px;
    }
    .beforetab {
      color: #121212;
      font-size: 13px;
      line-height: 35px;
      font-weight: bold;
      margin-right: 57px;
    }
  }
  .table {
    width: 1150px;
    max-height: 365px;
    text-align: center;
    color: #343434;
    font-size: 12px;
    margin-top: 13px;
    tr {
      width: 1150px;
      height: 40px;
      // border-bottom: 1px solid red;
    }
    tr:nth-child(even) {
      //偶数行
      background: #f7fcfc;
    }
    .head {
      width: 1150px;
      height: 43px;
      color: white;
      background: #08ae98;
    }
    .moneyadd {
      color: #08ae98;
    }
    .moneyreverse {
      color: #d22d2e;
    }
  }
  .navbottom {
    margin-top: 160px;
  }
}
</style>