<template>
	<zj-page-layout bgColor="#ffffff">
		<Loading
			:type="3"
			:loadStatus="loadStatus"
			:showText="errorText"
		/>

		<view class="all-container" v-if="detail">
			<view class="title">{{detail.title}}</view>
			<view class="time">发布时间：{{detail.createTime}}</view>

      <view class="files" v-if="detail.file && detail.file.length > 0">
        <view class="tit">附件：</view>
        <view class="list">
          <view class="item" v-for="(item, index) in detail.file" :key="index" @tap="checkFileType(item.url) == 'img' ? openImg(item.url) : openFile(item.url)">
            <image v-if="checkFileType(item.url) == 'img'" :src="item.url" mode="aspectFill" class="img"></image>
            <image v-if="checkFileType(item.url) == 'word'" src="@/packageMine/static/word.png" mode="aspectFill" class="file"></image>
            <image v-if="checkFileType(item.url) == 'excel'" src="@/packageMine/static/excel.png" mode="aspectFill" class="file"></image>
            <image v-if="checkFileType(item.url) == 'ppt'" src="@/packageMine/static/ppt.png" mode="aspectFill" class="file"></image>
            <image v-if="checkFileType(item.url) == 'pdf'" src="@/packageMine/static/pdf.png" mode="aspectFill" class="file"></image>

            <view class="text">查看</view>
          </view>
        </view>
      </view>

			<view class="content">
				<u-parse :content="detail.content"></u-parse>
			</view>
		</view>
	</zj-page-layout>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				detail: null,
				loadStatus: 1,
				errorText: '',
			}
		},

		onLoad({id}) {
			this.id = id;
			this.getDetail();
		},

		methods: {
			getDetail() {
				this.$api.get('/notice/detailNotice', {
					id: this.id,
				}).then(res => {
					if(res.data) {
						this.detail = res.data;
						this.loadStatus = 0;
					}else {
						this.errorText = '内容为空';
						this.loadStatus = 2;
					}
          this.read();
				}).catch(res => {
					this.errorText = res.message;
					this.loadStatus = 2;
				})
			},

      read() {
      	this.$api.post('/notice/mark/read', {
      		ids: this.id,
      	})
      },

      checkFileType(url) {
        if (!url) return '';
        if (url.indexOf('?') >= 0) {
          url = url.slice(0, url.indexOf('?'));
        }
        const fileSuffix = url.substring(url.lastIndexOf(".") + 1);
        const wordList = ['doc', 'docx', 'dot', 'wps', 'wpt'];
        const excelList = ['xls', 'xlsx', 'xlt', 'et', 'ett'];
        const pptList = ['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'];
        const pdfList = ['pdf'];
        const imgList = ['jpg', 'jpeg', 'png'];
        const videoList = ['mp4'];
        if (wordList.indexOf(fileSuffix) >= 0) {
          return 'word';
        } else if (excelList.indexOf(fileSuffix) >= 0) {
          return 'excel';
        } else if (pptList.indexOf(fileSuffix) >= 0) {
          return 'ppt';
        } else if (pdfList.indexOf(fileSuffix) >= 0) {
          return 'pdf';
        } else if (imgList.indexOf(fileSuffix) >= 0) {
          return 'img';
        } else if (videoList.indexOf(fileSuffix) >= 0) {
          return 'video';
        } else {
          return '';
        }
      },
      
      openImg(url) {
        uni.previewImage({
        	current: url,
        	urls: [url],
        });
      },
      
      openFile(url) {
        uni.downloadFile({
          url: url,
          success: res => {
            console.log(res, '打开文件成功')
            if (res.statusCode === 200) {
              uni.openDocument({
                filePath: res.tempFilePath,
                success: res => {
                  console.log(res, '打开文件成功')
                },
                fail: (err) => {
                  uni.showToast({
                    title: '打开文件失败请重试',
                    icon: 'none'
                  })
                }
              })
            } else {
              uni.showToast({
                title: '打开文件失败请重试',
                icon: 'none'
              })
            }
            uni.hideLoading()
          },
          fail: (err) => {
            uni.hideLoading()
            uni.showToast({
              title: '加载失败请重试',
              icon: "none"
            })
          },
        })
      },
		}
	}
</script>

<style lang="scss" scoped>
	.all-container {
		padding: 0 30rpx;
		.title {
			font-size: 48rpx;
			line-height: 64rpx;
		}
		.time {
			color: $sec-font;
      font-size: 28rpx;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
			border-bottom: 1px solid #eaeaea;
		}
    .files {
			border-bottom: 1px solid #eaeaea;
      padding: 20rpx 0;
      .tit {
        color: $sec-font;
        font-size: 28rpx;
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 30rpx;
          margin-top: 20rpx;
          image {
            box-sizing: border-box;
            width: 120rpx;
            height: 120rpx;
          }
          .file {
            padding: 20rpx;
          }
          .text {
            color: $theme-color;
            font-size: 28rpx;
            margin-top: 10rpx;
          }
        }
      }
    }
    .content {
      padding-top: 30rpx;
    }
	}
</style>
