<template>
  <!-- <div class="home"> -->
  <!-- <div class="box" @mouseout="out" @mouseover="over">
      <div class="boxChild"  v-for="(item, index) in list"  v-show="listIndex === index"
          :key="index">
        <div class="fathBox"></div>
        <div class="fath2Box">
          <div style="margin-left: 21px;margin-top: 8px;">
            <span style="color:#82DDDB;">派单时间：</span>
            <span style="color:#fff;">{{item.value}}</span>
          </div>
          <div style="margin-left: 21px;margin-top: 8px;">
            <span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">整改人：</span>
            <span style="color:#fff;">陈晓红</span>
          </div>
          <div style="margin-left: 21px;margin-top: 8px;">
            <span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">状态：</span>
            <span style="color:#EAA505;">待处理</span>
          </div>
          <div style="margin-left: 21px;margin-top: 8px;">
            <span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">隐患内容：</span>
            <span style="color:#fff;">现场作业准备</span>
          </div>
          <div style="margin-left: 21px;margin-top: 8px;">
            <span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">隐患内容：</span>
            <span style="color:#fff;">上方悬挂摇晃</span>
          </div>
        </div>
      </div>
      <p class="left" @click="changePage(prevIndex)"></p>
      <p class="right" @click="changePage(nextIndex)"></p>
    </div> -->
  <!-- </div> -->
  <el-carousel indicator-position="1000" :autoplay="true" ref="carousel">
    <el-carousel-item v-for="(item, index) in list" :key="index">
      <div class="home">
        <div class="box">
          <div class="boxChild">
            <div class="fathBox"></div>
            <div class="fath2Box">
              <div style="margin-left: 21px; margin-top: 8px">
                <span style="color: #82dddb">派单时间：</span>
                <span style="color: #fff">{{ item.allocateDate }}</span>
              </div>
              <div style="margin-left: 21px; margin-top: 8px">
                <span
                  style="
                    color: #82dddb;
                    width: 71px;
                    text-align-last: justify;
                    display: inline-block;
                  "
                  >整改人：</span
                >
                <span style="color: #fff">{{ item.rectifier }}</span>
              </div>
              <div style="margin-left: 21px; margin-top: 8px">
                <span
                  style="
                    color: #82dddb;
                    width: 71px;
                    text-align-last: justify;
                    display: inline-block;
                  "
                  >状态：</span
                >
                <span style="color: #eaa505">{{ item.status }}</span>
              </div>
              <div style="margin-left: 21px; margin-top: 8px">
                <span
                  style="
                    color: #82dddb;
                    width: 71px;
                    text-align-last: justify;
                    display: inline-block;
                  "
                  >隐患内容：</span
                >
                <span style="color: #fff">{{ item.troubleContent }}</span>
              </div>
              <div style="margin-left: 21px; margin-top: 8px">
                <span
                  style="
                    color: #82dddb;
                    width: 71px;
                    vertical-align: top;
                    text-align-last: justify;
                    display: inline-block;
                  "
                  >隐患内容：</span
                >
                <span style="color: #fff; display: inline-block; width: 90px">{{
                  item.troubleMark
                }}</span>
              </div>
            </div>
          </div>
        </div>

        <p class="left" @click="changePage(1)"></p>
        <p class="right" @click="changePage(2)"></p>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import { getResolveTroublePage } from "../api/api";
export default {
  components: {},
  props: {},
  data() {
    return {
      list: [],
      listIndex: 0, //默认显示第几张图片
      timer: null, //定时器
    };
  },
  computed: {
    //上一张
    prevIndex() {
      if (this.listIndex == 0) {
        return this.list.length - 1;
      } else {
        return this.listIndex - 1;
      }
    },
    //下一张
    nextIndex() {
      if (this.listIndex == this.list.length - 1) {
        return 0;
      } else {
        return this.listIndex + 1;
      }
    },
  },
  methods: {
    getData() {
      getResolveTroublePage({
        projectId: sessionStorage.getItem("projectId"),
        size: 100,
        current: 1,
      }).then((res) => {
        this.list = Object.keys(res.data.data.records).map((item, index) => {
          if (res.data.data.records[item].status == 0) {
            res.data.data.records[item].status = "未完成";
          } else {
            res.data.data.records[item].status = "已完成";
          }
          return {
            allocateDate: res.data.data.records[item].allocateDate,
            rectifier: res.data.data.records[item].rectifier,
            status: res.data.data.records[item].status,
            troubleContent: res.data.data.records[item].troubleContent,
            troubleMark: res.data.data.records[item].troubleMark,
          };
        });
      });
    },
    changePage(index) {
      if (index == 1) {
        this.$refs.carousel.prev();
      } else {
        this.$refs.carousel.next();
      }
      // this.listIndex = index;
    },
    //移除
    out() {
      this.setTimer();
    },
    //移入
    over() {
      clearInterval(this.timer);
    },
    //1秒切图
    setTimer() {
      this.timer = setInterval(() => {
        this.listIndex++;
        if (this.listIndex == this.list.length) {
          this.listIndex = 0;
        }
      }, 1000);
    },
  },
  created() {
    //定时器
    this.setTimer();
  },
  mounted() {
    this.getData();
  },
};
</script>

<style scoped lang="less">
@marginLeft: 50px;
.home {
  display: flex;
  align-items: center;
  margin-left: @marginLeft;
  .boxChild {
    display: flex;

    .fathBox {
      width: 152px;
      height: 146px;
      background: url("~@/assets/pic/23.png") no-repeat;
      background-size: 100% 100%;
    }

    .fath2Box {
      span {
        font-size: 14px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
      }
    }
  }

  // .box {
  //   position: relative;
  //    width: 30px;
  //    height: 30px;
  //    img {
  //      width: 100%;
  //      height: 100%;
  //      z-index: 100;
  //    }
  //   p {
  //     cursor: pointer;
  //     color: white;
  //     font-size: 28px;
  //     display: flex;
  //     justify-content: center;
  //     align-items: center;
  //     width: 50px;
  //     height: 50px;
  //     background: rgba(0, 0, 0, 0.5);
  //   }
  .left {
    position: absolute;
    top: 51px;
    left: 10px;
    width: 23px;
    height: 32px;
    background: url("~@/assets/pic/left.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;

    @media only screen and (max-height: 1000px) {
      top: 31px;
    }
  }

  .right {
    position: absolute;
    top: 51px;
    width: 23px;
    background: url("~@/assets/pic/right.png") no-repeat;
    height: 32px;
    right: 10px;
    cursor: pointer;

    @media only screen and (max-height: 1000px) {
      top: 31px;
    }
  }

  //   ul {
  //     list-style: none;
  //     display: flex;
  //     justify-content: space-around;
  //     align-items: center;
  //     position: absolute;
  //     width: 150px;
  //     height: 20px;
  //     top: 90%;
  //     right: 35%;
  //     .color {
  //       background: red;
  //       color: red;
  //     }
  //     li {
  //       cursor: pointer;
  //       width: 10px;
  //       height: 10px;
  //       background: white;
  //       border-radius: 50%;
  //     }
  //   }
  // }
}
</style>
<style>
.el-carousel__arrow--left,
.el-carousel__arrow--right {
  display: none;
}
.el-carousel__container {
  position: relative;
  height: 180px !important;
}
</style>
