<template>
  <div v-action="'jiesuan.FinanceCheck.remit'">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-row :gutter="20">
        <el-col :span="6" class="col">
          <div class="text-lg text-red-500">
            ￥{{ applyData.yue_money }}
          </div>
          <div class="text-base">
            账户余额
          </div>
        </el-col>
        <el-col :span="6" class="col">
          <div class="text-lg text-green-500">
            ￥{{ applyData.tixian_money }}
          </div>
          <div class="text-base">
            审核中
          </div>
        </el-col>
        <el-col :span="6" class="col">
          <div class="text-lg text-red-300">
            ￥{{ applyData.total_dakuan }}
          </div>
          <div class="text-base">
            已打款
          </div>
        </el-col>
      </el-row>
    </el-card>
    <div class="p-5">注：每日的结算数据需要在次日统计完成后才能展示</div>
  </div>
  <el-tabs v-model="activeName" @tab-change="handChange">
    <el-tab-pane label="结算明细" name="billDetails">
      <settleInfo :primary="props.primary" v-if="activeName == 'billDetails'"></settleInfo>
    </el-tab-pane>
    <el-tab-pane label="提现记录" name="withdrawalRecord">
      <withdrawalRecord :primary="props.primary" v-if="activeName == 'withdrawalRecord'"></withdrawalRecord>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import settleInfo from './tables/settleInfo/index.vue'
import withdrawalRecord from './tables/withdrawalRecord/index.vue'
import { jiesuanManageFinanceCheckGetShanghuAccountInfo } from '@/api/settlement/index'
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
const props = defineProps({
  primary: Object,
});
const activeName = ref('billDetails')

const handChange = (tab: TabsPaneContext, event: Event) => {
  activeName.value = tab
}

const applyData = ref({})

if (props.primary) {
  console.log(props.primary.company_uid, 'jiesuanManageFinanceCheckGetShanghuAccountInfojiesuanManageFinanceCheckGetShanghuAccountInfo');
  jiesuanManageFinanceCheckGetShanghuAccountInfo({ company_uid: props.primary.company_uid }).then(res => {
    console.log(res, 'applyDataapplyDataapplyData');
    applyData.value = res.data
  })
}

onMounted(() => {
})

</script>

<style lang="scss" scoped>
.col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100px;
  margin: 0 auto;
  width: 33.33%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;

  .row {
    width: 100%;
    display: flex;

    .item {
      margin: 9px;

      .label {
        font-size: 16px;
      }

      .content {
        font-size: 18px;
        font-weight: 600;
      }
    }
  }

}
</style>
