<template>
<div class="dealContainer" style="height:100%;overflow:auto;">
	<el-form ref="form" size="mini" :model="caseHandlingData" label-width="100px">
    <el-form-item label="处理人: ">
			<el-input v-model="caseHandlingData.createusername" :disabled="disableForm"></el-input>
		</el-form-item>
    <el-form-item label="处理时间: ">
			<el-input v-model="caseHandlingData.createtime" :disabled="disableForm"></el-input>
		</el-form-item>
    

		<el-form-item label="是否违法: ">
			<el-radio-group v-model="illegal">
				<el-radio :label="1" :disabled="disableForm">是</el-radio>
				<el-radio :label="0" :disabled="disableForm">否</el-radio>
        <el-radio :label="2" :disabled="disableForm">伪变化</el-radio>
			</el-radio-group>
		</el-form-item>


    <!-- 违法处理措施 -->
		<el-form-item label="处理措施: " v-if="caseHandlingData.measure_name == '查处' && illegal == 1">
			<el-select v-model="caseHandlingData.measure_name" placeholder="请选择处理措施" :disabled="disableForm">
				<el-option v-for="(item,index) in dealMeasuresList" :key="index" :label="item.name" :value="item.id" ></el-option>
			</el-select>
		</el-form-item>
    <el-form-item label="立案号: " v-if="caseHandlingData.measure_name == '查处' && illegal == 1">
			<el-input v-model="caseHandlingData.registr_number" :disabled="disableForm"></el-input>
		</el-form-item>
    <el-form-item label="查处结果: " v-if="caseHandlingData.measure_name == '查处' && illegal == 1">
			<el-input v-model="caseHandlingData.investigation_result" :disabled="disableForm"></el-input>
		</el-form-item>

		<el-form-item label="处理结果: ">
			<el-input v-model="caseHandlingData.result_name" :disabled="disableForm"></el-input>
		</el-form-item>

    <!-- 违法人信息 -->
    <el-form-item label="联系人: " >
			<el-input v-model="caseHandlingData.illegal_contact" :disabled="disableForm"></el-input>
		</el-form-item>
    <el-form-item label="联系人电话: " >
			<el-input v-model="caseHandlingData.illegal_contact_phone" :disabled="disableForm"></el-input>
		</el-form-item>
    <el-form-item label="现场情况: " >
			<el-input v-model="caseHandlingData.actual_scene_case" :disabled="disableForm"></el-input>
		</el-form-item>

    <el-form-item label="现场照片: ">
			<div v-for="(item,num) in imageList" :key="num" style="position: relative;">
				<el-image
				  v-if="imageList.length>0"
				  style="width: 200px;"
				  :src="item.s_filePath" 
				  :preview-src-list="prewImageList">
				</el-image>
			</div>
		</el-form-item>

    <el-form-item label="现场视频: ">
      <div v-if="videoloaded">
         <video-player  class="video-player vjs-custom-skin"
            v-for="(item,index) in playerOptions"
            :key = "index"
            ref="videoPlayer"
            :playsinline="true"
            :options="item"
        ></video-player>
      </div>
		</el-form-item> 

    <el-form-item label="处理后照片: " v-if="caseHandlingData.measure_name == '拟拆除' && illegal == 1">
			<div v-for="(item,num) in afterImageList" :key="num" style="position: relative;">
				<el-image
				  v-if="afterImageList.length>0"
				  style="width: 200px;"
				  :src="item.s_filePath" 
				  :preview-src-list="prewAfterImageList">
				</el-image>
			</div>
		</el-form-item>

		<!-- <el-form-item label="是否协办: ">
			<el-radio-group v-model="caseHandlingData.is_assist">
				<el-radio :label="1" :disabled="disableForm">是</el-radio>
				<el-radio :label="0"  :disabled="disableForm">否</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="协办人: " v-if="caseHandlingData.is_assist===1">
			<el-input v-model="caseHandlingData.assist_people" :disabled="disableForm"></el-input>
		</el-form-item>
		<el-form-item label="协办单位: " v-if="caseHandlingData.is_assist===1">
			<el-input v-model="caseHandlingData.assist_company" :disabled="disableForm"></el-input>
		</el-form-item> -->
	</el-form>
		<!-- <el-button type="primary" class="dialog-footer"  @click="submitCaseHandling" :disabled="disableForm">提交</el-button> -->
</div>	
</template>

<script>
import photo from "@/assets/photo.png";
import {getMethodCommon, postMethodCommon } from "@/api/common";
let BASE_IMAGE_URL = process.env.VUE_APP_BASE_IMG_URL;
export default {
  name: "HandleCase",
  props: ['caseid'],
  data() {
    return {
      // 视频播放
      playerOptions : [],
      videoloaded:false,
      illegal: null,
      photo: photo,
      caseHandlingData: {
        id:"",
        caseid: "",
        measure_name: "",
        result_name: "",
        is_assist: 0,
        assist_people: "",
        assist_company: '',
        illegal_contact:null,   //违法人
        illegal_contact_phone:null,//违法人联系方式
        actual_scene_case:null,//现场实际情况
      },
      pic_list: [],
      pic_show_list: [],
      video_list: [],
      video_show_list: [],
      handle_status_id: 0,
      tampField: "",
      showPicker: false,
      showSubmit: true,
      user_name: "",
      showLoading: true,
      dealMeasuresList: [],
      showCuoShi: false,
      disableForm: true,
      imageList:[],
      prewImageList:[],
      S_ImageList:[],
      afterImageList:[],
      prewAfterImageList:[],
      S_AfterImageList:[],
      videoList:[],
    }
  },
  watch:{
  
  },
  created() {
		// if (this.handleStatus === 2 || this.handleStatus === '2') {
		// 	this.disableForm = true
		// } else {
		// 	this.getUser();
		// }
		this.getCaseHandlingDetail()
		// this.getDealMeasuresList();
  },
  methods: {
    getUser() {
      if (this.showSubmit) {
        getMethodCommon('/Check/GetUserProfile').then(res => {
			this.caseHandlingData.createusername = res.result.name
        })
      }
    },
    // 上传图片
    handlePictureCardPreview(file) {
			console.log('aaa',file)
		},
    handleExceed(files, fileList) {
			this.$message.warning(`只能选择一个文件`);
		},
    UploadImage(param){
			let formData = new FormData()
			formData.append('files', param.file)
			let url = BASE_IMAGE_URL + '/api/Platform/Upload?project=DroneEnforcement'
			postMethodCommon(url,formData).then(res =>{
				// this.savePic(res.result[0].filePath)
        
        let item = {
          filePath : BASE_IMAGE_URL+"/"+res.result[0].filePath,
          id : null
        }
        this.imageList.push(item);

      
        this.submitCaseHandling();
			})
		},
    handleSuccess(response,file,fileList){

		},
    savePic(url){
			let src = 'DroneCaseinfo/AddDroneCasePic?caseid='+this.caseDetail.id+'&path='+url
			postMethodCommon(src).then(res =>{
				// this.loadDetailCaseInfo()
        console.log(res);
			})
		},
    //删除图片
    delImgClick(item,index){

    
			let src = 'DroneCaseinfo/DeleteDroneCasePic?id='+item.id
			this.$confirm('确定删除本张图片?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
         postMethodCommon("/DroneCaseinfo/DeleteDroneFilesByPath",[item.filePath.substring(item.filePath.indexOf("DroneEnforcement"))]).then((res)=>{
          if(res.code == 200){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.imageList = this.imageList.filter((item,idx)=>{
              return idx != index;
            })
          }
        })

				// postMethodCommon(src).then(res =>{
				// 	this.$message({
				// 		type: 'success',
				// 		message: '删除成功!'
				// 	});
				// 	this.loadDetailCaseInfo()
				// })
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
			});
		},
    deleteImgClick(index){
      let data = []
      data.push(this.pic_list[index])
      Dialog.confirm({
        title: '',
        message: '确认删除此图片？',
      })
        .then(() => {
          postMethodCommon("/DroneCaseinfo/DeleteDroneFilesByPath",data).then(res =>{
            this.pic_show_list.splice(index,1)
            this.pic_list.splice(index,1)
          })
        })
        .catch(() => {
          // on cancel
        });
      
    },
    deleteVideoClick(item,index){
      let data = []
      data.push(item)
      Dialog.confirm({
        title: '',
        message: '确认删除此视频？',
      })
        .then(() => {
          postMethodCommon("/DroneCaseinfo/DeleteDroneFilesByPath",data).then(res =>{
            this.video_list.splice(index,1)
          })
        })
        .catch(() => {
          // on cancel
        });
    },
    //加载处理措施列表
    getDealMeasuresList() {
		getMethodCommon('/Categorys/LoadList',{typeid: 'DEAL_MEASURES'}).then(res => {
			this.dealMeasuresList = res.result
      })
    },
    handlerImagePreview(li, index) {
      ImagePreview({
        images: li,
        startPosition: index,
        closeable: true,
      });
    },
    // 照片上传相关
    uploadImage(label) {
      this.tampField = label
    },
    receiveImageData(urls) {
      if (this.tampField === 'caseImage') {
        this.pic_list.push(urls)
        this.pic_show_list.push(this.BASE_IMAGE_URL + '/' + urls)
        this.tampField = ""
      }
    },
    // 视频上传相关
    uploadVideo(label) {
      this.tampField = label
    },
    receiveVideoData(urls) {
      if (this.tampField === 'caseVideo') {
        this.video_list.push(urls)
        this.tampField = ""
      }
    },
    getCaseHandlingDetail() {
      getMethodCommon('/DroneCaseinfo/GetDroneCaseDeal',{caseid: this.caseid}).then(res => {
        // 1e35a5d7-6d13-4205-8904-89bd12724638
        let data = res.result
        this.illegal = res.result.is_illegal;
        this.handleStatus = data.handle_status_id
        this.caseHandlingData = data.info
        this.caseHandlingData.caseid = this.caseid;
        // 已办结
        if (this.handleStatus === 2) {
          this.showSubmit = false
        }

        this.imageList = [];
        this.S_ImageList = [];
        this.prewImageList = [];
        if(res.result.pic_info_list.length>0){
          res.result.pic_info_list.forEach(item=>{
            item.s_filePath = BASE_IMAGE_URL + '/S_' +item.filePath
            item.filePath = BASE_IMAGE_URL + '/' +item.filePath
            this.prewImageList.push(item.filePath);
            this.imageList.push(item)
          })
        }

        this.afterImageList = [];
        this.S_AfterImageList = [];
        this.prewAfterImageList = [];
        if(res.result.after_pic_list.length>0){
          res.result.after_pic_list.forEach(item=>{
            item.s_filePath = BASE_IMAGE_URL + '/S_' +item.filePath
            item.filePath = BASE_IMAGE_URL + '/' +item.filePath
            this.prewAfterImageList.push(item.filePath);
            this.afterImageList.push(item)
          })
        }




        this.videoList = [];
        this.playerOptions = [];
        if(res.result.video_list.length>0){
          // res.result.video_list[1]=res.result.video_list[0]
          //  res.result.video_list[2]=res.result.video_list[0]
          //   res.result.video_list[3]=res.result.video_list[0]

          res.result.video_list.forEach((item,index)=>{
            let options = {
              playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度
              autoplay : false, //如果true,浏览器准备好时开始回放。
              muted : false, // 默认情况下将会消除任何音频。
              loop : false, // 视频一结束就重新开始。
              preload : 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
              language : 'zh-CN',
              aspectRatio : '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
              fluid : true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
              sources : [ 
                {
                  type : "video/mp4",
                  src : BASE_IMAGE_URL+"/"+item//url地址
                }
              ],
              poster : "", //你的封面地址
              // width: document.documentElement.clientWidth,
              notSupportedMessage : '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
              controlBar : {
                    timeDivider : true,//当前时间和持续时间的分隔符
                    durationDisplay : true,//显示持续时间
                    remainingTimeDisplay : false,//是否显示剩余时间功能
                    fullscreenToggle : true  //全屏按钮
              }
            }
            this.playerOptions.push(options);
            this.videoList.push(item)
            console.log("playOptions",this.playerOptions);
          })

          let _this = this;

            _this.videoloaded = true;
     
        }
   
        //验证图片
        if(data.pic_list){
          this.pic_list = data.pic_list.filter(r => {
            
            let ext = r.substr(r.lastIndexOf(".") + 1);
            if (['png', 'jpg', 'jpeg'].indexOf(ext.toLowerCase()) !== -1) {
              this.pic_show_list.push(this.BASE_IMAGE_URL + '/' + r)
              return r
            }
          })
        }
        
        //验证视频
        if(data.video_list){
          this.video_list = data.video_list.filter(r => {
            let ext = r.substr(r.lastIndexOf(".") + 1);
            if (['mp4', 'avi', 'wmv', 'mpeg'].indexOf(ext.toLowerCase()) !== -1) {
              return r
            }
          })
        }
        
        this.showLoading = false
      })
    },
    submitCaseHandling() {
      let images = [];
      this.imageList.forEach(item=>{
        let img = {
          filePath:item.filePath.substring(item.filePath.indexOf("DroneEnforcement")),
          angle:item.angle !=null ? item.angle : null,
          latitude:item.latitude !=null ? item.latitude : null,
          longitude:item.longitude !=null ? item.longitude : null,
        }
   
        images.push(img);
      })

      let params = {
        "info": {...this.caseHandlingData},
        "pic_info_list": images,
        "video_list": this.video_list,
        "handle_status_id": this.handle_status_id,
        "is_illegal": this.illegal
      }

  
      //  todo 新增处理问题解决
      postMethodCommon('/DroneCaseinfo/AddDroneCaseDeal',params).then(res => {
        if (res.code === 200) {
			this.$message({
				message: res.message,
				type: 'success'
			});
			// this.$emit('closeBack')
        } else {
			this.$message({
				message: res.message,
				type: 'warning'
			});
        }
      })
    }
  }
}
</script>

<style scoped>
.nav-forms {
  overflow: scroll;
  width: 96%;
  margin-left: 2%;
  border-radius: 10px;
}

.case-handling {
  padding-bottom: 50px;
}

.case-handling .form-item-label-opt {
  margin: 5px 16px;
  font-size: 14px;
}

.case-handling .form-item {
  margin-top: 10px;
  background-color: #ffffff;
}

.case-handling .form-item .form-item-row {
  border-bottom: 3px solid #fafafa;
}

.case-handling .form-item :nth-last-child(1) {
  border-bottom: none;
}

.case-handling .van-radio-opt {
  margin-bottom: 5px;
}

.case-handling .form-sub-opt {
  padding-bottom: 40px;
  margin-top: 30px;
}

.case-handling .form-sub-bun-opt {
  margin-top: 20px;
}

.case-handling .form-tag-row {
  display: flex;
  align-items: center;
  height: 44px;
  flex-wrap: wrap;
}
.deleteImg{
  position: absolute;
  right: -2px;
  top: -7px;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.deleteVideo{
  position: absolute;
  right: 1px;
  top: 1px;
  z-index: 9;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-theme .el-select{
	width: 100%;
}
.dialog-footer{
	position: absolute;
	bottom: 40px;
	right: 40px;
}
/deep/.el-image-viewer__wrapper{
  z-index: 3000000000!important;
}
/deep/ .el-dialog__wrapper{
  z-index:2 !important;
}
.dealContainer{
  overflow-y:scroll;
   padding-right:12px;
}

.dealContainer::-webkit-scrollbar {
  width: 10px;
  height: 10px;
 
}
.dealContainer::-webkit-scrollbar-track {
  border-radius: 10px;
}
.dealContainer::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(0,0,0,0.1);
}


.el-form-item{
    margin-bottom: 15px !important;
}
.el-form-item__error{
    padding-top: 0 !important;
}
::v-deep .el-form-item__label{
    font-size: 12px !important;
    font-weight: normal !important;
}
</style>
