<template>
  <div v-if="value&&data.length>0" :class="`info info`" :style="`display: flex; position: fixed;${leftStyle}`" v-drag="`.info .ant-card-head`">
    <a-card :title="`案件信息【${ajh}】`" style="width: 350px; box-shadow: 0 0 5px #357ee5;">
      <a-icon slot="extra" type="close" style='cursor: pointer; color: #FFFFFF;' @click="$emit('input',false)"/>
      <a-tabs default-active-key="1" @change="" style="overflow: unset;user-select: auto;">
        <a-tab-pane key="1" tab="案件状态">
          <a-timeline style="">
            <template v-for="(item) in data">
              <a-timeline-item color="green" v-if="item.TYPE=='sb'">
                <div slot="dot"
                     style="font-size: 14px;background-color: #336699;border-radius: 50%;text-align: center;width: 30px;height: 30px;position: relative">
              <span
                style="font-weight: bold;color: #FFF;background-color: #46A4DA;border-radius: 50%;width:75%;height:75%;display: inline-block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: initial;">
                报
              </span>
                </div>
                <div class="content">
                  <div class="ant-popover-arrow" style=" left: -5px;top: 12px;color: #AFDCF8;"></div>
                  <div class="casedate"><span class="title">【上报日期】</span><span>{{item.RQ}}</span></div>
                  <div class="caseother"><span class="title">【巡查员】</span><span>{{item.REALNAME}}</span></div>
                  <div class="caseother"><span
                    class="title">【描述】</span><span>{{item.MS}}</span></div>
                  <div class="caseother" v-show="item.ZPNAME">
                    <span class="title">【媒体信息】</span>
                    <div class="images" v-viewer>
                      <img v-for="src in item.ZPNAME" :key="src" :src="src">
                    </div>
                  </div>
                  <div class="caseother" v-show="item.SPNAME">
                    <span class="title">【视频信息】</span>
                    <div >
                      <img src="@/assets/caseVideoNew.png" @click="handleVideo(item.SPNAME)">
                    </div>
                  </div>
                </div>
              </a-timeline-item>
              <a-timeline-item color="green" v-else-if="item.TYPE=='zp'">
                <div slot="dot"
                     style="font-size: 14px;background-color: #336699;border-radius: 50%;text-align: center;width: 30px;height: 30px;position: relative">
              <span
                style="font-weight: bold;color: #FFF;background-color: #46A4DA;border-radius: 50%;width:75%;height:75%;display: inline-block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: initial;">
                派
              </span>
                </div>
                <div class="content">
                  <div class="ant-popover-arrow" style=" left: -5px;top: 12px;color: #AFDCF8;"></div>
                  <div class="casedate"><span class="title">【派发日期】</span><span>{{item.RQ}}</span></div>
                  <div class="caseother"><span class="title">【处理员】</span><span>{{item.REALNAME}}</span></div>
                  <div class="caseother"><span
                    class="title">【描述】</span><span>{{item.MS}}</span></div>
                  <div class="caseother" v-show="item.ZPNAME">
                    <span class="title">【媒体信息】</span>
                    <div class="images" v-viewer>
                      <img v-for="src in item.ZPNAME" :key="src" :src="src">
                    </div>
                  </div>
                  <div class="caseother" v-show="item.SPNAME">
                    <span class="title">【视频信息】</span>
                    <div >
                      <img src="@/assets/caseVideoNew.png" @click="handleVideo(item.SPNAME)">
                    </div>
                  </div>
                </div>
              </a-timeline-item>
              <a-timeline-item color="green" v-else-if="item.TYPE=='db'">
                <div slot="dot"
                     style="font-size: 14px;background-color: #336699;border-radius: 50%;text-align: center;width: 30px;height: 30px;position: relative">
              <span
                style="font-weight: bold;color: #FFF;background-color: #46A4DA;border-radius: 50%;width:75%;height:75%;display: inline-block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: initial;">
                督
              </span>
                </div>
                <div class="content">
                  <div class="ant-popover-arrow" style=" left: -5px;top: 12px;color: #AFDCF8;"></div>
                  <div class="casedate"><span class="title">【督办日期】</span><span>{{item.RQ}}</span></div>
                  <div class="caseother"><span class="title">【督办员】</span><span>{{item.REALNAME}}</span></div>
                  <div class="caseother"><span
                    class="title">【描述】</span><span>{{item.MS}}</span></div>
                  <div class="caseother" v-show="item.ZPNAME">
                    <span class="title">【媒体信息】</span>
                    <div class="images" v-viewer>
                      <img v-for="src in item.ZPNAME" :key="src" :src="src">
                    </div>
                  </div>
                  <div class="caseother" v-show="item.SPNAME">
                    <span class="title">【视频信息】</span>
                    <div >
                      <img src="@/assets/caseVideoNew.png" @click="handleVideo(item.SPNAME)">
                    </div>
                  </div>
                </div>
              </a-timeline-item>
              <a-timeline-item color="green" v-else-if="item.TYPE=='cl'">
                <div slot="dot"
                     style="font-size: 14px;background-color: #336699;border-radius: 50%;text-align: center;width: 30px;height: 30px;position: relative">
              <span
                style="font-weight: bold;color: #FFF;background-color: #46A4DA;border-radius: 50%;width:75%;height:75%;display: inline-block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: initial;">
                处
              </span>
                </div>
                <div class="content">
                  <div class="ant-popover-arrow" style=" left: -5px;top: 12px;color: #AFDCF8;"></div>
                  <div class="casedate"><span class="title">【处理日期】</span><span>{{item.RQ}}</span></div>
                  <div class="caseother"><span class="title">【处理员】</span><span>{{item.REALNAME}}</span></div>
                  <div class="caseother"><span
                    class="title">【描述】</span><span>{{item.MS}}</span></div>
                  <div class="caseother" v-show="item.ZPNAME">
                    <span class="title">【媒体信息】</span>
                    <div class="images" v-viewer>
                      <img v-for="src in item.ZPNAME" :key="src" :src="src">
                    </div>
                  </div>
                  <div class="caseother" v-show="item.SPNAME">
                    <span class="title">【视频信息】</span>
                    <div >
                      <img src="@/assets/caseVideoNew.png" @click="handleVideo(item.SPNAME)">
                    </div>
                  </div>
                </div>
              </a-timeline-item>
              <a-timeline-item color="green" v-else-if="item.TYPE=='ff'">
                <div slot="dot"
                     style="font-size: 14px;background-color: #336699;border-radius: 50%;text-align: center;width: 30px;height: 30px;position: relative">
              <span
                style="font-weight: bold;color: #FFF;background-color: #46A4DA;border-radius: 50%;width:75%;height:75%;display: inline-block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: initial;">
                飞
              </span>
                </div>
                <div class="content">
                  <div class="ant-popover-arrow" style=" left: -5px;top: 12px;color: #AFDCF8;"></div>
                  <div class="casedate"><span class="title">【复飞日期】</span><span>{{item.RQ}}</span></div>
                  <div class="caseother"><span class="title">【复飞员】</span><span>{{item.REALNAME}}</span></div>
                  <div class="caseother"><span
                    class="title">【描述】</span><span>{{item.MS}}</span></div>
                  <div class="caseother" v-show="item.ZPNAME">
                    <span class="title">【媒体信息】</span>
                    <div class="images" v-viewer>
                      <img v-for="src in item.ZPNAME" :key="src" :src="src">
                    </div>
                  </div>
                  <div class="caseother" v-show="item.SPNAME">
                    <span class="title">【视频信息】</span>
                    <div >
                      <img src="@/assets/caseVideoNew.png" @click="handleVideo(item.SPNAME)">
                    </div>
                  </div>
                </div>
              </a-timeline-item>
              <a-timeline-item color="green" v-else-if="item.TYPE=='sh'">
                <div slot="dot"
                     style="font-size: 14px;background-color: #336699;border-radius: 50%;text-align: center;width: 30px;height: 30px;position: relative">
              <span
                style="font-weight: bold;color: #FFF;background-color: #46A4DA;border-radius: 50%;width:75%;height:75%;display: inline-block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: initial;">
                审
              </span>
                </div>
                <div class="content">
                  <div class="ant-popover-arrow" style=" left: -5px;top: 12px;color: #AFDCF8;"></div>
                  <div class="casedate"><span class="title">【审核日期】</span><span>{{item.RQ}}</span></div>
                  <div class="caseother"><span class="title">【审核员】</span><span>{{item.REALNAME}}</span></div>
                  <div class="caseother"><span
                    class="title">【描述】</span><span>{{item.MS}}</span></div>
                  <div class="caseother" v-show="item.ZPNAME">
                    <span class="title">【媒体信息】</span>
                    <div class="images" v-viewer>
                      <img v-for="src in item.ZPNAME" :key="src" :src="src">
                    </div>
                  </div>
                  <div class="caseother" v-show="item.SPNAME">
                    <span class="title">【视频信息】</span>
                    <div >
                      <img src="@/assets/caseVideoNew.png" @click="handleVideo(item.SPNAME)">
                    </div>
                  </div>
                </div>
              </a-timeline-item>
            </template>
            <a-timeline-item color="green" v-if="ajzt.includes('结案')">
              <a-icon slot="dot" type="check-circle" style="font-size: 16px;"/>
              <div class="content">
                <div class="ant-popover-arrow" style=" left: -5px;top: 12px;color: #AFDCF8;"></div>
                <div class="caseother"><span class="title">【案件已结案】</span></div></div>
            </a-timeline-item>
            <a-timeline-item color="red" v-else>
              <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>
              <div class="content">
                <div class="ant-popover-arrow" style=" left: -5px;top: 12px;color: #AFDCF8;"></div>
                <div class="caseother"><span class="title">【等待】</span>
                  <span v-if="ajzt.includes('未派发')">派发</span>
                  <span v-else-if="ajzt.includes('审核待处理')">重新处理</span>
                  <span v-else-if="ajzt.includes('待处理')">处理</span>
                  <span v-else-if="ajzt.includes('审核待复飞')">重新复飞</span>
                  <span v-else-if="ajzt.includes('待复飞')">复飞</span>
                  <span v-else-if="ajzt.includes('待审核')">审核</span>
                </div></div>
            </a-timeline-item>
          </a-timeline>
        </a-tab-pane>
        <a-tab-pane key="2" tab="相关操作" v-if="userRole">
          <div v-if="ajzt.includes('未派发')">
            <label for="" style="margin: 8px 0;color: #66cc00;display: block">
              处理人员：
              <a-select v-model="userName" style="width: 60%" placeholder="请选择处理人员">
                <a-select-option v-for="(item,index) in userNames" :key="item.userid" :value="item.userid">
                  {{item.realname}}
                </a-select-option>
              </a-select>
            </label>
            <a-button type="primary" icon="cloud-upload" style="margin: 10px 50%;transform: translateX(-50%);" @click="handleSend" >案件派发</a-button>
          </div>
          <div v-else-if="ajzt.includes('派发待处理')">
            <div class="caseother"><span class="title">【处理人员】</span><span>{{zpxx.REALNAME}}</span></div>
            <div class="casedate"><span class="title">【派发日期】</span><span>{{zpxx.RQ}}</span></div>
            <a-button type="primary" icon="reload" style="margin: 10px 50%;transform: translateX(-50%);" @click="handleRecall">撤销派发</a-button>
          </div>
          <div v-else-if="ajzt.includes('待审核')">
            <label for="" style="margin: 8px 0;display: block;color: #66cc00;">
              审核类型：
              <a-select @change="selectChange" v-model="sslx" style="width: 60%" placeholder="请选择审核类型">
                <a-select-option value="1006">
                  结案
                </a-select-option>
                <a-select-option value="1007">
                  重新处理
                </a-select-option>
                <a-select-option value="1008">
                  重新复飞
                </a-select-option>
              </a-select>
            </label>
            <div class="caseother" style="display: flex"><span class="title">审核意见：</span><textarea v-model="ssyj" name="" id="" cols="25" rows="4"></textarea></div>
            <a-button type="primary" icon="check-circle" style="margin: 10px 50%;transform: translateX(-50%);" @click="handleReview">确认审核</a-button>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <!--    視頻-->
    <div  class="ant-modal-mask " v-show="videoShow" style=" background: rgba(0, 0, 0, 0.9); z-index: 1990; text-align: center;">
      <div id="divCaseVideoWindow" style="width: 602px; height: 400px; z-index: 99999; display: block;">
        <div id="divCaseVideoTitle" class="floatWindowTitle" style="width: 602px; height: 34px;">
          <div class="floatWindowTitleText">案件视频</div>
          <a-icon slot="extra" type="close" style='cursor: pointer; color: #FFFFFF;margin-right: 15px; margin-top: 10px; font-size: 16px; float: right; ' @click="videoShow=false"/>
        </div>
        <div id="divCaseVideo"  style="">
          <video id="caseVideo" :src="src" style="margin: 1px; width: 598px; height: 342px;" controls="" autobuffer=""></video>
        </div>
        <div id="divbtmVideo" style="width: 602px; height: 4px;">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getAction,postAction} from "../../../api/manage";

export default {
  name: "InfoDetails",
  inject: ['basicMap',],
  props: {
    value: {
      type: Boolean,
      default: false,
      required: true
    },
    cls:{
      type:String,
    }
  },
  data(){
    return{
      baseUrl:'',
      userName:'',
      sslx:'1006',
      ssyj:'同意结案',
      userNames:[],
      videoShow:false,
      ajh: 'FCZ20190604145735',
      infoShow: false,
      data:[],
      ajzt:'',
      zpxx:{},
      src:'',
      userRole:false,
      leftStyle:''
    }
  },
  created() {
    this.baseUrl=window._CONFIG['staticDomainURL'];
  },
  methods:{
    show() {
      this.$viewerApi({
        images: this.images,
      })
    },
    selectChange(value){
      if(value==='1006'){
        this.ssyj='同意结案';
      }else if(value==='1007'){
        this.ssyj='请相关人员重新处理';
      }else{
        this.ssyj='请相关人员重新复飞';
      }
        },
    async loadDetail(item){
      let width=document.getElementById('basicMap').offsetWidth -355;
      this.leftStyle=`left:${width*0.9}px`;
      this.leftStyle=`top: 210px;right: 40%;`;
      this.ajh = '';
      this.infoShow = false;
      this.data=[];
      this.ajzt='';
      this.zpxx={};
      this.src='';
      if(item.ajh){
        this.ajh=item.ajh
      }else if(item.AJH){
        this.ajh = item.AJH;
      }
      this.ajzt=item.anjzt_dictText;
      let {success, message, result} = await getAction('/ajgl.ajxx/tinXjglSglistPolygon/ajxxlist', {
        ajh:this.ajh,
      });
      if (success) {
        if (result.length === 0 || result === '') {
          this.$message.error('没有查询到信息');
          this.data = [];
          return;
        }
        this.data = result;
      } else {
        this.$message.info(message);
      }
      // 修改图片数组格式
      this.data.forEach((item,index)=>{
        if(item.TYPE=='zp'){
          this.zpxx=item;
        }
        if(item.ZPNAME){
          this.data[index].ZPNAME=this.data[index].ZPNAME.split(';');
          if(!this.data[index].ZPNAME[this.data[index].length-1]||this.data[index].ZPNAME[this.data[index].length-1]===''){
            this.data[index].ZPNAME.pop();
          }
          this.data[index].ZPNAME.forEach((itemA,ind)=>{
            this.data[index].ZPNAME[ind]=this.baseUrl+"/uploading/"+itemA;
          });
        }
      })
      /*this.images2 = this.data.SBZPNAME.split(';');
      if(this.images2[this.images2.length-1]===''){
        this.images2.pop();
      }
      this.images2.forEach((item,index)=>{
        this.images2[index]=this.baseUrl+'/'+item;
      });*/
      this.loadUsers(item.ssdw,item.sswg);
      this.loadUserRole();
    },
    async handleSend(){
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      let time = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
      let {success, message, result} = await getAction('/ajgl.ajxx/tinXjglSglistPolygon/ajpf', {
        // username:'fcz',
        userid:this.userName,
        date:time,
        ajh:this.ajh
      });
      if (success) {
        if (result.length === 0 || result === '') {
          this.$message.error('没有查询到信息');
          return;
        }
        this.$message.success(message);
      } else {
        this.$message.info(message);
      }
    },
    async loadUsers(ssdw,sswg){
      let {success, message, result} = await getAction('/ajgl.ajxx/tinXjglSglistPolygon/pflist', {
        sswg
      });
      if (success) {
        if (result.length === 0 || result === '') {
          this.$message.error('没有查询到信息');
          this.userNames = [];
          return;
        }
        this.userNames = result;
        this.userName=result[0].userid;
      } else {
        this.$message.info(message);
      }
    },
    async loadUserRole(){
      let {success, message, result} = await getAction('/zhzs/sysuser/GetLoginUser', );
      if (success) {
        if (result.length === 0 || result === '') {
          this.$message.error('没有查询到信息');
          return;
        }
        this.userRole = result.zfyhlx;
        if(this.userRole=='1003'||this.userRole=='admin'||result.username=='admin'){
          this.userRole=true;
        }else {
          this.userRole=false;
        }
      } else {
        this.$message.info(message);
      }
    },
    async handleRecall(){
      let {success, message, result} = await getAction('/ajgl.ajxx/tinXjglSglistPolygon/ajcx', {
        ajh:this.ajh
      });
      if (success) {
        this.$message.success(message);
      } else {
        this.$message.info(message);
      }
    },
    handleReview(){
      this.$confirm({
        title: '确认更改？',
        content: '确认后不可修改',
        icon: 'exclamation-circle',
        onOk: async () => {
          let yy = new Date().getFullYear();
          let mm = new Date().getMonth()+1;
          let dd = new Date().getDate();
          let hh = new Date().getHours();
          let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
          let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
          let time = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
          let {success, message, result} = await getAction('/ajgl.ajxx/tinXjglSglistPolygon/ajsh', {
            anjzt:this.sslx,
            ajh:this.ajh,
            shyj:this.ssyj,
            shryid:this.$store.state.user.info.username,
            date:time
          });
          if (success) {
            if (result.length === 0 || result === '') {
              this.$message.error('没有查询到信息');
              return;
            }
            this.$message.success(message);
          } else {
            this.$message.info(message);
          }
        },
        onCancel() {
        },
      });

    },
    handleVideo(src){
      this.videoShow=true;
      this.src=this.baseUrl+'/Mov/'+src;
    },
  }
}
</script>

<style>

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}
.info .ant-timeline-item-content {
  margin: 0px 0 0 26px;
}
#divCaseVideoWindowBg {
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  top: 0px;
  z-index: 90;
  width: 100%;
  height: 100%;
  display: none;
  left: 0px;
  margin: 0px;
}
#divCaseVideoWindow {
  position: absolute;
  bottom: 50%;
  z-index: 9;
  width: 600px;
  height: 400px;
  display: none;
  left: 50%;
  margin: 0px 0px -150px -300px;
}
#divCaseVideo{
  /*background-image: url("../../../assets/VideoCen.png");*/

}
#divbtmVideo{
  /*background-image: url('../../../assets/VideoBottom.png');*/
}
.floatWindowTitle {
  background-image: linear-gradient(160deg, #3C66A2 30%,#333333 70%);
}
.info .ant-card-body{
  height: calc(35vh + 48.5px + 100px);
  overflow-y: auto;
  padding-top: 0;
}
.info .floatWindowTitleText {
  margin-left: 10px;
  float: left;
  font-size: 13px;
  height: 30px;
  line-height: 30px;
  color: #FFFFFF;
  font-family: 微软雅黑;
}
.info .content {
  font-size: 12px;
  border-radius: 5px;
  height: 100%;
  width: 260px;
  padding: 8px;
  border: 4px solid #AFDCF8;
  background-color: #FFF;
  user-select: text;
}

.info .content .casedate {
  font-size: 14px;
  font-family: '微软雅黑';
  font-weight: bold;
  border-bottom: 2px solid #001b69;
  height: 30px;
  line-height: 30px;
}

.info .content div {
  color: #330099;
}
.info .content div img {
  width: 50px;
  height: 50px;
  border: 2px solid #0052a5;
  border-radius: 5px;
  margin: 5px 0px 5px 5px;
}
.info .content div img:hover {
  cursor: pointer;
  border: 2px solid #FF0000;
}
.info div span.title {
  color: #66cc00;
  font-weight: bold;
}
.info div span.title + span{
  cursor: text;
}
.info .content .caseother {
  font-size: 14px;
  font-family: '微软雅黑';
  margin: 5px 0px 5px 0px;
}
</style>