<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="name" label="收件人" />
          <el-table-column prop="address" label="发布内容" />
          <el-table-column prop="date" label="发布日期" />
          <el-table-column label="操作">
            <template #default>
              <el-button link type="primary" icon="View">查看</el-button>
              <el-button link type="danger" icon="Delete">删除</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>
    <el-dialog v-model="show" title="新建通知">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="收件部门：" prop="name">
          <el-col :span="20">
            <el-input placeholder="请选择收件部门" v-model="ruleForm.name" />
          </el-col>
          <el-col :span="1" />
          <el-col :span="2">
            <el-button type="primary" @click="bmshow = true">选择</el-button>
          </el-col>
        </el-form-item>
        <el-form-item label="通知标题：" prop="name">
          <el-input
            style="width: 820px; margin-right: 10px"
            placeholder="请输入邮箱标题"
            v-model="ruleForm.name"
          />
        </el-form-item>
        <el-form-item label="通知内容：">
          <editor height="380" :min-height="380" />
        </el-form-item>
        <el-form-item label="上传附件：">
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :auto-upload="false"
          >
            <template #trigger>
              <el-button>
                上传<el-icon>
                  <Upload />
                </el-icon>
              </el-button>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="info">取 消</el-button>
          <el-button type="primary">发 布</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-model="bmshow" title="选择部门">
      <!-- <el-tree
		        :data="data"
		        show-checkbox
		        node-key="id"
		        default-expand-all
		        :expand-on-click-node="false"
		        :props="{ class: 'is-penultimate' }"
		    /> -->
      <el-table
        :data="deptList"
        row-key="deptId"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="deptName" label="部门名称"></el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="bmshow = false">取 消</el-button>
          <el-button type="primary" @click="innerVisible = true">
            确 认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  listDept,
  getDept,
  delDept,
  addDept,
  updateDept,
  listDeptExcludeChild,
} from "@/api/system/dept";
const form = ref({
  date: "",
});
const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
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",
      },
    ],
  },
]);
const queryParams = ref({
  deptName: undefined,
  status: undefined,
});
//部门列表
const deptList = ref([]);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
function onSubmit() {
  //console.log(form.value.date)
}
function getList() {
  listDept(queryParams.value).then((response) => {
    deptList.value = proxy.handleTree(response.data, "deptId");
    // loading.value = false;
    //console.log(response)
  });
}
/** 选择条数  */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.deptId);
  //console.log(ids.value)
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
getList();
</script>

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