<template>
  <view>
    <cu-custom bgColor="bg-gradual-blueness" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">隐患管理</block>
    </cu-custom>
    <view class="form">
      <view class="wui-form-list">
        <view class="de-drawer">
           <view class="cu-bar bg-white" v-if="hiddenForm.hiddenImgs">
             <view class="action">
               隐患照片
             </view>
           </view>
           <view class="cu-form-group" v-if="hiddenForm.hiddenImgs">
             <view class="grid col-4 grid-square flex-sub">
               <view class="bg-img" v-for="(item,index) in hiddenForm.hiddenImgs" :key="index" @tap="ViewImage"
                     :data-id="item.IMGFILES_ID" data-type="0" :data-url="hiddenForm.hiddenImgs[index].FILEPATH">
                 <image :src="baseImgPath + hiddenForm.hiddenImgs[index].FILEPATH" mode="aspectFill"></image>
               </view>
             </view>
           </view>
           <view class="cu-bar bg-white" v-if="hiddenForm.hiddenVideos">
             <view class="action">
               隐患视频
             </view>
           </view>
           <view class="cu-form-group" v-if="hiddenForm.hiddenVideos">
             <view class="grid col-4 grid-square flex-sub">
               <view class="bg-img" v-for="(item,vindex) in hiddenForm.hiddenVideos" :key="vindex"
                     style="background-color: #000">
                 <image src="/static/icon-apps/video.png" mode="aspectFill" @click="playVideo"
                        :data-src="hiddenForm.hiddenVideos[vindex].FILEPATH"></image>
               </view>
             </view>
           </view>
           <view class="cu-form-textarea">
             <view class="cu-form-title text-hui">隐患描述</view>
             <textarea maxlength="-1" disabled v-model="hiddenForm.HIDDENDESCR" placeholder="请对隐患进行详细描述(必填项)"></textarea>
           </view>
           <view class="cu-form-group">
             <view class="title">隐患部位</view>
             <view class="picker-tree-box">
               <view>{{ hiddenForm.HIDDENPART }}</view>
             </view>
           </view>
           <view class="cu-form-group">
             <view class="title">隐患级别</view>
             <view class="picker-tree-box">
               <view>{{ hiddenForm.HIDDENLEVEL_NAME }}</view>
             </view>
           </view>
           <view class="cu-form-group">
             <view class="title">隐患类型</view>
             <view class="picker-tree-box">
               <view>{{ hiddenForm.HIDDENTYPE_NAME }}</view>
             </view>
           </view>
           <view class="cu-form-group">
             <view class="title">隐患处置:</view>
             <view>限期整改</view>
           </view>
           <view class="cu-form-group">
             <view class="title">整改期限:</view>
             <view>{{ hiddenForm.RECTIFICATIONDEADLINE }}</view>
           </view>
           <view class="cu-form-group">
             <view class="title" style="height: auto;">
               <view>整改部门:</view>
             </view>
             <view class="picker-tree-box">
                 {{ hiddenForm.RECTIFICATIONDEPT_NAME }}
             </view>
           </view>
           <view class="cu-form-group">
             <view class="title">整改人:</view>
             <view>{{ hiddenForm.RECTIFICATIONOR_NAME }}</view>
           </view>
           <view class="cu-form-group" v-show="hiddenForm.STATE==='2'||hiddenForm.STATE==='4'">
             <view class="title">整改时间:</view>
             <view>{{ hiddenForm.RECTIFICATIONTIME }}</view>
           </view>
           <view class="cu-bar bg-white" v-show="hiddenForm.STATE==='2'||hiddenForm.STATE==='4'">
             <view class="action">
               整改照片
             </view>
           </view>
           <view class="cu-form-group" v-show="hiddenForm.STATE==='2'||hiddenForm.STATE==='4'">
             <view class="grid col-4 grid-square flex-sub">
               <view class="bg-img" v-for="(item,index) in hiddenForm.zgImgs" :key="index" @tap="ViewImage1"
                     :data-id="item.IMGFILES_ID" data-type="0" :data-url="hiddenForm.zgImgs[index].FILEPATH">
                 <image :src="baseImgPath + hiddenForm.zgImgs[index].FILEPATH" mode="aspectFill"></image>
               </view>
             </view>
           </view>
           <view class="cu-form-group" v-show="hiddenForm.STATE==='4'||TabCur==='1'">
             <view class="title">验收时间:</view>
             <ruiDatePicker v-if="TabCur == 1" :start="todayDate" fields="minute" :value="CHECKTIME || '请选择'"
                            @change="changeDiscoverDate"></ruiDatePicker>
             <view v-else>{{hiddenForm.CHECKTIME}}</view>
           </view>
           <view class="cu-bar bg-white" v-show="hiddenForm.STATE==='4'||TabCur==='1'">
             <view class="action">
               验收照片
             </view>
             <view class="action">
               {{hiddenForm.ysImgs.length}}/4
             </view>
           </view>
           <view class="cu-form-group" v-show="hiddenForm.STATE==='4'||TabCur==='1'">
             <view class="grid col-4 grid-square flex-sub">
               <view class="bg-img" v-for="(item,index) in hiddenForm.ysImgs" :key="index" @tap="ViewImage2" :data-id="item.IMGFILES_ID" data-type="0" :data-url="hiddenForm.ysImgs[index].FILEPATH">
                 <image v-if="item.IMGFILES_ID" :src="baseImgPath + hiddenForm.ysImgs[index].FILEPATH" mode="aspectFill"></image>
                 <image v-else :src="hiddenForm.ysImgs[index].FILEPATH" mode="aspectFill"></image>
                 <view class="cu-tag bg-red" @tap.stop="DelImg" data-type="0" :data-index="index" v-if="TabCur == 1">
                   <text class='cuIcon-close'></text>
                 </view>
               </view>
               <view class="solids" @tap="ChooseImage(0)" v-if="hiddenForm.ysImgs.length<4 && TabCur == 1">
                 <text class='cuIcon-cameraadd'></text>
               </view>
             </view>
           </view>
	   </view>
		  <view v-if="punishForm">
		    <view class="dy-list-item p20">
			  <view class="dy-title-flex align-center">
			  	<text>处罚信息</text>
			  </view>
		    </view>
			<view class="cu-form-group">
			  <view class="title">处罚原因:</view>
			  <view>{{ punishForm.REASON }}</view>
			</view>
			<view class="cu-form-group">
			  <view class="title">处罚金额:</view>
			  <view>{{ punishForm.AMOUT }}元</view>
			</view>
			<view class="cu-form-group">
			  <view class="title">被处罚单位:</view>
			  <view>{{ punishForm.UNITS_NAME }}</view>
			</view>
			<view class="cu-form-group">
			  <view class="title">被处罚人:</view>
			  <view>{{ punishForm.PERSON_NAME }}</view>
			</view>
			<view class="cu-form-group">
			  <view class="title">下发人:</view>
			  <view>{{ punishForm.CREATOR_NAME }}</view>
			</view>
			<view class="cu-form-group">
			  <view class="title">下发处罚时间:</view>
			  <view>{{ punishForm.DATE }}</view>
			</view>
			<view class="cu-bar bg-white" v-if="punishForm.HANDLE_IMG">
			  <view class="action">
			    罚款缴纳单
			  </view>
			</view>
			<view class="cu-form-group" v-if="punishForm.HANDLE_IMG">
			  <view class="grid col-4 grid-square flex-sub">
				  <view class="bg-img" @tap="viewImagePunish">
					  <image :src="baseImgPath + punishForm.HANDLE_IMG" mode="aspectFill"></image>
				  </view>
			  </view>
			</view>
			<view class="cu-form-group">
			  <view class="title">是否缴纳罚款:</view>
			  <view>{{punishForm.HANDLED === '1' ? '已缴' : '未缴' }}</view>
			</view>
			<view class="cu-form-group" v-if="punishForm.HANDLED === '1'">
				<view class="title">处罚处理人:</view>
				<view >{{punishForm.PERSON_NAME}}</view>
			</view>
			<view class="cu-form-group" v-if="punishForm.HANDLED === '1'">
				<view class="title" >处罚处理时间:</view>
				<view >{{punishForm.HANLDE_TIME}}</view>
			</view>
		  </view>
      </view>
      <view class="cu-bar btn-group" style="margin-top: 30upx;">
        <button v-if="TabCur == 1" class="cu-btn bg-blue margin-tb-sm lg" @click="$noMultipleClicks(goSubmit)">验收</button>
        <button v-if="TabCur == 2" class="cu-btn bg-green margin-tb-sm lg" @click="goback">返回</button>
      </view>
    </view>
    <view :class="['cu-modal',{'show':modalShow}]" v-if="modalShow">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">播放视频</view>
          <view class="action" @tap="modalShow = false">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <video :src="videoSrc" :autoplay="true"></video>
        <view class="cu-bar bg-white justify-end">
          <view class="action">
            <button class="cu-btn line-green text-green" @click="modalShow = false">关闭</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  basePath, corpinfoId, deptId, loginUser, formatDate, loginSession, baseImgPath, loginUserId
} from '@/common/tool.js';
import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue'

export default {
  components: {
    ruiDatePicker,
  },
  data() {
    return {
      baseImgPath,
      noClick:true,
      HIDDEN_ID: '',
      OUTSOURCED_ID: '',
      TabCur: '',
      hiddenForm: {
        ysImgs:[],
        CHECKTIME :formatDate(new Date(), 'yyyy-MM-dd hh:mm')
      },
	  punishForm:{},
      videoSrc:'',
      modalShow:false,
      todayDate:formatDate(new Date(), 'yyyy-MM-dd hh:mm'),
      CHECKTIME: formatDate(new Date(), 'yyyy-MM-dd hh:mm')
    }
  },
  onLoad(e) {
    this.HIDDEN_ID = e.HIDDEN_ID
    this.OUTSOURCED_ID = e.OUTSOURCED_ID
    this.TabCur = e.TabCur
    this.getData()
  },
  methods: {
    getData() {
      uni.showLoading({
        title: "加载中..."
      });//加载中动画
      uni.request({
        url: basePath + '/app/keyprojectcheck/findHidden',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          HIDDEN_ID: this.HIDDEN_ID,
          OUTSOURCED_ID: this.OUTSOURCED_ID,
        },
        success: (res) => {
          uni.hideLoading();//结束加载中动画
          if (res.data != null) {
            this.hiddenForm = res.data.pd
			if(res.data.pd.punishForm){
				this.punishForm = res.data.pd.punishForm
			}else{
				this.punishForm = null;
			}
          }
        }
      })
    },
    viewImagePunish(e) {
      let files = [];
      files.push(this.baseImgPath + this.punishForm.HANDLE_IMG)
      uni.previewImage({
        urls: files
      });
    },
    ViewImage(e) {
      let files = [];
      for (var i = 0; i < this.hiddenForm.hiddenImgs.length; i++) {
        files.push(this.baseImgPath + this.hiddenForm.hiddenImgs[i].FILEPATH)
      }
      uni.previewImage({
        urls: files,
        current: this.baseImgPath + e.currentTarget.dataset.url
      });
    },
    ViewImage1(e) {
      let files = [];
      for (var i = 0; i < this.hiddenForm.zgImgs.length; i++) {
        files.push(this.baseImgPath + this.hiddenForm.zgImgs[i].FILEPATH)
      }
      uni.previewImage({
        urls: files,
        current: this.baseImgPath + e.currentTarget.dataset.url
      });
    },
    playVideo(e) {
      this.videoSrc = this.baseImgPath + this.hiddenForm.hiddenVideos[0].FILEPATH
      this.modalShow = true
    },
    changeDiscoverDate(e) {
      this.CHECKTIME = e
      this.$forceUpdate();//强制刷新
    },
    ViewImage2(e) {
        let files =[];
        for(var i=0;i<this.hiddenForm.ysImgs.length;i++){
          if(e.currentTarget.dataset.id){
            files.push(this.baseImgPath + this.hiddenForm.ysImgs[i].FILEPATH)
          }else {
            files.push(this.hiddenForm.ysImgs[i].FILEPATH)
          }
        }
        uni.previewImage({
          urls: files,
          current: e.currentTarget.dataset.id ? this.baseImgPath + e.currentTarget.dataset.url : e.currentTarget.dataset.url
        });
    },
    DelImg(e) {
      var _this = this;
      let i=e.currentTarget.dataset.index
      uni.showModal({
        title: '秦港-双基双控',
        content: '确定要删除这张图片吗?',
        cancelColor:"#000000",
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            this.hiddenForm.ysImgs.splice(e.currentTarget.dataset.index, 1)
          }
        }
      })
    },
    ChooseImage(e) {
      var _this = this;
      var ss=4-this.hiddenForm.ysImgs.length;
      uni.chooseImage({
        count: ss, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
        sourceType: ['camera','album'], //从相册选择
        success: (res) => {
          for (let i = 0; i < res.tempFilePaths.length; i++) {
            if (e == 0) {
              let img = {};
              img.IMGFILES_ID = '';
              img.FILEPATH = res.tempFilePaths[i];
              this.hiddenForm.ysImgs.push(img)
            } else {
              let img = {};
              img.IMGFILES_ID = '';
              img.FILEPATH = res.tempFilePaths[i];
              this.imgList1.push(img)
            }
          }
        }
      });
    },
	fnImagePreview(list, index) {
	  const urls = [];
	  for (let i = 0; i < list.length; i++) {
	    urls.push(list[i].url);
	  }
	  const current = urls[index];
	  uni.previewImage({
	    urls,
	    current
	  })
	},
    changeRadioGroup(e){
      if(this.TabCur == 2) return
      this.hiddenForm.ISPUNISH = e.detail.value
    },
    goSubmit(){
      console.log(this.CHECKTIME)
      if(!this.CHECKTIME){
        uni.showToast({
          title: `请选择验收时间`,
          icon: 'none'
        })
        return
      }
      //if(this.hiddenForm.ysImgs.length === 0){
      //  uni.showToast({
      //    title: `请上传验收图片`,
      //    icon: 'none'
      //  })
      //  return
      //}
      // if(!this.hiddenForm.ISPUNISH){
      //   uni.showToast({
      //     title: `请选择是否进行罚款`,
      //     icon: 'none'
      //   })
      //   return
      // }
      var _this = this;
      _this.$set(this.hiddenForm,'CHECKTIME', this.CHECKTIME);
      uni.request({
        url: basePath + '/app/keyprojectcheck/check',
        method: 'POST',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          CORPINFO_ID: corpinfoId,
          ..._this.hiddenForm,
          CREATOR: loginUserId,
          OPERATOR: loginUserId,
          HIDDEN_ID: _this.HIDDEN_ID,
        },
        success: (res) => {
          if ("success" == res.data.result) {
            _this.uploadImg(this.hiddenForm.ysImgs)
          } else {
            uni.showToast({
              title: res.data.msaesge,
              duration: 2000
            });
          }
        }
      });
    },
    uploadImg(hiddenList){
      var _this = this;
      uni.showLoading({
        title: '上传中'
      })
      for (let i = 0; i < hiddenList.length; i++) {
        uni.uploadFile({
          url: basePath+'/app/imgfiles/add',
          filePath: hiddenList[i].FILEPATH,
          name: 'FFILE',
          formData: {
            'TYPE': 5,
            'FOREIGN_KEY': _this.HIDDEN_ID
          },
          success: (res) => {
            uni.hideLoading();
          },
          fail: (err) => {
            uni.hideLoading();
            uni.showModal({
              content: err.errMsg,
              showCancel: false
            });
          }
        })
      }
      _this.goback()
    },
    goback(){
      uni.navigateBack({delta: 1});
      uni.hideLoading();
    },
  }
}
</script>

<style scoped>
.dy-title-flex{
	font-weight: bold;
	font-size: 35upx;
}
</style>