<template>
  <div class="usermanage">
    <div class="right">
      <div class="head">
        <div class="title">{{ props.editObj.title }}</div>
      </div>
      <el-divider />
      <section class="query-flex" ref="queryHeight">
        <section class="query-section">
          <el-input v-model="listQuery.checkcontent" clearable placeholder="请输入检查名称" style='width:250px;' />
        </section>
        <div class="query-btn">
          <el-button @click="getTableData" class="ml6">
            <el-icon>
              <Search />
            </el-icon> <span>查询</span></el-button>
          <el-button @click="handleRest">
            <el-icon>
              <Refresh />
            </el-icon> <span>重置</span></el-button>
        </div>
      </section>
      <el-divider />
      <section class="button">
        <el-button type="primary" @click="addInfo" v-if="getItem('USERID') == '000000'">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
        <el-button @click="toblack">返回</el-button>
      </section>
      <section class="eltab3">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
          <template #car3typedm="{ row }">
            <dict-tag v-if="row.car3typedm" :options="D_TB_CLSJLX" :value="row.car3typedm" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #actions="{ row }">
            <span class="operedit" @click="editInfo(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>
        </MOSTY.Table>
        <div class="fenye">
          <Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize"></Pages>
        </div>
      </section>
    </div>
    <el-dialog v-model="dialogVisible" :title="title" width="600px" :before-close="CloseEvent">
      <div>
        <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="130px" :model="fromObj" :inline="true"
          :rules="rules">
          <el-form-item label="项目名称:" prop="checkcontent">
            <el-input v-model="fromObj.checkcontent" clearable style="width: 250px" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">

          <el-button v-if="savebtn" @click="saveinfo(ruleFormRef)">
            <el-icon>
              <DocumentChecked />
            </el-icon>保存</el-button>
          <el-button @click="CloseEvent">
            <el-icon>
              <DocumentDelete />
            </el-icon> 关闭
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import Pages from "@/components/aboutTable/Pages/index.vue";
import { ElMessage } from "element-plus";
import { getItem } from "@/utils/storage";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
const emit = defineEmits("changePage");
const { proxy } = getCurrentInstance();
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});

const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "序号",
      prop: "orderno",
    },
    {
      title: "检查项目内容",
      prop: "checkcontent"
    },
    {
      title: "操作",
      prop: "actions",
      fixed: 'right',
      slot: true
    }
  ],

  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  }
});
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
  checkcarItemid: props.editObj.id
});
onMounted(() => {
  if (getItem('USERID') == '000000') {
    data.tableColumn.push({
      title: "操作",
      prop: "actions",
      fixed: 'right',
      slot: true
    })
  }
  getTableData();
});
function handleRest() {
  listQuery.pageCurrent = 1
  data.pageConfiger.pageCurrent = 1
  listQuery.checkcontent = ''
  getTableData();
}
//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  data.pageConfiger.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  data.pageConfiger.pageSize = val;
  getTableData();
};

const tableloading = ref(false);
const getTableData = () => {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/check3carItem/getContPageList`).then((res) => {
    if (res.records) {
      data.tableData = res.records;
      tableloading.value = false;
      data.pageConfiger.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  });
};
const dialogVisible = ref(false);
const title = ref();
const savebtn = ref(true);
//新增
const addInfo = () => {
  fromObj.value = {};
  title.value = "车辆双检内容基础库配置-检查内容新增";
  dialogVisible.value = true;
};
//修改
function editInfo(row) {
  dialogVisible.value = true;
  title.value = "车辆双检内容基础库配置-检查内容修改";
  fromObj.value = row;
}
const toblack = () => {
  emit("changePage", "Main");
};
const rules = reactive({
  checkcontent: [
    { required: true, message: "项目名称不能为空", trigger: "blur" }
  ]
});
const ruleFormRef = ref();
const fromObj = ref({});
const CloseEvent = () => {
  if (savebtn.value) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        dialogVisible.value = false;
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    dialogVisible.value = false;
  }

};
//保存
const saveinfo = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      if (fromObj.value) {
        fromObj.value.checkcarItemid = props.editObj.id;
        if (title.value == "车辆双检内容基础库配置-检查内容新增") {
          postApi(fromObj.value, "/mosty-jcgl/check3carItem/addCont")
            .then((res) => {
              ElMessage.success("新增成功");
              dialogVisible.value = false;
              getTableData();
            })
        } else if (title.value == "车辆双检内容基础库配置-检查内容修改") {
          postApi(fromObj.value, "/mosty-jcgl/check3carItem/editCont")
            .then((res) => {
              ElMessage.success("修改成功");
              dialogVisible.value = false;
              getTableData();
            })

        }
      }
    } else {
      ElMessage.error("请输入必填项");
    }
  });
};
//删除
const handledelete = (row) => {
  getApi({}, "/mosty-jcgl/check3carItem/delCont/" + row.id).then((res) => {
    ElMessage.success("删除成功");
    getTableData();
  });
};


</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 10vh !important;
}

.eltab3 {
  height: calc(100vh - 368px);
}

.usermanage {
  display: flex;


  .right {
    height: calc(100%);
    padding: 0 10px;
    width: calc(100%);
    background-color: #fff;
    box-sizing: border-box;

    .head {
      display: flex;
      background: #fff;
      justify-content: space-between;

      .title {
        display: flex;
        margin-top: 10px;
        color: black;
        font-size: 20px;
      }
    }

  }
}

.button {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 12px;
}
</style>