<template>
  <view class="notice-create-page">
    <view class="content-scroll" >
      <view class="form-card">
        <view class="section-title">公告信息</view>

        <view class="form-item">
          <text class="form-label required">标题</text>
          <input
            v-model.trim="formData.title"
            class="text-input"
            placeholder="请输入公告标题"
            placeholder-style="color:#999;"
            maxlength="50"
          />
        </view>

        <view class="form-item">
          <text class="form-label required">类型</text>
          <view class="pill-group">
            <view
              class="pill-item"
              v-for="type in typeOptions"
              :key="type.value"
              :class="{ active: formData.type === type.value }"
              @click="selectType(type.value)"
            >
              {{ type.label }}
            </view>
          </view>
        </view>

        <view class="form-item">
          <text class="form-label required">重要程度</text>
          <view class="pill-group">
            <view
              class="pill-item priority"
              v-for="level in levelOptions"
              :key="level.value"
              :class="{ active: formData.level === level.value }"
              @click="selectLevel(level.value)"
            >
              {{ level.label }}
            </view>
          </view>
        </view>

        <view class="form-item switch-item">
          <text class="form-label required">置顶</text>
          <uv-switch v-model="formData.top" activeColor="#2979ff" inactiveColor="#dcdfe6"></uv-switch>
        </view>

        <view class="form-item align-start">
          <text class="form-label required">内容</text>
          <textarea
            v-model.trim="formData.content"
            class="textarea-input"
            placeholder="请输入公告内容，最多1000字"
            placeholder-style="color:#999;"
            :maxlength="1000"
          />
        </view>
      </view>

      <view class="form-card">
        <view class="section-title">附件</view>
        <AttachmentImageUploader v-model="formData.images" title="上传图片" icon="🖼️" />
        <AttachmentFileUploader v-model="formData.files" title="上传文件" icon="📎" />
      </view>

      <view class="form-card">
        <view class="section-title">接收对象</view>

        <view class="form-item align-start">
          <text class="form-label">接收用户</text>
          <view class="selector-body">
            <view class="chip-list" v-if="formData.receiveUsers.length">
              <view
                class="chip-item"
                v-for="user in formData.receiveUsers"
                :key="user.userId"
              >
                <text class="chip-name">{{ user.userName }}</text>
                <text class="chip-remove" @click.stop="removeUser(user.userId)">✕</text>
              </view>
            </view>
            <text v-else class="placeholder">请选择接收用户，可多选</text>
          </view>
          <view class="picker-trigger" @click="openUserModal">
            <text>{{ formData.receiveUsers.length ? '调整' : '选择' }}</text>
            <text class="arrow">›</text>
          </view>
        </view>

        <view class="form-item align-start">
          <text class="form-label">接收部门</text>
          <view class="selector-body">
            <view class="chip-list" v-if="formData.receiveDepts.length">
              <view
                class="chip-item dept"
                v-for="dept in formData.receiveDepts"
                :key="dept.deptId"
              >
                <text class="chip-name">{{ dept.deptName }}</text>
                <text class="chip-remove" @click.stop="removeDept(dept.deptId)">✕</text>
              </view>
            </view>
            <text v-else class="placeholder">请选择接收部门，可多选</text>
          </view>
          <view class="picker-trigger" @click="openDeptModal">
            <text>{{ formData.receiveDepts.length ? '调整' : '选择' }}</text>
            <text class="arrow">›</text>
          </view>
        </view>

        <view class="receive-tip">
          至少选择接收用户或接收部门中的任意一项。
        </view>
      </view>
    </view>

    <view class="submit-bar">
      <uv-button
        type="primary"
        :disabled="!canSubmit || submitting"
        :loading="submitting"
        loadingText="提交中..."
        @click="handleSubmit"
      >
        提交公告
      </uv-button>
    </view>

    <view class="selection-modal" v-if="showUserModal">
      <view class="modal-mask" @click="closeUserModal"></view>
      <view class="modal-panel">
        <view class="modal-header">
          <text class="modal-title">选择接收用户</text>
          <text class="modal-close" @click="closeUserModal">✕</text>
        </view>
        <view class="search-box">
          <input
            v-model.trim="userKeyword"
            class="search-input"
            placeholder="搜索姓名或部门"
            placeholder-style="color:#999;"
          />
        </view>
        <scroll-view class="options-list" scroll-y>
          <view
            class="option-item"
            v-for="user in filteredUserOptions"
            :key="user.userId"
            @click="toggleUser(user.userId)"
          >
            <view class="option-info">
              <text class="option-name">{{ user.userName }}</text>
              <text class="option-desc" v-if="user.deptName">{{ user.deptName }}</text>
            </view>
            <view class="select-indicator" :class="{ active: selectedUserIds.includes(user.userId) }"></view>
          </view>
          <view class="empty-tip" v-if="!filteredUserOptions.length">
            暂无可选人员
          </view>
        </scroll-view>
        <view class="modal-actions">
          <uv-button @click="closeUserModal">取消</uv-button>
          <uv-button type="primary" @click="confirmUserSelection">确定</uv-button>
        </view>
      </view>
    </view>

    <view class="selection-modal" v-if="showDeptModal">
      <view class="modal-mask" @click="closeDeptModal"></view>
      <view class="modal-panel">
        <view class="modal-header">
          <text class="modal-title">选择接收部门</text>
          <text class="modal-close" @click="closeDeptModal">✕</text>
        </view>
        <view class="search-box">
          <input
            v-model.trim="deptKeyword"
            class="search-input"
            placeholder="搜索部门名称"
            placeholder-style="color:#999;"
          />
        </view>
        <scroll-view class="options-list" scroll-y>
          <view
            class="option-item"
            v-for="dept in filteredDeptOptions"
            :key="dept.deptId"
            @click="toggleDept(dept.deptId)"
          >
            <view class="option-info">
              <text class="option-name">{{ dept.deptName }}</text>
            </view>
            <view class="select-indicator" :class="{ active: selectedDeptIds.includes(dept.deptId) }"></view>
          </view>
          <view class="empty-tip" v-if="!filteredDeptOptions.length">
            暂无可选部门
          </view>
        </scroll-view>
        <view class="modal-actions">
          <uv-button @click="closeDeptModal">取消</uv-button>
          <uv-button type="primary" @click="confirmDeptSelection">确定</uv-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { createNotice, getUserList } from '@/api';
import { useUserStore } from '@/store/user';
import AttachmentImageUploader from '@/components/task/AttachmentImageUploader.vue';
import AttachmentFileUploader from '@/components/task/AttachmentFileUploader.vue';

const formData = ref({
  title: '',
  type: '1',
  level: '1',
  top: false,
  content: '',
  images: [],
  files: [],
  receiveUsers: [],
  receiveDepts: []
});

const submitting = ref(false);
const loadingUsers = ref(false);

const typeOptions = [
  { label: '通知', value: '1' },
  { label: '公告', value: '2' }
];

const levelOptions = [
  { label: '一般', value: '1' },
  { label: '重要', value: '2' },
  { label: '紧急', value: '3' }
];

const userOptions = ref([]);
const userKeyword = ref('');
const showUserModal = ref(false);
const selectedUserIds = ref([]);

const deptKeyword = ref('');
const showDeptModal = ref(false);
const selectedDeptIds = ref([]);

const deptOptions = computed(() => {
  const map = new Map();
  userOptions.value.forEach((user) => {
    if (user.deptId && user.deptName && !map.has(user.deptId)) {
      map.set(user.deptId, {
        deptId: String(user.deptId),
        deptName: user.deptName
      });
    }
  });
  return Array.from(map.values());
});

const filteredUserOptions = computed(() => {
  if (!userKeyword.value.trim()) {
    return userOptions.value;
  }
  const keyword = userKeyword.value.trim().toLowerCase();
  return userOptions.value.filter((user) => {
    const name = (user.userName || '').toLowerCase();
    const dept = (user.deptName || '').toLowerCase();
    return name.includes(keyword) || dept.includes(keyword);
  });
});

const filteredDeptOptions = computed(() => {
  if (!deptKeyword.value.trim()) {
    return deptOptions.value;
  }
  const keyword = deptKeyword.value.trim().toLowerCase();
  return deptOptions.value.filter((dept) => {
    const name = (dept.deptName || '').toLowerCase();
    return name.includes(keyword);
  });
});

const canSubmit = computed(() => {
  return Boolean(
    formData.value.title.trim() &&
    formData.value.content.trim() &&
    formData.value.type &&
    formData.value.level &&
    (formData.value.receiveUsers.length > 0 || formData.value.receiveDepts.length > 0)
  );
});

const selectType = (value) => {
  formData.value.type = value;
};

const selectLevel = (value) => {
  formData.value.level = value;
};

const openUserModal = () => {
  selectedUserIds.value = formData.value.receiveUsers.map((item) => item.userId);
  userKeyword.value = '';
  showUserModal.value = true;
};

const closeUserModal = () => {
  showUserModal.value = false;
};

const toggleUser = (userId) => {
  const index = selectedUserIds.value.indexOf(userId);
  if (index >= 0) {
    selectedUserIds.value.splice(index, 1);
  } else {
    selectedUserIds.value.push(userId);
  }
};

const confirmUserSelection = () => {
  const selected = userOptions.value.filter((user) =>
    selectedUserIds.value.includes(user.userId)
  );
  formData.value.receiveUsers = selected.map((user) => ({
    userId: user.userId,
    userName: user.userName,
    deptName: user.deptName
  }));
  closeUserModal();
};

const removeUser = (userId) => {
  formData.value.receiveUsers = formData.value.receiveUsers.filter(
    (user) => user.userId !== userId
  );
};

const openDeptModal = () => {
  selectedDeptIds.value = formData.value.receiveDepts.map((item) => item.deptId);
  deptKeyword.value = '';
  showDeptModal.value = true;
};

const closeDeptModal = () => {
  showDeptModal.value = false;
};

const toggleDept = (deptId) => {
  const index = selectedDeptIds.value.indexOf(deptId);
  if (index >= 0) {
    selectedDeptIds.value.splice(index, 1);
  } else {
    selectedDeptIds.value.push(deptId);
  }
};

const confirmDeptSelection = () => {
  const selected = deptOptions.value.filter((dept) =>
    selectedDeptIds.value.includes(dept.deptId)
  );
  formData.value.receiveDepts = selected.map((dept) => ({
    deptId: dept.deptId,
    deptName: dept.deptName
  }));
  closeDeptModal();
};

const removeDept = (deptId) => {
  formData.value.receiveDepts = formData.value.receiveDepts.filter(
    (dept) => dept.deptId !== deptId
  );
};

const normalizeUser = (item) => ({
  userId: String(item.userId || item.id),
  userName: item.nickName || item.userName || '',
  deptName: item.dept?.deptName || item.deptName || '',
  deptId: String(item.dept?.deptId || item.deptId || '')
});

const loadUserOptions = async () => {
  loadingUsers.value = true;
  try {
    const res = await getUserList({
      pageNum: 1,
      pageSize: 500,
      status: 0,
      delFlag: 0
    });
    const rows = Array.isArray(res?.rows) ? res.rows : Array.isArray(res?.data) ? res.data : [];
    userOptions.value = rows.map((item) => normalizeUser(item)).filter((user) => user.userId);
  } catch (error) {
    console.error('加载用户列表失败:', error);
    uni.showToast({
      title: '加载用户列表失败',
      icon: 'none'
    });
  } finally {
    loadingUsers.value = false;
  }
};

const buildAttachmentsPayload = () => {
  const imageAttachments = formData.value.images.map((url) => ({
    url,
    name: url.split('/').pop() || '图片'
  }));
  const fileAttachments = formData.value.files.map((file) => ({
    url: file.path,
    name: file.name || '附件',
    size: file.size || 0
  }));
  return [...imageAttachments, ...fileAttachments];
};

const handleSubmit = async () => {
  if (!canSubmit.value) {
    uni.showToast({
      title: '请完善必填信息',
      icon: 'none'
    });
    return;
  }

  const payload = {
    title: formData.value.title.trim(),
    type: formData.value.type,
    level: formData.value.level,
    top: formData.value.top,
    content: formData.value.content.trim(),
    receiveUserIds: formData.value.receiveUsers.map((user) => user.userId),
    receiveDeptIds: formData.value.receiveDepts.map((dept) => dept.deptId),
    attaches: JSON.stringify(buildAttachmentsPayload())
  };

  submitting.value = true;
  try {
    await createNotice(payload);
    uni.showToast({
      title: '发布成功',
      icon: 'success'
    });
    uni.$emit('notice:updated');
    setTimeout(() => {
      uni.navigateBack();
    }, 800);
  } catch (error) {
    console.error('新增公告失败:', error);
    uni.showToast({
      title: error?.message || '发布失败',
      icon: 'none'
    });
  } finally {
    submitting.value = false;
  }
};

// 用户角色判断
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const isAdmin = computed(() => {
  if (!userInfo.value || !Array.isArray(userInfo.value.roles)) return false;
  return userInfo.value.roles.some((role) => ['admin', 'sys_admin'].includes(role));
});

onMounted(() => {
  // 权限检查：只有 admin 和 sys_admin 可以创建公告
  if (!isAdmin.value) {
    uni.showToast({
      title: '无权限访问',
      icon: 'none'
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
    return;
  }
  loadUserOptions();
});
</script>

<style lang="scss" scoped>
.notice-create-page {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.content-scroll {
  flex: 1;
  width: 100%;
}

.form-card {
  background: #fff;
  margin: 12px;
  margin-bottom: 0;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);

  &:last-of-type {
    margin-bottom: 12px;
  }
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #333;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }
}

.form-label {
  width: 80px;
  font-size: 14px;
  color: #333;
  flex-shrink: 0;

  &.required::before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
  }
}

.text-input {
  flex: 1;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
}

.pill-group {
  flex: 1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill-item {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #dcdfe6;
  font-size: 13px;
  color: #666;

  &.active {
    border-color: #2979ff;
    color: #2979ff;
    background: rgba(41, 121, 255, 0.08);
  }
}

.pill-item.priority {
  &.active {
    background: rgba(255, 152, 0, 0.12);
    border-color: #ff9800;
    color: #ff9800;
  }
}

.switch-item {
  justify-content: space-between;
}

.align-start {
  align-items: flex-start;
}

.textarea-input {
  flex: 1;
  min-height: 120px;
  background: #f7f8fa;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
}

.selector-body {
  flex: 1;
  min-height: 44px;
  background: #f7f8fa;
  border-radius: 12px;
  padding: 10px;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(41, 121, 255, 0.12);
  color: #2979ff;
  font-size: 12px;

  &.dept {
    background: rgba(56, 182, 73, 0.12);
    color: #38b649;
  }
}

.chip-remove {
  font-size: 12px;
  color: inherit;
}

.picker-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #2979ff;
  font-size: 14px;
}

.arrow {
  font-size: 18px;
  color: #999;
}

.placeholder {
  font-size: 13px;
  color: #999;
}

.receive-tip {
  font-size: 12px;
  color: #999;
  margin-top: -4px;
}

.submit-bar {
  padding: 12px;
  background: #fff;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03);
}

.selection-modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}

.modal-panel {
  position: relative;
  width: 100%;

  background: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  font-size: 18px;
  color: #999;
}

.search-box {
  margin-bottom: 12px;
}

.search-input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: #f7f8fa;
  font-size: 14px;
}

.options-list {
  height: 600px;
}

.option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.option-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.option-name {
  font-size: 15px;
  color: #333;
}

.option-desc {
  font-size: 13px;
  color: #999;
}

.select-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #dcdfe6;

  &.active {
    background: #2979ff;
    border-color: #2979ff;
  }
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 20px 0;
  font-size: 13px;
}

.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
</style>

