<template>
  <zj-page-layout :hasFooter="true">
    <view class="all-container">
      <view class="address-container card" @tap="chooseAddress">
        <view class="common-title"><text>*</text>客户信息</view>
        <view class="main">
          <view class="left" v-if="addressInfo">
            <view class="icon"><text class="iconfont icon-dingwei1"></text></view>
            <view class="nodata" v-if="!addressInfo">选择联系人地址</view>
            <view class="hasdata" v-else>
              <view class="name">{{addressInfo.name}}<text>{{addressInfo.phone}}</text></view>
              <view class="address ellipsis-2">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.area}}{{addressInfo.street}}{{addressInfo.address}}{{addressInfo.houseNo}}</view>
            </view>
          </view>
					<view class="left" v-else>
						<view class="icon"><text class="iconfont icon-dingwei1"></text></view>
						<view class="hasdata">
						  <view class="name">{{detail.userName}}<text>{{detail.userMobile}}</text></view>
						  <view class="address ellipsis-2">{{detail.userAddress}}</view>
						</view>
					</view>
          <text class="right iconfont icon-jinru"></text>
        </view>
      </view>

      <view class="service-container card">
        <view class="common-title">服务信息</view>
        <view class="item">
          <view class="label"><text>*</text>工单类型</view>
          <view class="picker">
            <text class="value">维修</text>
          </view>
        </view>
        <view class="item">
          <view class="label"><text>*</text>所属网点</view>
          <view class="value">{{detail.websitName}}</view>
        </view>
		<view class="item">
		  <view class="label"><text>*</text>预约上门时间</view>
		  <view class="picker" @tap="isShowDatePicker = true">
		    <text class="value" v-if="appointmentTime">{{appointmentTime}}</text>
		    <text class="placeholder" v-else>请选择</text>
		    <text class="iconfont icon-jinru"></text>
		  </view>
		</view>
      </view>

      <view class="service-container card">
        <view class="common-title">产品信息</view>
		<view class="item">
		  <view class="label"><text>*</text>产品品牌</view>
		  <view class="value">{{detail.brandName}}</view>
		</view>
		<view class="item">
		  <view class="label"><text>*</text>产品大类</view>
		  <view class="value">{{detail.mainName}}</view>
		</view>
		<view class="item">
		  <view class="label"><text>*</text>服务内容</view>
		  <view class="value">{{detail.increContent}}</view>
		</view>
      </view>
	  <view class="service-container card">
	    <view class="common-title">产品凭证</view>
	    <view class="item">
	      <view class="label">内机条码</view>
	      <view class="value">{{detail.insideCode}}</view>
	    </view>
		<view class="imgs">
			<!-- 内机条码 -->
			<view class="it">
				<block>
					<image mode="aspectFill" :src="detail.insideCodeImg" @tap="prevImg(detail.insideCodeImg)">
					</image>
				</block>
				<view class="name">内机条码</view>
			</view>
			<!-- 机器铭牌 -->
			<view class="it">
				<block>
					<image mode="aspectFill" :src="detail.machineImg" @tap="prevImg(detail.machineImg)">
					</image>
				</block>
				<view class="name">机器铭牌<br/>(含出厂日期)</view>
			</view>
			<!-- 购机凭证 -->
			<view class="it">
				<block>
					<image mode="aspectFill" :src="detail.buyCertImg" @tap="prevImg(detail.buyCertImg)">
					</image>
				</block>
				<view class="name">购机凭证</view>
			</view>
		</view>
	  </view>
	  <view class="service-container card" style="box-sizing: border-box;">
	    <view class="common-title" style="margin-bottom: 20rpx;">备注信息</view>
	    <u--textarea v-model="remark" placeholder="请输入内容" ></u--textarea>
	  </view>
    </view>

    <template slot="footer">
      <view class="footer-btn-group">
        <u-button @click="confirm" type="primary" text="提交服务单"></u-button>
      </view>
    </template>

	<u-datetime-picker
	  :show="isShowDatePicker"
	  v-model="datePickerValue"
	  mode="date"
	  :formatter="formatter"
	  @cancel="isShowDatePicker = false"
	  @close="isShowDatePicker = false"
	  @confirm="confirmDate"
	  :minDate="minDate"
	></u-datetime-picker>
  </zj-page-layout>
</template>

<script>
  import zjDialogPicker from "@/components/zj-dialog/zj-dialog-picker.vue";
  import { uploadImgFull } from '@/common/utils/util.js';
  export default {
    components: {
    	zjDialogPicker
    },
    data() {
      return {
        addressInfo: null,
		date: '',
		appointmentTime: '',
		datePickerValue: Number(new Date()),
		minDate: Number(new Date()),
		isShowDatePicker: false,
		remark: '',
		typeId: '',
		detail: {},
		userInfo: {}
      }
    },

    async onLoad({id}) {
		this.userInfo = await this.$getUserInfo();
		this.getDetail(id)
		this.getTypeList()
		// 接收地址信息
		this.crossPage.$on('chooseAddress', result => {
			this.addressInfo = result;
		})
    },

    onUnload() {
		this.crossPage.$off('chooseAddress');
    },

	computed: {
		formatter() {
		  return function(type, value){
			  if (type === 'year') {
			    return `${value}年`
			  }
			  if (type === 'month') {
			    return `${value}月`
			  }
			  if (type === 'day') {
			    return `${value}日`
			  }
			  return value
		  }
		},
		isWorkerUser() { // 是否师傅
			return this.userInfo && this.userInfo.type === 'WORKER';
		},
	},

    methods: {
		// 去选择地址
		chooseAddress() {
			this.$navToPage({
			url: '/packageMine/pages/address/list?isChoose=' + true
			})
		},

		getDetail(id) {
			this.$api.post('/increConfig/detailIncre', {
				id
			}).then((res) => {
				this.detail = res.data;
			})
		},

		getTypeList(){
			this.$api.post('/pg/order/base/type/list').then(res => {
				res.data.map(item => {
					if(item.orderSmallTypeText == '维修'){
						this.typeId = item.id
					}
				})
			})
		},

		confirmDate(e) {
		  this.isShowDatePicker = false;
		  let time = new Date(e.value);
		  let y = time.getFullYear();
		  let m = (time.getMonth()+1) < 10 ? '0' + (time.getMonth()+1) : time.getMonth()+1;
		  let d = (time.getDate()) < 10 ? '0' + (time.getDate()) : time.getDate();
		  let hh = (time.getHours()) < 10 ? '0' + (time.getHours()) : time.getHours();
		  let mm = (time.getMinutes()) < 10 ? '0' + (time.getMinutes()) : time.getMinutes();
		  let ss = (time.getSeconds()) < 10 ? '0' + (time.getSeconds()) : time.getSeconds();
		  this.appointmentTime = `${y}-${m}-${d}`;
		},

		// 预览图片
		prevImg(url) {
			uni.previewImage({
				current: url,
				urls: [url],
			});
		},

		confirm(){
			let productList = [{
				brandId: this.detail.brandId,
				brandName: this.detail.brandName,
				insideCode: this.detail.insideCode,
				mainId: this.detail.mainId,
				mainName: this.detail.mainName,
				imgUrl: this.detail.mainImg,
				num: 1
			}]

			if(!this.appointmentTime){
				return this.$toast('请选择预约上门时间！')
			}else{
				this.$api.postJson('/pg/order/base/save',{
					orderSmallType: this.typeId,
					appointmentTime: this.appointmentTime + ' 00:00:00',
					pgIncreOrderId: this.detail.id,
					userAddressId: this.addressInfo?this.addressInfo.userAddressId:this.detail.userAddressId,
					userName: this.detail.userName,
					phone: this.detail.userMobile,
					address: this.detail.userAddress,
					websitId: this.detail.websitId,
					orderProducts: productList,
					remark: this.remark,
				}).then(res => {
					if(res.code == 200){
						if(this.isWorkerUser){
							this.$navToPage({
								url: `/packageWorkorder/pages/orderList`
							})
						}else{
							this.$navToPage({
								url: `/packageWorkorder/pages/userWorkorderList`
							})
						}
					}
				})
			}
		},

    },
  }
</script>

<style lang="scss" scoped>
.card {
  @include zj-card;
  margin-top: 20rpx;
  padding: 30rpx;
}
.common-title {
  font-size: 32rpx;
  font-weight: 500;
  text {
    color: $error-color;
    font-weight: normal;
  }
}
.all-container {
  padding: 0 20rpx;
}
.address-container {
  .main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;
  }
  .right {
    font-size: 32rpx;
    color: $sec-font;
    flex-shrink: 0;
  }
  .left {
    display: flex;
    align-items: center;
    margin-right: 20rpx;
    .icon {
      width: 52rpx;
      height: 52rpx;
      border-radius: 50%;
      background: $theme-color;
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;
      .iconfont {
        font-size: 36rpx;
        color: #ffffff;
      }
    }
    .nodata {
      font-size: 28rpx;
      color: #999999;
    }
    .hasdata {
      .name {
        font-size: 32rpx;
        color: #333333;
        text {
          color: #999999;
          font-size: 28rpx;
          margin-left: 16rpx;
        }
      }
      .address {
        font-size: 28rpx;
        color: #666666;
        line-height: 34rpx;
        margin-top: 10rpx;
      }
    }
  }
}

.service-container {
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50rpx;
    margin-top: 30rpx;
    .label {
      margin-right: 30rpx;
      text {
        color: $error-color;
      }
    }
    .picker {
      .placeholder {
        color: $sec-font;
      }
      .iconfont {
        margin-left: 12rpx;
        color: $sec-font;
      }
    }
  }
  .imgs {
    display: flex;
    flex-wrap: wrap;

    .it {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      margin-top: 30rpx;
      margin-right: 30rpx;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .close {
        position: absolute;
        right: -20rpx;
        top: -20rpx;
        z-index: 99;
        width: 42rpx;
        height: 42rpx;
        background: $minor-color;
        color: #ffffff;
        text-align: center;
        line-height: 42rpx;
        border-radius: 50%;
        font-size: 28rpx;
      }

      image {
        width: 190rpx;
        height: 190rpx;
        background: #f4f4f7;
        border-radius: 20rpx;
        overflow: hidden;
      }

      .empty {
        width: 190rpx;
        height: 190rpx;
        border: 1px dashed #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        border-radius: 20rpx;
        overflow: hidden;

        .iconfont {
          font-size: 52rpx;
          color: $sec-font;
        }

        .text {
          margin-top: 12rpx;
          font-size: 28rpx;
          color: $sec-font;
        }
      }

      .name {
        margin-top: 24rpx;
        color: $sec-font;

        text {
          color: $minor-color;
        }
      }
    }
  }
}
.pay{
	padding: 30rpx;
	padding-bottom: 0;
	box-sizing: border-box;
	position: relative;
	.title{
		font-size: 34rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 50rpx;
	}
	.item{
		color: #666666;
		margin-bottom: 20rpx;
		.text{
			margin-left: 30rpx;
			color: #000000;
		}
	}
	.payType{
		margin: 40rpx 0;
	}
	.close{
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
}

</style>
