<template>
  <div class="work-box-1">
    <!-- 最新工单 -->
    <Title1 title="最新工单" />
    <!-- 列表 -->
    <div class="list">
      <div class="li" v-for="(item, index) in list" :key="index">
        <span :class="item.level">{{ item.level_text }}</span>
        <p>{{ item.title }}</p>
        <span class="time">{{ item.time }}</span>
        <span class="btn" @click="showDetail(item.id)">详情</span>
      </div>
    </div>
    <el-dialog :title="'工单详情'" center v-model="dialogVisible">
      <div class="bom-box">
        <div class="modal-body">
          <div class="m-modal">
            <div class="item-title--primary">工单信息</div>
            <div class="item-col">
              <div class="detail-item">
                <span class="label">所属景区：</span>
                <span class="value">{{ detail.road }}</span>
              </div>
              <div class="detail-item">
                <span class="label">工单类型：</span>
                <span class="value">{{ detail.type }}</span>
              </div>
              <div class="detail-item">
                <span class="label">紧急程度：</span>
                <span :class="'value '+detail.level">{{ detail.levelText }}</span>
              </div>
            </div>
            <div class="item-col">
              <div class="detail-item">
                <span class="label">具体地点：</span>
                <span class="value">{{ detail.address }}</span>
              </div>
              <div class="detail-item">
                <span class="label">创建时间：</span>
                <span class="value">{{ detail.createTime }}</span>
              </div>
              <div class="detail-item">
                <span class="label">完成期限：</span>
                <span class="value">{{ detail.completionDeadline }}</span>
              </div>
            </div>
            <div class="item-col">
              <div class="detail-item">
                <span class="label">创建人：</span>
                <span class="value">{{ detail.unidName }}</span>
              </div>
              <div class="detail-item">
                <span class="label">状态：</span>
                <span class="value important" v-if="detail.status==0">待处理</span>
                <span class="value warn" v-else-if="detail.status==1">进行中</span>
                <span class="value normal" v-else-if="detail.status==2">已完成</span>
                <span class="value" v-else>已关闭</span>
              </div>
              <div class="detail-item">
                <span class="label">工单内容：</span>
                <span class="value">{{ detail.title }}</span>
              </div>
            </div>
            <div class="detail-item" v-if="detail.imgs">
              <el-image class="img" :preview-src-list="detail.imgs.split(',')" :src="src" v-for="(src, index) in detail.imgs.split(',')"></el-image>
            </div>
            <div class="item-title--warning" v-if="detail.follow && detail.follow.length>0">跟进信息</div>
            <template  v-for="item in detail.follow">
              <div class="item-col" >
                <div class="detail-item">
                  <span class="label">跟进人：</span>
                  <span class="value">{{ item.unidName }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">跟进地点：</span>
                  <span class="value">{{ item.address }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">完成率：</span>
                  <span class="value">{{ item.rate }}%</span>
                </div>
              </div>
              <div class="item-col">
                <div class="detail-item" style="flex: 2">
                  <span class="label">跟进内容：</span>
                  <span class="value">{{ item.title }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">跟进时间：</span>
                  <span class="value">{{ item.createTime }}</span>
                </div>
              </div>
              <div class="detail-item" v-if="item.img">
                <el-image class="img" :preview-src-list="item.img.split(',')" :src="src" v-for="(src, index) in item.img.split(',')"></el-image>
              </div>
              <div style="border-bottom: 1px solid #ffffff;margin: 10px 0;"></div>
            </template>
            <div class="item-title--warning" v-if="detail.evaluate && detail.evaluate.length>0">评价信息</div>
            <template v-for="item in detail.evaluate">
              <div class="item-col" >
                <div class="detail-item">
                  <span class="label">评价人：</span>
                  <span class="value warn">{{ item.unidName }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">评价内容：</span>
                  <span class="value">{{ item.title }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">评价时间：</span>
                  <span class="value">{{ item.createTime }}</span>
                </div>
              </div>
              <div class="detail-item" v-if="item.img">
                <el-image class="img" :preview-src-list="item.img.split(',')" :src="src" v-for="(src, index) in item.img.split(',')"></el-image>
              </div>
              <div style="border-bottom: 1px solid #ffffff;margin: 10px 0;"></div>
            </template>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {getDetailApi, getListApi} from '@/api/workOrder'
  let dialogVisible = ref(false)
  let list = ref([])
  let detail = ref({})
  const getList = async () => {
    let res = await getListApi()
    list.value = res.data
  }
  const showDetail = async (id) => {
    dialogVisible.value = true
    let res = await getDetailApi(id)
    console.log( res.data);
    detail.value = res.data
  }
  onMounted(() => {
    getList()
  })
</script>

<style lang="scss" scoped>
:deep(.el-dialog__headerbtn .el-dialog__close){
  color:#fff;
  font-size:40px;
  position:relative;
  top:15px;
  right:15px;
}
:deep(.el-dialog__header.show-close){
  padding-right:0;
}
:deep(.el-dialog) {
  background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
  background-size: 100% 100%;
  width:vw(1500);
}
:deep(.el-dialog__title) {
  color: #fff;
  font-weight: bold;
}
.m-modal{
  padding: vw(30);
  .normal {
    padding:3px 10px;
    background: #2380fb;
  }
  .warn {
    padding:3px 10px;
    background: #feae00;
  }
  .important {
    padding:3px 10px;
    background: #d9011b;
  }
  .item-title{
    font-size: 18px;
    margin-bottom: vw(30);
    &--primary {
      @extend .item-title;
      color: #02f9fa;
      background-image: url('@/assets/images/mask-primary.png');
      background-size: 100% 100%;
    }
    &--error {
      @extend .item-title;
      background-image: url('@/assets/images/mask-error.png');
      background-size: 100% 100%;
    }
    &--warning {
      @extend .item-title;
      background-image: url('@/assets/images/mask-warning.png');
      background-size: 100% 100%;
    }
    &--success {
      @extend .item-title;
      background-image: url('@/assets/images/mask-success.png');
      background-size: 100% 100%;
    }
  }
  .item-col{
    display: flex;
    justify-content: space-between;
  }
}
.detail-item {
  flex:1;
  margin-bottom: 12px;
  line-height: 1.5;
  .img{
    width:vw(200);
    height: vw(200);
    margin: 10px;
  }
}
.bom-box {
  .modal-body {
    padding: 16px;
    color:#fff;
    height:vh(780);
    overflow:auto;
    /* 滚动条整体样式 */
    &::-webkit-scrollbar {
      width: vw(4); /* 滚动条的宽度 */
    }
    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
      background: 'transparent'; /* 轨道的背景色 */
    }
    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
      border-radius: 5px; /* 滑块的圆角 */
    }
  }
}
  .work-box-1 {
    width: vw(815);
    height: vh(950);
    margin-top: vh(120);
    box-sizing: border-box;
    background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);

    padding: 0 vw(20);
    .list {
      /* 滚动条整体样式 */
      &::-webkit-scrollbar {
        width: vw(4); /* 滚动条的宽度 */
      }
      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: 'transparent'; /* 轨道的背景色 */
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
        border-radius: 5px; /* 滑块的圆角 */
      }
      height: vh(895);
      overflow: auto;
      .li:nth-child(odd) {
        background: rgba(3, 78, 153, 0.3);
      }
      .li:nth-child(even) {
        background-color: transparent;
      }
      .li {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: vh(8) vh(10);
        font-size: vw(14);
        .label {
          width: vw(60);
          height: vh(24);
          line-height: vh(24);
          color: #fff;
          border-radius: vw(2);
          font-size: vw(14);
          text-align: center;
          display: inline-block;
          margin-right: vw(10);
        }
        .normal {
          @extend .label;
          background: #2380fb;
        }
        .warn {
          @extend .label;
          background: #feae00;
        }
        .important {
          @extend .label;
          background: #d9011b;
        }
        .time,.btn {
          font-weight: 400;
          font-size: vw(12);
          color: rgba(255, 255, 255, 0.6);
          line-height: 14px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-left: vw(30);
        }
        .btn{
          font-size: vw(18);
          font-weight: bolder;
          color: #2380fb;
          cursor: pointer;
        }
        p {
          font-weight: 400;
          //font-size: vw(15);
          color: #ffffff;
          text-align: left;
          font-style: normal;
          text-transform: none;
          flex: 1;
          /*1. 先强制一行内显示文本*/
          white-space: nowrap;
          /*2. 超出的部分隐藏*/
          overflow: hidden;
          /*3. 文字用省略号替代超出的部分*/
          text-overflow: ellipsis;
        }
      }
    }
  }
</style>
