<template>
  <div>
    <Search :search="search" :reset="resetQuery">
      <template v-slot:body>
        <el-form-item label="结算时间">
          <el-date-picker unlink-panels clearable @change="createTimeChange" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
            v-model="query.createTime" 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" show-overflow-tooltip label="日充值总额" min-width="200px">
        </el-table-column>
        <el-table-column prop="tuikuan_money" label="当日退款" show-overflow-tooltip>
        </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>
      <Paginate />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { shortcuts } from '@/utils/shortcuts'
import { useGetList } from '@/hook/curd/useGetList';
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 api = 'jiesuanManage/jiesuan/list';
const props = defineProps({
  primary: Object,
});
import { titleObj } from './excelTitle'
const { data, query, search, reset, loading } = useGetList(api);

const createTimeChange = (e: object) => {
  console.log(e, 'timeChangetimeChangetimeChange');
  if (query.value.createTime) {
    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);

if (props.primary) {
  console.log(props.primary, 'props.primaryprops.primary');
  query.value.company_uid = props.primary.company_uid
}
onMounted(() => {
  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>
