<template>
  <page-layer>
    <template #header>
      <el-date-picker v-model="queryTerm.month" :clearable="false" placeholder="请选择" style="width: 160px" type="month">
      </el-date-picker>
      <el-button type="primary" icon="Search" @click="query" style="margin-left: 5px">查询</el-button>
    </template>
    <template #main>
      <el-table :data="returnData.resultData" :height="tableHeight" stripe highlight-current-row>
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.children" v-show="props.row.isChildren">
              <template v-for="(col, index) in returnData.headTitle" :key="index">
                <el-table-column v-if="col.prop === 'item'" :prop="col.prop" :label="col.label" fixed width="140">
                </el-table-column>
                <el-table-column v-else-if="col.prop === 'total'" :prop="col.prop" :label="col.label" fixed>
                </el-table-column>
                <el-table-column v-else :prop="col.prop" :label="col.label"></el-table-column>
              </template>
            </el-table>
          </template>
        </el-table-column>
        <template v-for="(col, index) in returnData.headTitle" :key="index">
          <el-table-column v-if="col.prop === 'item'" :prop="col.prop" :label="col.label" fixed width="140">
          </el-table-column>
          <el-table-column v-else-if="col.prop === 'total'" :prop="col.prop" :label="col.label" fixed></el-table-column>
          <el-table-column v-else :prop="col.prop" :label="col.label"></el-table-column>
        </template>
      </el-table>
    </template>
  </page-layer>
</template>
<script >
import { reactive, ref } from '@vue/reactivity'
import { formatMonth1 } from '@/utils/date'
import { ElMessage } from 'element-plus'
import store from '@/store'
import { selectOutpatientCoordination } from '@/api/ybkf/yb-mztc'
import PageLayer from '@/layout/PageLayer.vue'

export default {
  setup() {
    const windowSize = store.state.app.windowSize;
    const tableHeight = windowSize.h / 1.02;
    const queryTerm = reactive({
      month: formatMonth1(new Date()),
    });
    const returnData = ref([]);
    const query = () => {
      if (queryTerm.month) {
        queryTerm.month = formatMonth1(queryTerm.month);
      }
      else {
        ElMessage({
          type: "info",
          message: "默认查询当天的数据",
          duration: 2500,
          showClose: true,
        });
      }
      selectOutpatientCoordination(queryTerm.month)
        .then((res) => {
          returnData.value = res;
        })
        .catch(() => {
          returnData.value = [];
        });
    };
    return {
      queryTerm,
      returnData,
      tableHeight,
      query,
    };
  },
  components: { PageLayer }
}
</script>