<template>
	<!--会议材料-->
	<div class="main-box">
		<div class="list-box">
			<dl>
				<span class="list-title">会议材料</span>
				<span class="list-text">
					<a v-for="(item, index) in meetingMaterialData" :key="index">{{item.meetingMaterialName}}</a>
				</span>
			</dl>
			<dl>
				<span class="list-title">会议纪要</span>
				<span class="list-text">
					<a v-for="(item, index) in meetingSummaryData" :key="index">{{item.meetingSummaryName}}</a>
				</span>
			</dl>
			<dl>
				<span class="list-title">上传图片</span>
				<span class="list-text">
					<div class="demo-upload-list" v-for="(item, index) in meetingPhotoData" :key="index">
						<img :src="item.meetingPhotoUrl" :alt="item.meetingPhotoName">
					</div>
				</span>
			</dl>
		</div>
		<div class="upload-box">
      <upload-pic></upload-pic>
			<!--<div class="demo-upload-list" v-for="(item, index) in uploadList" :key="index">-->
				<!--<img :src="item.resPath" :alt="item.fName">-->
				<!--<div class="remove-icon" @click="handleRemove(index)">-->
					<!--<Icon type="md-remove-circle" color="#FF0000" size="16" />-->
				<!--</div>-->
			<!--</div>-->
			<!--<Upload ref="upload" multiple type="drag" v-show="showUpload"-->
				<!--:show-upload-list="false" -->
				<!--:on-success="handleSuccess" -->
				<!--:format="['jpg','jpeg','png']" -->
				<!--:on-format-error="handleFormatError" -->
				<!--:before-upload="handleBeforeUpload" -->
				<!--action="/wuyecrm/rest/uploadFileInfo/uploadMutiFile" style="display: inline-block;width:68px;">-->
				<!--<div style="width: 68px;height:68px;line-height: 68px;">-->
					<!--<Icon type="ios-camera" size="21"></Icon>-->
				<!--</div>-->
			<!--</Upload>-->
		</div>

		<div class="submit-btn">
			<Button type="primary" long size="large" @click="uploadFile">提交</Button>
		</div>
	</div>
</template>

<script>
  import UploadPic from './../../components/UploadPicShen'
  import util from './../../util/util.js'
  import {formatDate} from './assets/js/date.js';
	import {
		getFileMessageByBookingMeetingDetailId,
		saveFileMessage,
    uploadFileByLocal
	} from './service/getData.js';
	export default {
		data() {
			return {
				maxLength: 5, //最多上传5张
				showUpload: true, //显示上传照片
				meetingId: '', //会议id
				meetingMaterialData: [], //会议材料
				meetingSummaryData: [], //会议纪要
				meetingPhotoData: [], //会议照片
				uploadList: [], //已上传的文件列表
        maxLength: 5,
        showUpload: true, //是否显示上传图片入口
        uploadList: [], //上传的图片列表,
        // 以下字段与图片上传有关
        pcPics: [],
        files: [],
        imgUrls:'',
        imgNames:''
			}
		},
    components:{
      UploadPic
    },
		created: function() {
			if(this.$route.query.meetingId && this.$route.query.meetingId!='') {
				this.meetingId = this.$route.query.meetingId;
			}
			this.getFilesData();
		},
		methods: {
			getFilesData() { //获取会议已关联的文件
				var self = this;
				self.$Spin.show();
				getFileMessageByBookingMeetingDetailId({bookingMeetingDetailId: self.meetingId}).then(res => {
					self.$Spin.hide();
					if(res.status == 200) {
						self.meetingMaterialData = res.data.meetingMaterialData; //会议材料
						self.meetingSummaryData = res.data.meetingSummaryData; //会议纪要
						self.meetingPhotoData = res.data.meetingPhotoData; //会议照片
						if(self.meetingPhotoData.length < self.maxLength) {
							self.showUpload = true;
						} else {
							self.showUpload = false;
						}
					}
				})
			},
      uploadFile() {
        var self = this;
        if (util.isWeixin()) {
          let localIds = localStorage.getItem('wpt_localIds');
          if (localIds!==null && localIds!=='') {
            self.localIds = JSON.parse(localStorage.getItem('wpt_localIds'));
            self.serverIds = JSON.parse(localStorage.getItem('wpt_serverIds'));
            if (self.serverIds.length > 0) {
              var pic = self.serverIds.shift();
              self.localIds.shift();
              var params = {
                mediaId: pic,
                projectType: localStorage.projectType
              }
              uploadFileByWx(params).then(res => {
                self.files.push(res.data);
                if (res.data) {
                  localStorage.setItem('wpt_localIds', JSON.stringify(self.localIds));
                  localStorage.setItem('wpt_serverIds', JSON.stringify(self.serverIds));
                  this.uploadFile();
                } else {
                  this.$vux.alert.show({
                    title: '提示',
                    content: '图片上传失败',
                  });
                }
              });
            } else {
              self.submit();
            }mapGetters
          } else {
            self.submit();
          }
        } else {
          let file_bases = localStorage.getItem('file_bases');
          if (!util.isStrEmpty(file_bases)) {
            this.pcPics = JSON.parse(file_bases);
            if (this.pcPics.length > 0) {
              var pic = this.pcPics.shift();
              EbeiPlugins.getFileBase64(pic.bigimageUrl, (b64) => {
                if (b64 == undefined) {
                  // self.hideLoading();
                  self.loading = false
                  self.$vux.alert.show({
                    title: '提示',
                    content: '图片异常',
                  })
                  return;
                }

                var typeArray = pic.bigimageUrl.split(".");
                var type = typeArray[typeArray.length - 1];
                var params = {
                  base64: b64,
                  type: type,
                }

                uploadFileByLocal(params).then(res => {
                  if (res){
                    if (res.status==200) {
                      var dataRes = {imgUrl:res.data,name:pic.bigimageName}
                      if (dataRes) {
                        self.files.push(dataRes);
                      }
                      localStorage.setItem('file_bases', JSON.stringify(self.pcPics));
                      // self.count++;
                      self.uploadFile();
                    } else {
                      self.loading = false
                      self.$vux.alert.show({
                        title: '提示',
                        content: '提交失败',
                      })
                    }
                  }else {
                    self.loading = false
                    self.$vux.alert.show({
                      title: '提示',
                      content: '提交失败',
                    })
                  }
                },(err)=>{
                  alert(err)
                });
              }, () => {
                // 获取失败
                // self.hideLoading();
                self.loading = false
                self.$vux.alert.show({
                  title: '提示',
                  content: '文件处理错误',
                })
              });
            } else {//提交
              self.submitFiles();
            }
          }else {
            self.submitFiles();
          }
        }
      },
			handleRemove(index) {
				this.showUpload = true;
				this.uploadList.splice(index, 1);
			},
			handleSuccess(res, file) {
				this.$Spin.hide();
				if(res.result == 1) {
					file.url = res.fileInfo.resPath;
					file.name = res.fileInfo.fName;
					this.uploadList.push(res.fileInfo);
					if(this.meetingPhotoData.length + this.uploadList.length < this.maxLength) {
						this.showUpload = true;
					} else {
						this.showUpload = false;
					}
				}
				else {
					this.$Message.warning(res.msg); //上传失败提示信息
				}
			},
			handleFormatError(file) {
				this.$Message.info("请上传图片");
			},
			handleBeforeUpload() {
				this.$Spin.show();
			},
			submitFiles() {
				var self = this;

        if(self.files.length > 0) {
          var picUrls = [], picNames = [];
          self.files.forEach(item => {
            picUrls.push(item.imgUrl);
            picNames.push(item.name);
          });
          self.imgNames = picNames.toString();
          self.imgUrls = picUrls.toString();
        }else {
          self.$Message.warning("请至少上传一张图片");
          return false;
        }


				var jsonData = {
					bookingMeetingDetailId: self.meetingId,
					fileurl:  self.imgUrls,
					filename: self.imgNames,
					type: '3', //类型(1:会议材料;2:会议纪要;3:照片)
				};
				// if(self.uploadList.length == 0) {
				// 	self.$Message.warning("请至少上传一张图片");
				// 	return false;
				// }
				// var fileurls = [], filenames = [];
				// self.uploadList.forEach(item => {
				// 	fileurls.push(item.resPath);
				// 	filenames.push(item.fName);
				// })
				// jsonData.fileurl = fileurls.toString();
				// jsonData.filename = filenames.toString();
				saveFileMessage(jsonData).then(res => {
					if(res.status == 200) {
						self.$Message.success("保存成功");
						self.$router.go(-1);
					}
					else {
						self.$Message.warning(res.message);
					}
				})
			},
		}
	}
</script>

<style scoped="scoped">
	.main-box {
		position: absolute;
		width: 100%;
		height: 100%;
		padding: 15px;
		font-size: 16px;
		background-color: #FFFFFF;
	}
	.list-box {
		margin-bottom: 10px;
	}

	.list-box dl {
		display: table-row;
	}

	.list-title {
		color: #808080;
		display: table-cell;
		width: 90px;
		padding: 3px 12px 15px 0;
		text-align: left;
		vertical-align: middle;
	}

	.list-text {
		color: #333333;
		display: table-cell;
		padding: 3px 0;
	}

	.demo-upload-list {
		display: inline-block;
		width: 70px;
		height: 70px;
		text-align: center;
		line-height: 70px;
		border: 1px solid transparent;
		border-radius: 4px;
		overflow: hidden;
		background: #fff;
		position: relative;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
		margin-right: 10px;
	}

	.demo-upload-list img {
		width: 100%;
		height: 100%;
	}
	.remove-icon {
		position: absolute;
		right: 0;
		top: 0;
		display: flex;
		background: #FFFFFF;
    border-radius: 100%;
	}

	.submit-btn {
		position: fixed;
		bottom: 0;
		width: calc(100% - 30px);
		padding: 30px 10px;
	}
</style>
