<template>
  <a-form v-if="vdata.currentConfig" ref="formRef" :model="vdata.currentConfig" layout="horizontal">
    <a-divider orientation="left"><a-tag color="#FF4B33">设备编号配置</a-tag></a-divider>

    <template v-if="vdata.isAdd">
      <a-col :span="24">
        <a-form-item label="">
          <a-radio-group v-model:value="vdata.deviceInputMode">
            <a-radio :value="1">逐条输入</a-radio>
            <a-radio :value="2">批量输入</a-radio>
            <!-- <a-radio :value="3">导入Excel</a-radio> -->
          </a-radio-group>
        </a-form-item>
      </a-col>

      <!-- 逐条输入 -->
      <template v-if="vdata.deviceInputMode == 1">
        <a-row v-for="(item, index) in vdata.currentConfig.deviceList" :key="index" justify="start" type="flex" :gutter="8">
          <a-col :span="10" style="margin-right: 15px;">
            <a-form-item
              layout="vertical"
              label="设备号"
              :name="['deviceList', index, 'deviceNo']"
              :rules="{
                required: true,
                message: '设备号不能为空',
                trigger: 'blur',
              }"
            >
              <a-input v-model:value="item.deviceNo" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="码牌ID">
              <a-input v-model:value="item.bindQrcId" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-button v-if="index >= 1" danger type="link" @click="removeDomain(item)"><MinusCircleOutlined class="delete-button" /></a-button>
        </a-row>
        <a-col :span="24">
          <a-form-item>
            <a-button type="dashed" @click="addDomain"><PlusOutlined />新增</a-button>
          </a-form-item>
        </a-col>
      </template>

      <!-- 批量输入 -->
      <a-row v-if="vdata.deviceInputMode == 2" justify="start" type="flex">
        <a-col :span="24">
          <a-form-item label="设备号&码牌ID">
            <a-textarea v-model:value="vdata.currentConfig.deviceTextarea" :rows="8" placeholder="请输入" />
            <div class="jeepay-tip-text" style="display: flex;flex-direction: column">
              <span>格式为：设备号,码牌ID，英文逗号隔开，回车下一行继续输入，例如：</span>
              <span>111,111</span>
              <span>222,222</span>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </template>

    <template v-else>
      <a-row justify="start" type="flex">
        <a-col :span="10" style="margin-right: 15px;">
          <a-form-item
            label="设备号"
            :name="['deviceNo']"
            :rules="{
              required: true,
              message: '设备号不能为空',
              trigger: 'blur',
            }"
          >
            <a-input v-model:value="vdata.currentConfig.deviceNo" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item label="码牌ID">
            <a-input v-model:value="vdata.currentConfig.bindQrcId" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
    </template>
  </a-form>
</template>

<script lang="ts" setup>
import {reactive, ref, defineExpose} from 'vue'
 
  // 当前的form
  const formRef = ref()

  const  vdata = reactive({
    currentConfig: {
      deviceList: [{ deviceNo: '', bindQrcId: '' }]
    } as any, // 配置对象

    isAdd: true, // 新增 or 修改页面标志
    deviceInputMode: 1
  }) as any

  // 对外提供的页面的渲染函数 （ ifDefineArray = 接口的配置定义项数组，  currentConfig = 当前配置项 ）
function pageRender(currentConfig: any, deviceType: any, isAdd:boolean){

  vdata.isAdd = isAdd
  
  // 赋值
  if (currentConfig) {
    vdata.currentConfig = currentConfig
  }

  // 重置form验证
  if (formRef.value !== undefined && formRef.value !== null) {
    formRef.value.resetFields()
  }
}

// 对外提供的获取配置参数函数 （返回JSON类型）
function getConfigParams(){
  return formRef.value.validate().then( () => {

    if (vdata.deviceInputMode == 2) {
      const arr = vdata.currentConfig.deviceTextarea.split(/[\s\n]/)

      let newItems:any = []
      arr.forEach(item => {
        newItems.push({
          'deviceNo': item.split(',')[0],
          'bindQrcId': item.split(',')[1]
        })
      })

      vdata.currentConfig.deviceList = newItems
    }

    return vdata.currentConfig
  })
}

function addDomain() {
  vdata.currentConfig.deviceList.push({
    deviceNo: '',
    bindQrcId: ''
  })
}

function removeDomain(item) {
  const index = vdata.currentConfig.deviceList.indexOf(item)
  if (index != -1) {
    vdata.currentConfig.deviceList.splice(index, 1)
  }
}

defineExpose({ getConfigParams, pageRender })

</script>
<style>
.delete-button {
  cursor: pointer;
  position: relative;
  font-size: 24px;
  transition: all 0.3s;
}
</style>
