<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <!-- <el-form-item label="Approved by">
						<el-input v-model="formInline.user" placeholder="Approved by" clearable />
					</el-form-item>
					<el-form-item label="Activity zone">
						<el-select v-model="formInline.region" placeholder="Activity zone" clearable>
							<el-option label="Zone one" value="shanghai" />
							<el-option label="Zone two" value="beijing" />
						</el-select>
					</el-form-item> -->
          <el-form-item label="申请日期">
            <el-date-picker
              v-model="form.date"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择接收日期"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="onSubmit"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- <el-row style="margin-bottom:20px">
			<el-col :span="2">
				<el-button type="primary" icon="Notification" @click="show = true">新建通知</el-button>
			</el-col>
		</el-row> -->
    <el-row>
      <el-col :span="24">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="date" label="申请日期" />
          <el-table-column prop="name" label="出差人员" />
          <el-table-column prop="address" label="出差原由" />
          <el-table-column prop="address" label="出差时间" />
          <el-table-column label="审批状态">
            <template #default>
              <el-tag class="ml-2" type="warning">待审批</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default>
              <el-button link type="primary" icon="View">查看</el-button>
              <el-button link type="danger" icon="EditPen">审批</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div style="padding: 40px; display: flex; justify-content: flex-end">
      <!-- <el-pagination background layout="prev, pager, next" :total="1000" /> -->
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
const form = ref({
  date: "",
});
const tableData = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]);
//新建通知弹窗
const show = ref(false);
//新建通知表单
const ruleForm = ref({
  name: "",
});
//选择部门弹窗
const bmshow = ref(false);
//部门树形结构
const data = ref([
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        isPenultimate: true,
        children: [
          {
            id: 9,
            label: "Level three 1-1-1",
          },
          {
            id: 10,
            label: "Level three 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    isPenultimate: true,
    children: [
      {
        id: 5,
        label: "Level two 2-1",
      },
      {
        id: 6,
        label: "Level two 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    isPenultimate: true,
    children: [
      {
        id: 7,
        label: "Level two 3-1",
      },
      {
        id: 8,
        label: "Level two 3-2",
      },
    ],
  },
]);
function onSubmit() {}
</script>

<style scoped lang="scss">
.home {
}
</style>
