<template>
	<view class="admin-delivery-edit" v-if="viewModel">
		<uni-forms>
			<uni-forms-item :label-width="labelWidth" label="模板名称">
				<uni-easyinput v-model="viewModel.name" placeholder="最多允许输入30个汉字(60个字符)"></uni-easyinput>
				<text class="admin-delivery-edit-tips">请输入运费模块名称</text>
			</uni-forms-item>
			<uni-forms-item :label-width="labelWidth" label="费用承担方式">
				<x-radio type="deliveryTemplateType" v-model="viewModel.templateType"></x-radio>
				<text class="admin-delivery-edit-tips">请选择费用承担方式</text>
			</uni-forms-item>
			<uni-forms-item :label-width="labelWidth" label="计费方式">
				<uni-data-checkbox v-model="viewModel.calculateType" :localdata="widgetModel.charg"></uni-data-checkbox>
				<text class="admin-delivery-edit-tips">请选择计费方式</text>
			</uni-forms-item>
			<uni-forms-item :label-width="labelWidth" label="默认首重(kg)">
				<uni-number-box v-model="viewModel.startStandard"></uni-number-box>
				<text class="admin-delivery-edit-tips">默认首重,模板区域未找到时使用默认首重(kg)计算</text>
			</uni-forms-item>
			<uni-forms-item :label-width="labelWidth" label="默认首费(单元：元)">
				<uni-number-box v-model="viewModel.startFee"></uni-number-box>
				<text class="admin-delivery-edit-tips">默认首费,模板区域未找到时使用默认首费计算</text>
			</uni-forms-item>
			<uni-forms-item :label-width="labelWidth" label="默认续重(个)">
				<uni-number-box v-model="viewModel.endStandard"></uni-number-box>
				<text class="admin-delivery-edit-tips">默认续重(个),模板区域未找到时使用默认续重(个)计算</text>
			</uni-forms-item>
			<uni-forms-item :label-width="labelWidth" label="默认续费(单元：元)">
				<uni-number-box v-model="viewModel.endFee"></uni-number-box>
				<text class="admin-delivery-edit-tips">默认续费,模板区域未找到时使用默认续费计算</text>
			</uni-forms-item>
		</uni-forms>
		<view class="admin-delivery-edit-border">
			<view class="admin-delivery-edit-border-cont">
				<view class="admin-delivery-edit-border-line"></view>
				<text class="admin-delivery-edit-border-title">配送区域</text>
			</view>
			<text class="admin-delivery-edit-border-intro"> 点击右上角的按钮，新增运费模板配送区域 </text>
		</view>
		<view class="admin-delivery-edit-add">
			<text class="admin-delivery-edit-add-text">
				<uni-tag @click="popupClick" text="新增配送区域" type="primary"></uni-tag>
			</text>
		</view>
		<edit-table :dataModel="viewModel" ref="editTable"></edit-table>
		<!-- <edit-popup></edit-popup> -->
	</view>
</template>

<script>
	let width = uni.upx2px(200)
	import testJson from './test.json'
	import ala from '@/service/ala.js'
	import editPopup from './widget/popup.vue'
	import editTable from './widget/table.vue'
	export default {
		components: {
			editPopup,
			editTable
		},
		props: {
			widget: {}
		},
		data() {
			return {
				labelWidth: width,
				widgetModel: testJson,
				viewModel: null
			}
		},
		created() {
			this.init()
		},
		methods: {
			async init() {
				let para = {
					id: ala.getId(this.widget.route)
				}
				let result = await ala.httpGet('api/DeliveryTemplate/ViewById', para)
				if (result) this.viewModel = result
				else {
					ala.toast(result.message)
				}
			},
			popupClick() {
				this.$refs.editTable.addTable()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.admin-delivery-edit {
		padding: 30rpx 0;

		&-tips {
			width: 450rpx;
			@include styleFont(#808080, 28rpx);
		}

		

		&-add {
			@include flexRowEnd;
			padding: 10rpx 30rpx;
		}
	}
</style>

<style>
	.uni-forms-item__content {
		width: 500rpx !important;
		background-color: #DC2626;
	}

	.uni-easyinput {
		width: 450rpx;
	}
</style>
