<template>
  <HeaderNav :title="title" :is-back="true"></HeaderNav>
  <view class="body-background">

  </view>
  <u-row :custom-style="{padding:'50rpx 26rpx',boxSizing:'border-box'}">
    <u-col :span="12" :custom-style="{
      backgroundColor:'#FFFFFF',
      borderRadius:'20rpx',
      padding:'40rpx 32rpx',
      position:'relative'
    }">
      <u-form
          errorType="toast"
          labelWidth="auto"
          labelPosition="left"
          :model="model"
          ref="startForm"
      >

        <u-form-item
            prop="needTime"
            :custom-style="{padding:'0',paddingBottom:'30rpx;'}"
        >
          <view class="form-label">
            <u-text size="30" text="需要到达时间"></u-text>
          </view>
          <u-cell
              :title="model.needTime"
              custom-style="padding:0"
          >

          </u-cell>
          <uv-datetime-picker ref="needTime" v-model="model.needTime" model="datetime"></uv-datetime-picker>
        </u-form-item>
        <u-form-item
            prop="arriveTime"
            :custom-style="{padding:'0',paddingBottom:'30rpx;'}"
        >
          <view class="form-label">
            <u-text size="30" text="实际到达时间"></u-text>
          </view>
          <u-cell
              :title="model.arrival_time || '请选择到达时间'"
              is-link
            @click="$refs.arriveTime.open();"
              custom-style="padding:0"
          >

          </u-cell>
<!--          <u-text size="30" :text="model.arriveTime" @click="$refs.arriveTime.open();"></u-text>-->
          <uv-datetime-picker ref="arriveTime" :value="model.arrival_time" mode="datetime" @confirm="timeConfirm"></uv-datetime-picker>
        </u-form-item>
        <u-form-item
            prop="userInfo.sex"
            :custom-style="{padding:'34rpx 0'}"
        >
          <view class="form-label">
            <u-text size="30" text="宠托师身份确认"></u-text>
          </view>
          <uv-upload
              accept="media"
              width="160rpx"
              height="160rpx"
              :fileList="images.worker_confirm"
              name="1"
              multiple
              :maxCount="10"
              uploadIcon="plus"
              @delete="(res) => {uploadDel(res,'worker_confirm')}"
              @afterRead="(res) => {uploadPut(res,'worker_confirm')}"
          ></uv-upload>
        </u-form-item>
        <u-form-item
            prop="userInfo.sex"
            :custom-style="{padding:'34rpx 0'}"
        >
          <view class="form-label">
            <u-text size="30" text="手部消毒"></u-text>
          </view>
          <uv-upload
              accept="media"
              width="160rpx"
              height="160rpx"
              :fileList="images.hand_disinfect"
              name="1"
              multiple
              :maxCount="10"
              uploadIcon="plus"
              @delete="(res) => {uploadDel(res,'hand_disinfect')}"
              @afterRead="(res) => {uploadPut(res,'hand_disinfect')}"
          ></uv-upload>
        </u-form-item>
        <u-form-item
            prop="userInfo.sex"
            :custom-style="{padding:'34rpx 0'}"
        >
          <view class="form-label">
            <u-text size="30" text="全身消毒"></u-text>
          </view>
          <uv-upload
              accept="media"
              width="160rpx"
              height="160rpx"
              :fileList="images.body_disinfect"
              name="1"
              multiple
              :maxCount="10"
              uploadIcon="plus"
              @delete="(res) => {uploadDel(res,'body_disinfect')}"
              @afterRead="(res) => {uploadPut(res,'body_disinfect')}"
          ></uv-upload>
        </u-form-item>
        <u-form-item
            prop="userInfo.sex"
            :custom-style="{padding:'34rpx 0'}"
        >

          <view class="form-label">
            <u-text size="30" text="钥匙开启/收取"></u-text>
          </view>
          <uv-upload
              accept="media"
              width="160rpx"
              height="160rpx"
              :fileList="images.key"
              name="1"
              multiple
              :maxCount="10"
              uploadIcon="plus"
              @delete="(res) => {uploadDel(res,'key')}"
              @afterRead="(res) => {uploadPut(res,'key')}"
          ></uv-upload>
          <u-textarea
              v-model="model.key_info"
              border="none"
              placeholder="请描述您遇到的问题"
              height="220"
              :custom-style="{
                backgroundColor:'#FAFAFA',
                padding:'20rpx 20rpx'
              }"
          ></u-textarea>
        </u-form-item>
        <u-form-item
            prop="remark"
            :custom-style="{padding:'0'}"
        >
          <view class="form-label">
            <u-text size="30" text="服务工具"></u-text>
          </view>
          <u-checkbox-group size="40" v-model="service_tools">
            <u-checkbox name="汪汪行天下自备专业萌宠服务用品" label="汪汪行天下自备专业萌宠服务用品" labelSize="28" icon-size="28" active-color="#4EC2B7"></u-checkbox>
            <u-checkbox name="宠主要求使用家中物品" label="宠主要求使用家中物品" labelSize="28" icon-size="28" active-color="#4EC2B7"></u-checkbox>
          </u-checkbox-group>
        </u-form-item>
      </u-form>
      <view class="bottom-btn border-box" style="box-sizing: border-box;">
        <MzButton title="保存" button-color="#4EC2B7" button-width="100%" font-color="#fff" @click="submit">

        </MzButton>
      </view>
    </u-col>
  </u-row>
<!--  <view class="footer-content">-->
<!--    <view class="footer-contact">联系我们</view>-->
<!--    <view class="footer-wechat row">-->
<!--      <view class="foot-title">微信公众号：</view>-->
<!--      <view class="foot-url">宠物喂养公众平台 <text @click="copyContent()">复制</text></view>-->
<!--    </view>-->
<!--    <view class="footer-email row">-->
<!--      <view class="foot-title">官方邮箱：</view>-->
<!--      <view class="foot-url">1256896@qq.com <text @click="copyContent()">复制</text></view>-->
<!--    </view>-->
<!--  </view>-->
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import api from '@/utils/functions.js';
import HeaderNav from "@/components/HeaderNav/Index.vue";
import MzButton from "@/components/MzButton/Index.vue";
import {orderDone, orderStart} from "@/api/order";
import {editFeed} from "@/api/pet";

export default {
  components: {
    MzButton,
    HeaderNav,
  },
  data() {
    return {
      title: '开始服务',
      loading: true,
      staticImage: {
        bg: imghost + '/BG.png',
        newIcon: imghost + '/new-icon.png',
      },
      isTop: false,
      fileList:[],
      model:{
        order_service_id:'',
        needTime:'',
        arrival_time :'',
        worker_confirm:[],
        hand_disinfect:[],
        body_disinfect:[],
        key:[],
        key_info :'',
        service_tools:'',
      },
      images:{
        worker_confirm:[],
        hand_disinfect:[],
        body_disinfect:[],
        key:[],
      },
      service_tools:[],
    }
  },
  onLoad(option) {
    this.model.order_service_id = option.id;
    this.model.needTime = uni.$u.timeFormat(null,'yyyy-mm-dd hh:MM');
    // this.model.arrival_time = uni.$u.timeFormat(null,'yyyy年mm月dd日 hh时MM分');
  },
  computed: {
    api() {
      return api
    },
  },
  methods: {
    timeConfirm(e){
      this.model.arrival_time = uni.$u.timeFormat(e.value,'yyyy-mm-dd hh:MM');
    },
    submit(){
      let that = this;
      let data =  [
        'worker_confirm',
        'hand_disinfect',
        'body_disinfect',
        'key',
      ];
      new Promise((resolve,reject)=>{
        data.forEach((item,index) => {
          that.uploadSubmit(this.images[item],item);
          if(index === data.length-1){
            resolve()
          }
        });
      }).then(() => {
        this.model.service_tools = this.service_tools.join(',');

        orderStart(this.model).then((res) => {
          if(res.code === 200){
            api.success('保存成功').then(()=>{
              uni.navigateBack();
            })
          }else{
            uni.$u.toast(res.msg)
          }
        })
      });

    },
    uploadSubmit(data,fileName = ''){
      this.model[fileName] = data.map(item => {
        return {url:item.url,type:item.type};
      })
    },
    uploadShow(data,fileName = ''){
      let result = [];
      try{
        data.forEach(item => {
          result.push({url:item.url})
        })
      }catch (e){
        this.images[fileName] = [];
      }
      this.images[fileName] = result;
    },
    uploadPut(event,fileName = ''){
      let lists = [].concat(event.file);
      let fileListLen = this.images[fileName].length;
      lists.map((item) => {
        this.images[fileName].push({
          ...item,
          status: 'uploading',
          message: '上传中',
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const fileType = api.getFileType(lists[i].url);
        console.log(fileType)
        api.uploadOssFile(lists[i].url).then(res => {
          let item = this.images[fileName][fileListLen];
          this.images[fileName].splice(fileListLen, 1, {
            ...item,
            status: 'success',
            message: '',
            url: res.show_path,
            thumb: res.show_path,
            type:fileType
          });
          fileListLen++;
        })
      }
    },
    uploadDel(fileIndex,fileName = ''){
      this.images[fileName].splice(fileIndex.index,1);
    },
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {

  }
}
</script>

<style lang="scss">
@import './components/start.scss';
</style>