<script lang="ts" setup>
import { computed, ref, watch, defineProps } from "vue";
import {
  instrumentConfigPage,
  engrInstrumentConfigUpdate,
  engrInstrumentConfigAdd,
  engrInstrumentConfigDel,
} from "@/api/config";
import { useCommonStoreHook } from "@/store";
const { currentProjectId, currentTestItemId } = toRefs(useCommonStoreHook());
import configAddVue from "@/views/modules/global-config/components/ConfigAdd.vue";

//配置列表请求参数
const configParams = ref({
  // engineeringId: "", //测试工程id
  // instrumentCode: currentProjectId.value, //	仪器编码		false
  instrumentProperty: "", //	仪器属性(1工程仪器 2执行仪器)
  orders: [
    {
      column: "",
      isAsc: true,
    },
  ],
  pageNo: 1,
  pageSize: 10,
});
//分页
const configHandleChange = (currentPage: number, pageSize: number) => {
  console.log(currentPage);
  configParams.value.pageNo = currentPage;
  getInstrumentConfig();
  // console.log(pageSize);
};
const route = useRoute();
//测试仪器配置数组
const instrumentConfigList = ref([]);
//数据total
const instrumentConfigTotal = ref(1);
//请求数据
const getInstrumentConfig = () => {
  instrumentConfigPage({
    ...configParams.value,
    engineeringId: route.params.engineerId,
  }).then((res) => {
    instrumentConfigList.value = res.data.records;
    instrumentConfigTotal.value = res.data.totalCount;
  });
};

const props = defineProps(["property", "tabName"]);

watch(
  () => props.property,
  (newVal) => {
    // console.log(newVal);
    configParams.value.instrumentProperty = newVal; //	仪器属性(1工程仪器 2执行仪器)
    getInstrumentConfig();
  },
  { immediate: true }
);

const configChildRef = ref();

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

const addConfigFun = () => {
  configChildRef.value && configChildRef.value.showDialog("add", {});
};

/**
//新增或修改仪器配置
 *
 * @param {any} data - 要保存的仪器配置数据
 * @param {string} flag - 操作标识，"add" 表示新增，其他值表示修改
 *
 * 根据 flag 的值调用相应的 API 进行新增或修改操作，
 * 操作完成后关闭弹框并重新请求仪器配置数据。
 */
const configSaveFun = (data: any, flag: string) => {
  data.instrumentProperty = configParams.value.instrumentProperty; //	仪器属性(1工程仪器 2执行仪器)

  if (flag === "add") {
    engrInstrumentConfigAdd(data).then((res) => {
      configChildRef.value && configChildRef.value.hiddenDialog(); //关闭弹框
      getInstrumentConfig(); //重新请求数据
    });
  } else {
    engrInstrumentConfigUpdate(data).then((res) => {
      configChildRef.value && configChildRef.value.hiddenDialog(); //关闭弹框
      getInstrumentConfig(); //重新请求数据
    });
  }
};

/**
 * 处理删除配置项的函数
 * @param {number} index - 配置项在列表中的索引
 * @param {any} row - 当前配置项的数据对象
 *
 * 此函数调用 configDel 方法删除指定的配置项，并在成功后重新请求配置数据。
 */
const configHandleDelete = (index: number, row: any) => {
  engrInstrumentConfigDel({ id: row.id }).then((res) => {
    getInstrumentConfig(); //重新请求数据
  });
};
</script>
<template>
  <div class="global-config-pane">
    <div class="btns">
      <el-button type="primary" @click="addConfigFun">
        <span class="add">+</span>
        新增
      </el-button>
    </div>

    <div>
      <el-table :data="instrumentConfigList" style="width: 100%">
        <el-table-column label="序号" type="index" width="80" />
        <el-table-column label="配置地址" prop="configIp" />
        <el-table-column label="配置名称" prop="configName" />
        <!--        <el-table-column label="仪器编码" prop="instrumentCode" />-->
        <el-table-column label="仪器类型" prop="typeLabel" />
        <el-table-column label="操作" prop="操作" fixed="right">
          <template #default="scope">
            <el-button
              text
              size="small"
              type="primary"
              @click="configHandleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
            <el-button
              text
              size="small"
              type="primary"
              @click="configHandleEdit(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="instrumentConfigTotal"
        @change="configHandleChange"
      />
    </div>
  </div>

  <configAddVue
    ref="configChildRef"
    @save="configSaveFun"
    :tabName="tabName"
  ></configAddVue>
</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>
