<template>
  <table class="el-table custom-table" style="width: 100%">
    <thead>
    <tr>
      <th style="width: 60px">执行顺序</th>
      <th>检测项</th>
      <th>参数中文名</th>
      <th>参数英文名</th>
      <th>操作类型</th>
      <th>参数来源</th>
      <th>参数值</th>
      <th>是否必填</th>
      <th>备注</th>
      <th style="width: 120px">操作</th>
    </tr>
    </thead>
    <draggable
        v-model="tableData"
        :animation="200"
        handle=".drag-handle"
        item-key="id"
        tag="tbody"
    >
      <template #item="{ element, index, drag }">
        <tr :class="{ 'dragging-row': drag }">
          <td>
            <span class="drag-handle drag-icon">⋮⋮</span>
          </td>

          <td>
            <template v-if="editIndex === index">
              <el-input v-model="editRow.paramEnName" placeholder="请输入参数名称"/>
            </template>
            <template v-else>
              {{ element.paramEnName }}
            </template>
          </td>
<!--          <td>-->
<!--            <template v-if="editIndex === index">-->
<!--              <el-select v-model="editRow.detectId" placeholder="请选择检测项">-->
<!--                <el-option v-for="item in paramsListData.detectList" :key="item.value" :label="item.label"-->
<!--                           :value="item.value"></el-option>-->
<!--              </el-select>-->
<!--            </template>-->
<!--            <template v-else>-->
<!--              {{ paramsListData.detectList.find((item) => item.value === element.detectId)['label'] }}-->
<!--            </template>-->
<!--          </td>-->
          <td>
            <template v-if="editIndex === index">
              <el-input v-model="editRow.paramCnName" placeholder="请输入参数名称"/>
            </template>
            <template v-else>
              {{ element.paramCnName }}
            </template>
          </td>
<!--          <td>-->
<!--            <template v-if="editIndex === index">-->
<!--              <el-select v-model="editRow.operationType" placeholder="请选择检测项">-->
<!--                <el-option v-for="item in paramsListData.typeList" :key="item.value" :label="item.label"-->
<!--                           :value="item.value"/>-->
<!--              </el-select>-->
<!--            </template>-->
<!--            <template v-else>-->
<!--              {{ paramsListData.typeList.find((item) => item.value === element.operationType)['label'] }}-->
<!--            </template>-->
<!--          </td>-->
<!--          <td>-->
<!--            <template v-if="editIndex === index">-->
<!--              <el-select v-model="editRow.paramSource" placeholder="请选择检测项">-->
<!--                <el-option v-for="item in paramsListData.sourceList" :key="item.value" :label="item.label"-->
<!--                           :value="item.value"/>-->
<!--              </el-select>-->
<!--            </template>-->
<!--            <template v-else>-->
<!--              {{ paramsListData.sourceList.find((item) => item.value === element.paramSource)['label'] }}-->
<!--            </template>-->
<!--          </td>-->
          <td>
            <template v-if="editIndex === index">
              <el-input v-model="editRow.sourceValue" :rows="3" placeholder="请输入内容" type="textarea"/>
            </template>
            <template v-else>
              <el-input v-model="editRow.sourceValue" :rows="3" disabled placeholder="请输入内容" type="textarea"/>
            </template>
          </td>
          <td>
            <template v-if="editIndex === index">
              <el-input v-model="editRow.sourceValue" :rows="3" placeholder="请输入内容" type="textarea"/>
            </template>
            <template v-else>
              <el-input v-model="editRow.sourceValue" :rows="3" disabled placeholder="请输入内容" type="textarea"/>
            </template>
          </td>
          <td>
            <template v-if="editIndex === index">
              <el-switch
                  v-model="editRow.required"
                  active-text="是"
                  inactive-text="否"
                  :active-value="true"
                  :inactive-value="false"
              />
            </template>
            <template v-else>
              <el-tag type="success" v-if="element.required">是</el-tag>
              <el-tag type="warning" v-else>否</el-tag>
            </template>
          </td>
          <td>
            <template v-if="editIndex === index">
              <el-input v-model="editRow.remark" :rows="3" placeholder="请输入内容" type="textarea"/>
            </template>
            <template v-else>
              <el-input v-model="editRow.remark" :rows="3" disabled placeholder="请输入内容" type="textarea"/>
            </template>
          </td>
          <td>
            <template v-if="editIndex === index">
              <el-button size="small" type="primary" @click="saveRow(index)"
              >保存
              </el-button
              >
              <el-button size="small" @click="cancelEdit">取消</el-button>
            </template>
            <template v-else>
              <el-button size="small" @click="editRowFn(index, element)"
              >编辑
              </el-button
              >
            </template>
          </td>
        </tr>
      </template>
    </draggable>
  </table>
  <div style="margin-top: 16px">
    <el-button type="primary" @click="addRow">添加参数</el-button>
    <el-button type="primary" @click="handleSubmit">查看</el-button>
  </div>
</template>

<script setup>
import {nextTick, reactive, ref} from "vue";
import draggable from "vuedraggable";
import {ElButton, ElInput, ElMessage} from "element-plus";
import {getParamSources, getParamTypes} from "@/api/test/params.js";
import {listDetect} from "@/api/test/detect.js";

const tableData = ref([
  {
    remark: null,
    id: 6,
    detectId: "d5042a11d91ee55bd7a6fb03e2d73dd9",
    operationType: "LLM_TOUCH",
    sort: 1,
    paramEnName: "open",
    paramCnName: "插入钥匙",
    paramSource: "TEXT",
    sourceValue: "打开",
    required: true,
    detectName: "打开车窗"
  },
  {
    id: 7,
    detectId: "d5042a11d91ee55bd7a6fb03e2d73dd9",
    operationType: "LLM_TOUCH",
    sort: 1,
    paramEnName: "click",
    paramCnName: "点击开关",
    paramSource: "TEXT",
    sourceValue: "打开",
    required: true,
    detectName: "打开车窗",
    remark: null,
  },
]);

const editIndex = ref(-1);
const editRow = reactive({
  operationType: "",
  paramEnName: "",
  paramCnName: "",
  paramSource: "",
  sourceValue: "",
  required: false,
  remark: ""
});
let rowId = Date.now();
function editRowFn(index, row) {
  editIndex.value = index;
  editRow.rowId = rowId++;
  editRow.detectId = row?.detectId;
  editRow.paramEnName = row?.paramEnName;
  editRow.paramCnName = row?.paramCnName;
  editRow.operationType = row?.operationType;
  editRow.paramSource = row?.paramSource;
  editRow.sourceValue = row?.sourceValue;
  editRow.required = row?.required;
  editRow.remark = row?.remark;
}

function saveRow(index) {
  // 校验必填项
  if (!editRow.name || !editRow.age || !editRow.address) {
    ElMessage.error("请填写完整信息");
    return;
  }
  tableData.value[index] = {...tableData.value[index], ...editRow};
  editIndex.value = -1;
}

function cancelEdit() {
  editIndex.value = -1;
}

function addRow() {
  // 新增一行，内容为空，自动进入编辑状态
  const newRow = {name: "", age: "", address: ""};
  tableData.value.push(newRow);
  nextTick(() => {
    editRowFn(tableData.value.length - 1, newRow);
  });
}

const handleSubmit = () => {
  console.log(tableData.value);
};


const paramsListData = reactive({
  sourceList: [],
  typeList: [],
  detectList: [],
})

const getParamSourcesList = (row) => {
  getParamSources().then((response) => {
    paramsListData.sourceList = response.data?.map(item => ({label: item.description, value: item.code}))
  })
}
const getParamTypesList = (row) => {
  getParamTypes().then((response) => {
    paramsListData.typeList = response.data?.map(item => ({label: item.description, value: item.code}))
  })
}
const getDetectList = (row) => {
  listDetect().then((response) => {
    paramsListData.detectList = response.rows?.map(item => ({label: item.detectName, value: item.id}))
  })
}

getParamSourcesList()
getParamTypesList()
getDetectList()
</script>

<style scoped>
.custom-table {
  border-collapse: collapse;
  font-size: 16px;
  background: #fff;
}

.custom-table th,
.custom-table td {
  border: 1px solid #ebeef5;
  padding: 12px 16px;
  text-align: left;
  height: 48px;
  transition: background 0.2s;
}

.custom-table th {
  background: #f5f7fa;
  font-weight: bold;
  color: #333;
}

.custom-table tbody tr:hover {
  background: #f0f9eb;
}

.drag-icon {
  cursor: move;
  color: #409eff;
  font-size: 20px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f4f8ff;
  border: 1px solid #d9ecff;
  transition: box-shadow 0.2s, background 0.2s;
}

.dragging-row {
  box-shadow: 0 4px 16px 0 rgba(64, 158, 255, 0.15);
  background: #e6f7ff !important;
}
</style>
