<template>
  <div class="case-wrap">
    <div class="showAllDetail">
      <el-switch
        v-model="showAll"
        active-color="#13ce66"
        active-text="展开全部信息"
      >
      </el-switch>
    </div>
    <div class="moreDetail" v-show="!showAll">
      <div class="step-more-wrap">
        <div class="detail-wrap" v-for="(item, index) in tempList" :Key="index">
          <div class="leftLine" v-if="index != tempList.length - 1"></div>
          <div class="title">
            <div v-if="item.nextId" class="done"></div>
            <div v-else class="process"></div>
            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
            <span>{{ item.time }}</span>
          </div>
          <div class="content">
            <div class="left">
              <p>发送人:{{ item.sender }}</p>
              <p v-if="item.incept">接收人:{{ item.incept }}</p>
              <p class="text-over">
                处置详情:{{ item.detail ? item.detail : "暂无" }}
              </p>
            </div>
            <div class="right">
              <div class="imgs-wrap">
                <el-image
                  v-for="img in item.imgs"
                  :key="img"
                  :src="img"
                  class="zoom"
                  fit="fill"
                  :preview-src-list="caseImage(img)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moreDetail">
      <div class="step-more-wrap" v-show="showAll">
        <div class="detail-wrap" v-for="(item, index) in listData" :Key="index">
          <div class="leftLine" v-if="index != listData.length - 1"></div>
          <div class="title">
            <div v-if="item.nextId" class="done"></div>
            <div v-else class="process"></div>
            {{ item.processTitle }} &nbsp;&nbsp;&nbsp;&nbsp;
            <span>{{ item.time }}</span>
          </div>
          <div class="content">
            <div class="left">
              <p>发送人:{{ item.sender }}</p>
              <p v-if="item.incept">接收人:{{ item.incept }}</p>
              <p class="text-over">
                处置详情:{{ item.detail ? item.detail : "暂无" }}
              </p>
            </div>
            <div class="right">
              <div class="imgs-wrap">
                <el-image
                  v-for="img in item.imgs"
                  :key="img"
                  :src="img"
                  class="zoom"
                  fit="fill"
                  :preview-src-list="caseImage(img)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      showAll: false,
      photoVisible: false,
      bigImgUrl: "",
      imgs: [],
      listData: [], // 全部数据
      tempList: [], // 首尾数据
    };
  },
  watch: {
    list(val) {
      if (val.length >= 2) {
        this.tempList = [val[0], val.at(-1)];
      } else {
        this.tempList = [val[0]];
      }
      this.listData = val.map((item) => {
        // item.imgs = this.imgs;
        return item;
      });
    },
    deep: true,
    immediate: true,
  },
  created() {
    if (this.list.length >= 2) {
      this.tempList = [this.list[0], this.list.at(-1)];
    } else {
      this.tempList = [this.list[0]];
    }
    this.listData = this.list.map((item) => {
      // item.imgs = this.imgs;
      return item;
    });
  },
  methods: {
    showBigImage(e) {
      //点击图片函数，点击后，把photoVisible设置成true
      if (e != "") {
        this.photoVisible = true;
        this.bigImgUrl = e.currentTarget.src;
      }
    },
    caseImage(img) {
      return img ? [].concat(img) : [];
    },
  },
};
</script>

<style lang="scss" scoped>
.case-wrap {
  width: 60vw;
  padding-top: 20px;
}
.before::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 12px;
  left: -31px;
  width: 2px;
  height: 90%;
  border-left: 2px dashed #ccc;
}
.moreDetail {
  font-size: 14px !important;
  position: relative;
  margin-top: 20px;
}
.step-wrap {
  box-sizing: border-box;
  height: 300px;
  padding-left: 30px;
}
.step-wrap {
  .before {
    position: relative;
    height: 50%;
  }
  .after {
    position: relative;
    height: 50%;
  }
  .content {
    margin-top: 20px;
    width: 95%;
    height: 100px;
    background: #f0f0f0;
    padding: 20px 30px;
    border-radius: 10px;
    display: flex;

    .left {
      width: 420px;
      p {
        font-size: 14px !important;
        padding: 0;
        margin: 0;
        margin-top: 2px;
        line-height: 20px;
      }
    }
    .right {
      position: relative;
      flex: 1;
    }
  }
}
.title {
  font-weight: 800;
  span {
    color: #ccc;
    font-weight: 400 !important;
  }
}
.moreDetail .process {
  z-index: 10;
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url("../../../assets/global_images/process.png") no-repeat;
  position: absolute;
  top: -8px;
  left: -12px;
  background-size: contain;
}
.moreDetail .done {
  z-index: 10;
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url("../../../assets/global_images/done.png") no-repeat;
  position: absolute;
  bottom: -8px;
  left: -12px;
  background-size: contain;
}
.before .icon,
.after .icon {
  z-index: 10;
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url("../../../assets/global_images/done.png") no-repeat;
  position: absolute;
  top: -3px;
  left: -42px;
  background-size: contain;
}
.imgs-wrap {
  position: absolute;
  left: -5px;
  top: -10px;
  width: 400px;
  height: 80px;
  overflow-y: auto;
}
.text-over {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-over-more {
  overflow: hidden; // 溢出隐藏
  text-overflow: ellipsis; // 溢出用省略号显示
  display: -webkit-box; // 作为弹性伸缩盒子模型显示。
  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
  -webkit-line-clamp: 2; // 显示的行数
}
/deep/.zoom {
  display: inline-block;
  box-sizing: border-box;
  width: 120px;
  height: 70px;
  margin-right: 10px;
  margin-top: 5px;
  cursor: pointer;
}
.leftLine {
  position: absolute;
  top: 18px;
  left: -19px;
  width: 2px;
  height: 99%;
  border-left: 2px dashed #ccc;
}
.moreDetail {
  .step-more-wrap {
    box-sizing: border-box;
    padding-left: 30px;
    height: 360px;
    overflow-y: auto;
    .detail-wrap {
      margin-top: 3px;
      margin-bottom: 20px;
      position: relative;
      .title {
        position: relative;
        .process {
          z-index: 10 !important;
          position: absolute;
          top: -3px;
          left: -30px;
          width: 25px;
          height: 25px;
          background: url("../../../assets/global_images/process.png") no-repeat;
          background-size: contain;
        }
        .done {
          z-index: 10 !important;
          position: absolute;
          top: -3px;
          left: -30px;
          width: 25px;
          height: 25px;
          background: url("../../../assets/global_images/done.png") no-repeat;
          background-size: contain;
        }
      }
      p {
        font-size: 14px !important;
        padding: 0;
        margin: 0;
        margin-top: 2px;
        line-height: 20px;
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .content {
        margin-top: 20px;
        width: 96%;
        height: 100px;
        background: #f0f0f0;
        padding: 20px 30px;
        border-radius: 10px;
        display: flex;

        .left {
          width: 420px;
          p {
            font-size: 14px !important;
            padding: 0;
            margin: 0;
            margin-top: 2px;
            line-height: 20px;
          }
        }
        .right {
          position: relative;
          flex: 1;
        }
      }
    }
  }
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.1);
}
</style>