<template>
  <uni-popup ref="popup" background-color="#fff" :mask-click="false">
    <view class="popup-content">
      <view class="popup-title">{{ detail.orderNo }}{{$t('订单转异')}}</view>
      <view class="form-wrap">
        <view>
          <text>{{$t('异常类型')}}</text>
          <uni-data-checkbox v-model="manualExceptionType" multiple :localdata="manualExceptionTypeList" />
        </view>
        <view>
          <text>{{$t('详细信息')}}</text>
          <uni-easyinput type="textarea" autoHeight v-model="descZh" placeholder=""></uni-easyinput>
        </view>
        <view>
          <text>{{$t('附件')}}</text>
          <view class="img-wrap">
            <uni-grid :column="4" :highlight="true" :show-border="false">
              <uni-grid-item v-for="(item, index) in exceptionList" :index="index" :key="index">
                <view class="grid-item-box" style="height: 100%;position: relative;">
                  <image :src="iconpath" style="position: absolute;top:4px;right:4px;width:24px;height:24px;z-index:9" @tap="delexception(index)" mode="widthFix"></image>
                  <image :src="item.url" mode="scaleToFill" style="height: 100%" @tap="previewImage(item.url)" />
                </view>
              </uni-grid-item>
              <uni-grid-item>
                <view class="grid-item-box" style="height: 100%">
                  <view class="grid-item-box-add" @tap="chooseImages(false)">
                    <uni-icons type="plusempty" size="30" color="#eae8eb"></uni-icons>
                    <!-- <text>添加视频或图片</text> -->
                  </view>
                </view>
              </uni-grid-item>
            </uni-grid>
          </view>
        </view>
      </view>
      <view class="popup-foot-btn">
        <button class="mini-btn" type="primary" size="mini" @tap="saveException">{{$t('提交')}}</button>
        <button class="mini-btn" type="default" size="mini" @tap="cancel">{{$t('取消')}}</button>
      </view>
    </view>
  </uni-popup>
</template>
<script>
import { updateImg } from "@/api/system";
import iconpath from '@/static/images/close.png'
import { orderBatchToException } from "@/pages/tallyAir/api";

export default {
  name: "exception",
  props:{
    detail: Object
  },
  data(){
    return {
      iconpath,
      manualExceptionTypeList:[],
      exceptionList:[],
      descZh: "",
      manualExceptionType: [],
      imageList: []
    }
  },
  async created(){
    this.manualExceptionTypeList = this.getDictDatas(this.DICT_TYPE.MANUAL_EXCEPTION_TYPE).map(v => ({ ...v, text: this.$l(v, 'label')}))
    await this.$nextTick()
    this.$refs.popup.open()
  },
  methods:{
    cancel(){
      this.$emit("close")
    },
    saveException(){
      if(!this.manualExceptionType.length){
        return uni.showToast({
          title:this.$t('请选择异常类型'),
          icon:'error'
        })
      }
      orderBatchToException({
        "descEn": "",
        "descZh": this.descZh,
        "exceptionUrls": this.exceptionList,
        "manualExceptionType": this.manualExceptionType.join(","),
        "orderIds": [this.detail.orderId]
      }).then(res => {
        uni.showToast({
          title: this.$t("提交成功"),
          icon: 'success'
        })
        this.$emit("success")
      })
    },
    chooseImages(flag) {
      console.log(flag, '---------flag-----');
      uni.chooseImage({
        count: 9, //默认是9张
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], //从相册选择
        success: res => {
          console.log(res, 'ddddsss')
          // let imgFile = res.tempFilePaths;
          res.tempFilePaths.forEach((item, index) => {
            updateImg(item).then(data => {
              console.log(data, flag, '--------res--------');
              if (flag) {
                warehousePictureCreate({
                  "bizId": this.orderId,
                  "type": 1,
                  "url": data.data
                }).then(r => {
                  this.imageList.push({ type: 'image', url: data.data, id: r.data })
                })
              } else {
                // this.exceptionList.push({ url: data.data })
                this.$set(this.exceptionList, this.exceptionList.length, { url: data.data })
              }
            })
          })
        }
      })
    },
    delexception(index){
      this.exceptionList.splice(index,1)
    },

    //上传视频
    chooseVideo(index) {
      uni.chooseVideo({
        maxDuration: 60, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
        count: 9,
        success: res => {
          let videoFile = res.tempFilePath;
          console.log(res, 'ddddsss')
          // res.tempFilePaths.forEach((item, index) => {
          updateImg(videoFile).then(data => {
            console.log(data, '--------res--------');
            this.imageList.push({ type: 'video', url: data.data })
          })
          // })
        },
        fail:(error)=>{
          uni.hideLoading();
          uni.showToast({
            title: error,
            icon: 'none'
          })
        }
      })
    },
    previewImage(url) {
      //uniapp预览轮播图
      uni.previewImage({
        current: 0, //预览图片的下标
        urls: [url] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
      })
    },
    playVideo(index) {
      setTimeout(() => {
        this.videoContext = uni.createVideoContext(`video_${index}`)
      }, 500)
    },
    fullscreenchange(event) {
      if (!event.detail.fullScreen) {
        // this.videoContext.pause()
      }
    },
  }
}
</script>
<style scoped lang="scss">
.popup-content {
  width: 90vw;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  max-height: 80vh;
  overflow: auto;
  .popup-title {
    line-height: 48px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
  .form-wrap {
    > view {
      display: flex;
      margin-bottom: 8px;
      > text {
        width: 60px;
        margin-right: 8px;
      }
    }
    .img-wrap {
      flex: 1;
      width: calc(100% - 68px);
      ::v-deep .uni-grid-item {
        background: #fbf8fb;
      }
      .grid-item-box-add {
        height: 100%;
        display: flex;
        flex-flow: column;
        font-size: 10px;
        padding: 16px 0;
        text-align: center;
        justify-content: center;
      }
    }
  }
  .popup-foot-btn {
    padding: 8px;
    margin-top: 8px;
    text-align: center;
    button {
      border: 1px solid #007aff;
    }
    > button + button {
      margin-left: 16px;
      color: #007aff;
      background: #fff;
    }
  }
}
</style>