<template>
<div class="dealContainer" style="height:600px;overflow-y:scroll;">
	<el-form ref="form" :model="caseHandlingData" label-width="100px">
		<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-group>
		</el-form-item>
    <!-- 违法人信息 -->
    <el-form-item label="违法联系人: " v-if="illegal == 1">
			<el-input v-model="caseHandlingData.illegal_contact" :disabled="disableForm"></el-input>
		</el-form-item>
    <el-form-item label="违法人电话: " v-if="illegal == 1">
			<el-input v-model="caseHandlingData.illegal_contact_phone" :disabled="disableForm"></el-input>
		</el-form-item>
    <el-form-item label="现场情况: " v-if="illegal == 1">
			<el-input v-model="caseHandlingData.actual_scene_case" :disabled="disableForm"></el-input>
		</el-form-item>

		<el-form-item label="处理人: ">
			<el-input v-model="caseHandlingData.createusername" :disabled="disableForm"></el-input>
		</el-form-item>
		<el-form-item label="处理措施: ">
			<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="处理结果: ">
			<el-input v-model="caseHandlingData.result_name" :disabled="disableForm"></el-input>
		</el-form-item>

<!-- 实际现场情况照片、视频 -->

		<!-- <el-form-item label="现场照片: ">
			<div v-for="(item,index) in pic_show_list" :key="index"
			     style="float:left;position:relative;margin:10px 0">
			     <div class="deleteImg" @click="deleteImgClick(index)">
			       <van-icon name="cross" color="#ff0000" size="12" />
			     </div>
			    <img
			      @click="handlerImagePreview(pic_show_list,index)"
			      :src="item"
			      width="80px"
			      height="80px" style="margin-right:5px;"/>
			</div>
			<div
			    v-if="!disableForm"
			    @click="uploadImage('caseImage')"
			    style="width: 80px;height: 80px;display: flex;align-items: center;justify-content: center;background-color: #f5f5f5">
			  <img :src="photo" style="width: 30px" height="30px" alt="">
			</div>
		</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: 400px; height: 200px"
				  :src="item.s_filePath" 
				  :preview-src-list="prewImageList">
				</el-image>
				<!-- <div class="delImg" @click="delImgClick(item,num)">
					<i class="el-icon-close"></i>
				</div> -->
			</div>

			<!-- <el-upload
				ref="upload"
				action="string"
				accept=".png,.jpg,.docx,.xlsx,.xls"
				list-type="picture-card"
				:show-file-list="false"
				:on-preview="handlePictureCardPreview"
				:on-success="handleSuccess"
				:on-exceed="handleExceed"
				:http-request="UploadImage">
			  <i class="el-icon-plus"></i>
			</el-upload> -->

		</el-form-item>

    <el-form-item label="现场视频: ">
			<div style="margin-top: 10px;width: 300px;height: 150px;" v-for="(item,index) in videoList" :key="index">
				<video width="100%" height="100%" controls>
					<source :src="item.filePath" type="video/mp4">
					您的浏览器不支持Video标签。
				</video>
			</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 {
      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:[],
      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.videoList = [];
        if(res.result.video_list.length>0){
          res.result.video_list.forEach(item=>{
            item.filePath = BASE_IMAGE_URL + '/' +item.filePath
            this.videoList.push(item)
          })
        }
   
        //验证图片
        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::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.dealContainer::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
  background: #ccc;
}
.dealContainer::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
  border-radius: 10px;
  background: #ededed;
}
</style>
