<template>
  <PageWrapper :sidebarWidth="300">
    <template #sidebar>
      <a-card :bordered="false" :class="[`${prefixCls}--left-col-card`]" style="height: 100%">
        <template #extra>
          <div class="flex" style="margin-bottom: 10px">
            <a-input v-model:value="opcNameSearch" width="100%" />
            <c-button type="primary" preIcon="ant-design:search-outlined" @click="handleList({ name: opcNameSearch })">查询</c-button>
          </div>
          <!--          <div style="text-align: right">-->
          <!--            <c-button type="primary" @click="handleAdd"  preIcon="ant-design:plus-outlined">新增</c-button>-->
          <!--          </div>-->
        </template>
        <template v-for="item in items" :key="item">
          <CardGrid @click="handleOne(item)">
            <span class="flex" style="margin-bottom: 1px">
              <span v-if="item.state === '0'" style="margin-right: 5px">
                <span class="ant-badge-status-dot ant-badge-status-processing ant-badge-status-red"></span>
              </span>
              <span v-if="item.state !== '0'" style="margin-right: 5px">
                <span class="ant-badge-status-dot ant-badge-status-processing ant-badge-status-green"></span>
              </span>
              <h2> {{ item.name }} </h2>
            </span>
            <br />
            <div>
              <c-button type="default" preIcon="ant-design:edit-outlined" @click="handleEdit(item)">编辑</c-button>
              <c-button v-if="item.state === '0'" type="default" preIcon="ant-design:play-circle-outlined" @click="handleRelease(item)"
                >启用</c-button
              >
              <c-button v-if="item.state !== '0'" type="default" preIcon="ant-design:stop-outlined" @click="handleCancel(item)">禁用</c-button>
              <c-button type="default" preIcon="ant-design:delete-outlined" @click="handleDelete(item)">删除</c-button>
            </div>
            <Divider class="enter-x" />
          </CardGrid>
        </template>
      </a-card>
    </template>
    <a-card :bordered="false" :class="[`${prefixCls}--right-col-card`]" style="height: 100%">
      <OpcuaItem :data="opcData" />
    </a-card>
  </PageWrapper>
  <IotDeviceAccessOpcuaDrawer @register="registerDrawer" @success="reload" :showFooter="showFooter" />
</template>
<script lang="ts" setup>
  import { ref, provide } from 'vue';
  import { PageWrapper } from '@jdlinker/ui';
  import { useDrawer } from '@jdlinker/ui';
  import { Divider } from 'ant-design-vue';
  import { list, deleteOne, release, cancel } from './IotDeviceAccessOpcua_api';
  import { useDesign } from '@jdlinker/func';
  import OpcuaItem from '../opcuaitem/index.vue';
  import IotDeviceAccessOpcuaDrawer from './components/IotDeviceAccessOpcuaDrawer.vue';

  const [registerDrawer, { openDrawer }] = useDrawer();
  const items = ref(handleList({}));
  const opcNameSearch = ref();
  // 当前选中的OPC通道信息
  const opcData = ref({});
  const { prefixCls } = useDesign('opcua');
  provide('prefixCls', prefixCls);
  const showFooter = ref(true);
  const userData = ref<any>(null);

  async function handleList(e) {
    const result = await list(e);
    items.value = result.records;
  }
  function handleOne(e) {
    opcData.value = e;
  }
  /**
   * 新增事件
   */
  function handleAdd() {
    openDrawer(true, { isUpdate: 0, showFooter: true });
  }
  /**
   * 编辑事件
   */
  function handleEdit(record: Recordable) {
    openDrawer(true, { record, isUpdate: 1, showFooter: true });
  }

  /**启用
   * 编辑事件
   */
  async function handleRelease(record: Recordable) {
    await release(record, handleSuccess);
  }

  /**
   * 禁用事件
   */
  async function handleCancel(record: Recordable) {
    await cancel(record, handleSuccess);
  }
  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteOne({ id: record.id }, handleSuccess);
  }
  /**
   * 成功回调
   */
  function handleSuccess() {
    (opcData.value = {}) && handleList({});
  }
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-opcua';
  .ant-divider-horizontal {
    display: flex;
    clear: both;
    width: 100%;
    min-width: 100%;
    margin: 15px 0;
    align-content: center;
  }

  .@{prefix-cls} {
    &--box {
      padding: 10px;
      height: 100%;

      :deep(.jeecg-basic-table .ant-table-wrapper) {
        padding: 0;
      }

      .ant-tabs-content-holder {
        padding: 10px;
      }
    }

    &--left-col-card {
      :deep(.ant-card-body) {
        padding: 10px;
      }
    }

    &--right-col-card {
      :deep(.ant-card-body) {
        padding: 0;
      }
    }
  }
</style>
