<template>
  <el-button type="primary" :disabled="props.disabled" @click="addjcxzclick" style="margin-bottom: 10px;">
    <el-icon>
      <CirclePlus />
    </el-icon>
    <span>新增检查内容</span>
  </el-button>
  <el-table stripe :data="ruleForm.jcjcmbList" height='32vh' style="width: 100%"
    @selection-change="handleSelectionChange" border>
    <el-table-column label="序号" type="index" width="100" align="center" />
    <el-table-column prop="content" label="检查内容" align="center" />
    <el-table-column label="操作" width="140" fixed="right">
      <template #default="scope">
        <span v-if="!props.disabled" class="operedit" @click="handlexg(scope.row, scope.$index)">
          <el-icon>
            <EditPen />
          </el-icon>修改</span>
        <el-popconfirm v-if="!props.disabled" confirm-button-text="是" cancel-button-text="否" icon-color="red"
          title="确定要删除?" @confirm="handledelete(scope.row, scope.$index)">
          <template #reference>
            <span class="operdel" size="small">
              <el-icon>
                <Delete />
              </el-icon>
              删除</span>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog title="新增检查内容" v-model="dialogVisible" width="40%" :before-close="handleClose">
    <el-form :model="form.list" label-width="120px" :rules="rules" ref="formRef">
      <el-form-item label="检查内容" prop="content">
        <el-input v-model="form.list.content" style="width: 100%;"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose" style="margin-right:10px ;">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="sumibt">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onBeforeMount, onMounted, watch, defineProps, defineEmits } from 'vue';
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  /** 是否禁用（只能查看） */
  disabled: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['ndzdxmlist', "deletelist"])
//规则校验
const rules = reactive({
  content: [{ required: true, message: "检查内容不能为空", trigger: "blur" }],

});
//新增检查内容弹窗
const dialogVisible = ref(false);
const form = reactive({
  list: {}
});
const ruleForm = reactive({
  jcjcmbList: []
})

const formRef = ref(null);
const loading = ref(false); //新增保存按钮截流
const editIndex = ref(null); //编辑行
const addjcxzclick = () => {
  dialogVisible.value = true;

  form.list = {};
};
const handleClose = () => {
  dialogVisible.value = false;
  formRef.value.resetFields(); //重置表单
  formRef.value.clearValidate();
};
const sumibt = async () => {
  if (!formRef) return;
  try {
    await formRef.value.validate();
    loading.value = true;
    let params = {
      content: form.list.content,
      type: "1"
    };

    // 编辑模式
    if (editIndex.value !== null) {
      params.id = form.list.id;
      params.zhId = form.list.zhId;
    }
    // 传递数据和索引
    emits('ndzdxmlist', params, editIndex.value);
    dialogVisible.value = false;

    // 重置编辑索引
    editIndex.value = null;

  } catch {
    // 验证失败静默处理
  } finally {
    loading.value = false;
    dialogVisible.value = false;
  }
}
onMounted(() => {

})
watch(() => props.data, (newVal, oldVal) => {
  if (newVal) {
    ruleForm.jcjcmbList = newVal.filter(item => item.type === '1')
  } else {
    ruleForm.jcjcmbList = []
  }

}, {
  deep: true,
  immediate: true
}
)

const handlexg = (row, index) => {
  dialogVisible.value = true;
  editIndex.value = index;
  form.list = { ...row };
}
const handledelete = (row, index) => {

  emits('deletelist', { ...row })
}
</script>
<style scoped lang='scss'></style>
