<template>
  <div class="app-container">
    <el-radio-group v-model="tabPosition" class="mb-30px">
      <el-radio-button label="deviceInfo">设备信息</el-radio-button>
      <el-radio-button label="Loto">锁定站</el-radio-button>
    </el-radio-group>

    <!-- 设备信息 -->
    <div v-if="tabPosition === 'deviceInfo'">
      <TinyMCE
        v-model:value="formData.remark"
        :height="700"
        placeholder="请输入内容..."
        @update:value="handleContentChange"
      />
      <el-button type="primary" @click="handleSave" :loading="loading">
        {{ loading ? '保存中...' : '保存内容' }}
      </el-button>
    </div>

    <!-- LOTO站 -->
    <div v-if="tabPosition === 'Loto'">
      <MapData :machinery-id="route.query.machineryId" />
    </div>


  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useMessage } from '@/hooks/web/useMessage'

import MapData from './MapData.vue'
import TinyMCE from '@/components/TinyMCE/index.vue'
import * as TechnologyApi from '@/api/dv/technology'
defineOptions({ name: 'DeviceDetail' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const route = useRoute()
const loading = ref(false)
const tabPosition = ref('deviceInfo')
const formData = ref({
  id: undefined,
  parentId: undefined,
  machineryName: '',
  machineryCode: '',
  workstationId: undefined,
  lotoId: undefined,
  machineryImg: undefined,
  machineryType: '设备',
  remark: undefined
})
// 保存设备信息数据
const handleSave = async () => {
  if (!formData.value.remark.trim()) {
    return ElMessage.warning('请输入内容')
  }
  const data = await TechnologyApi.getTechnologyInfo(route.query.machineryId)
  formData.value.id = data.id
  formData.value.parentId = data.parentId
  formData.value.machineryName = data.machineryName
  formData.value.machineryCode = data.machineryCode
  formData.value.workstationId = data.workstationId
  formData.value.lotoId = data.lotoId
  formData.value.machineryImg = data.machineryImg
  formData.value.machineryType = data.machineryType
  loading.value = true

  try {
    await TechnologyApi.updateTechnology(formData.value)
    ElMessage.success('保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
    console.error('API错误:', error)
  } finally {
    loading.value = false
  }
}
const handleContentChange = async (content: string) => {
  console.log('内容变化:', content)
  formData.value.remark = content
}
const getList = async () => {
  loading.value = true
  try {
    const dataById = await TechnologyApi.getTechnologyInfo(route.query.machineryId)
    formData.value = dataById
  } finally {
    loading.value = false
  }
}
onMounted(()=>{
  getList()
})
</script>

<style scoped>
.app-container {
  width: 100%;
  height: 100%;
}

.mb-30px {
  margin-bottom: 30px;
}

.w-300px {
  width: 300px;
}
</style>
