<template>
  <a-row :class="['p-4', `${prefixCls}--box`]" :gutter="10">
    <a-col :xl="6" :lg="8" :md="10" :sm="24" style="flex: 1">
      <a-card :bordered="false" :class="[`${prefixCls}--left-col-card`]" style="height: 100%">
        <template #extra>
          <div class="flex">
            <a-input v-model:value="modbusNameSearch" width="100%" />
            <c-button type="primary" preIcon="ant-design:search-outlined" @click="handleList({ name: modbusNameSearch })"
              >查询</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: 5px">
              <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>
              </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> 正常 </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>
    </a-col>
    <a-col :xl="18" :lg="16" :md="14" :sm="24" style="flex: 1">
      <a-card :bordered="false" :class="[`${prefixCls}--right-col-card`]" style="height: 100%">
        <ModbusItem :data="modbusData" />
      </a-card>
    </a-col>
  </a-row>

  <IotDeviceAccessModbusDrawer @register="registerDrawer" @success="reload" :showFooter="showFooter" />
</template>
<script lang="ts" setup>
  import { ref, provide } from 'vue';
  import { useDrawer } from '@jdlinker/ui';
  import { Divider } from 'ant-design-vue';
  import { list, deleteOne, release, cancel } from './IotDeviceAccessModbus_api';
  import { useDesign } from '@jdlinker/func';
  import ModbusItem from '../modbusitem/index.vue';
  import IotDeviceAccessModbusDrawer from './components/IotDeviceAccessModbusDrawer.vue';

  const [registerDrawer, { openDrawer }] = useDrawer();
  const items = ref(handleList({}));
  const modbusNameSearch = ref();
  // 当前选中的Modbus通道信息
  const modbusData = ref({});
  const { prefixCls } = useDesign('modbus');
  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) {
    // e.onChecked = true;
    modbusData.value = e;
  }
  /**
   * 新增事件
   */
  function handleAdd() {
    openDrawer(true, { isUpdate: 0, showFooter: true });
  }
  /**
   * 编辑事件
   */
  function handleEdit(record: any) {
    openDrawer(true, { record, isUpdate: 1, showFooter: true });
  }

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

  /**
   * 禁用事件
   */
  async function handleCancel(record: any) {
    await cancel(record, handleSuccess);
  }
  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteOne({ id: record.id }, handleSuccess);
  }
  /**
   * 成功回调
   */
  function handleSuccess() {
    (modbusData.value = {}) && handleList({});
  }
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-modbus';
  .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>
