<template>
  <view style="height: 100%">
    <custom-nav-bar position="fixed" color="black" left-text="新增服务记录" left-arrow />

    <view class="page-content">
      <view class="cell cell-defale">
        <view class="cell-left">服务对象</view>
        <view class="cell-right">张文远</view>
      </view>
      <view class="cell cell-defale">
        <view class="cell-left">
          服务形式
          <text class="red">*</text>
        </view>
        <view class="cell-right flex">
          <view class="cell-right m-r-27" @tap="pickerIsFun" data-item="modalityIs">
            <text :class="modality !== null ? 'title' : ''">{{ modality.value.label || '请选择' }}</text>
          </view>
          <van-icon name="arrow-down" size="16px" color="#FE3B53" />
        </view>
      </view>
      <view class="cell">
        <view class="cell-left">
          服务内容
          <text class="red">*</text>
        </view>
        <view class="cell-multiline">
          <textarea class="textarea" @input="headleInput" :value="content" data-name="content" maxlength="-1"
            placeholder-style="color:#999" placeholder="请输入"></textarea>
        </view>
      </view>
      <view class="cell">
        <view class="cell-left">上传照片</view>
        <view class="cell-multiline">
          <view class="form-image">
            <van-uploader @after-read="afterRead" :file-list="fileList" :deletable="true" max-count="9"
              @delete="imageDelete">
              <image class="camera" src="/static/images/icon9.png"></image>
            </van-uploader>
          </view>
          <view class="cell-slot">附件不超过9个</view>
        </view>
      </view>

      <view class="cell cell-defale">
        <view class="cell-left">
          服务时间
          <text class="red">*</text>
        </view>
        <view class="cell-right flex" @tap="pickerIsFun" data-item="pickerIs">
          <view class="cell-right m-r-27">
            <text v-if="picker !== null" class="title">{{ toods.getDateTime(picker, 0) }}</text>
            <text v-if="picker === null">请选择</text>
          </view>
          <van-icon name="arrow-down" size="16px" color="#FE3B53" />
        </view>
      </view>
    </view>

    <van-dialog use-slot :show="isEvaluate" confirm-button-color="#0090FC" show-cancel-button @close="onClose"
      @confirm="healedOrder">
      <view class="dialog">
        <view>提交后将无法修改，确认提交吗？</view>
      </view>
    </van-dialog>

    <view class="fixed-bottom">
      <button v-if="picker === null">提交</button>
      <button class="res" v-if="picker !== null" @tap="submit">提交</button>
    </view>

    <!-- 服务时间选择器 -->
    <van-popup :show="pickerIs" round position="bottom" data-item="pickerIs" custom-style="height:50%"
      @close="pickerIsFun($event, { item: 'pickerIs' })">
      <van-datetime-picker type="datetime" title="请选择时间" data-name="picker" data-item="pickerIs" :formatter="formatter"
        :value="currentDate" @cancel="pickerIsFun($event, { name: 'picker', item: 'pickerIs' })"
        @confirm="healeConfirm($event, { name: 'picker', item: 'pickerIs' })" />
    </van-popup>

    <!-- 服务形式选择器 -->
    <van-popup :show="modalityIs" round position="bottom" data-item="modalityIs" custom-style="height:50%"
      @close="pickerIsFun($event, { item: 'modalityIs' })">
      <van-picker :columns="list" show-toolbar title="请选择服务形式" data-name="modality" data-item="modalityIs"
        @confirm="healeConfirm($event, { name: 'modality', item: 'modalityIs' })"
        @cancel="pickerIsFun($event, { name: 'modality', item: 'modalityIs' })" value-key="label" />
    </van-popup>
  </view>
</template>
<!-- <script module="toods" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
  // const app = getApp();
  // const { publicApi, peopleApi } = app.globalData.api;
  import * as publicApi from '@/api/publicApi';
  import * as peopleApi from '@/api/peopleApi';
  const list = [{
      label: '张三',
      value: '1'
    },
    {
      label: '李四',
      value: '2'
    }
  ];
  export default {
    components: {
      // vanDialog,
      // vanIcon,
      // vanUploader,
      // vanDatetimePicker,
      // vanPopup,
      // vanPicker
    },
    data() {
      return {
        options: {},
        isEvaluate: false,
        list: list,

        // 上传图片所需
        appealEnclosure: [],

        fileList: [],

        // 服务形式
        modalityIs: false,

        modality: null,

        // 选择完整时间
        pickerIs: false,

        picker: null,
        currentDate: new Date().getTime(),

        formatter(type, value) {
          if (type === 'year') {
            return `${value}年`;
          }
          if (type === 'month') {
            return `${value}月`;
          }
          if (type === 'day') {
            return `${value}日`;
          }
          if (type === 'hour') {
            return `${value}时`;
          }
          if (type === 'minute') {
            return `${value}分`;
          }
          return value;
        },

        // 表单
        content: '',

        name: '',
        label: ''
      };
    },
    onLoad(options) {
      this.setData({
        options
      });
    },
    methods: {
      // 清楚对应的image图片
      imageDelete(event) {
        const {
          index
        } = event.detail;
        const Image = this.fileList;
        Image.splice(index, 1);
        this.setData({
          fileList: Image
        });
      },

      //  上传图片
      async afterRead(event) {
        const {
          file
        } = event.detail;
        const res = await getApp().globalData.upload({
          file
        });
        if (res.code !== 0) {
          uni.showToast({
            title: '上传图片失败',
            icon: 'none'
          });
          return false;
        }
        const {
          fileList
        } = this;
        const {
          appealEnclosure
        } = this;
        const url = res.data;
        fileList.push({
          url
        });
        appealEnclosure.push(url);
        this.setData({
          fileList,
          appealEnclosure
        });
      },

      // 取消对应选择器
      pickerIsFun(event, _dataset) {
        /* ---处理dataset begin--- */
        this.handleDataset(event, _dataset);
        /* ---处理dataset end--- */
        const {
          item
        } = event.currentTarget.dataset;
        this.setData({
          ...this,
          [item]: !this[item]
        });
      },

      // 确认选择器
      healeConfirm(event, _dataset) {
        /* ---处理dataset begin--- */
        this.handleDataset(event, _dataset);
        /* ---处理dataset end--- */
        const {
          name
        } = event.currentTarget.dataset;
        this.setData({
          ...this,
          [name]: event.detail === undefined ? event.detail.value.index : event.detail,
          [name + 'Is']: !this[name + 'Is']
        });
      },

      // input 输入框
      headleInput(event) {
        const {
          value
        } = event.detail;
        const {
          name
        } = event.currentTarget.dataset;
        this.setData({
          ...this,
          [name]: value
        });
      },

      // 提示确认按钮
      healedOrder(event) {
        const {
          appealEnclosure,
          modality,
          picker,
          content
        } = this;
        if (modality === null || picker === null || content === '') {
          let message = null;
          if (modality === null) {
            message = '请选择服务形式';
          } else if (content === '') {
            message = '请输入服务内容';
          } else if (picker === null) {
            message = '请选择服务时间';
          } else {
            message = '戴*的必填';
          }
          uni.showToast({
            title: message,
            icon: 'none'
          });
          return false;
        }
        const params = {
          appealEnclosure,
          modality: modality.value.value,
          picker,
          content
        };
        console.log(params);
        uni.showToast({
          title: '提交服务记录成功',
          icon: 'none'
        });
        setTimeout(function() {
          uni.redirectTo({
            url: `/packages/public/pages/service-record/service-record-detail?id=1&name=服务记录详情`
          });
        }, 2000);
      },

      // 取消按钮
      onClose() {
        this.setData({
          isEvaluate: false
        });
      },

      // 提交
      submit() {
        this.setData({
          isEvaluate: true
        });
      }
    }
  };
</script>
<style lang="less">
  .m-r-27 {
    margin-right: 27rpx;
  }

  .title {
    color: #333333;
  }

  .page-content {
    margin-top: 20rpx;
    padding-left: 36rpx;
    padding-right: 36rpx;
    padding-bottom: 160rpx;

    .cell {
      width: 100%;
      padding: 42rpx 0;
      background: #ffffff;
      border-bottom: 1px solid #efefef;

      .cell-left {
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
        line-height: 28rpx;
      }

      .cell-right {
        font-size: 32rpx;
        font-weight: 400;
        color: #999999;
        line-height: 32rpx;
      }
    }

    .cell-defale {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .cell-tag-two {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .tag-bth {
      padding: 16rpx 32rpx;
      background: #f7faff;
      border-radius: 40rpx;
      border: 1px solid #c5dff4;
      font-size: 28rpx;
      font-weight: 400;
      color: #0091ff;
      line-height: 28rpx;
      margin-right: 16rpx;
      margin-top: 24rpx;

      &:last-child {
        margin-right: 0;
      }
    }

    .cell-img {
      margin-top: 32rpx;
      display: grid;
      grid-template-columns: repeat(3, 218rpx);
      grid-gap: 10rpx;

      .cell-img-item {
        width: 218rpx;
        height: 200rpx;
      }
    }

    .cell-multiline {
      margin-top: 32rpx;
      font-size: 32rpx;
      font-weight: 400;
      line-height: 40rpx;

      textarea {
        height: 150rpx;
      }
    }
  }

  .dialog {
    text-align: center;
    padding: 66rpx 86rpx 76rpx 86rpx;
    font-size: 40rpx;
    font-weight: 400;
    line-height: 60rpx;
    color: #333333;
  }

  .form-image>view {
    width: 31.3%;
    position: relative;
    margin-right: 13.5rpx;
  }

  .form-image>view>image:nth-child(1) {
    width: 100%;
    height: 200rpx;
    border-radius: 10rpx;
  }

  .form-image>view>image:nth-child(2) {
    position: absolute;
    top: -0rpx;
    right: 0rpx;
    width: 40rpx;
    height: 40rpx;
  }

  .camera {
    width: 160rpx;
    height: 160rpx;
  }

  .cell-slot {
    margin-top: 24rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;
    line-height: 26rpx;
  }

  .fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    padding: 20rpx 36rpx 50rpx 36rpx;

    button {
      width: 100%;
      height: 80rpx;
      background: #d9e2ee;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 32rpx;
      line-height: 80rpx;
      border-radius: 8rpx;
    }

    .res {
      background: #fe3b53;
    }
  }
</style>