<template>
  <div class="editor-container">
    <el-form :model="editorForm" label-position="top" require-asterisk-position="right" inline size="default">
      <el-col :span="24" v-if="type === 1">
        <!-- <el-form-item label="部门选择" required>
          <el-select v-model="editorForm.deptid" placeholder="请选择部门" filterable>
            <el-option v-for="(col, index) in deptEnum" :key="index" :label="col.label" :value="col.value"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="用户选择" required>
          <el-select v-model="editorForm.empid" placeholder="请选择用户" filterable>
            <el-option v-for="(col, index) in empEnum" :key="index" :label="col.label" :value="col.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="公告内容" required>
          <el-input v-model="editorForm.dscrp" type="textarea" :rows="5" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="开始时间" required>
          <el-date-picker v-model="editorForm.sdate" type="date" placeholder="Pick a date" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="结束时间" required>
          <el-date-picker v-model="editorForm.edate" type="date" placeholder="Pick a date" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="优先级" required>
          <el-radio-group v-model="editorForm.level">
            <el-radio :value="0">低</el-radio>
            <el-radio :value="1">中</el-radio>
            <el-radio :value="2">高</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { getDept, getUserList } from "@/api/modules/basicinfo";
import { useUserStore } from "@/stores/modules/user";

const props = defineProps({
  type: {
    type: Number,
    default: 1
  } // 0 - 公告栏 1 - 用户提醒
});

const editorForm = reactive({
  scid: 0,
  deptid: 0,
  empid: 0,
  type: 0,
  dscrp: "",
  sdate: new Date(),
  edate: new Date(),
  level: 1 // 0（低）、1（中）、2（高)
});

const deptEnum = ref([]);
const empEnum = ref([{ label: "全部用户", value: -1 }]);
onMounted(async () => {
  if (props.type === 0) {
    const result = await getDept();
    deptEnum.value = result.list.map(t => {
      return { label: t.deptname, value: t.deptid };
    });
    deptEnum.value.unshift({ label: "全部部门", value: -1 });

    editorForm.deptid = -1;
  }
  if (props.type === 1) {
    const result = await getUserList();
    empEnum.value = result.userList
      .filter(t => t.empid != 0 && t.empid != useUserStore().userInfo.empid)
      .map(t => {
        return { label: t.username, value: t.empid };
      });
    empEnum.value.unshift({ label: "全部用户", value: -1 });

    editorForm.empid = -1;
  }

  editorForm.type = props.type;
});

defineExpose({ editorForm });
</script>

<style scoped lang="scss">
.editor-container {
  height: 100%;
  // width: 100%;
  // min-height: 510px;
  --editor-border: #dcdfe6;
  --panel-bg: #f8f9fa;
  padding: 0 1.2rem;
  overflow-x: hidden;

  &::-webkit-scrollbar {
    display: none; /* 隐藏滚动条但保留滚动功能 */
  }
}
</style>
