<template>
    <el-container class="flex-column">
        <el-main>
            <el-card shadow="never" class="borderNone mb10">
                <template #header>
                    <div class="news-title">账户总览 <span>(单位/元)</span>
                        <template v-if="searchData"><span>截止：{{ searchData }}</span></template>
                    </div>
                </template>
                <div class="user-card-body">
                    <div class="card-item">
                        <div class="card-num">{{ totalData?totalData.t1:'0' }} <span>元</span></div>
                        <el-tooltip :width="300" effect="dark" placement="bottom-start">
                            <template #content>当前商户的各账户余额之和</template>
                            <div class="card-tips">总资金 <el-icon><el-icon-question-filled /></el-icon></div>
                        </el-tooltip>
                    </div>
                    <div class="card-item">
                        <div class="card-num">{{ totalData?totalData.t1:'0' }} <span>元</span></div>
                        <el-tooltip :width="200" effect="dark" placement="bottom-start">
                            <template #content>订单发起结算或分账后会到可提现<br />账户内只有该账户的资金支持提<br />现</template>
                            <div class="card-tips">可提现总资金 <el-icon><el-icon-question-filled /></el-icon></div>
                        </el-tooltip>
                    </div>
                    <div class="card-item">
                        <div class="card-num">{{ totalData?totalData.t1:'0' }} <span>元</span></div>
                        <el-tooltip :width="300" effect="dark" placement="bottom-start">
                            <template #content>用户支付后金额进入到商户在途户<br />中，商户发起分账后资金才能从在<br />途户结算到可提现资金。</template>
                            <div class="card-tips">在途总资金 <el-icon><el-icon-question-filled /></el-icon></div>
                        </el-tooltip>
                    </div>
                    <div class="card-item">
                        <div class="card-num">{{ totalData?totalData.t1:'0' }} <span>元</span></div>
                        <el-tooltip :width="300" effect="dark" placement="bottom-start">
                            <template #content>平台结合商家营业情况综合确定冻<br />结金额，冻结金额会定期更新</template>
                            <div class="card-tips">冻结总资金 <el-icon><el-icon-question-filled /></el-icon></div>
                        </el-tooltip>
                    </div>
                </div>
            </el-card>
            <el-card shadow="never" class="borderNone mb10">
                <template #header>
                    <div class="news-title-btn">
                        <div class="h3">账户列表</div>
                        <el-button type="primary" icon="el-icon-plus" @click="table_add">新增进件</el-button>
                    </div>
                </template>
                <el-table :data="tableData">
                    <el-table-column prop="company_name" label="企业名称" width="220" />
                    <el-table-column prop="company_number" label="统一社会信用码" />
                    <el-table-column prop="city_name" label="所在省市区" width="220" />
                    <el-table-column prop="legal_name" label="法人姓名" width="150" />
                    <el-table-column prop="legal_mobile" label="法人手机号" width="150" />
                    <el-table-column prop="bank_number" label="对公帐号" width="150" />
                    <el-table-column prop="bank_code" label="开户行编码" width="120" />
                    <el-table-column label="状态" prop="enable" width="120" align="center">
                        <template #default="scope">
                            <div class="status-success" v-if="scope.row.status==1"><sc-status-indicator type="success"></sc-status-indicator> 已完成</div>
                            <div class="status-danger" v-if="scope.row.status==0"><sc-status-indicator type="danger"></sc-status-indicator> 审核中</div>
                            <div v-if="scope.row.status==2">
                                <el-popover :width="300" trigger="hover" placement="top-start" title="驳回原因">
                                    <template #reference>
                                        <div class="status-danger" v-if="scope.row.status==2"><sc-status-indicator type="danger"></sc-status-indicator> 审核驳回 <el-icon><el-icon-question-filled /></el-icon></div>
                                    </template>
                                    <div v-html="scope.row.remark"></div>
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_at" label="进件时间" width="150" />
                    <el-table-column label="操作" width="120" align="left" fixed="right">
                        <template #default="scope">
                            <el-button-group>
                                <el-button size="small" type="warning" text @click="table_edit(scope.row)" v-if="scope.row.status == 2">重新进件</el-button>
                                <el-button size="small" text v-else>-</el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-main>
    </el-container>
    <formMain ref="formMain" @success="handleSuccess"></formMain>
</template>

<script>
import formMain from './components/form'
export default {
    components: {
        formMain
    },
    data(){
        return {
            totalData:null,
            searchData:"",
            totalLoading:false,
            tableData:[]
        }
    },
    mounted(){
        this.getOpen()
    },
    methods: {
        async getOpen(){
            var resp = await this.$API.finance.open.get();
            this.tableData = resp.data;
        },
        table_add(){
            if (this.tableData.length > 0) return this.$message.error("请耐心等待审核，无需重复进件")
            this.$nextTick(() => {
                this.$refs.formMain.open("add")
            })
        },
        table_edit(data){
            this.$nextTick(() => {
                this.$refs.formMain.open("edit").setData(data)
            })
        },
        handleSuccess(){
            this.$emit("success");
        }
    }
}
</script>

<style>
.user-card-body{display: flex;align-items: center;justify-content: space-around;padding: 10px 0;}
.user-card-body .card-item{text-align: center;}
.user-card-body .card-item .card-num span{font-size: 12px;color: #666;font-weight: normal;}
.user-card-body .card-tips{font-size: 12px;color: #666;display: flex;align-items: center;cursor: pointer;}
.user-card-body .card-tips i{font-style: normal;margin-left: 5px;}
.user-card-body .card-num{font-size: 20px;font-weight: bold;}
.mb10{margin-bottom: 15px;}
.news-title-btn{display: flex;align-items: center;justify-content: space-between;}
.news-title-btn .h3{display: flex;align-items: center;}
.news-title-btn .h3::before{content: "";width: 4px;height: 16px;display: block;background-color: var(--el-color-primary);;margin-right: 8px;}
.news-title{font-size: 16px;color: #000;font-weight: bold;margin-bottom: 10px;display: flex;align-items: center;}
.news-title::before{content: "";width: 4px;height: 16px;display: block;background-color: var(--el-color-primary);;margin-right: 8px;}
.news-title span{margin-left: 10px;font-weight: normal;color: #666;font-size: 12px;}
</style>