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

        <view class="btn-group">
        <view class="btn-left">

          <button
              class="iconfont icon-add mini-btn add-btn"
              @click="submit('form')"
              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"
          > 删除</button>
          <button
              class="iconfont icon-edit mini-btn edit-btn"
              hover-class="is-hover"
              type="default"
              size="mini"
          > 编辑</button>
        </view>

          <view class="btn-right">
            <button
                class="iconfont icon-search mini-btn"
                hover-class="is-hover"
                type="default"
                size="mini"
            > 查询</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%; font-size: 11px;"
          :border-width="1"
      >
        <uni-tr>
          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">选择</uni-th>
          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">需求标题</uni-th>
          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">需求详情</uni-th>
          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">优先级</uni-th>
          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">进度</uni-th>
          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">需求类型</uni-th>
          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">经办人名称</uni-th>
          <uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index" style="height: 30px; line-height: 30px;">
          <uni-td style="width: auto; padding: 1px 0; font-size: 11px;">
            <uni-checkbox :value="index" @change="(e) => handleCheckboxChange(e, index)"></uni-checkbox>
          </uni-td>
          <uni-td style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.title }}</uni-td>
          <uni-td style="width: auto; padding: 1px 0; font-size: 11px;">
            <view class="name">{{ item.detail }}</view>
          </uni-td>
          <uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.priority }}</uni-td>
          <uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.progress }}</uni-td>
          <uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.reqType }}</uni-td>
          <uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.assigneeName }}</uni-td>
          <uni-td style="width: auto; padding: 1px 0; font-size: 11px;">
            <view class="uni-group">
              <button class="uni-button" size="mini" type="primary" style="padding: 1px 6px; font-size: 10px;">修改</button>
              <button class="uni-button" size="mini" type="warn" style="padding: 1px 6px; font-size: 10px; margin-left: 3px;">删除</button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
      <view class="uni-pagination-box" style="margin-top: 8px;">
        <uni-pagination
            show-icon
            :page-size="pageSize"
            :current="pageCurrent"
            :total="total"
            @change="change"
            style="font-size: 11px;"
        />
      </view>
    </view>
  </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 UniPagination from "../../../uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue";
import { listRequire } from "../../../api/system/require";
import UniTable from "../../../uni_modules/uni-table/components/uni-table/uni-table.vue";

export default {
  components: {UniTable, UniPagination, UniTd, UniTr, UniTh },
  data() {
    return {
      searchVal: '',
      tableData: [],
      pageSize: 10,
      pageCurrent: 1,
      total: 0,
      range:[],
      form: {
        title:null,
        detail:null,
        priority:null,
        progress: null
      },
      loading: false,
      selectedIndexs: [] // 已选择的行索引
    }
  },
  onLoad() {
    this.getData()
  },
  methods: {
    // 多选处理
    selectedItems() {
      return this.selectedIndexs.map(i => this.tableData[i])
    },
    // 多选（修复参数传递）
    handleCheckboxChange(e, index) {
      if (e.detail.value) {
        // 去重处理
        if (!this.selectedIndexs.includes(index)) {
          this.selectedIndexs.push(index)
        }
      } else {
        this.selectedIndexs = this.selectedIndexs.filter(item => item !== index)
      }
    },
    // 批量删除
    delTable() {
      console.log(this.selectedItems())
    },
    // 分页触发
    change(e) {
      this.selectedIndexs = []
      this.getData(e.current)
    },
    // 搜索
    search() {
      this.getData()
    },
    submit(form) {
      console.info(form)
    },
    // 获取数据
    getData(pageCurrent) {
      this.loading = true
      this.pageCurrent = pageCurrent || this.pageCurrent
      const queryParams = {
        imei: this.imei,
        pageNum: this.pageCurrent,
        pageSize: this.pageSize,
      }
      listRequire(queryParams).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
      })
    },
    // 补充selection-change事件
    selectionChange(e) {
      console.log('表格选中项:', e)
    }
  }
}
</script>

<style scoped>
/* 页面基础样式重置 */
page {
  padding-top: 0 !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布局，通过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;
}


.form-item {
  display: flex;
  align-items: center;
  width: 48%; /* 每个表单项占48%宽度，留间距 */
  box-sizing: border-box;
  margin: 0 !important; /* 清除默认间距 */
}


</style>