<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">
            <img src="@/static/images/account.png" alt="" class="pic" />
            <div class="texts">
              <div>绑定用户</div>
              <div class="num">3</div>
            </div>
          </div>
          <div class="linecolumn"></div>
          <div class="left">
            <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>
                880
                <span class="float">.00</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 && !ifmingxi">
      <div class="accountitem">
        <div class="hostinfo">
          <div>
            <img src="@/static/images/bank.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">
        <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 && !ifmingxi">
      <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">
        <div class="hostinfo">
          <div>
            <img src="@/static/images/paypi.png" alt="" class="icon icon1" />
            <span class="accounttype">paypal</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="mingxilist">
      <div class="tabs">
        <div class="beforetab">明细查询</div>
      </div>
      <div>
        <table class="table">
          <thead>
            <tr class="head">
              <th>日期</th>
              <th>类型</th>
              <th>金额</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyadd">+￥320</td>
              <td>查看详情</td>
            </tr>
            <tr>
              <td>2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyreverse">+￥320</td>
              <td>查看详情</td>
            </tr>

            <tr>
              <td>2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyadd">+￥320</td>
              <td>查看详情</td>
            </tr>
            <tr>
              <td >2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyadd">+￥320</td>
              <td>查看详情</td>
            </tr>
            <tr>
              <td>2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyadd">+￥320</td>
              <td>查看详情</td>
            </tr>
            <tr>
              <td>2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyadd">+￥320</td>
              <td>查看详情</td>
            </tr>
            <tr>
              <td>2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyadd">+￥320</td>
              <td>查看详情</td>
            </tr>
            <tr>
              <td>2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyadd">+￥320</td>
              <td>查看详情</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <NavBottom class="navbottom"></NavBottom>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import NavBottom from "@/components/NavBottom.vue";
import router from '@/router';
export default defineComponent({
  name: "Wallet",
  components: {
    NavBottom,
  },
  setup() {
    const ifchina = false;
    const ifmingxi = true;
    function navto(index: number){
      let url = "";
      switch (index){
        case 1: url = "/mine/addaccount"; break;
        case 2: url = "/mine/cashout"; break;
      }
      router.push({
        path: url
      })
    }
    return {
      ifchina,
      ifmingxi,
      navto
    };
  },
});
</script>
<style lang="scss" scoped>
.wallet ::v-deep() .ant-breadcrumb > span:last-child {
  color: #08ae98;
}
.wallet {
  .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;
    .accountitem {
      width: 372px;
      height: 226px;
      background: white;
      border-radius: 17px;
      margin-left: 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;
      }
    }
  }

  .mingxilist {
    width: 1150px;
    height: 533px;
    background: white;
    border-radius: 18px;
    margin-top: 18px;
    .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;
    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>