<script setup lang="ts">
import ResourceForm from "./resourceForm.vue";
import ResourceDetail from "./resourceDetail.vue";
import { delInstrumentResource, selectInstrumentResource } from "@/api/config";
import { ref } from "vue";
import type { TabsPaneContext } from "element-plus";

const resourceList = ref<any[]>([]);

const props = defineProps({
  property: {
    type: String,
    default: "1",
  },
});

onMounted?.(() => {
  getList();
});

const getList = () => {
  selectInstrumentResource({ instrumentProperty: props.property }).then(
    (data) => {
      resourceList.value = data.data;
    }
  );
};

const configHandleDelete = async (index: number, row: any) => {
  await delInstrumentResource(row.id);
  resourceList.value.splice(index, 1);
};

const configHandleEdit = async (index: number, row: any) => {
  resourceRef.value && resourceRef.value.openDialog("2", row, props.property);
};

const addConfigFun = () => {
  resourceRef.value && resourceRef.value.openDialog("1", {}, props.property);
};

const resourceRef = ref();
const detailRef = ref();

const showDetail = (row: any) => {
  detailRef.value && detailRef.value.openDialog(row);
};
</script>

<template>
  <div>
    <div class="btns">
      <el-button type="primary" @click="addConfigFun">
        <span class="add">+</span>
        新增
      </el-button>
    </div>
    <el-table :data="resourceList" show-overflow-tooltip>
      <el-table-column label="序号" type="index" width="80" />

      <el-table-column label="波特率" prop="baudRate"> </el-table-column>
      <el-table-column label="通道号" prop="channel"> </el-table-column>
      <el-table-column label="校验位" prop="checkBit"> </el-table-column>
      <el-table-column label="通信配置" prop="commConfig" width="200">
      </el-table-column>
      <el-table-column label="连接url" prop="connUrl"> </el-table-column>
      <el-table-column label="数据位" prop="dataBit"> </el-table-column>
      <el-table-column label="配置型号" prop="instrumentModule">
      </el-table-column>
      <el-table-column label="仪器名称" prop="instrumentName">
      </el-table-column>
      <!--      <el-table-column label="仪器属性" prop="instrumentProperty">-->
      <!--        <el-input v-model="formData.instrumentProperty" />-->
      <!--      </el-table-column>-->
      <el-table-column label="设备地址" prop="ip"> </el-table-column>
      <el-table-column label="设备端口" prop="port"> </el-table-column>
      <el-table-column label="读url" prop="queryUrl"> </el-table-column>
      <el-table-column label="槽位号" prop="slot"> </el-table-column>
      <el-table-column label="停止位" prop="stopBit"> </el-table-column>
      <el-table-column label="写url" prop="writeUrl"> </el-table-column>

      <el-table-column label="通信类型" prop="commType" />
      <el-table-column label="仪器类型" prop="instrumentType">
      </el-table-column>

      <el-table-column label="操作" prop="操作" fixed="right" width="220">
        <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>
          <el-button
            text
            size="small"
            type="primary"
            @click="showDetail(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <ResourceForm ref="resourceRef" @finished="getList"></ResourceForm>
    <ResourceDetail ref="detailRef"></ResourceDetail>
  </div>
</template>

<style scoped lang="scss">
.btns {
  text-align: start;
  margin: 12px;
}
.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;
}
</style>
