<template>
  <view class="container">
    <view class="form-container">
      <uni-section title="基础卡片" type="line">
        <!-- 基础表单校验：缩小字体+一行两列布局 -->
        <uni-forms
            ref="valiForm"
            label-position="left"
            :modelValue="form"
            style="font-size: 10px;"
        >
          <!-- 一行两列布局容器 -->
          <view class="form-row">
            <uni-forms-item label="标题:" name="title" class="form-item">
              <uni-easyinput
                  v-model="form.title"
                  placeholder="请输入标题搜索"
              />
            </uni-forms-item>
            <uni-forms-item label="详情:"  name="detail" class="form-item">
              <uni-easyinput
                  v-model="form.detail"
                  placeholder="请输入详情搜索"
              />
            </uni-forms-item>
          </view>

          <!-- 第二行两列 -->
          <view class="form-row">
            <uni-forms-item label="优先级:" name="priority" class="form-item">
              <uni-data-select
                  v-model="form.priority"
                  :localdata="priorityList"
              />
            </uni-forms-item>
            <uni-forms-item label="进度:" name="progress" class="form-item">
              <uni-data-select
                  v-model="form.progress"
                  :localdata="progressList"
              />
            </uni-forms-item>
          </view>
        </uni-forms>

        <view class="btn-group">
          <view class="btn-left">
            <!-- 新增按钮：点击打开弹窗 -->
            <button
                class="iconfont icon-add mini-btn add-btn"
                @click="openDialog('add')"
                hover-class="is-hover"
                type="default"
                size="mini"
            > 新增</button>

            <!-- 删除按钮：未选中数据时禁用 -->
            <button
                class="iconfont icon-ashbin mini-btn del-btn"
                hover-class="is-hover"
                type="default"
                size="mini"
                :disabled="selectedIndexs.length === 0"
                @click="batchDel"
            > 删除</button>
            <!-- 编辑按钮：未选中数据时禁用 -->
            <button
                class="iconfont icon-edit mini-btn edit-btn"
                hover-class="is-hover"
                type="default"
                size="mini"
                :disabled="selectedIndexs.length === 0"
                @click="openDialog('edit')"
            > 编辑</button>
          </view>

          <view class="btn-right">
            <button
                class="iconfont icon-search mini-btn"
                hover-class="is-hover"
                type="default"
                size="mini"
                @click="search"
            > 查询</button>
          </view>
        </view>
      </uni-section>
    </view>

    <view class="uni-container">
      <!-- 表格区域：保持原有紧凑样式并优化 -->
      <uni-table
          ref="table"
          :loading="loading"
          border
          stripe
          type="selection"
          emptyText="暂无更多数据"
          @selection-change="selectionChange"
          style="width: 100%;"
          :border-width="1"
      >
        <uni-tr>
          <uni-th align="center" class="ui-th" sortable width="200rpx" @sort-change="idSort">需求单号</uni-th>
          <uni-th align="center"  width="300rpx" class="ui-th">需求标题</uni-th>
          <uni-th align="center" width="240rpx" class="ui-th">需求详情</uni-th>
          <uni-th align="center" width="140rpx" @sort-change="prioritySort" sortable class="ui-th">优先级</uni-th>
          <uni-th align="center" width="140rpx" class="ui-th">进度</uni-th>
          <uni-th align="center" width="200rpx" class="ui-th">需求类型</uni-th>
          <uni-th align="center" width="200rpx" class="ui-th">经办人名称</uni-th>
          <uni-th align="center" width="300rpx" class="ui-th">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index" style="height: 30px; line-height: 30px;">

          <uni-td style="padding: 1px 0; font-size: 13px;">{{ item.id }}</uni-td>
          <uni-td style="padding: 1px 0; font-size: 13px;">{{ item.title }}</uni-td>
          <uni-td style="padding: 1px 0; font-size: 13px;">
            <view class="name">{{ item.detail }}</view>
          </uni-td>
          <uni-td align="center" style=" padding: 1px 0; font-size: 13px;">{{ item.priority }}</uni-td>
          <uni-td align="center" style=" padding: 1px 0; font-size: 13px;">{{ item.progress }}</uni-td>
          <uni-td align="center" style=" padding: 1px 0; font-size: 13px;">{{ item.reqType }}</uni-td>
          <uni-td align="center" style=" padding: 1px 0; font-size: 13px;">{{ item.assigneeName }}</uni-td>
          <uni-td style="width: auto; padding: 1px 0; font-size: 13px;">
            <view class="uni-group">
              <!-- 行内修改按钮：点击打开编辑弹窗 -->
              <button  size="mini" type="primary" style="padding: 1px 6px; font-size: 10px;" @click="openDialog('edit', item)">修改</button>
              <!-- 行内删除按钮：点击单行删除 -->
              <button  size="mini" type="warn" style="padding: 1px 6px; font-size: 10px;" @click="delSingle(item)">删除</button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
      <view class="uni-pagination-box" style="margin-top: 8px;">
        <uni-pagination
            show-icon
            :page-size="form.pageSize"
            :current="form.pageNum"
            :total="total"
            @change="change"
            style="font-size: 11px;"
        />
      </view>
    </view>

    <!-- 新增/修改弹窗 -->
    <uni-popup ref="formDialog" type="center" :mask-click="false">
      <view class="dialog-container">
        <view class="dialog-title">{{ dialogType === 'add' ? '新增需求' : '编辑需求' }}</view>
        <!-- 弹窗表单 -->
        <uni-forms
            ref="dialogForm"
            label-width="65px"
            label-position="left"
            :modelValue="dialogFormData"
            :rules="formRules"
            style="padding: 10rpx;"
        >
          <!-- 需求标题（必填） -->
          <uni-forms-item label="需求标题：" name="title" required>
            <uni-easyinput
                v-model="dialogFormData.title"
                placeholder="请输入需求标题"
                style="font-size: 12px;"
            />
          </uni-forms-item>
          <!-- 详情（必填） -->
          <uni-forms-item label="详情：" name="detail" required>
            <uni-easyinput
                v-model="dialogFormData.detail"
                type="textarea"
                placeholder="请输入需求详情"
                style="font-size: 12px; height: 100px;"
            />
          </uni-forms-item>
          <!-- 优先级（下拉框，默认高） -->
          <uni-forms-item label="优先级：" name="priority">
            <uni-data-select
                v-model="dialogFormData.priority"
                :localdata="priorityList"
                style="font-size: 12px;"
            />
          </uni-forms-item>
          <!-- 进度（下拉框） -->
          <uni-forms-item label="进度：" name="progress">
            <uni-data-select
                v-model="dialogFormData.progress"
                :localdata="progressList"
                style="font-size: 12px;"
            />
          </uni-forms-item>
          <!-- 需求类型（下拉框） -->
          <uni-forms-item label="需求类型：" name="reqType">
            <uni-data-select
                v-model="dialogFormData.reqType"
                :localdata="reqTypeList"
                style="font-size: 12px;"
            />
          </uni-forms-item>
          <!-- 经办人（可选输入框） -->
          <uni-forms-item label="经办人：" name="assigneeName">
            <uni-easyinput
                v-model="dialogFormData.assigneeName"
                placeholder="请输入经办人名称"
                style="font-size: 12px;"
            />
          </uni-forms-item>
        </uni-forms>
        <!-- 弹窗按钮 -->
        <view class="dialog-btn-group">
          <button class="cancel-btn" @click="closeDialog">取消</button>
          <button class="confirm-btn" @click="submitDialog">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import UniTh from "../../../../uni_modules/uni-table/components/uni-th/uni-th.vue";
import UniTr from "../../../../uni_modules/uni-table/components/uni-tr/uni-tr.vue";
import UniTd from "../../../../uni_modules/uni-table/components/uni-td/uni-td.vue";
import {addRequire, delRequire, delRequires, listRequire, updateRequire} from "../../../../api/system/require";
import UniTable from "../../../../uni_modules/uni-table/components/uni-table/uni-table.vue";
import UniPopup from "../../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import UniForms from "../../../../uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
import UniFormsItem from "../../../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
import UniEasyinput from "../../../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import UniDataSelect from "../../../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";

export default {
  components: {
    UniTable, UniTd, UniTr, UniTh,
    UniPopup, UniForms, UniFormsItem, UniEasyinput, UniDataSelect
  },
  data() {
    return {
      searchVal: '',
      tableData: [],
      total: 0,
      // 优先级下拉选项
      priorityList: [
        { value: 0, text: '高' },
        { value: 1, text: '中' },
        { value: 2, text: '低' }
      ],
      // 进度下拉选项
      progressList: [
        { value: 0, text: '未完成' },
        { value: 1, text: '进行中' },
        { value: 2, text: '已完成' }
      ],
      // 需求类型下拉选项（可根据实际需求补充）
      reqTypeList: [
        { value: 0, text: '功能需求' },
        { value: 1, text: '优化需求' },
        { value: 2, text: 'BUG修复' }
      ],
      form: {
        title: null,
        detail: null,
        priority: null,
        progress: null,
        pageNum: 1,
        pageSize: 10
      },
      loading: false,
      selectIds:[],
      selectedIndexs: [], // 已选择的行索引
      // 弹窗相关
      dialogType: 'add', // add-新增 edit-编辑
      dialogFormData: {
        title: '',
        detail: '',
        priority: 0, // 默认高
        progress: 0,
        reqType: '',
        assigneeName: ''
      },
      // 表单校验规则
      formRules: {
        title: {
          rules: [{ required: true, errorMessage: '请输入需求标题' }]
        },
        detail: {
          rules: [{ required: true, errorMessage: '请输入需求详情' }]
        }
      },
      currentEditItem: null // 当前编辑的行数据
    }
  },
  onLoad() {
    this.getData()
  },
  methods: {
    // 多选处理
    selectedItems() {
      this.selectIds = this.selectedIndexs.map(i => this.tableData[i].id);
      return this.selectedIndexs.map(i => this.tableData[i])
    },
    // 补充selection-change事件
    selectionChange(e) {
      this.selectedIndexs = e.detail.index
      console.info(e)
    },
    idSort(e) {
      if (e["order"] === 'descending') {
        this.tableData.sort((a, b) => b.id - a.id);
        return;
      }
      this.tableData.sort((a, b) => a.id - b.id);
    },
    prioritySort(e) {
      if (e.order === 'descending') {
        this.tableData.sort((a, b) => b.priority - a.priority);
        return;
      }
      this.tableData.sort((a, b) => a.priority - b.priority);
    },
    // ========== 删除相关方法 ==========
    // 批量删除
    batchDel() {
      const data  = this.tableData.filter(item => !this.selectIds.includes(item.id));
      console.info(`${this.selectIds}选中的数据：${JSON.stringify(data)} `)
      // todo  多选删除  有bug  第二次删除之前第一次删除还在的索引还在
      const selectedItems = this.selectedItems()
      if (selectedItems.length === 0) {
        uni.showToast({ title: '请选择要删除的数据', icon: 'none' })
        return
      }
      const selectedIds = selectedItems.map(item => Number(item.id))
          .filter(id => id !== undefined && id !== null && id !== '');

      uni.showModal({
        title: '提示',
        content: `确定要删除选中的${selectedItems.length}条数据吗？`,
        success: (res) => {
          if (res.confirm) {
            delRequires(selectedIds).then((response) => {
              if (response.code === 200) {
                uni.showToast({ title: '批量删除成功', icon: 'success' })
              } else {
                uni.showToast({ title: '批量删除失败', icon: 'error' })
              }
              this.getData()
              this.selectedIndexs=[]
            })
          }
        }
      })
    },
    // 分页触发
    change(e) {
      this.selectedIndexs = []
      this.getData(e.current)
    },
    // 搜索
    search() {
      this.getData()
    },
    // 获取数据
    getData(pageNum) {
      this.loading = true
      this.form.pageNum = pageNum || this.form.pageNum
      listRequire(this.form).then(response => {
        if (response.code === 200 && response.rows) {
          this.tableData = response.rows
          this.total = response.total
        }
        this.loading = false
      }).catch(error => {
        console.error('获取数据失败:', error)
        this.loading = false
      })
    },


    // ========== 弹窗相关方法 ==========
    // 打开弹窗
    openDialog(type, item = null) {
      this.dialogType = type
      // 重置表单
      this.dialogFormData = {
        title: '',
        detail: '',
        priority: 0,
        progress: 0,
        reqType: '',
        assigneeName: ''
      }
      // 编辑模式：回显数据
      if (type === 'edit') {
        // 批量编辑取第一个选中项，行内编辑取传入的item
        const editItem = item || this.selectedItems()[0]
        if (editItem) {
          this.currentEditItem = editItem
          this.dialogFormData = { ...editItem }
        } else {
          uni.showToast({ title: '请选择要编辑的数据', icon: 'none' })
          return
        }
      }
      // 打开弹窗
      this.$refs.formDialog.open()
    },
    // 关闭弹窗
    closeDialog() {
      this.$refs.formDialog.close()
      // 重置表单校验
      this.$refs.dialogForm.clearValidate()
    },
    // 提交弹窗表单
    submitDialog() {
      // 表单校验
      this.$refs.dialogForm.validate().then(() => {
        if (this.dialogType === 'add') {
          addRequire(this.dialogFormData).then(response => {
            if (response.code===200) {
              this.$modal.msgSuccess("新增成功")
            } else {
              this.$modal.msgError("新增失败")
            }
            this.getData()
          })
        } else {
          updateRequire(this.dialogFormData).then(response => {
            if (response.code===200) {
              this.$modal.msgSuccess("修改成功")
            } else {
              this.$modal.msgError("修改失败")
            }
            this.getData()
          })
        }
        // 关闭弹窗并刷新数据
        this.closeDialog()

      }).catch(err => {
        console.error('表单校验失败:', err)
      })
    },


    // 单行删除
    delSingle(item) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这条数据吗？',
        success: (res) => {
          if (res.confirm) {
            delRequire(item.id).then(response => {
              if (response.code === 200) {
                uni.showToast({title: '删除成功', icon: 'success'})
              } else {
                uni.showToast({title: '删除失败', icon: 'success'})
              }
            })
            this.getData()
            this.selectedIndexs=[]
          }
        }
      })
    }
  }
}
</script>

<style scoped>
/* 页面基础样式重置 */
page {
  padding-top: 20rpx !important;
  padding-bottom: 20rpx !important;
  font-size: 12px;
}

/* 整体容器样式 */
.container {
  margin: 20rpx;
  border-radius: 20rpx;
  background: #fff;
  font-size: 12px;
}

.form-container {
  margin: 20rpx 0 0 0;
  padding: 15rpx;
  border-radius: 20rpx;
  background: #fff;
}

/* 表单一行两列布局核心样式 - 优化版 */
.form-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 10rpx 10rpx 10rpx;
  width: 100%;
  /* 新增：清除flex布局默认的基线对齐，避免垂直错位 */
  align-items: flex-start;
  /* 新增：计算宽度时包含内边距/边框，避免溢出 */
  box-sizing: border-box;
}

.form-item {
  display: flex;
  align-items: center;
  width: 48%; /* 保留你的48%宽度，留2%间距 */
  box-sizing: border-box;
  margin: 0 !important; /* 保留清除默认间距 */
  /* 新增适配uni-forms-item的关键样式 */
  padding: 0; /* 清除组件默认内边距 */
  min-height: auto; /* 取消组件默认最小高度，避免高度不一致 */
}

/* 新增：适配uni-data-select组件，防止下拉框溢出 */
.form-item .uni-data-select {
  width: 100%; /* 下拉选择器占满form-item宽度 */
  flex: 1; /* 让选择器自适应剩余空间 */
}

/* 新增：统一label标签样式，避免文字错位 */
.form-item .uni-forms-item__label {
  /* 根据你的需求调整label宽度，比如固定120rpx */
  flex: 0 0 120rpx;
  padding: 0; /* 清除默认内边距 */
  margin-right: 10rpx; /* label和选择器之间留间距 */
}

/* 新增：统一表单项内容区域样式 */
.form-item .uni-forms-item__content {
  flex: 1; /* 内容区域占满剩余宽度 */
  padding: 0; /* 清除默认内边距 */
}
/* 核心：父容器flex布局，通过justify-content: space-between实现左右分布 */
.btn-group {
  display: flex;
  justify-content: space-between; /* 关键：左右元素分别靠两端 */
  align-items: center; /* 垂直居中，保证按钮对齐 */
  width: 100%; /* 占满父容器宽度，确保分布效果 */
  padding: 20rpx 10rpx 0; /* 左右留间距，避免贴边 */
  box-sizing: border-box;
}

/* 左侧按钮容器：横向排列，靠左 */
.btn-left {
  display: flex;
  align-items: center;
}

/* 右侧按钮容器：横向排列，靠右 */
.btn-right {
  display: flex;
  align-items: center;
}

/* 表格容器样式 */
.uni-container {
  padding: 10px;
  box-sizing: border-box;
}

.uni-group {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 需求详情文字样式 */
.name {
  line-height: 18px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 分页区域样式 */
.uni-pagination-box {
  text-align: center;
}

/deep/ .uni-forms-item__label {
  font-size: 12px !important;
  padding: 0 !important;
}
/deep/ .uni-select, /deep/.uni-easyinput__content-input {
  font-size: 12px !important;
  height: 30px;
}

/* 弹窗样式 */
.dialog-container {
  background: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  width: 600rpx;
}

.dialog-title {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 10rpx 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 10rpx;
}

.dialog-btn-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
  gap: 10rpx;
}

/* 禁用按钮样式 */
/deep/ button[disabled] {
  background-color: #e5e5e5 !important;
  color: #999 !important;
  border-color: #ddd !important;
}
/deep/ .uni-forms-item {
  margin-bottom: 12rpx;
}

/deep/ .uni-table-td {
  text-align: center !important;
}
.ui-th {
  width: auto; 
  height: 18px; 
  line-height: 18px; 
  font-size: 13px;
}
.ui-th:last-child {
  width: 160rpx;
}
/deep/ .uni-table-th {
  padding: 16rpx 5rpx;
}
.uni-group button:last-child {
  margin-left: 0;
}
</style>