<template>
  <view class="container">
    <!-- 1. 问题描述 -->
    <view class="section">
      <text class="section-title">问题描述</text>
      <textarea 
        v-model="approvalForm.problemDescription" 
        placeholder="请描述问题"
        class="input-textarea"
      />
    </view>

    <!-- 2. 审批人选择（带搜索） -->
    <view class="section">
      <text class="section-title">选择审批人（多选）</text>
      <input 
        v-model="approverSearchKeyword" 
        placeholder="搜索审批人"
        class="search-input"
      />
      <checkbox-group @change="handleApproverChange">
        <label 
          v-for="approver in filteredApprovers" 
          :key="approver.id"
          class="person-item"
        >
          <checkbox :value="approver.id" :checked="approvalForm.selectedApprovers.includes(approver.id)" />
          {{ approver.name }}（{{ approver.dept }}）
        </label>
      </checkbox-group>
    </view>

    <!-- 3. 抄送人选择（带搜索） -->
    <view class="section">
      <text class="section-title">选择抄送人（多选）</text>
      <input 
        v-model="ccSearchKeyword" 
        placeholder="搜索抄送人"
        class="search-input"
      />
      <checkbox-group @change="handleCCChange">
        <label 
          v-for="cc in filteredCC" 
          :key="cc.id"
          class="person-item"
        >
          <checkbox :value="cc.id" :checked="approvalForm.selectedCC.includes(cc.id)" />
          {{ cc.name }}（{{ cc.dept }}）
        </label>
      </checkbox-group>
    </view>

    <!-- 4. 审批意见 -->
    <view class="section">
      <text class="section-title">审批意见</text>
      <textarea 
        v-model="approvalForm.comment" 
        placeholder="请输入审批意见"
        class="input-textarea"
      />
    </view>

    <!-- 提交按钮 -->
    <button @click="submitApproval" class="submit-btn">提交审批</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 审批人数据
      approverList: [
        { id: 1, name: "张三", dept: "技术部" },
        { id: 2, name: "李四", dept: "市场部" },
        { id: 3, name: "王五", dept: "财务部" },
        { id: 4, name: "赵六", dept: "人事部" }
      ],
      // 抄送人数据
      ccList: [
        { id: 101, name: "抄送人A", dept: "技术部" },
        { id: 102, name: "抄送人B", dept: "市场部" }
      ],
      // 搜索关键字
      approverSearchKeyword: "", // 审批人搜索关键字
      ccSearchKeyword: "",       // 抄送人搜索关键字
      // 审批表单数据
      approvalForm: {
        problemDescription: "", // 问题描述
        selectedApprovers: [],  // 选中的审批人ID数组
        selectedCC: [],         // 选中的抄送人ID数组
        comment: ""             // 审批意见
      }
    };
  },
  computed: {
    // 过滤后的审批人列表
    filteredApprovers() {
      return this.approverList.filter(
        approver =>
          approver.name.includes(this.approverSearchKeyword) ||
          approver.dept.includes(this.approverSearchKeyword)
      );
    },
    // 过滤后的抄送人列表
    filteredCC() {
      return this.ccList.filter(
        cc =>
          cc.name.includes(this.ccSearchKeyword) ||
          cc.dept.includes(this.ccSearchKeyword)
      );
    }
  },
  methods: {
    // 处理审批人选择
    handleApproverChange(e) {
      this.approvalForm.selectedApprovers = e.detail.value;
    },
    // 处理抄送人选择
    handleCCChange(e) {
      this.approvalForm.selectedCC = e.detail.value;
    },
    // 提交审批
    submitApproval() {
      // 表单数据
      const formData = {
        problemDescription: this.approvalForm.problemDescription,
        approvers: this.approvalForm.selectedApprovers,
        cc: this.approvalForm.selectedCC,
        comment: this.approvalForm.comment
      };

      // 简单验证
      if (formData.problemDescription.trim() === "") {
        uni.showToast({ title: "请填写问题描述", icon: "none" });
        return;
      }
      if (formData.approvers.length === 0) {
        uni.showToast({ title: "请至少选择一个审批人", icon: "none" });
        return;
      }

      // 提交逻辑
      console.log("提交审批数据:", formData);
      uni.showToast({ title: "提交成功！" });

      // 清空表单
      this.approvalForm.problemDescription = "";
      this.approvalForm.selectedApprovers = [];
      this.approvalForm.selectedCC = [];
      this.approvalForm.comment = "";
      this.approverSearchKeyword = "";
      this.ccSearchKeyword = "";
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.section {
  margin-bottom: 30rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 10rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.search-input {
  width: 100%;
  padding: 15rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}

.person-item {
  display: block;
  padding: 15rpx;
  font-size: 28rpx;
}

.input-textarea {
  width: 100%;
  height: 200rpx;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.submit-btn {
  margin-top: 40rpx;
  background: #007AFF;
  color: white;
  font-size: 32rpx;
  border-radius: 10rpx;
}
</style>