<template>
  <a-drawer
    v-model:visible="vdata.drawerVisible"
    :mask-closable="false"
    :title="'修改设备'"
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    class="drawer-width"
    @close="onClose"
  >
    <a-form v-if="vdata.drawerVisible" ref="infoFormModel" :model="vdata.saveObject" layout="vertical" :rules="vdata.rules">
      <a-row justify="space-between" type="flex">
        <a-col :span="11">
          <a-form-item label="设备号" name="deviceNo">
            <a-input v-model:value="vdata.saveObject.deviceNo" :disabled="true" placeholder="请输入设备号" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right:8px" @click="onClose"><close-outlined />取消</a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc"><check-outlined />保存</a-button>
    </div>

    <!-- 业务参数配置组件 -->
    <BizConfig ref="bizConfigRef" />
  </a-drawer>
</template>

<script lang="ts" setup>
import { API_URL_STORE_DEVICE, req } from '@/api/manage'
import { defineProps, reactive, ref, getCurrentInstance } from 'vue'
import BizConfig from '@/views/device/BizConfig.vue'

  const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
 
  const props = defineProps({
    callbackFunc: { type: Function, default:null }
  })

  const infoFormModel = ref()
  const bizConfigRef = ref()

  const  vdata = reactive({
    btnLoading: false,
    saveObject: {} as any, // 数据对象
    recordId: null, // 更新对象ID
    drawerVisible: false, // 是否显示弹层/抽屉
    deviceType: 1 // 1-云喇叭 2-云打印 3-扫码POS
  }) as any

  function show (record: any) { // 弹层打开事件

    vdata.deviceType = record.deviceType
    vdata.provider = record.provider
  
    vdata.saveObject = { 'state': 1, 'deviceType': record.deviceType } // 设备类型deviceType： 1-云喇叭, 2-云打印

    if (infoFormModel.value != undefined) {
      infoFormModel.value.resetFields()
    }

    vdata.recordId = record.deviceId
    req.getById(API_URL_STORE_DEVICE, vdata.recordId).then((res: any) => {
      if(res){
        vdata.saveObject = res

        // 业务参数配置组件
        let bizConfig = JSON.parse(vdata.saveObject.bizConfigParams || '{}' )
        bizConfigRef.value.pageRender(bizConfig, vdata.deviceType, vdata.provider)
      }
    })
    vdata.drawerVisible = true // 立马展示弹层信息
  }

  function  handleOkFunc () { // 点击【确认】按钮事件      
    infoFormModel.value.validate().then((valid: any) =>{
      bizConfigRef.value.getConfigParams().then((bizConfigParams: any) => {
        vdata.btnLoading = true

        // 赋值
        vdata.saveObject.bizConfigParams = bizConfigParams || ''

        // 请求接口
        req.updateById(API_URL_STORE_DEVICE, vdata.recordId, vdata.saveObject).then((res: any) => {
          successFunc('修改成功')
        }).catch((err: any) => {
          vdata.btnLoading = false
        })
      })
    })
  }

  function successFunc(e: string) { // 新增/更新成功
    vdata.btnLoading = false
    $infoBox.message.success(e)
    props.callbackFunc()
    vdata.drawerVisible = false
  }

  function  onClose () { // 关闭抽屉
    vdata.drawerVisible = false
  }
defineExpose({
  show
})
</script>
