<template>
  <transition name="slide">
    <div class="index-container">
      <!--标题-->
      <mt-header class="header" title="工单详情" fixed>
        <div slot="left">
          <mt-button icon="back" @click="$router.back(-1)"></mt-button>
        </div>
      </mt-header>
      <div class="listbody">
        <Loading v-if="isLoading"/>
        <div class="well-info-card">
          <div class="well-title">
            <span class="title-left">{{jobForm.alarmContentName}}</span>
            <span class="title-right">{{jobForm.createTime}}</span>
          </div>
          <div v-for="item in jobInfo" :key="item.title" class="well-info">
            <span class="info-name">{{item.title}}</span>
            <span v-if="item.islink" class="info-value" :class="item.class" @click="showWellDetail(item)">{{item.value}}</span>
            <span v-else class="info-value" :class="item.class">{{item.value}}</span>
          </div>
        </div>

        <!--工单相关阶段时间倒序-->
        <div class="well-info-card">
          <div v-for="item in jobTimes" :key="item.name" class="well-info">
            <span class="info-name">{{item.name}}</span>
            <span class="info-value">{{item.time}}</span>
          </div>
        </div>
        <div class="button-div">
          <mt-button v-if="winType=='waitGetJob'" type="primary" @click="overJob">处理</mt-button>
          <mt-button v-if="winType=='waitGetJob'" type="default" @click="goToMap">到这里去</mt-button>
        </div>

      </div>


    </div>
  </transition>
</template>

<script>
  import {MessageBox, Indicator, Toast} from 'mint-ui'
  import Updatefile from '@/components/Updatefile'
  import { openMapWindow } from '@/utils/common'
  import { getJobInfo, getJob, confirmJob, overJob  } from '@/api/job'
  import ChoosePeople from "../ChoosePeople";
  import Loading from "../../../components/Loading/index";
  import {compareCalendar} from '@/utils/string'
  import { appSpApi } from '@/api/special'
  export default {
    name: "JobDetail",
    components:{
      Loading,
      ChoosePeople,
      Updatefile
    },
    data() {
      return {
        jobForm: {
          id: '', // 工单id
          jobCode:'',//工单编号
          createTime:'',//工单创建时间
          wellId:1,
          wellCode: '', // 闸井编号
          wellType: '', // 闸井类型
          wellTypeName: '', // 闸井类型名称
          deptid: '', // 权属单位
          deptName: '', // 权属单位名称
          deep: '', // 井深，
          alarmContentName:'',
          alarmValue:'',
          position: '', // 位置描述
          coordinateX: '', // 经度
          coordinateY: '', // 纬度
          photos:"",//照片
          notes: '', // 备注,
          qu: '',
          area: '', // 街道
          responsibleDept: '', // 维护人员部门
          flow:[],
          firstState:'',
          firstStatePhotos:'',
          handleMessage:'',
          handlePhotos:''
        }, // 表单
        isLoading:true, //是否显示加载按钮
        multiple:true,//是否允许多张图片
        maxPhotos:4,//最大图片数
        firstStateImgs:[],//现场情况图片列表
        handleImgs:[],//现场情况图片列表
        popupVisible:false, //是否显示选择转单人弹窗,
        bigImageVisible:false,//是否显示大图
        bigImageSrc:'',//大图图片路径
        needHandle: '',  //是否需要处理
        wellStatusNow:[
          {
            label: '正常',
            value: '0'
          },
          {
            label: '异常',
            value:'1'
          }
        ],
        showTransferBtn:false
      }
    },
    computed:{
      jobInfo(){
        return [
          {
            title:'工单编号',
            value:this.jobForm.jobCode
          },
          {
            title:'闸井编号',
            value:this.jobForm.wellCode,
            islink:true,
            class:'text-blue'
          },
          {
            title:'告警数值',
            value:this.jobForm.alarmValue,
            class:'text-red'
          },
          {
            title:'位置描述',
            value:this.jobForm.position
          }
        ]
      },
      winType(){
        if(this.jobForm.jobStatus=='0'){//待处理
          return 'waitGetJob'
        }else if (this.jobForm.jobStatus=='1'){
          return 'waitConfirmJob'
        }else if (this.jobForm.jobStatus=='2'){
          return 'inHandleJob'
        }else if (this.jobForm.jobStatus=='3'){
          return 'overJob'
        }
      },
      jobTimes(){
        const timeList = []
        const jobForm = this.jobForm
        if(jobForm.createTime && jobForm.createTime!='0000-00-00 00:00:00'){
          timeList.push({time:jobForm.createTime,name:'派单时间'})
        }
        if(jobForm.getJobTime && jobForm.getJobTime!='0000-00-00 00:00:00'){
          timeList.push({time:jobForm.getJobTime,name:'接单时间'})
        }
        if(jobForm.confirmJobTime && jobForm.confirmJobTime!='0000-00-00 00:00:00'){
          timeList.push({time:jobForm.confirmJobTime,name:'确认时间'})
        }
        if(jobForm.handleJobTime && jobForm.handleJobTime!='0000-00-00 00:00:00'){
          timeList.push({time:jobForm.handleJobTime,name:'完成时间'})
        }
        if(timeList.length>1){
          timeList.sort((a,b)=>{
            console.log(compareCalendar(a.time,b.time))
            return compareCalendar(a.time,b.time)
          })
        }
        return timeList
      }
    },
    mounted(){
      if(this.$route.params.id && this.$route.params.id!=''){
        this.fetchData(this.$route.params.id)
      }
    },
    methods:{
      //跳转地图
      goToMap(){
        openMapWindow(this.jobForm.lngGaode,this.jobForm.latGaode,this.jobForm.wellName)
      },
      //获取工单详情
      fetchData(id){
        appSpApi('job/info',{id:id}).then(response =>{
          if(response.code==200){
            this.jobForm = response.data[0]
            this.isLoading = false


          }
        })
      },
      //跳转显示闸井详情
      showWellDetail(){
        const id = this.jobForm.wellId
        this.$router.push({
          path :`/wellDetail/${id}`
        })
      },
      //结束工单
      overJob(){
        MessageBox.confirm('确定要结束工单吗?').then(action => {
          const data = {
            id : this.jobForm.id,
            handleMessage: this.jobForm.handleMessage,
            handlePhotos: this.jobForm.handlePhotos,
          }
          if(action=='confirm'){
            appSpApi('job/overJob',data,"POST").then(response =>{
              if(response.code==200){
                Toast({
                  message: '处理成功',
                  position: 'bottom',
                })
                this.$router.push({name: 'job'})
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .listbody{
    margin-top 40px
    padding 0.4rem 0
    .well-info-card{
      margin 5px 1vw 0px 1vw
      background-color #ffffff
      border 1px solid #f0f0f0
      border-radius 4px
      padding 1rem 1rem
      .well-title{
        padding-left 1rem
        line-height 2rem
        margin-bottom 0.6rem
        .title-left{
          font-size 1.2rem
          font-weight 600
          color: #000
        }
        .title-right{
          font-size 0.8rem
          float right
          margin-right 1rem
          color: #a7a7a7
        }
      }
      .well-info{
        overflow auto
        border-bottom 1px solid #f0f0f0
        padding 0.7rem 1rem 0.2rem 1rem
        line-height:1.5rem
        font-size:0.9rem
        .info-name{
          float left
        }
        .info-value{
          float right
          color #4b4b4b
          max-width 70%
          text-align right
        }
        .text-red{
          color: red
        }
        .text-blue{
          color: #1d55c6
        }
      }
      }
      .well-info-button{
        overflow auto
        padding 0.2rem 1rem 0.2rem 1rem
        line-height:1.2rem
        font-size:0.9rem
        .info-name{
          float left
        }
        .info-value{
          float right
          color #4b4b4b
          max-width 60%
          text-align right
        }
      }
      .mint-cell{
        font-size:0.9rem
      }
      .well-info:last-child{
        border-bottom none
      }
      textarea{
        width: 80vw
        margin-left 5px
      }
      .img-area{
        padding 0.5rem 0.5rem
      }
      .imgzip{
        height 20vw
        margin 0.2rem
      }
    .firststate{
      padding-top 0.4rem
    }
    .button-div{
      text-align center
      padding 0px 15vw
      .mint-button{
        width 30vw
        margin 10px 2vw
      }
      .mint-button--primary{
        background-color #1d55c6
      }
      .mint-button--default{
        background-color #ffffff
      }
    }
    .mint-popup{
      width: 50vw
    }
    .mint-cell{
      diaplay:inline
    }
    .mint-cell-wrapper{
      float left
      width 30%
    }
    .mint-radiolist-label{
      font-size:0.8rem
    }
    .grey{
      color: #7c7c7c
      font-size 0.8rem
    }
    .img-show{
      width: 50px
      height: 50px
      margin: 10px
    }
    .imageShowPopup{
      width:80%
    }
  }

</style>