<script lang="ts" setup>
import globalDataAddView from "@/views/modules/global-config/components/globalDataAdd.vue";

import {
  globalDataPage,
  globalDataAdd,
  globalDataDel,
  globalDataUpdate,
} from "@/api/config";
import { computed, ref } from "vue";
const globalChildRef = ref();

//全局列表请求参数
const globalParams = ref({
  orders: [
    {
      column: "",
      isAsc: true,
    },
  ],
  pageNo: 1,
  pageSize: 10,
});
//分页
const globalHandleChange = (currentPage: number, pageSize: number) => {
  console.log(currentPage);
  globalParams.value.pageNo = currentPage;
  getglobalData();
};

const route = useRoute();
//全局数据数组
const globalDataList = ref([]);
//全局数据数据total
const globalDataTotal = ref(1);
//请求数据 全局数据
const getglobalData = () => {
  globalDataPage({
    ...globalParams.value,
    engineeringId: route.params.engineerId,
  }).then((res) => {
    globalDataList.value = res.data.records;
    globalDataTotal.value = res.data.totalCount;
  });
};

const globalHandleEdit = (index: number, row: any) => {
  globalChildRef.value && globalChildRef.value.showDialog("change", row);
};

const addglobalFun = () => {
  globalChildRef.value && globalChildRef.value.showDialog("add", {});
};

const globalSaveFun = (data: any, flag: string) => {
  if (flag === "add") {
    globalDataAdd(data).then((res) => {
      globalChildRef.value && globalChildRef.value.hiddenDialog(); //关闭弹框
      getglobalData(); //重新请求数据
    });
  } else {
    globalDataUpdate(data).then((res) => {
      globalChildRef.value && globalChildRef.value.hiddenDialog(); //关闭弹框
      getglobalData(); //重新请求数据
    });
  }
};

const globalHandledel = (index: number, row: any) => {
  globalDataDel({ id: row.id }).then((res) => {
    getglobalData(); //重新请求数据
  });
};

onMounted?.(() => {
  getglobalData(); //重新请求数据
});
</script>

<template>
  <div class="global-config-pane">
    <div class="btns">
      <el-button type="primary" @click="addglobalFun">
        <span class="add">+</span>
        新增
      </el-button>
    </div>

    <div>
      <el-table :data="globalDataList" style="width: 100%">
        <el-table-column label="序号" type="index" width="80" />

        <!--        <el-table-column label="数据项编码" prop="dataItemCode" />-->
        <el-table-column label="数据项名称" prop="dataItemName" />
        <!--        <el-table-column label="测试工程id" prop="engineeringId" />-->
        <el-table-column label="设定值" prop="setValue" />
        <el-table-column label="操作" prop="操作" fixed="right">
          <template #default="scope">
            <el-button
              text
              size="small"
              type="primary"
              @click="globalHandledel(scope.$index, scope.row)"
            >
              删除
            </el-button>
            <el-button
              text
              size="small"
              type="primary"
              @click="globalHandleEdit(scope.$index, scope.row)"
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="content-pag"
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="globalDataTotal"
        @change="globalHandleChange"
      />
    </div>
  </div>

  <globalDataAddView ref="globalChildRef" @save="globalSaveFun" />
</template>

<style scoped lang="scss">
.add {
  width: 12px;
  height: 12px;
  line-height: 12px;
  border-radius: 12px;
  text-align: center;
  background-color: #fff;
  color: #3b7cff;
  margin-right: 10px;
  vertical-align: middle;
}
.global-config-pane {
  padding: 0 20px;
  .btns {
    text-align: right;
    margin-bottom: 12px;
  }
}
.content-pag {
  float: right;
  margin-right: 20px;
  margin-top: 20px;
  padding-bottom: 30px;
}
</style>
