<template>
  <view class="tutorial-show" v-if="viewModel">
	  <view class="tutorial-show_top">
	     <text class="tutorial-show_head">{{viewModel[0].title}}</text>
		 <text class="tutorial-show_intro">更新：{{viewModel[0].createTime}}</text>
	  </view>
	  <view style="height: 20rpx;background-color: #F5F5F5;"></view>
	  <view class="tutorial-show_svideo" v-if="viewModel[0].vedioUrl">
		  <video style="width: 658rpx;height: 450rpx;" object-fit="fill" :src="viewModel[0].vedioUrl"></video>
	  </view>
	  <view class="tutorial-show_box">
	     <text class="tutorial-show_box-trp" v-if="viewModel[0].intro">{{viewModel[0].intro}}</text>
		 <view class="tutorial-show_box_ul" v-if="viewModel[0].steps.length!=0">
			 <text class="tutorial-show_box_uhead">方法/步骤</text>
			 <view class="tutorial-show_box_li" v-for="(item,index) in viewModel[0].steps" :key="index">
				 <view class="tutorial-show_box_li-txt">
					 <text class="tutorial-show_box_li-txt-p1">{{index+1}}</text>
					 <text class="tutorial-show_box_li-txt-p2">/{{viewModel[0].steps.length}}</text>
				 </view>
				 <text class="tutorial-show_box_li-ttx">{{item.title}}</text>
				 <view class="tutorial-show_box_li-timg" v-for="(iItem,iIndex) in item.imageList" :key="iIndex">
					 <image :style="`width: ${screen.width-46}px;height: ${iItem.height}px;`" mode="aspectFit" :src="iItem.image"></image>
				 </view>
			 </view>
		 </view>
		 <view class="tutorial-show_box_ul" v-if="viewModel[0].notes.length!=0">
			 <text class="tutorial-show_box_uhead">注意事项</text>
			 <view class="tutorial-show_box_matter" v-for="(nItem,nIndex) in viewModel[0].notes" :key="nIndex">
				 <text class="tutorial-show_box_matter-m2">{{nIndex+1}}、{{nItem}}</text>
			 </view>
		 </view>
		 <view class="tutorial-show_box_ul" v-if="viewModel[0].relaitons.length">
			 <text class="tutorial-show_box_uhead">相关教程</text>
			 <view class="tutorial-show_box_matter" v-for="(rItem,rIndex) in viewModel[0].relaitons" :key="rIndex">
				 <text class="tutorial-show_box_matter-m2">{{rItem}}</text>
			 </view>
		 </view>
	  </view>
  </view>
</template>
<script>
  import ala from '@/service/ala'
  import mixin from '@/service/mixins'
  export default {
	  mixins: [mixin],
	  props:{
		  widget:{}
	  },
    data () {
      return {
        viewModel: null,
        documentHeight: 0,
        value: '',
        doceWidth: 0,
		async: false,
		partWidth: 0
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        var para = {
          id: ala.getId(this.widget.route)
        }
        var repones = await ala.diyHttpGet('Api/Tutorial/QueryList', para)
        this.viewModel = repones
        var relaArray = []
        for (var i = 0; i < this.viewModel[0].relaitons.length; i++) {
          if (this.viewModel[0].relaitons[i] !== '') {
            relaArray.push(this.viewModel[0].relaitons[i])
          }
        }
        this.viewModel[0].relaitons = relaArray
		this.imgHandle()
		this.async = true
      },
	  async imgHandle(){
		  this.partWidth = this.screen.width
		  var sLength = this.viewModel[0].steps.length
		  for(var j=0;j<sLength;j++){
		  	var imageList = []
		  	if(this.viewModel[0].steps[j].images.length!==0){
		  		var imageLength = this.viewModel[0].steps[j].images.length
		  		for(var k=0;k<imageLength;k++){
		  			var imgUrl = 'https://diyapi.5ug.com'+this.viewModel[0].steps[j].images[k]
		  			var sHeight = await this.partHeight(imgUrl)
		  			imageList.push({image:imgUrl,height:sHeight})
		  			this.$set(this.viewModel[0].steps[j],'imageList',imageList)
		  		}
		  	}
		  }
	  },
      handleSelect (item) {
        this.value = item.title
        this.$router.push('/admin/tutorial/show?id=' + item.id)
      },
	  async partHeight(val) {
	  	var imgInfo = await ala.imageInfo(val)
	  	var ratio = imgInfo.height / imgInfo.width
	  	var height = Math.round(this.partWidth * ratio)
	  	return height
	  }
    }
  }
</script>
<style lang="scss">
  @import "./var.scss";
</style>