<template>
    <div class="main-content12 recharge-wrap">
        <h3 class="pagetitle">余额管理</h3>
        <div class="flex-common">
            <div class="flex-between">
                <el-tabs v-model="totalType" @tab-click="handleClick">
                    <el-tab-pane label="余额充值" name="1"></el-tab-pane>
                    <el-tab-pane label="充值记录" name="2"></el-tab-pane>
                    <el-tab-pane label="退款记录" name="3"></el-tab-pane>
                </el-tabs>
                <div class="flex">
                </div>
            </div>
            <div class="mt24" v-if="totalType == '1'">
                <div class="flex-between w552">
                    <div class="wallet-choose">充值选择</div>
                    <div class="wallet-desc flex" v-if="prompt" @click="jumpLink(prompt_link)">{{prompt}}<img style="width: 14px" src="@/assets/input_ex_ic.png"/></div>
                </div>

                <el-form class="el-row demo-ruleForm" ref="formRef">
                    <div class="flex gap24 mt12">
                        <template v-for="item in walletList">
                            <div :key="item.type" class="wallet-item" :class="walletType == item.type ? 'wallet-item-active' : ''" @click="walletClick(item.type)">
                                <img src="@/assets/site/tem-active.svg" class="tem-active" alt="" v-if="walletType == item.type">
                                <div class="wallet-name">{{item.name}}</div>
                                <div class="wallet-num">当前余额<span class="wallet-price">{{item.remain_money}}</span>元</div>
                            </div>
                        </template>
                    </div>

                    <div class="buy-area">
                        <div class="flex-between w552 mt24">
                            <div class="wallet-choose">充值卡面值</div>
                        </div>
                        <div class="flex-between buy-bonus w552 mt12" v-show="Object.keys(bonus).length>0">
                            <img src="@/assets/site/recharge_bonus.png" alt="">
                            <div class="buy-bonus-info">
                                <div class="flex" v-for="(value, key) in bonus" :key="key">
                                    <span>充<b>{{key}}</b>元</span><span>送<b class="red">{{value}}</b>元</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex mt12" v-if="Object.keys(buy_price_types).length>0">
                            <GuipRadio v-model="buy_price_type" :options="buy_price_types" @change="buyLinkClick()"/>
                        </div>
                        <div class="buy-btn flex mt12" v-if="buy_price_link" @click="jumpLink(buy_price_link)">
                            <img src="@/assets/site/tb_buy_btn.svg" alt="">跳转淘宝购买
                        </div>
                        <div class="buy-desc flex mt12" v-if="links_desc">{{links_desc}}</div>

                        <hr class="buy-hr">

                        <div class="buy-recharge flex gap12">
                            <GuipInput ref="GuipInput" v-model="ordernum" class="w443" column="column" prop="age" placeholder="请输入淘宝订单号" />
                            <GuipButton @click="doRecharge()">现在充值</GuipButton>
                        </div>

                        <div class="buy-info">
                            <p class="red">充值流程：</p>
                            <p>1.填写订单编号</p>
                            <p>2.点击【现在充值】按钮</p>
                            <p>3.到淘宝确认收货</p>
                            <p>4.点击弹层中已【确认收货】按钮</p>
                        </div>
                    </div>

                </el-form>
            </div>
            <el-form class="mt24" v-else>
                <GuipTable :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
                    <template v-if="totalType == '2'">
                        <el-table-column prop="tid" label="订单号"></el-table-column>
                        <el-table-column prop="money">
                            <template slot="header">
                                充值金额
                                <span class="money-header" v-if="total_money>0"> 总计 {{ total_money }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="pay_date" label="充值时间"></el-table-column>
                        <el-table-column prop="remain_money" label="充值前账号余额"></el-table-column>
                        <el-table-column prop="type_desc" label="类型"></el-table-column>
                        <el-table-column prop="opt" label="操作">
                            <template slot-scope="scope">
                                <GuipButton v-if="scope.row.confirm" type="ignore" class="mr-16" :btnstyle="confirmBtnStyle">确认收货</GuipButton>
                                <div v-else>----</div>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else>
                        <el-table-column prop="tid" label="订单号"></el-table-column>
                        <el-table-column prop="tid" label="退回成本"></el-table-column>
                        <el-table-column prop="tid" label="时间"></el-table-column>
                        <el-table-column prop="tid" label="充值前账号余额"></el-table-column>
                        <el-table-column prop="tid" label="检测类型"></el-table-column>
                        <el-table-column prop="tid" label="退款前论文状态"></el-table-column>
                        <el-table-column prop="tid" label="订单金额"></el-table-column>
                        <!--                    <el-table-column prop="tid" label="退款金额"></el-table-column>-->
                        <!--                    <el-table-column prop="tid" label="退款方式"></el-table-column>-->
                        <!--                    <el-table-column prop="tid" label="退款时间"></el-table-column>-->
                        <!--                    <el-table-column prop="tid" label="退款理由"></el-table-column>-->
                        <el-table-column prop="tid" label="退款详情"></el-table-column>
                    </template>


                    <!--                    <el-table-column prop="date1" label="站点名称" min-width="130px" v-if="totalType == '2'">-->
                    <!--                        <template slot-scope="scope">-->
                    <!--                            <div class="flex">-->
                    <!--                                {{ nameList[scope.row.id] }}-->
                    <!--                            </div>-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->


                </GuipTable>
                <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
                               :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
                               :total="parseInt(total)">
                </el-pagination>
            </el-form>
        </div>
    </div>
</template>
<script>


import GuipRadio from "@/components/GuipRadio.vue";
import GuipInput from "@/components/GuipInput.vue";
import GuipButton from "@/components/GuipButton.vue";
import GuipTable from "@/components/GuipTable.vue";

export default {
    components: {
        GuipTable,
        GuipButton,
        GuipInput,
        GuipRadio

    },
    props: {
        total_type: {
            type: String,
            default: '1'
        },
    },
    data() {
        return {
            totalType:'1',
            tableLoading:false,

            walletType: '',
            walletList:[],

            prompt:'',
            prompt_link:'',
            bonus:[],
            buy_price_type: '',
            buy_price_types: {},
            buy_price_link: '',
            buy_price_links: {},
            links_desc: '',

            ordernum:'',

            tableKey: '',
            tableList:[],
            currentPage: 1,    //当前页
            pageSize: 20,   //每页的容量
            total: 0,   //列表总数
            total_money: 0,   //列表总数

            confirmBtnStyle: {
                'background':'#FF4D4F',
                'color':'#FFFFFF',
                'border':'1px solid #FF4D4F',
                'border-radius':'4px',
                'width': '88px',
                'height': '33px',
                'font-size': '12px',
            }
        }
    },
    mounted() {
        this.$nextTick(()=>{
            this.totalType = this.total_type;
            this.handleClick()
        })
    },
    methods: {
        walletClick(type){
            this.walletType = type
            this.walletList.forEach(item => {
                if(item.type === type){
                    this.prompt = item.prompt
                    this.prompt_link = item.prompt_link
                    this.bonus = item.bonus

                    item.links.forEach((v,idx) => {
                        this.buy_price_types[idx] = v.face_val+'元'
                        this.buy_price_links[idx] = v.url
                    })

                    this.buy_price_type = '0'
                    this.buy_price_link = this.buy_price_links[this.buy_price_type]
                    this.links_desc = item.links_desc
                }
            })
        },
        jumpLink(link){
            window.open(link, '_blank');
        },
        buyLinkClick(){
            this.buy_price_link = this.buy_price_links[this.buy_price_type];
        },
        handleClick(){
            this.tableList = []
            this.tableKey = Math.random();
            if(this.totalType == 1) this.getRechargeData()
            if(this.totalType == 2) this.getRechargeList()
            if(this.totalType == 3) this.getChktypeStats()
        },
        getRechargeData() {
            try {
                this.$http('POST', '/agentnew/ajax_get_recharge_data', {date: this.date}).then(response => {
                    this.$nextTick(() => {
                        this.walletList = response.data
                        if(this.walletType == '') this.walletClick(response.data[0].type)
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            }
        },
        getRechargeList() {
            this.tableLoading = true
            try {
                this.$http('POST', '/agentnew/ajax_get_recharge_list', {
                    type: this.walletType,
                    cur_page: this.currentPage,
                    page_size: this.pageSize
                }).then(response => {
                    this.tableLoading = false
                    this.$nextTick(() => {
                        this.tableList = response.data.list
                        this.total = response.data.total
                        this.total_money = response.data.total_money
                        console.log(this.total_money)
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            } finally {
                this.tableLoading = false
            }
        },
        getChktypeStats() {
            this.tableLoading = true
            try {
                this.$http('POST', '/agentnew/ajax_get_chktype_stats', {date: this.date}).then(response => {
                    this.tableLoading = false
                    this.$nextTick(() => {
                        this.tableList = response.data.list
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            } finally {
                this.tableLoading = false
            }
        },
        doRecharge(){
            try {
                this.$http('POST', '/agentnew/ajax_do_recharge', {orderId: this.ordernum,type: this.walletType}).then(response => {
                    if (response.status) {
                        this.$message.success('充值成功');
                        return true;
                    }
                    this.$message.error(response.info);
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            }
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getRechargeList()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getRechargeList()
        },
    }
}

</script>
<style lang="scss" scoped>
.recharge-wrap{
  .pagetitle {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #1E2226;
    margin-top: 8px;
  }
  .w552{
    width: 552px;
    letter-spacing: 0.08em;
  }
  .w443{
    width: 443px;
    letter-spacing: 0.08em;
  }
  .wallet-choose{
    font-size: 14px;
    color: #1E2226;
  }
  .wallet-desc{
    font-size: 12px;
    color: #8A9099;
    cursor: pointer;
  }
  .wallet-item{
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    padding: 16px 18px;
    width: 264px;
    letter-spacing: 0.08em;
    border-radius: 8px;
    background: #F6F7FA;
    box-sizing: border-box;

    .wallet-name{
      color: #1E2226;;
      font-size: 14px;
      font-weight: bold;
    }
    .wallet-num{
      font-size: 12px;
      color: #626573;
      padding: 0 2px;
    }
    .wallet-price{
      font-size: 22px;
      font-weight: bold;
      color: #626573;
    }
  }

  .wallet-item-active{
    position: relative;
    background: #F2F7FF;
    .tem-active{
      position: absolute;
      right: 0;
      top: 0;
      width: 30px;
      height: 30px;
    }
    .wallet-name{
      color: #006AFF;
    }
  }

  .gap24 {
    gap: 24px;
    width: 100%;
    align-items: stretch;
  }

  .buy-area{
    .buy-btn{
      font-size: 12px;
      width: 139px;
      color: #006AFF;
      letter-spacing: 0.08em;
      padding: 9px 16px;
      gap: 6px;
      border-radius: 4px;
      border: 1px solid #006AFF;
      box-sizing: border-box;
    }

    .buy-bonus{
      position: relative;
      .buy-bonus-info{
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        top:54px;
        left: 22px;
        width: 510px;
        gap: 3px;
        color: #626573;
        div{
          width: calc(50% - 15px);
          gap: 7px;
          b{
            padding: 0 4px;
          }
          .red{
            background: linear-gradient(180deg, #DB4CBB 0%, #EB202C 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
          }
        }
      }
    }

    .buy-desc{
      font-size: 12px;
      letter-spacing: 0.08em;
      color: #006AFF;
    }

    .buy-hr{
      border: 1px dashed #BABDC2;
      margin: 32px 0;
    }

    .buy-info{
      width: 552px;
      color: #8A9099;
      font-size: 12px;
      letter-spacing: 0.08em;
      background: #F6F7FA;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      text-align: left;
      box-sizing: border-box;
      margin-top: 24px;
      .red{
        color: #FF4D4F;
      }
    }
  }
}

.money-header{
  color: #626573;
  margin-left: 8px;
}

::v-deep .el-form-item {
  margin: 0;
}
</style>