<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 ref="infoFormModel" :model="vdata.saveObject" layout="horizontal" :rules="vdata.rules">
      <a-row justify="space-between" type="flex">
        <a-col :span="24">
          <a-form-item label="绑定状态：">
            <a-space>
              {{ vdata.saveObject.bindState == 1 ? '已绑定' : '未绑定' }}
              <a-button type="primary" @click="showSelectModal">{{ vdata.saveObject.bindState == 1 ? '重新选择' : '选择商户信息' }}</a-button>
            </a-space>
          </a-form-item>
        </a-col>
        <a-col v-if="vdata.showBindInfo" :span="24">
          <a-form-item label="用户号：">
            <span>{{ vdata.saveObject.mchNo }}</span>
          </a-form-item>
        </a-col>
        <a-col v-if="vdata.showBindInfo && vdata.deviceType == 3" :span="24">
          <a-form-item label="应用：">
            <span>{{ vdata.saveObject.appId }}</span>
          </a-form-item>
        </a-col>
        <a-col v-if="vdata.showBindInfo" :span="24">
          <a-form-item label="门店：">
            <span>{{ vdata.saveObject.storeId }}</span>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
        <a-form-item label="绑定类型" name="bindType">
          <a-space>
            <a-radio-group v-model:value="vdata.saveObject.bindType">
              <a-radio :value="0">门店</a-radio>
              <a-radio :value="1">码牌</a-radio>
            </a-radio-group>
            <a-button v-if="vdata.saveObject.bindType == 1" type="primary" @click="showQrcSelectModel">选择码牌</a-button>
          </a-space>
        </a-form-item>
      </a-row>

      <a-row v-if="vdata.saveObject.bindType == 1" justify="space-between" type="flex">
        <a-col v-if="vdata.saveObject.qrcIdList && vdata.saveObject.qrcIdList.length > 0" :span="24">
          <a-form-item label="码牌ID">
            <a-textarea v-model:value="vdata.saveObject.qrcIdList" disabled />
          </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>

    <!-- 选择商户信息组件 -->
    <JeepayModelMchList ref="jeepayModelMchListRef" :showType="vdata.deviceType == 3 ? 'MCH_APP_STORE' : 'MCH_STORE'" :mchNoAndName="true" @selectFinishFunc="selectFinishFunc" />
  
    <!-- 选择码牌组件 -->
    <JeepayModelQrcList ref="jeepayModelQrcListRef" @selectFinishFunc="selectQrcFinishFunc" />
  </a-drawer>
</template>

<script lang="ts" setup>
import { API_URL_STORE_DEVICE, req, $bindDevice } from '@/api/manage'
import { defineProps, reactive, ref, getCurrentInstance, watch } from 'vue'

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

  const infoFormModel = ref()
  const jeepayModelMchListRef = ref()
  const jeepayModelQrcListRef = ref()

  const  vdata = reactive({
    storeList: [] as any, // 门店列表
    btnLoading: false,
    showBindInfo: false, // 显示绑定信息
    saveObject: {} as any, // 数据对象
    deviceType: 1, // 1-云喇叭 2-云打印 3-扫码POS
    recordId: null, // 更新对象ID
    drawerVisible: false // 是否显示弹层/抽屉
  }) as any

  // 监听属性 
  watch( () => vdata.saveObject.storeId ,(nv, ov)=>{
    if (ov && nv != ov) {
      vdata.saveObject.qrcIdList = []
    }
  })

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

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

    vdata.recordId = record.deviceId
    vdata.deviceType = record.deviceType

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

        if (vdata.saveObject.bindState == 1) {
          vdata.showBindInfo = true
        } else {
          vdata.showBindInfo = false
          vdata.saveObject.storeId = ''
        }
      }
      vdata.drawerVisible = true
    })
  }

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

      const { deviceId, mchNo, appId, storeId, bindType, qrcIdList } = vdata.saveObject
      if (!storeId) {
        vdata.btnLoading = false
        $infoBox.message.error('请选择门店')
        return
      }

      $bindDevice(vdata.recordId, { deviceId, mchNo, appId, storeId, bindType, qrcIdList }).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 showSelectModal(){
    jeepayModelMchListRef.value.show()
  }

  // 选择商户、门店完成
  function selectFinishFunc(selectArray){

    if(!selectArray[0] || !selectArray[2]){
      return $infoBox.message.error('选择信息不完整！')
    }
    if (vdata.deviceType ==3 && !selectArray[1]) {
      return $infoBox.message.error('选择信息不完整！')
    }

    vdata.showBindInfo = true

    vdata.saveObject.mchNo = selectArray[0]
    vdata.saveObject.appId = selectArray[1]
    vdata.saveObject.storeId = selectArray[2]

    jeepayModelMchListRef.value.close()
  
  }

    // 选择码牌弹窗
  function showQrcSelectModel() {

    if (!vdata.saveObject.storeId) {
      $infoBox.message.error('请选择商户信息')
    }

    if (vdata.saveObject.storeId && vdata.saveObject.bindType == 1) {
      jeepayModelQrcListRef.value.show(vdata.saveObject.storeId, vdata.saveObject.qrcIdList)
    }
  }

  // 选择码牌完成
  function  selectQrcFinishFunc (e) {

    if (!e || e.length <= 0) {
      return $infoBox.message.error('请开启要绑定的码牌！')
    }
    
    vdata.saveObject.qrcIdList = e
    jeepayModelQrcListRef.value.close()
  }

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