<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-row :gutter="20">
        <el-col :span="6" class="col" v-action="'jiesuan.Jiesuan.accountInfo'">
          <div class="text-lg text-red-500">
            ￥{{ applyData.yue_money }}
          </div>
          <div class="text-base">
            账户余额
          </div>
        </el-col>
        <el-col :span="6" class="col" v-action="'jiesuan.Jiesuan.accountInfo'">
          <div class="text-lg text-green-500">
            ￥{{ applyData.tixian_money }}
          </div>
          <div class="text-base">
            审核中
          </div>
        </el-col>
        <el-col :span="6" class="col" v-action="'jiesuan.Jiesuan.accountInfo'">
          <div class="text-lg text-red-300">
            ￥{{ applyData.total_dakuan }}
          </div>
          <div class="text-base">
            累计打款
          </div>
        </el-col>
        <el-col :span="6" class="col">
          <div class="flex mb-4 text-lg text-red-500" v-action="'jiesuan.Jiesuan.tixian'">
            <el-button type="primary" :disabled="applyBank.length <= 0" size="default"
              @click="openType('applyVisible', applyData)">申请提现</el-button>
            <div v-if="applyBank.length <= 0" class="ml-3">未配置收款账户，<span
                @click="router.push('/jiesuanManage/bankAccount')" class="text-blue-400 cursor-pointer">去配置</span></div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <div class="p-5">注：每日的结算数据需要在次日统计完成后才能展示</div>

    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handChange">
      <el-tab-pane label="提现记录" name="withdrawalRecord" v-action="'jiesuan.Jiesuan.listTixian'">
        <withdrawalRecord></withdrawalRecord>
      </el-tab-pane>
      <el-tab-pane label="每日结算数据" name="recharge">
        <Search :search="search" :reset="resetQuery">
          <template v-slot:body>
            <el-form-item label="结算时间">
              <el-date-picker unlink-panels clearable @change="applyTimeChange" format="YYYY/MM/DD"
                value-format="YYYY-MM-DD" v-model="query.applyTime" type="daterange" :shortcuts="shortcuts"
                range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" />
            </el-form-item>
          </template>
          <template v-slot:extra_button>
            <exportExcel api="jiesuanManage/jiesuan/list" sheet_name="结算中心" :title_obj="titleObj"
              :extro_params="{ is_export: 1, ...query }">
            </exportExcel>
          </template>
        </Search>
        <div class="table-default">
          <el-table :data="tableData" class="mt-3" v-loading="loading">
            <el-table-column prop="jiesuan_date" label="时间" min-width="200px" />
            <el-table-column prop="charge_money" label="日充值总额" show-overflow-tooltip min-width="200px">
            </el-table-column>
            <el-table-column prop="tuikuan_money" show-overflow-tooltip label="当日退款" min-width="200px">
            </el-table-column>
            <el-table-column prop="share_rate" label="分成比例" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="jiesuan_money" label="日结算总额" show-overflow-tooltip min-width="200px">
            </el-table-column>
            <el-table-column label="操作" min-width="200px">
              <template #default="scope">
                <el-button link type="primary" size="small"
                  @click="openType('orderDetailVisible', scope.row)">查看订单详情</el-button>
                <br />
              </template>
            </el-table-column>
          </el-table>
          <Paginate />
        </div>
      </el-tab-pane>
    </el-tabs>
    <Dialog v-model="orderDetailVisible" width="80%" title="订单详情" destroy-on-close>
      <orderDetail @close="closeType('orderDetailVisible')" :primary="orderDetailData"></orderDetail>
    </Dialog>
    <Dialog v-model="applyVisible" width="50%" title="申请提现" destroy-on-close>
      <create @close="closeType('applyVisible')" :primary="applyData"></create>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { shortcuts } from '@/utils/shortcuts'
import { useRouter, useRoute } from 'vue-router'
import { InfoFilled } from '@element-plus/icons-vue';
import { useGetList } from '@/hook/curd/useGetList';
import { titleObj } from "./excelTitle"
import { jiesuanManageJiesuanAccountInfo, jiesuanManageBankAccountListAvailableBankCard } from '@/api/settlement/index'
import orderDetail from './orderDetail/index.vue'
import create from './form/create.vue'
import withdrawalRecord from './withdrawalRecord/index.vue'
import moment from 'moment';
const start_date = moment().startOf('month').format('YYYY-MM-DD')
const end_date = moment().endOf('month').format('YYYY-MM-DD')
const activeName = ref('withdrawalRecord')

const api = 'jiesuanManage/jiesuan/list';
const router = useRouter()
const route = useRoute()
const { data, query, search, reset, loading } = useGetList(api);
const orderDetailVisible = ref(false)
const orderDetailData = ref({})
const applyData = ref({})
const applyVisible = ref(false)
const rolesIdentify = inject('rolesIdentify')
const applyBank = ref([])
const closeType = (type: string) => {
  switch (type) {
    case 'orderDetailVisible':
      orderDetailVisible.value = false
      break;
    case 'applyVisible':
      applyVisible.value = false
      init()
      break;
  }
  search()
}
const handChange = (tab: any, event: Event) => {
  activeName.value = tab
}

const openType = (type: string, data?: object) => {
  switch (type) {
    case 'orderDetailVisible':
      orderDetailVisible.value = true
      orderDetailData.value = data || {}
      break;
    case 'applyVisible':
      applyVisible.value = true
      break;
  }
}
const applyTimeChange = (e: object) => {
  console.log(e, 'timeChangetimeChangetimeChange');
  if (query.value.applyTime) {
    const timeArr = toRaw(e);
    query.value.jiesuan_date_start_at = timeArr[0]
    query.value.jiesuan_date_end_at = timeArr[1]
  } else {
    delete query.value.jiesuan_date_start_at
    delete query.value.jiesuan_date_end_at
  }
}

const resetQuery = () => {
  reset()
}

const tableData = computed(() => data.value?.data);


const init = () => {
  jiesuanManageBankAccountListAvailableBankCard().then(res => {
    applyBank.value = res.data;
  })
  jiesuanManageJiesuanAccountInfo().then(res => {
    applyData.value = res.data
  })
}
onMounted(() => {
  init()
  search();
});
</script>

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

.col:last-child {
  align-items: start;
}

.table-default {
  .set-warpper {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .wrapper {
    margin: 8px;

    .label {
      margin-right: 6px;
    }

    .content {
      font-size: 15px;
    }
  }
}
</style>
