<template>
  <a-drawer
    v-model:visible="vdata.drawerVisible"
    :mask-closable="false"
    :title=" vdata.isAdd ? '新增激活码' : '修改激活码' "
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    class="drawer-width"
    @close="onClose"
  >
    <a-form v-if="vdata.drawerVisible" 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="选择厂商" name="provider">
            <a-select v-model:value="vdata.saveObject.provider" :disabled="!vdata.isAdd" placeholder="请选择厂商" @change="changeProvider">
              <a-select-option v-for="item in providerList" :key="item.value" :value="item.value">{{ item.text }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="选择厂商配置" name="configId">
            <a-select v-model:value="vdata.saveObject.configId" placeholder="请选择厂商配置">
              <a-select-option v-for="d in vdata.providerConfigList" :key="d.configId" v-model:value="d.configId">
                {{ d.configDesc }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col v-if="vdata.isAdd" :span="24">
          <a-form-item label="批次号" name="batchId">
            <a-input v-model:value="vdata.saveObject.batchId" placeholder="请输入批次号" />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="24">
          <a-form-item label="有效期截止日期" name="expiredTime">
            <a-checkbox :checked="!vdata.saveObject.expiredTime" @change="(e : any) => vdata.saveObject.expiredTime = e.target.checked ? '' : dayjs()">长期</a-checkbox>
            <a-date-picker v-if="vdata.saveObject.expiredTime" v-model:value="vdata.saveObject.expiredTime" :formate="dateFormat" inputReadOnly style="width: 150px;margin-right: 10px;" />
          </a-form-item>
        </a-col> -->
        <a-col v-if="vdata.isAdd" :span="11">
          <a-form-item label="创建数量" name="num">
            <a-input-number v-model:value="vdata.saveObject.num" :min="1" :max="99" placeholder="请输入新建激活码数量" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-col v-if="!vdata.isAdd" :span="16">
        <a-form-item label="设备名称" name="deviceName">
          <a-input v-model:value="vdata.saveObject.deviceName" placeholder="请输入设备名称" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="有效期截止日期" name="expiredTime">
          <a-checkbox :checked="!vdata.saveObject.expiredTime" @change="(e : any) => vdata.saveObject.expiredTime = e.target.checked ? '' : dayjs()">长期</a-checkbox>
          <a-date-picker v-if="vdata.saveObject.expiredTime" v-model:value="vdata.saveObject.expiredTime" :formate="dateFormat" inputReadOnly style="width: 150px;margin-right: 10px;" />
        </a-form-item>
      </a-col>
    </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>
  </a-drawer>
</template>

<script lang="ts" setup>
import { API_URL_STORE_DEVICE, API_URL_DEVICE_PROVIDER, req } from '@/api/manage'
import dayjs from 'dayjs'
import { defineProps, getCurrentInstance, reactive, ref } from 'vue'
import provider from '../../provider.json'
const providerList = provider.plugin

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

  const infoFormModel = ref()
  const dateFormat = 'YYYY-MM-DD'

  const  vdata = reactive({
    providerConfigList: [] as any, // 厂商列表
    storeList: [] as any, // 门店列表
    btnLoading: false,
    isAdd: true, // 新增 or 修改页面标志
    saveObject: {} as any, // 数据对象
    deviceType: 5, // 5-收银插件
    recordId: null, // 更新对象ID
    drawerVisible: false, // 是否显示弹层/抽屉
    rules: {
      provider: [{required: true,message: '厂商不能为空',trigger: 'blur'}],
      configId: [{required: true,message: '厂商配置不能为空',trigger: 'blur'}],
      num: [{required: true,message: '创建数量不能为空',trigger: 'blur'}],
      deviceName: [{required: true,message: '设备名称不能为空',trigger: 'blur'}],
    },
  }) as any


  function show (record: any) { // 弹层打开事件
  
    vdata.isAdd = !record.deviceId

    vdata.saveObject = { 'state': 1, expiredTime: '', num: 1 }

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

    if (!vdata.isAdd) { // 修改信息 延迟展示弹层
      vdata.recordId = record.deviceId

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

        req.list(API_URL_DEVICE_PROVIDER, { 'pageSize': -1, 'state': 1, 'deviceType': vdata.deviceType, 'provider': vdata.saveObject.provider }).then(res => { // 厂商配置下拉选择列表
          vdata.providerConfigList =  res.records
        })

        const expiredTime = JSON.parse(res.deviceParams).expiredTime
        if(expiredTime == 0) {
          vdata.saveObject.expiredTime = ''
        }else {
          vdata.saveObject.expiredTime = dayjs(expiredTime)
        }
      })
    }

    vdata.drawerVisible = true // 立马展示弹层信息
  }

   // 保存
  function  handleOkFunc () {
    infoFormModel.value.validate().then((valid: any) =>{
      vdata.btnLoading = true

      vdata.saveObject.deviceType = 5 // 收银插件类型

      let { configId, batchId, expiredTime, num, deviceType, deviceName } = vdata.saveObject
      if (!expiredTime) {
        expiredTime = 0
      }else {
        expiredTime = dayjs(expiredTime).format('YYYY-MM-DD')
      }

      // 请求接口
      if (vdata.isAdd) {
        req.add(API_URL_STORE_DEVICE, { configId, batchId, expiredTime, num, deviceType }).then((res: any) => {
          successFunc('保存成功')
        }).catch((err: any) => {
          vdata.btnLoading = false
        })

      } else {
        req.updateById(API_URL_STORE_DEVICE, vdata.recordId, { configId, expiredTime, deviceType, deviceName }).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 changeProvider() {
    vdata.saveObject.configId = null
    vdata.providerConfigList = []
    // 厂商配置列表
    req.list(API_URL_DEVICE_PROVIDER, { 'pageSize': -1, 'state': 1, 'deviceType': vdata.deviceType, 'provider': vdata.saveObject.provider }).then(res => { // 厂商配置下拉选择列表
      vdata.providerConfigList =  res.records
    })
  }

  function  onClose () { // 关闭抽屉
    vdata.drawerVisible = false
  }

defineExpose({
  show
})
</script>
