<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-if="jobForm.jobFlag=='1'" class="well-info">
            <span class="info-name">应接单时间</span>
            <span class="info-value">{{jobForm.shouldGetTime}}</span>
          </div>
          <div v-if="jobForm.jobFlag=='2'" class="well-info">
            <span class="info-name">应处理完成时间</span>
            <span class="info-value">{{jobForm.shouldHandleTime}}</span>
          </div>
          <div v-for="item in jobInfo" v-show="item.value!=''" :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" v-if="jobForm.editable==1 && winType=='waitConfirmJob'">
          <div class="well-info-button">
            <span class="info-name">现场情况</span>
          </div>
          <div class="img-area">
            <textarea v-model="jobForm.firstState" rows="5" placeholder="请输入现场情况"/>
          </div>
          <div class="well-info-button">
            <span class="info-name">上传现场图片</span>
          </div>
          <div class="img-area">
            <updatefile class="imgzip" :multiple="multiple" :max="maxPhotos" :list="firstStateImgs" ref="upload"></updatefile>
          </div>
          <div class="well-info-button">
            <span class="title-left">窨井当前情况</span><span class="grey"> ( 若选择正常，则工单将直接结束 )</span>
            <mt-radio
              v-model="needHandle"
              :options="wellStatusNow">
            </mt-radio>
          </div>
        </div>
        <!--处理中,已完成工单显示现场情况-->
        <div class="well-info-card" v-if="(winType=='inHandleJob'||winType=='overJob')&& jobForm.firstState">
          <div v-if="jobForm.firstState" class="well-info firststate" >
            <span class="info-name">现场情况</span>
            <span class="info-value">{{jobForm.firstState}}</span>
          </div>
          <div v-if="firstStateImgs.length>0" class="well-info-button firststate">
            <span class="info-name">现场图片</span>
          </div>
          <div v-if="firstStateImgs.length>0" class="img-area">
            <img class="img-show" v-for="img in firstStateImgs" :src="img" @click="showBigImage(img)"/>
          </div>
          <div v-if="firstStateImgs.length>0" class="well-info firststate" >
            <span class="info-name">确认人</span>
            <span class="info-value">{{jobForm.confirmJobPerson}}</span>
          </div>
        </div>
        <!--处理中必填项-->
        <div class="well-info-card" v-if="jobForm.editable==1 && winType=='inHandleJob'">
          <div class="well-info-button">
            <span class="info-name">维护情况</span>
          </div>
          <div class="img-area">
            <textarea v-model="jobForm.handleMessage" rows="5" placeholder="请输入现场情况"/>
          </div>
          <div class="well-info-button">
            <span class="info-name">上传维护图片</span>
          </div>
          <div class="img-area">
            <updatefile class="imgzip" :multiple="multiple" :max="maxPhotos" :list="handleImgs" ref="upload"></updatefile>
          </div>
        </div>
        <!--完成工单显示维护情况-->
        <div class="well-info-card" v-if="winType=='overJob' && jobForm.handleMessage!=''">
          <div class="well-info firststate" >
            <span class="info-name">维护情况</span>
            <span class="info-value">{{jobForm.handleMessage}}</span>
          </div>
          <div v-if="handleImgs.length>0" class="well-info-button firststate">
            <span class="info-name">维护图片</span>
          </div>
          <div v-if="handleImgs.length>0" class="img-area">
            <img class="img-show" v-for="img in handleImgs" :src="img" @click="showBigImage(img)"/>
          </div>
          <div v-if="handleImgs.length>0" class="well-info firststate" >
            <span class="info-name">处理人</span>
            <span class="info-value">{{jobForm.handleJobPerson}}</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 v-if="jobForm.editable==1" class="button-div">
          <mt-button v-if="winType=='waitGetJob'" type="primary" @click="getJob">接单</mt-button>
          <mt-button v-if="winType=='waitGetJob'" type="default" @click="goToMap">到这里去</mt-button>
          <mt-button v-if="showTransferBtn" type="primary" @click="openTransferWin">转单</mt-button>
          <mt-button v-if="winType=='waitConfirmJob'" type="default" @click="confirmJob">提交</mt-button>
          <mt-button v-if="winType=='inHandleJob'" type="default" @click="overJob">提交</mt-button>
        </div>
        <mt-popup
          v-model="popupVisible">
          <ChoosePeople v-show="popupVisible" ref="choosePeople"/>
        </mt-popup>

        <mt-popup v-model="bigImageVisible" class="imageShowPopup">
          <img :src="bigImageSrc" style="width: 100%; max-height: 100%"/>
        </mt-popup>

      </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'
  export default {
    name: "JobDetail",
    components:{
      Loading,
      ChoosePeople,
      Updatefile
    },
    data() {
      return {
        jobForm: {
          id: '', // 工单id
          jobCode:'',//工单编号
          jobBelongTo:'',
          createTime:'',//工单创建时间
          jobFlag: '', //工单延时标志，1为超时未接单，2位超时未处理
          wellId:1,
          wellCode: '', // 窨井编号
          wellType: '', // 窨井类型
          wellTypeName: '', // 窨井类型名称
          deptid: '', // 权属单位
          deptName: '', // 权属单位名称
          deep: '', // 井深，
          alarmContentName:'',
          alarmValue:'',
          position: '', // 位置描述
          coordinateX: '', // 经度
          coordinateY: '', // 纬度
          photos:"",//照片
          notes: '', // 备注,
          qu: '',
          area: '', // 街道
          responsibleDept: '', // 维护人员部门
          flow:[],
          firstState:'',
          firstStatePhotos:'',
          confirmJobPerson:'',
          shouldGetTime:'',
          shouldHandleTime:'',
          handleMessage:'',
          handlePhotos:'',
          handleJobPerson:'',
          editable:1
        }, // 表单
        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.devcode,
          },
          {
            title:'告警等级',
            value: this.computeLevel(this.jobForm.alarmLevel),
            class:'text-red'
          },
          {
            title:'告警数值',
            value:this.jobForm.alarmValue.replace(/,/g,'\n'),
            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:'派单时间',num :1})
        }
        if(jobForm.getJobTime && jobForm.getJobTime!='0000-00-00 00:00:00'){
          timeList.push({time:jobForm.getJobTime,name:'接单时间',num :2})
        }
        if(jobForm.confirmJobTime && jobForm.confirmJobTime!='0000-00-00 00:00:00'){
          timeList.push({time:jobForm.confirmJobTime,name:'确认时间',num :3})
        }
        if(jobForm.handleJobTime && jobForm.handleJobTime!='0000-00-00 00:00:00'){
          timeList.push({time:jobForm.handleJobTime,name:'完成时间',num :4})
        }
        if(jobForm.flow && jobForm.flow.length>0){
          for(const item of jobForm.flow){
            timeList.push({time:item.time, name:'转单时间',num :4})
          }
        }
        if(timeList.length>1){
          timeList.sort((a,b)=>{
            const cmp = compareCalendar(a.time,b.time)
            if(cmp==0){
              if(a.num>b.num) return -1
              else return 1
            }else{
              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:{
      // 等级转换
      computeLevel(val){
        switch (val) {
          case 1:
            return '一级'
          case 2:
            return '二级'
          case 3:
            return '三级'
          default:
            return ''
        }
      },
      //跳转地图
      goToMap(){
        openMapWindow(this.jobForm.lngGaode,this.jobForm.latGaode,this.jobForm.wellName)
      },
      //获取工单详情
      fetchData(id){
        getJobInfo(id).then(response=>{
          if(response.code==200){
            this.jobForm = response.data[0]
            this.isLoading = false
            // 现场照片
            if (this.jobForm.firstStatePhotos && this.jobForm.firstStatePhotos != '') {
              const urls = this.jobForm.firstStatePhotos.split(';')
              const base_url = process.env.BASE_API + '/static/'
              for (const url of urls) {
                if (url) {
                  this.firstStateImgs.push(base_url + url)
                }
              }
            }
            // 处理照片
            if (this.jobForm.handlePhotos && this.jobForm.handlePhotos != '') {
              const urls = this.jobForm.handlePhotos.split(';')
              const base_url = process.env.BASE_API + '/static/'
              for (const url of urls) {
                if (url) {
                  this.handleImgs.push(base_url + url)
                }
              }
            }
            //判断是否显示转单按钮
            if(this.jobForm.jobStatus=='1' || this.jobForm.jobStatus=='2'){
              if(this.jobForm.flow && this.jobForm.flow.length>0 ){
                this.showTransferBtn = false
              }else{
                this.showTransferBtn = true
              }
            } else{
              this.showTransferBtn = false
            }
          }
        })
      },
      //跳转显示窨井详情
      showWellDetail(){
        const id = this.jobForm.wellId
        this.$router.push({
          path :`/wellDetail/${id}`
        })
      },
      //接单
      getJob(){
        MessageBox.confirm('确定要接单吗?').then(action => {
          if(action=='confirm'){
            getJob(this.jobForm.id).then(response => {
              if(response.code==200){
                Toast({
                  message: '接单成功',
                  position: 'bottom',
                })
                this.$router.push({name: 'job'})
              }
            })
          }
        })
      },
      //现场确认工单
      confirmJob(){
        if(this.jobForm.firstState.trim().length<1){
          Toast({
            message: '请输入现场情况',
            position: 'bottom',
          })
          return
        }else if(this.jobForm.firstState.trim().length>50){
          Toast({
            message: '现场情况字数不得超过50字',
            position: 'bottom',
          })
          return
        }
        if(this.firstStateImgs.length<1){
          Toast({
            message: '请拍摄现场图片',
            position: 'bottom',
          })
          return
        }else{
          this.jobForm.firstStatePhotos = ''
          for(const img of this.firstStateImgs){
            let index = img.indexOf('/static/')
            if (index !== -1) {
              index += 8
            }
            this.jobForm.firstStatePhotos+=img.substring(index)+';'
          }
        }
        if(this.needHandle.trim().length<1){
          Toast({
            message: '请选择窨井当前情况',
            position: 'bottom',
          })
          return
        }
        MessageBox.confirm('确定要提交吗?').then(action => {
          if(action=='confirm'){
            const data = {
              id : this.jobForm.id,
              firstState: this.jobForm.firstState,
              firstStatePhotos: this.jobForm.firstStatePhotos,
              needHandle: this.needHandle
            }
            confirmJob(data).then(response => {
              if(response.code==200){
                Toast({
                  message: '现场确认成功',
                  position: 'bottom',
                })
                this.$router.push({name: 'job'})
              }
            })
          }
        })
      },
      openTransferWin(){
        this.popupVisible = true
        this.$refs.choosePeople.initDialog(true,this.jobForm.id)
      },
      //结束工单
      overJob(){
        if(this.jobForm.handleMessage.trim().length<1){
          Toast({
            message: '请输入维护情况',
            position: 'bottom',
          })
          return
        }else if(this.jobForm.handleMessage.trim().length>50){
          Toast({
            message: '维护情况字数不得超过50字',
            position: 'bottom',
          })
          return
        }
        if(this.handleImgs.length<1){
          Toast({
            message: '请拍摄维护图片',
            position: 'bottom',
          })
          return
        }else{
          this.jobForm.handlePhotos = ''
          for(const img of this.handleImgs){
            let index = img.indexOf('/static/')
            if (index !== -1) {
              index += 8
            }
            this.jobForm.handlePhotos+=img.substring(index)+';'
          }
        }
        MessageBox.confirm('确定要结束工单吗?').then(action => {
          const data = {
            id : this.jobForm.id,
            handleMessage: this.jobForm.handleMessage,
            handlePhotos: this.jobForm.handlePhotos,
          }
          if(action=='confirm'){
            overJob(data).then(response => {
              if(response.code==200){
                Toast({
                  message: '结束工单成功',
                  position: 'bottom',
                })
                this.$router.push({name: 'job'})
              }
            })
          }
        })
      },
      //显示大图
      showBigImage(src){
        this.bigImageVisible = true
        this.bigImageSrc = src
      }
    }
  }
</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{
          display: inline-block;
          max-width: 45vw;
          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>
