<template>
  <div class="edit-add-detail detail">
    <div class="edit-add-detail-new-content">
      <div class="form-content" style="flex: 4;">
        <el-form ref="formInfo" label-width="120px" :model="infoData" class="detail-form" label-position="left" label-suffix="：">
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">工单信息</div>
            </div>
          </div>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="工单编号">
              <span :title="infoData.code" class="text">
                {{ infoData.code || '-' }}
              </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工单标题">
              <span :title="infoData.title" class="text">
                {{ infoData.title || '-' }}
              </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工单状态">
              <span :style="{color:statusChange(infoData.handlingStatus)}" :title="infoData.handlingStatus" class="text">
                {{ dictionaryEscape('gd-gdzt',JSON.stringify(infoData.handlingStatus)) || '-' }}
              </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属模块">
              <span :title="infoData.module" class="text">
                {{ dictionaryEscape('gd-ssmk',infoData.module) || '-' }}
              </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工单类型">
              <span :title="infoData.type" class="text">
                {{ dictionaryEscape('gd-gdlx',infoData.type) || '-' }}
              </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="紧急程度">
              <span :title="infoData.urgency" class="text" style="color:#F56C6C">
                {{ dictionaryEscape('gd-jjcd',JSON.stringify(infoData.urgency)) || '-' }}
              </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="处理方式">
              <span :title="infoData.handlingMethod" class="text">
                {{ dictionaryEscape('gd-clfs',JSON.stringify(infoData.handlingMethod)) || '-' }}
              </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划完成时间">
              <span :title="infoData.plannedCompletionTime" class="text">
                {{ infoData.plannedCompletionTime || '-' }}
              </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实际完成时间">
              <span :title="infoData.actualCompletionTime" class="text">
                {{ infoData.actualCompletionTime || '-' }}
              </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="处理步骤">
                <span :title="infoData.handlingSteps"  ref="richText" class="text" v-html="infoData.handlingSteps">
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="问题描述">
              <span :title="infoData.problemDescription" ref="richText" class="text" v-html="infoData.problemDescription">
              </span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="form-content" style="flex: 3;">
          <el-form ref="formInfo" :model="infoData" class="detail-form" label-position="right" label-suffix="：">
            <div class="rows">
              <div class="rows-left">
                <div class="rows-hr"></div>
              </div>
              <div class="rows-title">
                <div class="text-overflow">工单处理记录</div>
              </div>
            </div>
            <el-timeline class="flow-box">
              <el-timeline-item v-for="item in infoData.systemWorkOrderHandleLogList" :key="item.id" :timestamp="item.createTime"
                                placement="top">
                <el-card>
                  <div class="header">
                    <div class="title">处理人：{{ item.handlingUserName }}</div>
                    <div class="title">处理时间：{{ item.benchmarkPrice }}</div>
                  </div>
                  <div class="header">
                    <div class="title">更新人：{{ item.handlingUpdateUserName }}</div>
                    <div class="title">更新时间：{{ item.handlingUpdateTime }}</div>
                  </div>
                  <div class="header">
                    <div class="title" v-if="item.handlingProgress">处理进度：{{ item.handlingProgress }}%</div>
                    <div class="title">处理状态：<el-tag size="small" :type="getHandlingStatus(item.handlingStatus)">{{ dictionaryEscape('gd-gdzt',JSON.stringify(item.handlingStatus)) }}</el-tag></div>
                  </div>
                  <div class="event-detail" v-if="item.problemDescription">处理措施：<span v-html="item.problemDescription"></span></div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-form>
        </div>
    </div>
    <div class="button-style">
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" v-if="infoData.handlingStatus === 1" @click="acceptanceChange('2')">受理</el-button>
      <el-button type="primary" v-if="infoData.handlingStatus === 2 || infoData.handlingStatus === 3" @click="acceptanceChange('3')">更新</el-button>
      <el-button type="primary" v-if="infoData.handlingStatus === 3"  @click="acceptanceChange('4')">完成</el-button>
      <el-button type="primary" @click="closeWork('5')" :loading="saveLoading" v-if="infoData.handlingStatus !== 5">关闭</el-button>
    </div>
    <workAccepted v-if="workAcceptedDialog" :orderId="infoData.id" :is-show.sync="workAcceptedDialog" :type="type" @confirm="handleWorkAccepted"></workAccepted>
  </div>
</template>

<script>
import workAccepted from '@/views/WorkOrder/workAccepted.vue'
import { dictionaryEscape } from '@/utils/dictionary'
import {ticketDetails, updateHandlingStatus} from '@/api/workOrder'
export default {
  name: 'Details',
  components: {workAccepted},
  data() {
    return {
      id:'',
      type:'',
      confirmLoading: false,
      saveLoading:false,
      infoData:{},
      workAcceptedDialog:false
    }
  },
  created() {
    if(this.$route.query && this.$route.query.id){
      this.id = this.$route.query.id
    }
  },
  mounted() {
    this.getDetailChange()
  },
  methods: {
    dictionaryEscape,
    getHandlingStatus(status){
      switch (status) {
        case 1:
          return '';
        case 2:
          return 'warning';
        case 3:
          return '';
        case 4:
          return 'success';
        case 5:
          return 'info';
        default:
          return '';
      }
    },
    statusChange(status){
      switch (status) {
        case 1:
          return '#409EFF';
        case 2:
          return '#E6A23C';
        case 3:
          return '#FFABAB';
        case 4:
          return '#67C23A';
        case 5:
          return '#909399';
        default:
          return '#409EFF';
      }
    },
    // 获取详情
    async getDetailChange(){
      this.infoData = await ticketDetails(this.id)
    },
    // 返回
    goBack(){
      this.$router.push({path:'/platLayout/workListPage'});
    },
    // 关闭页面执行
    closePage() {
      this.$nextTick(_ => {
        this.$refs.formInfo.$el.scrollTop = 0
      })
    },
    // 受理事件
    acceptanceChange(type){
      this.type = type;
      this.workAcceptedDialog = true;
    },
    closeWork(handlingStatus){
      this.$confirm('确定关闭该工单吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let param = {
          id:this.infoData.id,
          handlingStatus
        }
        this.saveLoading = true
        const {state} = await updateHandlingStatus(param)
        if(state){
          this.saveLoading = false
          this.$message.success('关闭成功')
          await this.getDetailChange()
        }
      })
    },
    handleWorkAccepted(){
      this.getDetailChange()
    }
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content{
  margin-left: 0 !important;
}
::v-deep .ql-container {
  height: 250px !important;
}
::v-deep .el-dialog__body{
  color: #ffffff !important;
}
.text >>> img {
  max-width: 100%; /* 使图片在容器内自适应 */
  height: auto;
}
.edit-add-detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #0f304f;
  padding: 20px;
  box-sizing: border-box;
  .form-content {
    flex: 1;
    height: auto;
    background-color: #114066;
    padding: 10px 20px;
    .el-form {
      flex: 1;
      overflow-x: hidden;
      overflow-y: scroll;
      max-height: 100%;
      .el-form-item {
        display: flex;
        margin-bottom: 22px;
      }
    }
  }
}
.edit-add-detail-new-content {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  height: 0;
  flex: 1;
  .form-content {
    flex: 4;
  }
}
.button-style{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #114066;
  padding: 30px 20px;
}
.rows {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(67, 161, 255, .5);
  margin-bottom: 16px;
  padding: 10px 0;

  .rows-left {
    margin-right: 10px;

    .rows-hr {
      width: 3px;
      height: 18px;
      background-color:#43a1ff;
      border-radius: 2px;
    }
  }

  .rows-title {
    .text-overflow {
      width: 100%;
      font-size: 16px;
      color: #f0f0f0;
    }
  }
}
.flow-box {
  ::v-deep.el-timeline-item__timestamp {
    font-size: 16px;
    color: #fff;
  }

  .el-card {
    background-color: #144871;
    border-radius: 5px;
  }

  .header {
    display: flex;

    .title {
      width: 50%;
    }

    margin-bottom: 10px;
  }

  .event-detail {
    // padding: 10px 0;
    margin-bottom: 10px;
  }

  .dispose-img {
    display: flex;
    gap: 10px;

    .el-image {
      border-radius: 5px;
      box-sizing: border-box;
    }
  }

}

::v-deep.el-backtop {
  background: transparent;
}

::v-deep.top-box {
  background: rgba(10, 38, 61, .5);
}
</style>
