<template>
  <view class="page-wrapper jeepay-edit-form">
	  
	<JeepayCustomNavbar :title=" vdata.isAdd? '添加新辅助终端' : '修改辅助终端'" backCtrl="back" />
	  
    <uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="120">
		
		<uni-forms-item v-if="vdata.isAdd" required label="选择应用" name="appId">
		  <JeepayBizsPopupView  :hasTitle="false"  bizType="mchApp"  v-model:value="vdata.formData.appId" :showName="vdata.bindAppName" />
		</uni-forms-item>
		
		<uni-forms-item v-if="vdata.isAdd" required label="选择门店" name="storeId">
		  <JeepayBizsPopupView  :hasTitle="false"  bizType="store" v-model:value="vdata.formData.storeId" :showName="vdata.bindStoreName" />
		</uni-forms-item>
		
		<template v-if="isSelectedStoreAndMchApp()" >
			
			<uni-forms-item v-if="vdata.isAdd" required label="设备类型" name="trmType">
			  <JeepayRadioPopupView label="请选择设备类型" v-model:value="vdata.formData.trmType" :list="[{ label: '辅助终端', value: 1}, { label: '扫码POS', value: 2}]" @change="changeTrmTypeFunc">
			  </JeepayRadioPopupView>
			</uni-forms-item>
		
		  <uni-forms-item required label="设备名称" name="trmName">
			  <uni-easyinput v-model="vdata.formData.trmName" placeholder="请输入设备名称"  :inputBorder="false"></uni-easyinput>
		  </uni-forms-item>
		  
		  
		  <uni-forms-item required label="设备编号" name="trmNo">
				  <uni-easyinput v-model="vdata.formData.trmNo" placeholder="请输入设备编号" :inputBorder="false"></uni-easyinput>
		  </uni-forms-item>
		  
		  <uni-forms-item required label="布放位置" name="detailAddress">
			<view class="selected-sex align-top" style="align-items: flex-start" @tap="showMap">
			  {{ vdata.formData.detailAddress || '选择地址后自动回显' }}
			  <image src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" />
			</view>
		  </uni-forms-item>
		  <uni-forms-item required label="省市区/县" name="areaCode">
				  <JeepayAreacodeSelect ref="jeepayAreacodeSelect" v-model:areacodeList="vdata.formData.areaCode" />
		  </uni-forms-item>
		  <uni-forms-item required label="经纬度" name="lngAndLat" class="line">
			<view class="selected-sex"> {{ vdata.formData.lng }}/{{ vdata.formData.lat }} </view>
		  </uni-forms-item>
		  
		 <JeepayTableListItem title="状态" subtitle="状态禁用后, 设备将无法使用">
			<template #titleRight>
				<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true" :confirm='false'  />
			</template>
		 </JeepayTableListItem>
	 
	 </template>
	 
    </uni-forms>
    <view class="confirm-wrapper">
			<Button @tap="confirmFunc">{{ vdata.trmId ? '确认修改' : '确认创建' }}</Button>
    </view>
	
	<!-- 扫码pos选择 -->
	<JeepayPopupListSelect
	  ref="jeepayPopupListSelectByScanPos"
	  :reqTableDataFunc="reqTableDataByScanPosFunc"
	  searchInputName="deviceName"
	  :fields="{ key: 'deviceId', left: 'deviceName', right: 'deviceNo' }"
	/>
	
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { $location2areacode, reqLoad, API_URL_MCH_STORE_LIST, API_URL_SYS_TERMINALS,  API_URL_SYS_DEVICE_LIST } from '@/http/apiManager.js'
import infoBox from '@/commons/utils/infoBox.js';
import go from '@/commons/utils/go.js'
import formUtil from '@/commons/utils/formUtil.js'
import emit from '@/commons/utils/emit.js'

const jeepayAreacodeSelect = ref()
const formRef = ref()

const jeepayPopupListSelectByScanPos = ref() // 扫码pos列表 

onLoad((options) => {
	
	// test()
	
	// 修改页面 
	if(options.trmId){
		vdata.isAdd = false
		vdata.trmId = options.trmId
		reqLoad.getById(API_URL_SYS_TERMINALS, vdata.trmId).then(({bizData}) => {
			vdata.formData = bizData
			vdata.formData.areaCode = JSON.parse(bizData.areacode)
		})
	}
	
})

	
const rules = {
	appId: {
		rules:[ formUtil.rules.requiredSelect('应用') ],
	},
	storeId: {
		rules:[ formUtil.rules.requiredSelect('门店') ],
	},
	trmNo: {
		rules:[ formUtil.rules.requiredInput('') ],
	},
	trmName: {
		rules:[ formUtil.rules.requiredInput('') ],
	},
	trmType: {
		rules:[ formUtil.rules.requiredSelect('设备类型') ],
	},
	detailAddress: {
		rules:[ formUtil.rules.requiredSelect('地址') ],
	}
}


const vdata = reactive({
	
	trmId: null, // 新建 or 修改 
	
	isAdd: true, // 是否新增页面
	
	 // 表单数据 
	formData: {
		state: 1 // 默认启用
	},
	
	bindAppName: '', // 为了组件的回显使用
	bindStoreName: '',
	
	
})

// 选择地图
function showMap(){
	
	// return testMap()
	
	// 打开地图 && 获取省市县
	uni.chooseLocation().then((res) => {
		
		vdata.formData.lng = res.longitude
		vdata.formData.lat = res.latitude
		vdata.formData.detailAddress = res.name
		
		// 经纬度 --》 获取到省市县编码
		 $location2areacode(res.longitude + "," + res.latitude).then(( {bizData} ) => {
			if(bizData && bizData.areacode){
				jeepayAreacodeSelect.value.resetBySingleAreacode(bizData.areacode)
			}
		 })
	})
}


function test(){
	vdata.formData.storeId = 1006
	vdata.formData.appId= '6247b241e4b016d586ee28c4'
	vdata.formData.trmType = 1
	vdata.formData.trmNo = '123' 
	vdata.formData.trmName = '123东方闪电'
}
function testMap(){
	vdata.formData.lng = '116.099'
	vdata.formData.lat = '39.84548'
	vdata.formData.detailAddress = '北京市ccc测试地址'
	// 经纬度 --》 获取到省市县编码
	 $location2areacode(vdata.formData.lng + "," + vdata.formData.lat).then(( {bizData} ) => {
		if(bizData && bizData.areacode){
			jeepayAreacodeSelect.value.resetBySingleAreacode(bizData.areacode)
		}
	 })
}


function confirmFunc(){
	
	formUtil.validate(formRef.value).then(() => {
		
		let reqData = Object.assign({}, vdata.formData)
		delete reqData.areaCode
		reqData.areacode = JSON.stringify(vdata.formData.areaCode)
		reqData.areacodeNames = JSON.stringify(jeepayAreacodeSelect.value.getNameListBySingleAreacode(vdata.formData.areaCode[2]))
		
		return reqLoad.addOrUpdate(vdata.trmId, API_URL_SYS_TERMINALS, reqData)
	})
	.then(( {bizData} ) => {
		emit.pageEmit(emit.ENAME_REF_TERMINAL_LIST) // 更新列表
		go.back(1, emit.ENAME_REF_TERMINAL_DETAIL) // 返回详情 && 更新详情 && search
	})
	
}

// 切换设备类型的函数
function changeTrmTypeFunc(){
	
	// 扫码pos , 选择一个
	if(vdata.formData.trmType == 2){
		
		jeepayPopupListSelectByScanPos.value.open().then((v) => {
			if(v){
				vdata.formData.trmNo = v.deviceNo
				vdata.formData.trmName = v.deviceName
				jeepayPopupListSelectByScanPos.value.close()
			}
		})
	}
}



// 是否选中了门店和设备 
function isSelectedStoreAndMchApp(){
	return ( vdata.formData.appId && vdata.formData.storeId )
}


function reqTableDataByScanPosFunc(params){
	
	params.appId = vdata.formData.appId
	params.storeId = vdata.formData.storeId
	params.deviceType = 3 // 扫码pos 
	
	return reqLoad.list(API_URL_SYS_DEVICE_LIST, params)
	
}




</script>

<style lang="scss">
input {
  font-size: 32rpx;
}
.selected-sex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  color: #b3b3b3;
  image {
    flex-shrink: 0;
    width: 120rpx;
    height: 120rpx;
  }
}
.line {
  margin-bottom: 20rpx;
}
.confirm-wrapper {
  padding: 50rpx 30rpx;
  .confirm-button {
    height: 110rpx;
    color: #fff;
    border-radius: 20rpx;
    background: $jeepay-bg-primary;
  }
}
.align-top {
  align-items: flex-start;
  padding: 40rpx 0;
  height: auto;
  min-height: auto;
  image {
    width: 120rpx;
    height: 40rpx;
    transform: rotate(90deg);
  }
}
.border-tb {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 90vw;
    height: 1rpx;
    background-color: #ededed;
  }
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    width: 90vw;
    height: 1rpx;
    background-color: #ededed;
  }
}
</style>
