<template>
  <div class="modeling-simulation">
    <!--
    <iframe class="galaxis-ai" style="width: 100%;height: 100%;border: none;" src="https://180.100.199.56:8656/#/chat"></iframe>

    我需要2列，每列4个按钮. 分别功能是
    CL2 开始演示
    /api/workbench/ApiController@demo_start
    {
      "car_no": "cl2"
    }

    CL2 停止演示
    /api/workbench/ApiController@demo_stop
    {
      "car_no": "cl2"
    }

    CL2 入库请求
    /api/workbench/ApiController@in_bound

    CL2 出库请求
    /api/workbench/ApiController@out_bound

    ---
    CLX 开始演示
    /api/workbench/ApiController@demo_start
    {
      "car_no": "clx"
    }

    CLX 停止演示
    /api/workbench/ApiController@demo_stop
    {
      "car_no": "clx"
    }

    CLX 呼叫礼品托盘
    /api/workbench/ApiController@gift_slot

    CLX 礼品回库
    /api/workbench/ApiController@gift_back
    -->
    <el-card>
      <el-row>
        <el-col :span="6">
          <el-row class="each-row">
            <el-button @click="clxDemoStart"  type="primary" :icon="renderIcon('Play')">CLX 开始演示</el-button>
          </el-row>
          <el-row class="each-row">
            <el-button @click="clxDemoStop" plain type="warning" :icon="renderIcon('Stop')">CLX 停止演示</el-button>
          </el-row>
          <el-row class="each-row">
            <el-button @click="clxGiftSlot">CLX 呼叫礼品托盘</el-button>
          </el-row>
          <el-row class="each-row">
            <el-button @click="clxGiftBack">CLX 礼品回库</el-button>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row class="each-row">
            <el-button @click="cl2DemoStart" type="primary" :icon="renderIcon('Play')">CL2 开始演示</el-button>
          </el-row>
          <el-row class="each-row">
            <el-button @click="cl2DemoStop" type="warning" plain :icon="renderIcon('Stop')">CL2 停止演示</el-button>
          </el-row>
          <el-row class="each-row">
            <el-button @click="cl2InBound">CL2 入库请求</el-button>
          </el-row>
          <el-row class="each-row">
            <el-button @click="cl2OutBound">CL2 出库请求</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { renderIcon } from '@/utils/webutils.ts'
import { onMounted, onUnmounted } from 'vue'
import { Request } from '@ease-forge/shared'

function mes(event: MessageEvent) {
  console.log('data', event.data)
}

function cl2DemoStart() {
  system.showLoading()
  Request.request.post(
    '/api/workbench/ApiController@demo_start',
    {
      'car_no': 'cl2'
    }
  ).then((res) => {
    if (res.success) {
      system.showInfoDialog(res.msg)
    }
  }).finally(() => {
    system.clearLoading()
  })
}

function cl2DemoStop() {
  system.showLoading()
  Request.request.post(
    '/api/workbench/ApiController@demo_stop',
    {
      'car_no': 'cl2'
    }
  ).then((res) => {
    if (res.success) {
      system.showInfoDialog(res.msg)
    }
  }).finally(() => {
    system.clearLoading()
  })
}

function cl2InBound() {
  system.showLoading()
  Request.request.post(
    '/api/workbench/ApiController@in_bound',
    {
      'car_no': 'cl2'
    }
  ).then((res) => {
    if (res.success) {
      system.showInfoDialog(res.msg)
    }
  }).finally(() => {
    system.clearLoading()
  })
}

function cl2OutBound() {
  system.showLoading()
  Request.request.post(
    '/api/workbench/ApiController@out_bound',
    {
      'car_no': 'cl2'
    }
  ).then((res) => {
    if (res.success) {
      system.showInfoDialog(res.msg)
    }
  }).finally(() => {
    system.clearLoading()
  })
}

function clxDemoStart() {
  system.showLoading()
  Request.request.post(
    '/api/workbench/ApiController@demo_start',
    {
      'car_no': 'clx'
    }
  ).then((res) => {
    if (res.success) {
      system.showInfoDialog(res.msg)
    }
  }).finally(() => {
    system.clearLoading()
  })
}

function clxDemoStop() {
  system.showLoading()
  Request.request.post(
    '/api/workbench/ApiController@demo_stop',
    {
      'car_no': 'clx'
    }
  ).then((res) => {
    if (res.success) {
      system.showInfoDialog(res.msg)
    }
  }).finally(() => {
    system.clearLoading()
  })
}

function clxGiftSlot() {
  system.showLoading()
  Request.request.post(
    '/api/workbench/ApiController@gift_slot'
  ).then((res) => {
    if (res.success) {
      system.showInfoDialog(res.msg)
    }
  }).finally(() => {
    system.clearLoading()
  })
}

function clxGiftBack() {
  system.showLoading()
  Request.request.post(
    '/api/workbench/ApiController@gift_back'
  ).then((res) => {
    if (res.success) {
      system.showInfoDialog(res.msg)
    }
  }).finally(() => {
    system.clearLoading()
  })
}

onMounted(() => window.addEventListener('message', mes))
onUnmounted(() => window.removeEventListener('message', mes))
</script>
<style lang="less">
.modeling-simulation {
  width: 100%;
  height: 100%;
}

.each-row {
  margin-bottom: 10px;
}
</style>
