<template>
  <div class="cashout">
    
    <div class="mingxilist">
      <div class="tabs">
        <div class="beforetab">{{lan.$t('xinzengzhanghu')}}</div>
      </div>
      <div class="line"></div>
      <div class="choose">
        <div class="label">{{lan.$t('xuanzezhanghu')}}</div>
        <!-- <a-radio></a-radio> -->
        <div v-if="ifchina">
          <a-radio-group
            name="radioGroup"
            class="accountlist"
            @change="onChange"
            v-model:value="accountinfo.type"

          >
            <a-radio :value="4">
              <img src="@/static/images/bank.png" alt="" class="icon icon1" />
              <span>{{lan.$t('yinhangka')}}</span>
            </a-radio>
            <a-radio :value="2">
              <img src="@/static/images/walletzfb.png" alt="" class="icon" />
              <span>{{lan.$t('zhifubao')}}</span>
            </a-radio>
            <a-radio :value="1">
              <img src="@/static/images/walletweixin.png" alt="" class="icon" />
              <span>{{lan.$t('weixin')}}</span>
            </a-radio>
          </a-radio-group>
        </div>
        <div v-else>
          <a-radio-group
            name="radioGroup"
            v-model="paytypeforign"
            class="accountlist"
            @change="onChange1"
            :default-value="1"
          >
            <a-radio :value="1">
              <img
                src="@/static/images/foreignbank.png"
                alt=""
                class="icon icon1"
              />
              <span>{{lan.$t('yinhangka')}}</span>
            </a-radio>
            <a-radio :value="2">
              <img src="@/static/images/paypi.png" alt="" class="icon" />
              <span>payple</span>
            </a-radio>
          </a-radio-group>
        </div>
      </div>
      <div class="cashoutmoney" v-if="accountinfo.type == 4 && ifchina">
         <a-form >
          <div>
            <div class="infoitem">
              <span class="label label1">{{lan.$t('xingming')}}</span>
              <a-input v-model:value="accountinfo.mname" class="shuru" :placeholder="lan.$t('shuruxingming')" />
            </div>
            <div class="infoitem">
              <span class="label label1">{{lan.$t('kahao')}}</span>
              <a-input
                v-model:value="accountinfo.bankcode"
                class="shuru"
                :placeholder="lan.$t('shurukahao')"
              />
            </div>
            <div class="infoitem">
              <span class="label label1">{{lan.$t('kaihuhang')}}</span>
              <a-input
                v-model:value="accountinfo.bankname"
                class="shuru shuru2"
                :placeholder="lan.$t('shurukaihuhang')"
              />
            </div>
          </div>
         </a-form>
      </div>
      <div class="cashoutmoney" v-if="accountinfo.type == 2 && ifchina">
        <div>
          <div class="infoitem">
            <span class="label label1">{{lan.$t('zhanghao')}}</span>
            <a-input
              v-model:value="accountinfo.account"
              class="shuru"
              :placeholder="lan.$t('shuruzhifubao')"
            />
          </div>
        </div>
      </div>
      <div class="cashoutmoney" v-if="accountinfo.type == 1 && ifchina">
        <div class="label label1">{{lan.$t('saomabangding')}}</div>
        <div class="ewmbox">
          <img src="@/static/images/erweima.png" alt="" class="ewmpic" />
          <div class="desc">{{lan.$t('zhu')}}：</div>
          <div class="desc desc1">
            {{lan.$t('weixinbangding')}}
          </div>
        </div>
      </div>

      <div class="cashoutmoney" v-if="paytypeforign == 1 && !ifchina">
        <div>
          <div class="infoitem">
            <span class="label label1">{{lan.$t('zhanghuming')}}</span>
            <a-input v-model="accountinfo.mname" class="shuru" :placeholder="lan.$t('shuruxingming')" />
          </div>
          <div class="infoitem">
            <span class="label label1">{{lan.$t('yinhangzhanghu')}}</span>
            <a-input
              v-model="accountinfo.bankcode"
              class="shuru shuru2"
              :placeholder="shurukahao"
            />
          </div>
          <div class="infoitem infoitem1">
            <div class="label label1 label2"> {{lan.$t(yinhangbic)}} /swift code </div>
            <a-input
              v-model="accountinfo.bankname"
              class="shuru shuru1"
              :placeholder="lan.$t('shurukaihuhang')"
            />
          </div>
        </div>
      </div>

          <div class="cashoutmoney" v-if="paytypeforign == 2 && !ifchina">
        <div>
          <div class="infoitem">
            <span class="label label1">{{lan.$t('zhanghao')}}</span>
            <a-input
             v-model:value="accountinfo.account"
              class="shuru"
              :placeholder="lan.$t('shuruzhanghao')"
            />
          </div>
        </div>
      </div>
      <div class="cashoutall submit" @click="sub">{{lan.$t('tijiao')}}</div>
      <NavBottom class="navbottom"></NavBottom>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, toRaw } from "vue";
import NavBottom from "@/components/NavBottom.vue";
import { accountadd, editaccount, getaccountinfo } from '@/api';
import { useRoute } from 'vue-router';
import { useI18n } from '@/utils/i18n';
export default defineComponent({
  name: "Cashout",
  components: {
    NavBottom,
  },
  setup() {
    const lan: any = useI18n();
    const money = ref(0);
    const paytype = ref(4);
    const paytypeforign = ref(1);
    const accountinfo = ref<any>({
      type: 4,
      account:"",
      mname: "",
      bankcode: "",
      bankname: "",
    });
    interface Changes {
        target: {
          value: number;
        };
    }

    const onChange: (e: Changes) => void = (e: Changes) => {
      console.log("radio checked", e.target.value);
      paytype.value = e.target.value;
      accountinfo.value.type=e.target.value
    };
    const onChange1: (e: Changes) => void = (e: Changes) => {
      console.log("radio checked", e.target.value);
      paytypeforign.value = e.target.value;
    };
    function sub(){
      console.log(toRaw(accountinfo.value),11)
      // cosnole.log(useRoute().query.id)
      if(toRaw(accountinfo.value).accountid){
        console.log(300)
        editaccount(toRaw(accountinfo.value).accountid)
      }else{
        console.log(111)
        accountadd(toRaw(accountinfo.value))
      }
      
    }
    const ifchina = ref(true);

    onMounted(async () => {
      if(useRoute().query.id){
        accountinfo.value=await getaccountinfo(useRoute().query.id)
        // console.log(await getaccountinfo(useRoute().query.id),233)
      }
      //  useRoute().query.id
    })
    return {
      money,
      onChange,
      paytype,
      ifchina,
      paytypeforign,
      onChange1,
      sub,
      accountinfo,
      lan
    };
  },
});
</script>
<style lang="scss" scoped>
.cashout ::v-deep(.ant-breadcrumb) > span:last-child {
  color: #08ae98;
}
.cashout ::v-deep(.ant-radio-wrapper) {
  display: flex;
}
.cashout ::v-deep(.ant-radio-checked) ::v-deep(.ant-radio-inner) {
  border-color: #08ae98 !important;
}
.cashout ::v-deep(.ant-radio-inner::after) {
  background: #08ae98 !important;
}
// .cashout ::v-deep(.ant-radio) {
//   //   top: 43px;
// }
.cashout {
  .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;
      .residue {
        font-size: 11px;
        margin: auto 0;
        color: #08ae98;
        position: relative;
        left: -30px;
      }
      .topbtn {
        // width: 89px;
        height: 17px;
        padding-left: 14px;
        padding-right: 14px;
        line-height: 17px;
        border: 1px solid #08ae98;
        border-radius: 3px;
        font-size: 10px;
        color: #08ae98;
        font-weight: 500;
        margin: auto 0;
      }
      .topbtn2 {
        margin-left: 642px;
      }
      .topbtn1 {
        padding-left: 9px;
        padding-right: 9px;
        color: #d12c2e;
        border: 1px solid #d12c2e;
        margin-left: 11px;
      }
    }
    .line {
      width: 1070px;
      height: 1px;
      background: #eeeeee;
      margin: 0 auto;
      margin-top: 11px;
    }
    .beforetab {
      color: #121212;
      font-size: 13px;
      line-height: 35px;
      font-weight: bold;
      margin-right: 57px;
    }
    .choose {
      margin-top: 28px;
      margin-left: 40px;
      display: flex;
      .accountlist {
        display: flex;
        color: #404040;
        font-size: 11px;

        .icon {
          width: 17px;
          height: 17px;
          margin-right: 6px;
        }
        .icon1 {
          width: 28px;
          height: 18px;
        }
      }
    }
    .label {
      color: #808080;
      font-size: 11px;
      margin-right: 28px;
    }
    .label1 {
      margin-left: 40px;
    }
    .label2{
        width: 90px;
         word-wrap:break-word!important
    }
    .cashoutmoney {
      display: flex;
      margin-top: 31px;
      .infoitem {
        margin-bottom: 28px;
      }
      .infoitem1{
          display: flex;
      }
      .shuru {
        width: 171px;
        height: 23px;
        margin-left: 30px;
      }
      .shuru1 {
        margin-left: -15px;
      }
      .shuru2{
          margin-left:18px
      }
      .ewmbox {
        display: flex;
        .ewmpic {
          width: 114px;
          height: 114px;
          margin-right: 23px;
        }
        .desc {
          color: #666666;
          font-size: 10px;
          // line-height: 114px;
          margin: auto 0;
        }
        .desc1 {
          width: 149px;
          position: relative;
          top: 10px;
        }
      }
    }
    .cashoutall {
      width: 67px;
      height: 23px;
      line-height: 23px;
      background: #08ae98;
      border-radius: 3px;
      color: white;
      text-align: center;
      margin-left: 23px;
      font-weight: bold;
    }
    .submit {
      font-size: 10px;
      font-weight: 500;
      position: relative;
      top: 56px;
      left: 20px;
    }
  }

  .navbottom {
    padding-top: 250px;
    padding-bottom: 30px;
  }
}
</style>