<template>
  <!--上传图片-->
  <view class="wm-common-uploadimg">
    <form>
      <view class="uni-list">
        <view class="uni-list-cell">
          <view class="uni-list-cell-left">
            <view class="uni-label">图片来源</view>
          </view>
          <view class="uni-list-cell-right">
            <picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex" mode="selector">
              <view class="uni-input">{{ sourceType[sourceTypeIndex] }}</view>
            </picker>
          </view>
        </view>
        <view class="uni-list-cell">
          <view class="uni-list-cell-left">
            <view class="uni-label">图片质量</view>
          </view>
          <view class="uni-list-cell-right">
            <picker :range="sizeType" @change="sizeTypeChange" :value="sizeTypeIndex" mode="selector">
              <view class="uni-input">{{ sizeType[sizeTypeIndex] }}</view>
            </picker>
          </view>
        </view>
        <view class="uni-list-cell">
          <view class="uni-list-cell-left">
            <view class="uni-label">数量限制</view>
          </view>
          <view class="uni-list-cell-right">
            <picker :range="count" @change="countChange" mode="selector">
              <view class="uni-input">{{ count[countIndex] }}</view>
            </picker>
          </view>
        </view>
      </view>
      <cv-upload-image layout="more" maxlength="9" v-model="imageList" :src="imageList" />
      <view class="uni-list list-pd">
        <view class="uni-list-cell cell-pd">
          <view class="uni-uploader">
            <view class="uni-uploader-head">
              <view class="uni-uploader-title">上传图片</view>
              <view class="uni-uploader-info">({{ imageList.length }}/9)</view>
            </view>
            <view class="uni-uploader-body">
              <view class="uni-uploader__files">
                <template v-for="(image, index) in imageList" :key="index">
                  <view class="uni-uploader__file">
                    <image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage" />
                  </view>
                </template>
                <view class="uni-uploader__input-box">
                  <view class="uni-uploader__input" @tap="chooseImage"></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </form>
  </view>
</template>
<script>
// import permision from "@/utils/uni-geo/permission.js"
var sourceType = [['camera'], ['album'], ['camera', 'album']];
// var sizeType = [
// 	['compressed'],
// 	['original'],
// 	['compressed', 'original']
// ]
export default {
  data() {
    return {
      imageList: [],
      sourceTypeIndex: 2,
      sourceType: ['拍照', '相册', '拍照或相册'],
      // sizeTypeIndex: 2,
      sizeType: ['压缩', '原图', '压缩或原图'],
      countIndex: 8,
      count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    };
  },
  onUnload() {
    this.imageList = [];
    this.sourceTypeIndex = 2;
    this.sourceType = ['拍照', '相册', '拍照或相册'];
    // this.sizeTypeIndex = 2,
    // this.sizeType = ['压缩', '原图', '压缩或原图'],
    this.countIndex = 8;
  },
  methods: {
    sourceTypeChange: function (e) {
      this.sourceTypeIndex = parseInt(e.detail.value);
    },
    // sizeTypeChange: function(e) {
    // 	this.sizeTypeIndex = parseInt(e.detail.value)
    // },
    // countChange: function(e) {
    // 	this.countIndex = e.detail.value;
    // },
    chooseImage: async function () {
      // #ifdef APP-PLUS
      // TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
      if (this.sourceTypeIndex !== 2) {
        let status = await this.checkPermission();
        if (status !== 1) {
          return;
        }
      }
      // #endif

      if (this.imageList.length === 9) {
        let isContinue = await this.isFullImg();
        console.log('是否继续?', isContinue);
        if (!isContinue) {
          return;
        }
      }
      uni.chooseImage({
        sourceType: sourceType[this.sourceTypeIndex],
        // sizeType: sizeType[this.sizeTypeIndex],
        count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
        success: (res) => {
          this.imageList = this.imageList.concat(res.tempFilePaths);
        },
        fail: (err) => {
          // #ifdef APP-PLUS
          if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
            this.checkPermission(err.code);
          }
          // #endif
          // #ifdef MP
          uni.getSetting({
            success: (res) => {
              let authStatus = false;
              switch (this.sourceTypeIndex) {
                case 0:
                  authStatus = res.authSetting['scope.camera'];
                  break;
                case 1:
                  authStatus = res.authSetting['scope.album'];
                  break;
                case 2:
                  authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
                  break;
                default:
                  break;
              }
              if (!authStatus) {
                uni.showModal({
                  title: '授权失败',
                  content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
                  success: (res) => {
                    if (res.confirm) {
                      uni.openSetting();
                    }
                  }
                });
              }
            }
          });
          // #endif
        }
      });
    },
    isFullImg: function () {
      return new Promise((res) => {
        uni.showModal({
          content: '已经有9张图片了,是否清空现有图片？',
          success: (e) => {
            if (e.confirm) {
              this.imageList = [];
              res(true);
            } else {
              res(false);
            }
          },
          fail: () => {
            res(false);
          }
        });
      });
    },
    async checkPermission(code) {
      let type = code ? code - 1 : this.sourceTypeIndex;
      let status = permision.isIOS
        ? await permision.requestIOS(sourceType[type][0])
        : await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' : 'android.permission.READ_EXTERNAL_STORAGE');

      if (status === null || status === 1) {
        status = 1;
      } else {
        uni.showModal({
          content: '没有开启权限',
          confirmText: '设置',
          success: (res) => {
            if (res.confirm) {
              permision.gotoAppSetting();
            }
          }
        });
      }

      return status;
    }
  }
};
</script>
<style>
/* .uni-list {
  background-color: #ffffff;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.uni-list::before {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
  left: 0;
  height: 1px;
  content: '';
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  background-color: #c8c7cc;
}
.uni-list-cell {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.uni-list-cell-left {
  white-space: nowrap;
  font-size: 14px;
  padding: 0 15px;
}
.uni-label {
  width: 105px;
  word-wrap: break-word;
  word-break: break-all;
  text-indent: 10px;
}
.uni-list-cell-db,
.uni-list-cell-right {
  flex: 1;
} */
/* uni-picker {
  display: block;
  cursor: pointer;
}
.uni-picker-container {
  display: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  z-index: 999;
  font-size: 16px;
}
.uni-mask {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.uni-picker-container .uni-picker {
  position: fixed;
  left: 0;
  bottom: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 999;
  width: 100%;
  background-color: #efeff4;
  visibility: hidden;
  -webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
  transition: visibility 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, visibility 0.3s;
  transition: transform 0.3s, visibility 0.3s, -webkit-transform 0.3s;
}
.uni-picker-container .uni-picker-header {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  height: 45px;
  background-color: #fff;
}
.uni-picker-container .uni-picker-action {
  display: block;
  max-width: 50%;
  top: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 0 14px;
  font-size: 17px;
  line-height: 45px;
  overflow: hidden;
  cursor: pointer;
}
.uni-picker-container .uni-picker-action.uni-picker-action-cancel {
  float: left;
  color: #888;
}
.uni-picker-container .uni-picker-action.uni-picker-action-confirm {
  float: right;
  color: #007aff;
} */
.wm-common-uploadimg {
  margin-top: 8px;
}
.wm-common-uploadimg .cell-pd {
  padding: 22rpx 0;
}
.wm-common-uploadimg .list-pd {
  margin-top: 30rpx;
}
.wm-common-uploadimg .uni-list::before {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
  left: 0;
  height: 2rpx;
  content: '';
  transform: scaleY(0.5);
  background-color: #c8c7cc;
}
.wm-common-uploadimg .uni-uploader {
  flex: 1;
  flex-direction: column;
}
.wm-common-uploadimg .uni-uploader-head {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.wm-common-uploadimg .uni-uploader-title {
  font-size: 24rpx;
}
.wm-common-uploadimg .uni-uploader-info {
  font-size: 24rpx;
  color: #aaa;
}
.wm-common-uploadimg .uni-uploader-body {
  margin-top: 8px;
}
.wm-common-uploadimg .uni-uploader__files {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.wm-common-uploadimg .uni-uploader__file {
  margin: 10rpx 24rpx;
  width: 80rpx;
  height: 80rpx;
}
.wm-common-uploadimg .uni-uploader__img {
  display: block;
  width: 80rpx;
  height: 80rpx;
}
.wm-common-uploadimg .uni-uploader__input-box {
  position: relative;
  margin: 10rpx 24rpx;
  width: 80rpx;
  height: 80rpx;
  border: 1px solid #d9d9d9;
}
.wm-common-uploadimg .uni-uploader__input-box:before,
.uni-uploader__input-box:after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}
.wm-common-uploadimg .uni-uploader__input-box:before {
  width: 2rpx;
  height: 50rpx;
}
.wm-common-uploadimg .uni-uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.wm-common-uploadimg .uni-uploader__input-box:after {
  width: 50rpx;
  height: 2rpx;
}
</style>
