<template>
	<!-- 一键求助 -->
	<view class="help">
		<view class="help-history">
			<image
				class="history-icon"
				mode="aspectFit"
				src="/subPages/static/images/common/history-unselected@2x.png"
				@click="helpRecord">
			</image>
		</view>
		<view class="help-content">
			<view class="message">
				<textarea
					:value="message"
					placeholder="请输入需要求助的内容"
					@input="changeMessage"
				/>
			</view>
			<view class="attachment">
				<file-upload ref="files" :maxCount=4></file-upload>
				<view class="audio">
					<image class="audio-icon" @click="recordAudio" :src="audioIconUrl"></image>
					<view v-if="isRecordAudio">正在录音...</view>
				</view>
			</view>
		</view>
		<view class="help-type">
			<view class="label">求助分类:</view>
      <uni-data-select
				class="select"
        v-model="helpType"
        :localdata="helpTypeOptions"
				:clear="false">
			</uni-data-select>
		</view>
		<view class="submit">
			<button class="submit-button" @tap="saveHelp">提交</button>
		</view>
	</view>
</template>

<script>
import { getDictionaryByName, uploadFile } from '@/api/system';
import { saveHelp } from '@/api/help';
const recorderManager = uni.getRecorderManager();

export default {
	data() {
		return {
			userInfo: {},
			doorId: '',
			message: '',
			fileList: [],
			imageStyles: { width: 64,height: 64 },
			isRecordAudio: false,
			audioIconUrl: '/subPages/static/images/common/voice-unselected@2x.png',
			helpType: '',
			helpTypeDic: {},
			helpTypeOptions: [],
			fileIds: []
		};
	},

  onLoad(options) {
		this.userInfo = uni.getStorageSync('userInfo') || {};
    const globalData = getApp().globalData;
		this.doorId = globalData.doorInfo.baseInfo.doorplateCode;
    this.getDictionaryByName();
		recorderManager.onStart(() => {
			console.log('recorder start');
		});
		recorderManager.onStop((res) => {
			console.log('recorder stop' + JSON.stringify(res));
			const fileInfo = {
				fileType: 'audio', 
				size: res.fileSize,
				duration: res.duration,
				tempFilePath: res.tempFilePath, 
				thumbTempFilePath: '/static/images/upload/type_audio.png'
			}
			uploadFile(fileInfo).then(res => {
				const fileName = '声音.aac';
				fileInfo.fileId = { type: fileInfo.fileType, name: fileName, fileId: res.data };
				this.$refs.files.fileList.push(fileInfo);
			})
		});
  },

	methods: {
		/* 跳转到求助记录页面 */
		helpRecord() {
			uni.navigateTo({
				url: `/subPages/pages/help/helpRecord`
			});
		},

		/* 查询求助类型字典 */
		getDictionaryByName () {
			getDictionaryByName({ dicName: 'callHelpType' }).then(res => {
				res.data.forEach(item => {
					this.helpTypeOptions.push({value: item.code, text: item.name});
					this.helpTypeDic[item.code] = item.name;
				})
			})
		},

		/* 求助内容改变  */
		changeMessage (event) {
			this.message = event.detail.value;
		},

		/* 录音功能 */
		recordAudio() {
			if (!this.isRecordAudio) {
				this.audioIconUrl = '/subPages/static/images/common/voice-selected@2x.png';
				this.isRecordAudio = true;
				recorderManager.start();
			} else {
				recorderManager.stop();
				this.audioIconUrl = '/subPages/static/images/common/voice-unselected@2x.png';
				this.isRecordAudio = false;
			}
		},

		/* 上传文件 */
		uploadFile () {
			const fileList = this.$refs.files.fileList;
			console.log('%c [ fileList ]-149', 'font-size:13px; background:pink; color:#bf2c9f;', fileList)
			if (fileList.length > 0) {
				fileList.forEach(item => {
					uploadFile(item).then(res => {
						const fileName = item.fileType === 'video' ? '视频.mp4' : '图片.png'
						console.log(res);
						this.fileIds.push({ type: item.fileType, name: fileName, fileId: res.data });
					});
				})
			}
		},

		/* 保存求助 */
		saveHelp() {
			const userInfo = uni.getStorageSync('userInfo');
			const fileList = this.$refs.files.fileList;
			fileList.forEach(item =>{
				this.fileIds.push(item.fileId)
			})
			const data = {
				msgType: this.helpType,
				msgTypeCn: this.helpTypeDic[this.helpType],
				context: this.message,
				placeId: this.doorId,
				fileId: this.fileIds.length===0 ? '' : JSON.stringify(this.fileIds),
				createUserId: this.userInfo.uuid,
				createUserName: userInfo.nickName,
				phone: userInfo.phoneNumber
			}
			saveHelp(data).then(res => {
				if (res.code === 0) {
					uni.showToast({title: '发起求助成功',icon: 'success'});
					this.message = '';
					this.fileList = [];
					this.helpType = '';
					this.$refs.files.fileList = [];
				}
			});
		},

	}
};
</script>

<style lang="scss" scoped>
.help {
  height: calc(100% - 50rpx);
  padding: 20rpx 30rpx;
  overflow: auto;
  .help-history {
    text-align: right;
    margin-bottom: 5rpx;
    .history-icon {
      width: 50rpx;
      height: 50rpx;
    }
  }
  .help-content {
    padding: 20rpx;
    border-radius: 10rpx;
    background: #ffffff;
    margin-bottom: 20rpx;
    // border: 1px solid red;
		textarea {
			height: 150px;
		}
    .attachment {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .files {
        width: 95%;
        .uploader-icon {
          width: 100rpx;
          height: 100rpx;
          padding: 20rpx;
          border-radius: 10rpx;
        }
				.upload-btn{
					width: 140rpx;
					padding: 10rpx 15rpx;
					border-radius: 10rpx;
					background-color: #1676fe;
					color: #ffffff
				}
      }
      .audio {
        text-align: center;
        font-size: 24rpx;
        color: #1676fe;
        .audio-icon {
          width: 60rpx;
          height: 60rpx;
          padding: 10rpx;
        }
      }
    }
  }
  .help-type {
    padding: 30rpx 20rpx;
    border-radius: 10rpx;
    background: #ffffff;
    margin-bottom: 50rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .label {
      width: 150rpx;
      text-align: left;
    }
    .select {
      width: calc(100% - 160rpx);
    }
  }
  .submit-button {
    width: 92%;
    background-color: #1676fe;
    border-radius: 15rpx;
    position: absolute;
    bottom: 40rpx;
  }
}
</style>
