<template>
	<view class="lists">
		<view class="status_bar" :style="navHeight"></view>
		<view class="header-bg">
			<image class="header-bg-img" src="@/static/image/nav_bg@3x.png" mode="scaleToFill"></image>
		</view>
		<view class="main" :style="scrollHeight">
			<view class="img-block view">
				<button class="img-block-submit" type="default" :disabled="!isEdit" @click="handleSave">完成</button>
				<image class="img-block-bottle" :src="goodsBottleImage" mode="aspectFit"></image>
				<image class="img-block-logo" :src="activeTemplateItem.ThumbImagePath" mode="aspectFit"></image>
				<!-- <image class="img-block-logo" src="../../static/image/address@3x.png" mode=""></image> -->
			</view>
			<view class="tags-block view">
				<view class="tags-nav">
					<text v-for="(item,i) in tabs" :key="item.TemplateCategoryID" @click="handleClickTab(item,i)"
						:class="{'nav-item_active':activeTabIndex === i}" class="nav-item">{{item.CategoryName}}</text>
				</view>
				<scroll-view class="scroll-view" scroll-x="true" scroll-left="120">
					<view class="scroll-view-item scroll-view-item_first"
						:class="{'scroll-view-item_active':index === activeTemplateIndex}"
						@click="handleClickTemplate(item,index)" v-for="(item,index) in templateCategoryDetail"
						:key="index">
						<image class="template-img" :src="item.ThumbImagePath" mode="aspectFit"></image>
					</view>
				</scroll-view>
			</view>

			<view class="middle view planout-block-item" v-for="(item,index) in lists" :key='item.PRODUCT_ID'
				@click="handleChecked($event,item, index)">
				<text class="item-name">{{orderDetail.ITEM[0].DESCRIPTION}}</text>
				<view class="text-block">
					<text class="middle-date middle-date-select">定制件数</text>
					<text class="middle-date-des middle-date-des-select">{{orderDetail.ITEM[0].ZZFLD000009}}</text>
				</view>
				<view class="text-block">
					<text class="middle-date middle-date-select">收货方名称</text>
					<text class="middle-date-des middle-date-des-select">{{orderDetail.INFO.ZZFLD00008T}}</text>
				</view>
				<view class="text-block">
					<text class="middle-date middle-date-select">联系人</text>
					<text class="middle-date-des middle-date-des-select">{{orderDetail.INFO.ZZFLD00002L}}</text>
				</view>
				<view class="text-block">
					<text class="middle-date middle-date-select">地址</text>
					<text class="middle-date-des middle-date-des-select">{{orderDetail.INFO.ZZFLD00002N}}</text>
				</view>
				<view class="text-block">
					<text class="middle-date middle-date-select">CRM订单号</text>
					<text class="middle-date-des middle-date-des-select">{{orderDetail.INFO.OBJECT_ID}}</text>
				</view>
				<view class="text-block">
					<text class="middle-date middle-date-select">经销商名称</text>
					<text class="middle-date-des middle-date-des-select">{{orderDetail.INFO.GRPNAME}}</text>
				</view>
				<view class="text-block text-block-last">
					<text class="middle-date middle-date-select">外箱喷码内容</text>
					<text class="middle-date-des middle-date-des-select">{{orderDetail.INFO.ZZFLD000098}}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		apiGetCategory,
		apiGetCategoryDetail,
		apiGetCategoryDetailById,
		apiSaveCustom
	} from '@/servers/diyWine.js'

	export default {
		data() {
			return {
				scrollTop: 0,
				activeTabIndex: 0,
				activeTabItem: {
					TemplateCategoryID: "",
					CategoryName: ""
				},
				tabs: [],
				lists: [{}],
				activeTemplateIndex: -1,
				activeTemplateItem: {
					"TemplateID": "",
					"OriginImageWidth": "",
					"OriginImageHeight": "",
					"OriginImagePath": "",
					"ThumbImagePath": "",

				},
				activeTemplateItemDetail: {},
				templateCategoryDetail: [],
				goodsBottleImage: '',
				isEdit: true,
				signParams: {
					"SecretKey": "8B72E5CB394E3CABB56DC8E04AC4DE7F",
					"Sign": "b4eeef27e8dbb663bab932d742dc425f"
				},
				orderDetail: {
					ITEM: [{
						DESCRIPTION: '',
						ZZFLD000009: '',
						DESCRIPTION: '',
						DESCRIPTION: '',
					}],
					INFO: {
						ZZFLD00008T: '',
						ZZFLD00002L: '',
						ZZFLD00002N: '',
						OBJECT_ID: '',
						BUSINAME: '',
						ZZFLD000098: '',
					}
				}
			}
		},
		computed: {
			...mapState(['sysinfo', 'userInfo']),
			navHeight() {
				return {
					'height': `${this.sysinfo.safeArea.top + 44}px`
				}
			},
			scrollHeight() {
				return {
					'height': `${this.sysinfo.safeArea.height - 44 - 20}px`
				}
			}
		},
		onLoad(option) {
			if (option && option.orderDetail) {
				this.orderDetail = JSON.parse(option.orderDetail)
			}
		},
		created() {
			this.getCategory()
		},
		methods: {
			async getCategory() {
				const params = {
					"OutsideGoodsID": "432608038931800064",
					"Action": "guanying.customcategory.list.get",
					...this.signParams
				}
				// const res = await apiGetCategory(params)
				const res2 = {
					Data: {
						CategoryList: [{
								TemplateCategoryID: "7",
								CategoryName: "婚庆定制"
							},
							{
								TemplateCategoryID: "8",
								CategoryName: "商务科技"
							},
							{
								TemplateCategoryID: "9",
								CategoryName: "宴会类别"
							},
							{
								TemplateCategoryID: "10",
								CategoryName: "自定义"
							}
						],
						GoodsImage: "http://att.c0331.dev.guanyingyun.com/attachment/works/frontimagepath/2022/03/28/16484637403730.png",
					},
					ErrCode: "0",
					ErrMsg: "",
					Status: "Success"
				}
				this.tabs = res2.Data.CategoryList
				this.goodsBottleImage = res2.Data.GoodsImage
				this.activeTabItem = res2.Data.CategoryList[0]
				this.getCategoryDetail()

			},
			handleClickTab(item, i) {
				this.activeTabIndex = i
				this.activeTabItem = item
				this.getCategoryDetail()
			},
			async getCategoryDetail() {
				const params = {
					"OutsideGoodsID": "432608038931800064",
					"Action": "guanying.customtemplate.list.get",
					"TemplateCategoryID": this.activeTabItem.TemplateCategoryID,
					"PageID": "1",
					"Pagesize": "100",
					...this.signParams
				}
				// const res = await apiGetCategoryDetail(params)
				const res2 = {
					Data: [{
						"TemplateID": "2",
						"OriginImageWidth": "803",
						"OriginImageHeight": "2516",
						"OriginImagePath": "https://att.wuliangcreart.com/attachment/works/custom/2019/08/02/52Origin08.png",
						"ThumbImagePath": "https://att.wuliangcreart.com/attachment/works/custom/2019/08/02/Thumb08.png",

					}, {
						"TemplateID": "2",
						"OriginImageWidth": "803",
						"OriginImageHeight": "2516",
						"OriginImagePath": "https://att.wuliangcreart.com/attachment/works/custom/2019/08/02/52Origin08.png",
						"ThumbImagePath": "https://att.wuliangcreart.com/attachment/works/custom/2019/08/02/Thumb08.png",

					}],
					ErrCode: "0",
					ErrMsg: "",
					Status: "Success"
				}
				this.templateCategoryDetail = res2.Data

			},
			handleClickTemplate(item, i) {
				this.activeTemplateIndex = i
				this.activeTemplateItem = item
				this.getCategoryDetailById()
			},
			async getCategoryDetailById() {
				const params = {
					"TemplateID": this.activeTemplateItem.TemplateID,
					"Action": "guanying.goodstemplate.detail.query",
					...this.signParams
				}
				const res = await apiGetCategoryDetailById(params)
				const res2 = {
					Data: {
						"TemplateID": '1',
						"ThumbImagePath": '',
						"OriginImagePath": '',
						"OriginImageWidth": '',
						"OriginImageHeight": '',
						"ConfigContent": {
							"InitImgList": [{
								"imgID": 1
							}],
						},
					},
					ErrCode: "0",
					ErrMsg: "",
					Status: "Success"
				}
				this.activeTemplateItemDetail = res2.Data.ConfigContent.InitImgList[0]
			},
			async handleSave() {
				if (!this.activeTemplateItem.OriginImagePath) {
					uni.showToast({
						title: '请选择定制图片',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				// const imgpathArr = this.activeTemplateItem.OriginImagePath.split('.com')
				// const info = {
				// 	"attachmentDomain": imgpathArr[0] + '.com',
				// 	"src": imgpathArr[1]
				// }
				const params = {
					"OutsideGoodsID": "432608038931800064",
					"TemplateID": this.templateCategoryDetail.TemplateID,
					"info": JSON.stringify(this.activeTemplateItemDetail),
					// "info": JSON.stringify(info),
					"Action": "guanying.adapter.works.savecustom",
					...this.signParams
				}
				const res = await apiSaveCustom(params)
				this.isEdit = false
				this.goodsBottleImage =
					res
					.Data.ShowImagePath
				// const res2 = {
				// 	Data: {
				// 		"WorksID": "1512",
				// 		"ShowImagePath": "http://att.c0331.dev.guanyingyun.com/attachment/works/works/2020/08/12/15972225215710.png",
				// 		"FinalImagePath": "http://att.c0331.dev.guanyingyun.com/attachment/works/works/2020/08/12/15972225215291.png"
				// 	},
				// 	ErrCode: "0",
				// 	ErrMsg: "",
				// 	Status: "Success"
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		flex-direction: column;
	}

	.header-bg {
		height: 284rpx;
		margin-top: -88rpx;
	}

	.header-bg-img {
		width: 750rpx;
	}

	.lists {
		position: relative;
		flex-direction: column;
		background: #f0f4f5;
		overflow: hidden;
		height: 100vh;
	}

	.main {
		position: relative;
		flex-direction: column;
		margin-top: -164rpx;
		overflow-y: scroll;
	}

	.img-block {
		position: relative;
		flex: 1;
		height: 700rpx;
		padding: 40rpx 0;
		background-color: #feffff;
	}

	.img-block-bottle {
		width: 100%;
		margin: auto;
		height: 100%;
	}

	.img-block-logo {
		position: absolute;
		left: 280rpx;
		top: 350rpx;
		width: 200rpx;
		height: 200rpx;
	}

	.img-block-submit {
		position: absolute;
		z-index: 10;
		right: 18rpx;
		top: 26rpx;
		width: 85px;
		height: 39px;
		line-height: 80rpx;
		background: #ffffff;
		border: 1px solid #d8d8d9;
		border-radius: 20px;
		color: #333;
		font-size: 28rpx;
	}

	.middle {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 48rpx 32rpx 32rpx 32rpx;
	}

	.text-block {
		display: flex;
		overflow: hidden;
		height: 86rpx;
	}

	.item-name {
		font-size: 14px;
		color: #333;
		font-weight: 600;
	}

	.text-block-last {
		margin-bottom: 0;
		border-bottom: 0;
	}

	.middle-date {
		flex: 2;
		font-size: 28rpx;
		line-height: 86rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.middle-date-des {
		flex: 3;
		font-size: 24rpx;
		line-height: 86rpx;
		height: 86rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #888;
	}

	.middle-date-select {
		color: #999;
		font-size: 12px;
	}

	.middle-date-des-select {
		color: #333;
		text-align: right;
	}

	.uni-list-cell {
		flex: 1;
	}

	.uni-list-cell-db {
		flex: 1;
	}

	.planout-block-item {
		flex: 1;
		width: 750rpx;
		margin-bottom: 26rpx;
	}

	.tags-nav {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 8px 0;
	}

	.nav-item {
		flex: 1;
		font-size: 12px;
		text-align: center;
		color: #888;
	}

	.nav-item_active {
		color: #333;
	}

	.scroll-view {
		white-space: nowrap;
		width: 750rpx;
		background: #f0f4f5;
		padding-bottom: 16px;
	}

	.scroll-view-item {
		display: inline-block;
		width: 120rpx;
		height: 120rpx;
		background-color: #fff;
		line-height: 120rpx;
		text-align: center;
		border-radius: 2px;
		margin-right: 28rpx;
		border: 1px solid transparent;
	}

	.scroll-view-item_first {
		margin-left: 32rpx;
	}

	.scroll-view-item_active {
		border: 1px solid #ff1d32;
	}

	.template-img {
		width: 120rpx;
		height: 120rpx;
	}
</style>
