<template>
  <div>
    <BasicTable @register="registerTable" :dataSource="tableData" style="height: 12rem">
      <template #status>
        <Switch
          checked-children="开"
          un-checked-children="关"
          v-model:checked="checked"
          @change="handleChange"
          :disabled="enableRemoteDisabled"
        />
      </template>
    </BasicTable>
    <div style="margin-left: 0.44rem">
      <a-button type="primary" class="mr-4" :disabled="disabled" @click="handleFrpRemote"
        >远程连接</a-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, nextTick } from 'vue';
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import { Switch } from 'ant-design-vue';
  import { h } from 'vue';
  import { Tag } from 'ant-design-vue';
  import { frpGetInfoApi, frpPutInfoApi } from '/@/api/device/deviceConfigApi';
  import { useMessage } from '/@/hooks/web/useMessage';

  const props = defineProps({
    deviceDetail: {
      type: Object,
      required: true,
    },
  });

  const { createMessage } = useMessage();
  const tableData: any = ref([]);
  const checked = ref<boolean>(false);
  const disabled = ref<boolean>(true);
  const viewDeviceColumn: BasicColumn[] = [
    {
      title: '远程连接状态',
      dataIndex: 'status',
      width: 80,
      customRender: ({ record }) => {
        const status = record.status;
        const color = status == 1 ? 'green' : 'red';
        const text = status == 1 ? '在线' : '离线';
        return h(Tag, { color }, () => text);
      },
    },
    {
      title: '允许远程连接',
      dataIndex: 'enableRemote',
      width: 80,
      slots: { customRender: 'status' },
    },
    {
      title: '设备SN',
      dataIndex: 'proxyName',
      width: 120,
    },
  ];
  const [registerTable] = useTable({
    title: 'TBox信息',
    columns: viewDeviceColumn,
    showIndexColumn: false,
    clickToRowSelect: false,
    showTableSetting: false,
    bordered: true,
  });
  const enableRemote = ref(0);
  const proxyName = ref('');
  const remotePort = ref(0);
  const address = ref('');
  const enableRemoteDisabled = ref(false);
  const getTableData = async () => {
    const res = await frpGetInfoApi(props.deviceDetail.sn);
    enableRemote.value = res.enableRemote;
    proxyName.value = res.proxyName;
    remotePort.value = res.remotePort;
    address.value = res.address;
    if (res.enableRemote == 1) {
      checked.value = true;
      disabled.value = false;
      enableRemoteDisabled.value = true;
    } else {
      checked.value = false;
      disabled.value = true;
      enableRemoteDisabled.value = false;
    }
    if (res.status == 0) {
      enableRemoteDisabled.value = true;
    } else {
      enableRemoteDisabled.value = false;
    }
    tableData.value.push({
      enableRemote: res.enableRemote,
      proxyName: res.proxyName || props.deviceDetail.sn,
      status: res.status,
    });
    if (res == '') {
      enableRemoteDisabled.value = true;
      disabled.value = true;
    }
  };
  const handleFrpRemote = async () => {
    window.open(`${address.value}`);
  };
  nextTick(() => {
    getTableData();
  });
  const handleChange = async (e) => {
    if (e) {
      disabled.value = false;
      enableRemote.value = 1;
      const res = await frpPutInfoApi(proxyName.value, enableRemote.value);
      if (res.enableRemote == 1) {
        createMessage.success('开启成功');
        checked.value = true;
      }
    } else {
      disabled.value = true;
      enableRemote.value = 0;
      const res = await frpPutInfoApi(proxyName.value, enableRemote.value);
      if (res.enableRemote == 0) {
        createMessage.success('关闭成功');
        checked.value = false;
      }
    }
  };
</script>
<style lang="less" scoped></style>