<template>
  <div class="bigBox">
    <div class="zy-right">
      <div class="head">
        <div class="title">车辆双检配置</div>
      </div>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <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>
      </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 #cartype="{ row }">
            <span>{{ row.cartype === '1' ? '燃油车' : '新能源车' }}</span>
          </template>
          <template #actions="{ row }">
            <span class="operedown" @click="edit(row)" s ize="small"><el-icon>
                <Setting />
              </el-icon>管理</span>
            <span class="operedit" v-if="getItem('USERID') == '000000'" @click=" editInfo(row)"><el-icon>
                <EditPen />
              </el-icon>修改</span>
            <el-popconfirm v-if="getItem('USERID') == '000000'" 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">
          <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize"></MOSTY.Pages>
        </div>
      </section>

    </div>
    <el-dialog v-model="dialogVisible" :title="title" :before-close="CloseEvent" width="600px">
      <div>
        <el-form ref="ruleFormRef" label-width="130px" :model="fromObj" :rules="rules" style="display: block;">
          <el-form-item label="车辆双检类型:" prop="car3typedm">
            <el-select v-model="fromObj.car3typedm" style="width: 250px" clearable>
              <el-option v-for="item in D_TB_CLSJLX" :key="item" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="检查项目名称:" prop="checkitemname">
            <el-input v-model="fromObj.checkitemname" clearable style="width: 250px" />
          </el-form-item>
          <el-form-item label="检查车辆类型:" prop="cartype">
            <el-select v-model="fromObj.cartype" style="width: 250px" clearable>
              <el-option label="燃油车" value="1" />
              <el-option label="新能源车" value="2" />
            </el-select>
          </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, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { getItem } from "@/utils/storage";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const emit = defineEmits("changePage");
const { D_TB_CLSJLX } = proxy.$dict("D_TB_CLSJLX");
const searchArr = reactive([
  {
    showType: "input",
    prop: "checkitemname",
    width: '250px',
    placeholder: '请输入检查名称'
  }
]);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "检查名称",
      prop: "checkitemname"
    },
    {
      title: "车辆双检类型",
      prop: "car3typedm",
      slot: true
    },
    {
      title: "车辆类型",
      prop: "cartype",
      slot: true
    },
    {
      title: "创建时间",
      prop: "xtCjsj"
    },
    {
      title: "子项数量",
      prop: "count"
    },
    {
      title: "操作",
      prop: "actions",
      actionsW: '400',
      slot: true
    }
  ],

  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  }
});
const dialogVisible = ref(false);
const title = ref();
const savebtn = ref(true);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20
});
const changeNo = (val) => {
  data.pageConfiger.pageCurrent = val;
  listQuery.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  data.pageConfiger.pageSize = val;
  listQuery.pageSize = val;
  getTableData();
};
// 查询数据
const onSearch = (obj) => {
  listQuery.checkitemname = obj.checkitemname;
  data.pageConfiger.pageCurrent = 1;
  listQuery.pageCurrent = 1;
  getTableData();
};
const edit = (row) => {
  row.title = "车辆双检基础库配置-" + row.checkitemname;
  emit("changePage", "AddOrEdite", row);
};
const tableloading = ref(false);
function getTableData() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/check3carItem/getPageList`).then((res) => {
    if (res.records) {
      data.tableData = res.records;
      tableloading.value = false;
      data.pageConfiger.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}


//新增
const addInfo = () => {
  fromObj.value = {};
  title.value = "车辆双检内容基础库配置-基本信息新增";
  dialogVisible.value = true;
};
//修改
function editInfo(row) {
  dialogVisible.value = true;
  title.value = "车辆双检内容基础库配置-基本信息修改";
  getmain(row.id);
}
const getmain = (id) => {
  if (id) {
    getApi({}, "/mosty-jcgl/check3carItem/getInfo?id=" + id).then(
      (res) => {
        if (res) {
          fromObj.value = res;
        }
      }
    );
  }
};
const rules = reactive({
  car3typedm: [
    { required: true, message: "请选择车辆双检类型", trigger: "blur" }
  ],
  cartype: [
    { required: true, message: "请选择车辆类型", trigger: "blur" }
  ],
  checkitemname: [
    { 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) {
        if (!fromObj.value.id) {
          postApi(fromObj.value, "/mosty-jcgl/check3carItem/add")
            .then((res) => {
              ElMessage.success("新增成功");
              dialogVisible.value = false;
              getTableData();
            })
        } else {
          postApi(fromObj.value, "/mosty-jcgl/check3carItem/edit")
            .then((res) => {
              ElMessage.success("修改成功");
              dialogVisible.value = false;
              getTableData();
            })

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

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 20px !important;
}

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

.bigBox {
  background: #fff;
}

.button {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 12px;
}
::v-deep .el-form-item {
  margin-bottom: 18px;
}
</style>