<style scoped lang="scss">
.system-container {

  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    overflow: auto;

    .el-table {
      flex: 1;
    }

  }
}

.page-content {
  margin-bottom: 20px;
}

.page-pager {
  background-color: var(--el-color-white);
  height: 24px;
}
</style>
<template>
  <div class="system-container layout-padding">
    <el-card shadow="hover" class="layout-padding-auto">

      <el-form
          :model="state.formQuery"
          ref="queryRef"
          size="default" label-width="0px" class="mt5 mb5">
        <ext-select
            v-model="state.formQuery.stationId"
            placeholder="选择站点"
            url="washStation/list"
            url-method="post"
            label-key="stationName"
            value-key="stationId"
            data-key="list"
            clearable
            class="wd200 ml10">
        </ext-select>


        <el-input
            v-model="state.formQuery.tradeNo"
            placeholder="交易流水号"
            clearable
            @blur="loadData(true)"
            class="wd200 ml10">
        </el-input>

        <ext-d-select
            v-model="state.formQuery.type"
            placeholder="分账类型"
            type="SplitRecord.type"
            clearable
            @on-change="loadData(true)"
            class="wd200 ml10"/>

        <el-button class="ml10" plain size="default" type="success" @click="loadData(true)">
          <SvgIcon name="ele-Search"/>
          查询
        </el-button>
      </el-form>

      <el-table
          border
          stripe="stripe"
          :height="state.tableData.height"
          highlight-current-row
          current-row-key="id"
          row-key="id"
          @on-row-click="handleRowClick('view',$event)"
          :data="state.tableData.data"
          v-loading="state.tableData.loading">
        <template #empty>
          <el-empty></el-empty>
        </template>
        <el-table-column
            v-for="field in state.columns"
            :key="field.prop"
            :type="field.type"
            :label="field.label"
            :column-key="field.prop"
            :width="field.width"
            :min-width="field.minWidth"
            :fixed="field.fixed"
            :sortable="field.sortable"
            :show-overflow-tooltip="!field.fixed&&field.width>150">

          <template #default="{row}">
            <template v-if="field.type==='expand'">
              <div class="order-detail">
                <el-table
                    border
                    :data="row.detail"
                    stripe="stripe">
                  <el-table-column width="120" label="服务项目" prop="name"></el-table-column>
                </el-table>
              </div>
            </template>
            <template v-else-if="field.prop==='status'">
              <ext-d-label type="SplitRecord.status" :model-value="row[field.prop]"/>
            </template>
            <template v-else-if="field.prop==='type'">
              <ext-d-label type="SplitRecord.type" :model-value="row[field.prop]"/>
            </template>
            <template v-else-if="['prepayMoney','amount','amountReceivable','amountReceived','cardBalance','coinMoney','discountAmount','discountMoney'].includes(field.prop)">
              {{ u.fmt.fmtMoney(row[field.prop]) }}
            </template>
            <template v-else-if="field.prop==='idleRemainTime'||field.prop==='operationRemainTime'">
              {{ u.fmt.fmtDuration(row[field.prop]) }}
            </template>
            <template v-else-if="['createTime','udpateTime'].includes(field.prop)">
              {{ u.fmt.fmtDateTime(row[field.prop]) }}
            </template>
            <template v-else-if="'toStationId'===field.prop">
              <div class="flex-align-items-center text-align-center">
                <div>
                  {{ row.toStationId }}
                </div>
                <hr/>
                <div>
                  {{ row.toStationName }}
                </div>
              </div>
            </template>
            <template v-else-if="'fromStationId'===field.prop">
              <div class="flex-align-items-center text-align-center">
                <div>
                  {{ row.fromStationId }}
                </div>
                <hr/>
                <div>
                  {{ row.fromStationName }}
                </div>
              </div>
            </template>
            <template v-else>
              <div>{{ row[field.prop] }}</div>
            </template>


          </template>
        </el-table-column>
      </el-table>

      <ext-page class="page-pager" v-model:value="state.pageQuery" @change="loadData(false)"/>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="adminSplitRecord">
import {defineAsyncComponent, reactive, onMounted, onBeforeMount, ref, getCurrentInstance, nextTick, onBeforeUnmount} from 'vue';
import {$body, $get} from "/@/utils/request";
import u from '/@/utils/u'
import {Msg} from "/@/utils/message";

import {useRoute} from "vue-router";
const route = useRoute();

import ExtPage from '/@/components/form/ExtPage.vue'

import mittBus from '/@/utils/mitt';

import {ElButton} from 'element-plus'
import ExtSelect from "/@/components/form/ExtSelect.vue";
import ExtDSelect from "/@/components/form/ExtDSelect.vue";
import ExtDLabel from "/@/components/form/ExtDLabel.vue";


//定义引用
const queryRef = ref();

//定义变量
const state = reactive({
  formQuery: {
    stationId:null
  },
  pageQuery: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  },
  tableData: {
    height: 500,
    data: [] as Array<any>,
    loading: false
  },
  importConfig: {},
  exportConfig: {},
  columns: [
    // {type: 'selection', width: 60, align: 'center', fixed: 'left'},
    {label: '入账站点ID/名称', prop: 'toStationId', width: 200, align: 'center', resizable: true, fixed: 'left'},
    {label: '出账站点ID/名称', prop: 'fromStationId', width: 200, align: 'center', resizable: true, fixed: 'left'},
    // {label: '状态', prop: 'status', sortable: 'custom', align: 'center', query: true, width: 120, conf: {dict: 'SplitRecord.status'}},
    {label: '分账交易金额（元）', width: 180, prop: 'amount', query: true, type: '', resizable: true},
    {label: '分账交易流水号', width: 280, prop: 'tradeNo', query: true, type: 'text', resizable: true},
    {label: '交易类型', width: 130, prop: 'type', query: true, type: '', resizable: true},
    {label: '创建时间', width: 180, prop: 'createTime', query: true, sortable: 'custom', type: 'datetime', resizable: true, conf: {format: (val: any) => u.fmt.fmtDate(val)}},
    {label: '更新时间', width: 180, prop: 'updateTime', query: true, sortable: 'custom', type: 'datetime', resizable: true, conf: {format: (val: any) => u.fmt.fmtDate(val)}},
  ],
})


// 监听双向绑定 modelValue 的变化
// watch(
//         () => state.pageIndex,
//         () => {
//
//         }
// );

//生命周期钩子
//生命周期钩子
onBeforeMount(() => {

  let query = route.query;
  console.log(route.params, route.query)
  if (query.stationId) {
    state.formQuery.stationId = query.stationId;
  }
})

onMounted(() => {
  loadData();

  nextTick(() => {
    let bodyHeight = document.body.clientHeight;
    let queryHeight = queryRef.value.$el.clientHeight;
    state.tableData.height = bodyHeight - queryHeight - 320
  })

  mittBus.on("splitRecord.refresh", () => {
    loadData();
  })
});

onBeforeUnmount(() => {
  mittBus.off("splitRecord.refresh")
})


//region 方法区
// 初始化表格数据
const loadData = (refresh: boolean = false) => {
  if (refresh) {
    state.pageQuery.pageNum = 1;
  }
  state.tableData.loading = true;
  $body(`/finance/splitRecords`, {...state.formQuery, ...state.pageQuery}).then((res: any) => {
    let {list, total} = res;
    state.tableData.data = list;
    state.pageQuery.total = total;
    state.tableData.loading = false;
  }).catch(e => {
    console.error(e)
    state.tableData.loading = false;
  })
};

// 打开详情页弹窗
const handleRowClick = (type: string, row: any) => {
  // splitRecordDialogRef.value.open(type, row);
};
// 删除点击
const handleRowDelete = (row: any) => {
  Msg.confirm(`此操作将永久删除：『${row.name}』，是否继续?`).then(() => {
    $get(`/splitRecord/delete/${row.id}`).then(() => {
      Msg.message("删除成功", 'success')
    }).catch(() => {
      Msg.message("删除失败", 'error')
    })
  });
};

//endregion


// 暴露变量
// defineExpose({
//     loadData,
// });
</script>
