<template>
  <el-card class="content-div">
    <div class="all-content">
      <div class="top-div">
        <el-button type="primary" @click="addData">新增</el-button>
      </div>
      <el-table
        :data="tableData"
        height="730"
        style="width: 100%"
        border
        stripe
        :header-cell-style="{ background: '#F6F7FC' }"
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column
          prop="name"
          label="透传名称"
          width="120"
          align="center"
        />
        <el-table-column
          prop="type"
          label="透传类型"
          width="120"
          align="center"
        />
        <el-table-column
          prop="serial"
          label="本地串口"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="serialInfo"
          label="串口参数"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="net"
          label="透传接口"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="网络状态"
          width="180"
          align="center"
        >
          <template #default="scope">
            <span
              class="txStatusDiv"
              :style="{
                background: scope.row.status == 1 ? '#13ce66' : 'red',
              }"
              >{{ scope.row.status == 1 ? "正常" : "异常" }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="enable"
          label="启用状态"
          width="180"
          align="center"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.enable"
              inline-prompt
              active-text="启用"
              inactive-text="停用"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="red"
              @change="changeStatus(scope.row)"
            />
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="portParam"
          label="串口接收"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="portParam"
          label="网络接收"
          width="180"
          align="center"
        >
        </el-table-column> -->
        <el-table-column label="透传管理" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-button type="primary" @click="editData(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" @click="delData(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <AddTransparent
      :formData="formData"
      :dialogVisible="dialogVisible"
      @dialogClose="dialogClose"
      @dialogSuccess="dialogSuccess"
    ></AddTransparent>
  </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
import AddTransparent from "@/components/AddTransparent.vue";
export default {
  name: "page",
  components: {
    AddTransparent,
  },
  setup() {
    const state = reactive({
      tableData: [],
      formData: {},
      dialogVisible: false,
    });

    onMounted(() => {
      getTableData();
    });

    const getTableData = async () => {
      const res = await infoApi.getTc();
      state.tableData = res.data;
    };
    const dialogClose = () => {
      state.dialogVisible = false;
    };

    const dialogSuccess = () => {
      state.dialogVisible = false;
      getTableData();
    };
    const addData = () => {
      state.formData = {
        type: 0,
        serial: {
          name: "COM1",
          baudrate: 115200,
          databits: 8,
          stopbits: 1,
          parity: 78,
        },
        tcp: [
          {
            name: "TCP服务端",
            host: "localhost",
            port: "0.0.0.0",
            disabled: true,
          },
        ],
        // transData1: [
        //   {
        //     localPort: "COM1",
        //     waveFrequency: "9600",
        //     dataBits: "8",
        //     stopBits: "1",
        //     validBits: "无",
        //     time: "",
        //   },
        // ],
      };
      state.dialogVisible = true;
    };

    const editData = async (item) => {
      const res = await infoApi.getCom();
      console.log(res);
      let obj = res.data.find(ele => {
        return ele.name == item.serial
      })
      state.formData = {
        ...item,
        serial: obj,
        tcp: [
          {
            name: "TCP服务端",
            host: "localhost",
            port: "0.0.0.0",
            disabled: true,
          },
        ],
      };
      state.dialogVisible = true;
    };

    const delData = (id) => {
      ElMessageBox.confirm("确定删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {})
        .catch(() => {
          this.$message.info("已取消删除");
        });
    };

    const changeStatus = (item) => {
      getTableData();
    };

    return {
      ...toRefs(state),
      addData,
      editData,
      delData,
      dialogClose,
      dialogSuccess,
      changeStatus,
    };
  },
};
</script>
<style lang="scss" scoped>
.all-content {
  display: flex;
  flex-direction: column;
}
.top-div {
  display: flex;
  justify-content: flex-end;
}
.txStatusDiv {
  padding: 0 15px;
  border-radius: 10px;
  color: #fff;
}
</style>
