<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: "2"
    };

    // 编辑
    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 === '2')
  } else {
    ruleForm.jcjcmbList = []
  }

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

const handlexg = (row, index) => {
  dialogVisible.value = true;
  editIndex.value = index;
  form.list = Object.assign({}, row)
}
const handledelete = (row, index) => {
  emits('deletelist', { ...row })
}
</script>
<style scoped lang='scss'></style>
<!-- <template>
  <el-button type="primary" @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="{ row }">
        <span class="operedit" @click="handlexg(row)">
          <el-icon>
            <EditPen />
          </el-icon>修改</span>
        <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
          @confirm="handledelete(row)">
          <template #reference>
            <span class="operdel" size="small">
              <el-icon>
                <Delete />
              </el-icon>
              删除</span>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <div class="fenye">
    <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
  </div>
  <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';
import { getApi, postApi, deleteApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
})
const emits = defineEmits(['ndzdxmlist'])
//规则校验
const rules = reactive({
  content: [{ required: true, message: "检查内容不能为空", trigger: "blur" }],

});
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0
})
const dialogVisible = ref(false);
const form = reactive({
  list: {}
});
const ruleForm = reactive({
  jcjcmbList: []
})

const formRef = ref(null);
const loading = ref(false); //新增保存按钮截流
const addjcxzclick = () => {
  dialogVisible.value = true;
  formRef.value.clearValidate();
  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;
    const isEdit = !!form.list.id;
    const url = isEdit ? '/mosty-jcgl/zhjc/updateCheckContent' : '/mosty-jcgl/zhjc/addCheckContent';
    const params = isEdit ? form.list : { content: form.list.content, type: "2" };
    await postApi(params, url);
    ElMessage.success(isEdit ? "修改成功" : "新增成功");
    getlist();
    dialogVisible.value = false;

  } catch {
    // 验证失败静默处理
  } finally {
    loading.value = false;
  }
}
onMounted(() => {
  getlist()
})
const getlist = () => {
  let params = {
    pageCurrent: listQuery.value.pageCurrent,
    pageSize: listQuery.value.pageSize,
    type: "2"
  }
  getApi(params, '/mosty-jcgl/zhjc/getCheckContent').then(res => {
    console.log(res, 'resresres');
    ruleForm.jcjcmbList = Object.assign([], res.records)
    listQuery.value.total = res.total
  })
}
const handleCurrentChange = (val) => {
  listQuery.value.pageCurrent = val;
  getlist()
}
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  listQuery.value.pageCurrent = 1;
  getlist()
}
const handlexg = (row) => {
  dialogVisible.value = true;
  form.list = Object.assign({}, row);
}
const handledelete = (row) => {

  deleteApi({}, `/mosty-jcgl/zhjc/delCheckContent/${row.id}`).then(res => {
    if (res) {
      ElMessage.success("删除成功");
      getlist();
    }
  })
}
</script>
<style scoped lang='scss'></style> -->
