<template>
  <div class="wallet">
    <div class="top">
      <div class="mywallet">
        <div class="topinfo">
          <div class="title">{{lan.$t('wodeqianbao')}}</div>
          <div style="display: flex">
            <div class="topbtn" @click="navto(2)">{{lan.$t('lijitixian')}}</div>
            <div class="topbtn topbtn1" @click="navto(3)">{{lan.$t('tixianjilu')}}</div>
          </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>{{lan.$t('bangdingyonghu')}}</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>{{lan.$t('zhanghuyue')}}</div>
              <div class="num">
                <!-- <span class="moneyicon" v-if="ifchina">￥</span>
                <span class="moneyicon" v-else> $ </span> -->
                {{store.state.userinfo.money.split('.')[0]}}
                 <span class="float">{{store.state.userinfo.money.split('.')[1]?'.'+store.state.userinfo.money.split('.')[1]:'.00'}}</span>

                <!-- {{store.state.userinfo.money.split('.')[0]}}
                 <span class="float">{{'.'+store.state.userinfo.money.split('.')[1]}}</span> -->


                <!-- {{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>{{lan.$t('tianjiazhanghu')}}</div>
      </div>
    </div>

    <div class="accountlist" v-if="lan.$s()=='zh' && 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">{{lan.$t('yinhangka')}}</span>
          </div>
           <div v-if="i.type==2">
            <img
              src="@/static/images/walletzfb.png"
              alt=""
              class="icon icon1"
            />
            <span class="accounttype">{{lan.$t('zhifubao')}}</span>
          </div>
             <div v-if="i.type==1">
            <img
              src="@/static/images/walletweixin.png"
              alt=""
              class="icon icon1"
            />
            <span class="accounttype">{{lan.$t('weixin')}}</span>
          </div>
          <div class="btns">
            <div class="btn"  @click="navto(1,i.wallectid)">{{lan.$t('xiugai')}}</div>
            <div class="btn1" @click="del(i.wallectid)">{{lan.$t('shanchu')}}</div>
          </div>
        </div>
         <div class="zhanghao" v-if="i.type==4">{{lan.$t('zhanghao0')}} <span>{{i.bankcode}}</span></div>
        <div class="zhanghao" v-else>{{lan.$t('zhanghao0')}} <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="lan.$s()=='en' && 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">{{lan.$t('yinhangka')}}</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)">{{lan.$t('xiugai')}}</div>
            <div class="btn1" @click="del(i.wallectid)">{{lan.$t('shanchu')}}</div>
          </div>
        </div>
         <div class="zhanghao" v-if="i.type==4">{{lan.$t('zhanghao')}} <span>{{i.bankcode}}</span></div>
        <div class="zhanghao" v-else>{{lan.$t('zhanghao')}} <span>{{i.account}}</span></div>
      </div>
    </div>
    <div class="mingxilist" v-if="ifchina && listindex==2">
      <div class="mingxitop">
        <div class="tabs">
          <span class="tabtitle">{{lan.$t('mingxichaxun')}}<img src="@/static/images/wenhao.png" @click="visible = true" /></span>

          <div :class="tabindex == 0 ? 'on' : ''" @click="tabchange(0)">
            {{lan.$t('quanbu')}}
          </div>
          <div :class="tabindex == 1 ? 'on' : ''" @click="tabchange(1)">
            {{lan.$t('shouru')}}
          </div>
          <div :class="tabindex == 2 ? 'on' : ''" @click="tabchange(2)">
            {{lan.$t('zhichu')}}
          </div>
        </div>
        <a-range-picker @change="onChange" class="choosedate"  :placeholder="[lan.$t('kaishiriqi'),lan.$t('jieshuriqi')]"/>
      </div>
 
      <div>
        <table class="table">
          <thead>
            <tr class="head">
              <th>{{lan.$t('riqi')}}</th>
              <th>{{lan.$t('leixing')}}</th>
              <th>{{lan.$t('jine')}}</th>
              <th>{{lan.$t('caozuo')}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(i,j) in salelist.data" :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 style="cursor: pointer;" @click="navto(4,i.accountid)">查看详情</td>
            </tr>
         
          </tbody>
        </table>
        <template v-if="!salelist.total">
            <a-empty />
        </template>
      </div>
      <div class="pages">
        <a-pagination v-if="salelist.total" v-model:current="page" :total="salelist.total" :showLessItems="true" @change="pagechange"/>
      </div>
    </div>
    <a-modal v-model:visible="visible" :footer="null" :title="lan.$t('shuoruguize')" @cancel="visible = false">
      <p>{{lan.$t('shouru1')}}</p>
      <p>{{lan.$t('shouru2')}}</p>
      <p style="color:#D12C2E">{{lan.$t('shouru3')}}</p>
      <p>{{lan.$t('shouru4')}}</p>
      <p>{{lan.$t('shouru5')}}</p>
    
    </a-modal>
    <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";
import { useRoute } from 'vue-router';
import { useI18n } from '@/utils/i18n';
export default defineComponent({
  name: "Wallet",
  components: {
    NavBottom,
  },
  setup() {
    const lan: any = useI18n();
    const ifchina = ref(true);
    const ifmingxi = false;
    const salelist=ref<any>({})
    const accountlist =ref<Array<any>>([])
    const listindex=ref<number>(1)
    const state=ref<number>(0)
    const dates=ref<Array<string>>(["",""])
    const page = ref(1);
    const visible = ref(false);
    onMounted(async () => {
      console.log(useRoute().query)
      listindex.value=1
      if(useRoute().query.ifsale){
        listindex.value=2
      }else{
        listindex.value=1
      }
      salelist.value = await saleinfo();
      accountlist.value=await  getwallect();
      console.log(lan.$s(),"ikoasjno")
      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],page:page.value});
      // 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,page:page.value});
    }
    async function del(e: number){
      await deleteaccount(e);
      accountlist.value = await getwallect();
        
    }
    async function pagechange(e: any) {
      console.log(e)
      page.value=e
      salelist.value=await saleinfo({status:state.value,bdate:dates.value[0],edate:dates.value[1],page: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/transaction";
          break;
        case 4:
          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,
      pagechange,
      lan,
      visible
    };
  },
});
</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;
      &:hover{
        color: #08ae98;
      }
    }
    >span{
      display: flex;
      align-items: center;
      >img{
        margin-left: 8px;
        width: 13px;
        height: 13px;
      }
    }
    .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;
      justify-content: space-between;
    }
    .title {
      color: #111111;
      font-size: 11px;
      font-weight: bold;
      padding-left: 40px;
      padding-top: 40px;
      // margin-right: 506px;
    }
    .topbtn {
      min-width: 57px;
      min-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;
      cursor: pointer;
    }
    .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;
      cursor: pointer;
      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: 368px;
      height: 226px;
      background: white;
      border-radius: 17px;
      margin-right: 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;
          cursor: pointer;
        }
        .btn1 {
          width: 46px;
          height: 23px;
          border: 1px solid #d12c2e;
          border-radius: 3px;
          font-size: 11px;
          text-align: center;
          line-height: 23px;
          color: #d12c2e;
          cursor: pointer;
        }
      }
      .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;
  }
  .pages {
        display: flex;
        justify-content: center;
        margin-top: 46px;
        padding-bottom: 28px;
        ::v-deep(.ant-pagination-next) > .ant-pagination-item-link,
        ::v-deep(.ant-pagination-prev) > .ant-pagination-item-link,
        ::v-deep(.ant-pagination-item),
        ::v-deep(.ant-pagination-jump-next-custom-icon),
        ::v-deep(.ant-pagination-jump-prev-custom-icon) {
        border: 1px solid #08ae98;
        }
        ::v-deep(.ant-pagination-item-active) a {
        color: #fff;
        }
        ::v-deep(.ant-pagination-item-active) {
        background-color: #08ae98;
        }
    }
}
</style>