<template>
	<view>
		<cu-custom bgColor="bg-gradual-blueness" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">安全例会详情</block>
		</cu-custom>
		<scroll-view scroll-y>
			<view class="dy-card">
				<view class="dy-card-title">
					<text>{{pd.MEETING_TITLE}}</text>
				</view>
				<view class="dy-card-content">
					<view class="dy-card-content-item">
						<text>主持人：</text>
            <text>{{pd.HOST_PERSON}}</text>
					</view>
          <view class="dy-card-content-item">
            <text>记录人：</text>
            <text>{{pd.RECORDER}}</text>
          </view>
          <view class="dy-card-content-item">
            <text>会议开始时间：</text>
            <text>{{pd.MEETING_DATE_START}}</text>
          </view>
          <view class="dy-card-content-item">
            <text>会议结束时间：</text>
            <text>{{pd.MEETING_DATE_END}}</text>
          </view>
          <view class="dy-card-content-item">
            <text>会议类型：</text>
            <text>{{pd.MEETING_TYPE === '1' ? '安全生产例会' : pd.MEETING_TYPE === '2' ? '安全生产委员会会议' : ''}}</text>
          </view>
          <view class="dy-card-content-item">
            <text>会议内容：</text>
            <rich-text :nodes="pd.MEETING_CONTENT"></rich-text>
          </view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
    <uni-drawer ref="showHiddenWindow" mode="right" :mask-click="true">
      <scroll-view scroll-y="true" style="height: 100vh;">
      <!-- 实时照片部分 -->
      <view class="cu-form-group image-upload-container">
        <view class="title">实时照片：</view>
        <view class="icon-upload" v-if="!livePhotos.length" @click="chooseImage('LIVEPHOTOS')">
          <text class='cuIcon-cameraadd'></text>
        </view>
        <!-- 图片预览区 -->
        <view class="image-preview" v-for="(photo, index) in livePhotos" :key="index">
          <image :src="photo" mode="aspectFill" class="upload-image"></image>
          <!-- 删除按钮 -->
          <view class="delete-icon" @tap.stop="removeImage(index, 'LIVEPHOTOS')">
            <text class='cuIcon-close'></text>
          </view>
        </view>
      </view>

      <!-- 签字照片部分 -->
      <view class="cu-form-group image-upload-container">
        <view class="title">签字照片：</view>
        <view class="icon-upload" v-if="!signaturePicture" @click="chooseImage('SIGNATUREPICTURE')">
          <text class='cuIcon-edit'></text>
        </view>
        <!-- 图片预览区 -->
        <view class="image-preview" v-if="signaturePicture">
          <image :src="signaturePicture" mode="aspectFill" class="upload-image"></image>
        </view>
          <!-- 删除按钮 -->
        <view>
          <view class="delete-icon" @tap.stop="removeImage('SIGNATUREPICTURE')">
            <text class='cuIcon-close'></text>
          </view>
        </view>
      </view>
      </scroll-view>
      <button @click="saveAndCloseDrawer">保存并关闭</button>
    </uni-drawer>
    <view class="cu-form-group">
      <view class="title">是否参会：</view>
      <button class="cu-btn round bg-blue" @click="addHidden">参会</button>
    </view>

    <yk-authpup ref="authpup" type="top" @changeAuth="$noMultipleClicks(editLocation)" :permissionID="permissionID"></yk-authpup>
	</view>
</template>

<script>
	import {
		basePath,loginUser
	} from '@/common/tool.js';
  import ykAuthpup from "@/components/yk-authpup/yk-authpup"
	export default {
    components: {
      ykAuthpup
    },
		data() {
			return {
        permissionID:'',
        SAFETY_MEETING_ID : '',
				varList:[],
				pd:[],
				noClick:true,
				ACCIDENTS_NAME:"",
        MEETING_TITLE:"",
        MEETING_TYPE:"",
        MEETING_ADDRESS:"",
        HOST_PERSON:"",
        MEETING_CONTENT:"",
        RECORDER:"",
        MEETING_DATE_START:"",
        MEETING_DATE_END:"",
        livePhotos: [],
        signaturePicture: [],
			}
		},
		onLoad(e){
			var _this = this;
			_this.SAFETY_MEETING_ID=e.id;
			_this.getData();

		},
		methods: {
			//跳转事件
			goToEdit(e) {
				uni.navigateTo({
					url: '/pages/application/basic-info-manage/basic-information/basic-information-edit'
				});
			},
			getData() {
				var _this = this;
				uni.showLoading({
					title: '请稍候'
				})
				uni.request({
					url: basePath + '/app/safetymeeting/goEdit',
					method: 'POST',
					dataType: 'json',
					header:{
							'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
            SAFETY_MEETING_ID: _this.SAFETY_MEETING_ID,
            CORPINFO_ID:loginUser.CORPINFO_ID,
            USER_ID:loginUser.USER_ID,
					},
					success: (res) => {
						if (res.data != null) {
							uni.hideLoading();
              _this.pd = res.data.pd;
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000
							});
						}
					}
				});
			},

      addHidden() {
        if (this.$refs.showHiddenWindow) {
          this.$refs.showHiddenWindow.open();
        }
        this.creatorList = [{
          NAME: loginUser.NAME,
          USER_ID: loginUser.USER_ID
        }]
        this.$refs['showHiddenWindow'].open()
        this.showHiddenWindow = true
        this.hiddenIsEdit = true
      },
      chooseImage(type) {
        uni.chooseImage({
          count: 1, // 限制只能选择一张图片
          success: (res) => {
            if (type === 'LIVEPHOTOS' && res.tempFilePaths.length) {
              this.livePhotos = res.tempFilePaths[0]; // 如果是单图，确保赋值字符串
            } else if (type === 'SIGNATUREPICTURE' && res.tempFilePaths.length) {
              this.signaturePicture = res.tempFilePaths[0]; // 确保赋值为字符串路径
            }
          },
        });
      },
      removeImage(type) {
        if (type === 'LIVEPHOTOS') {
          this.livePhotos = []; // 清空数组即可移除图片
        } else {
          this.signaturePicture = null; // 设为null即可移除图片
        }
      },

      openAuth(permissionID){
        this.permissionID = permissionID;
        setTimeout(()=>{
          this.$refs['authpup'].open();
        },200)
      },
		}
	}
</script>

<style>
.dy-card {
  background-color: #fff;
  border-radius: 10upx;
  margin: 30upx;
}

.dy-card-title {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  min-height: 80upx;
  line-height: 80upx;
  padding: 0 30upx;
}

.dy-card-content {
  padding: 0upx 30upx 30upx;
}

.dy-card-content-item {
  margin-top: 20upx;
}

.dy-card-content-item .title {
  display: flex;
  align-items: center;
}

/* 注释掉未使用的样式 */
/* .dy-card-content-item .title .l {
  width: 10upx;
  height: 30upx;
  border-radius: 20upx;
  background-color: #666;
  margin-right: 10upx;
} */

.dy-card-content-item .content,
.dy-card-content-item .name text {
  background-color: #F1F1F1;
  padding: 10upx 14upx;
  margin-top: 14upx;
  line-height: 1.6;
  display: inline-block; /* 如果需要显示为inline-block */
}

.image-upload-container {
  position: relative;
  padding: 10px;
}

.upload-image {
  width: 100%; /* 宽度占满容器，根据需要调整 */
  height: auto; /* 高度自适应 */
  border-radius: 4px; /* 轻微圆角 */
}

.image-preview {
  position: relative;
  width: 90px; /* 根据需要调整 */
  height: 90px; /* 根据需要调整 */
  margin-right: 10px; /* 与下一张图片的间距 */
  display: inline-block; /* 使图片并排显示 */
}

.delete-icon {
  position: absolute;
  top: -10px; /* 超出图片范围的一部分，根据需要调整 */
  right: -10px; /* 超出图片范围的一部分，根据需要调整 */
  background-color: #ff4949; /* 您的红色背景 */
  width: 20px; /* 删除图标的大小，根据实际情况调整 */
  height: 20px;
  border-radius: 10px; /* 圆形 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-icon text {
  color: white; /* 图标颜色为白色 */
  font-size: 14px; /* 图标大小，根据需要调整 */
}

</style>
