<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><span style="color: red">*</span>{{$t('异常类型')}}</text>
          <uni-data-checkbox v-model="form.manualExceptionType" multiple :localdata="manualExceptionTypeList" />
        </view>
        <view>
          <text>{{$t('详细信息')}}</text>
          <uni-easyinput type="textarea" autoHeight v-model="form.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 exceptionUrls" :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="delExceptionUrl(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">
                    <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="$emit('close')">{{$t('取消')}}</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import {updateImg} from "@/api/system";
import iconpath from '../../../static/images/close.png'
import {finishStock} from '../api'
import { alert } from "@/util/tools";
export default {
  name: "exception",
  props:{
    detail: Object,
    sumVolume: Number,
    sumWeight: Number,
  },
  data(){
    return {
      manualExceptionTypeList: [],
      // 附件
      exceptionUrls: [],
      form:{
        // 异常类型（选中的）
        manualExceptionType: [],
        // 异常详情信息
        descZh: '',
      },
      iconpath
    }
  },
  mounted() {
    this.$nextTick(this.$refs.popup.open);
    this.manualExceptionTypeList = this.getDictDatas(this.DICT_TYPE.STOCK_UP_EXCEPTION_TYPE).map(v => ({ ...v, text: v.label }))
  },
  methods:{
    chooseImages() {
      uni.chooseImage({
        count: 9, //默认是9张
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], //从相册选择
        success: res => {
          res.tempFilePaths.forEach((item, index) => {
            updateImg(item).then(data => {
              this.$set(this.exceptionUrls, this.exceptionUrls.length, { url: data.data })
            })
          })
        }
      })
    },
    previewImage(url) {
      //uniapp预览轮播图
      uni.previewImage({
        current: 0, //预览图片的下标
        urls: [url] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
      })
    },
    delExceptionUrl(index){
      this.exceptionUrls.splice(index,1)
    },
    saveException(){
      if (this.form.manualExceptionType.length === 0) {
        return uni.showToast({
          title: this.$t('请选择异常类型'),
          icon: "error"
        })
      }
      let data = {
        ...this.form,
        exceptionUrls: this.exceptionUrls?.map(v => v.url) || [],
        manualExceptionType: this.form.manualExceptionType.join(','), // 异常类型
        sumVolume: this.sumVolume,
        sumWeight: this.sumWeight,
        orderId: this.detail.orderId
      }
      finishStock(data).then(res => {
        return alert(this.$t("操作成功"), this.$t('提示'))
      }).then(() => {
        this.$emit('close')
      })
    }
  }
}
</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: 70px;
        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>
