<style>
.assignment {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2018;
  display: flex;
  align-items: center;
  justify-content: center;
}
.assignment .assignment_bg {
  height: 718px;
  width: 872px;
  background: url("../../../assets/img/task/renwu_bg.png");
  background-size: 100% 100%;
  position: relative;
}
.assignment .assignment_close {
  position: absolute;
  top: 145px;
  right: -10px;
  cursor: pointer;
}
.assignment .assignment_box {
  margin-top: 258px;
  height: 405px;
  padding: 0 0 0 85px;
  overflow: auto;
  margin-right: 85px;
}
.assignment .assignment_box::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 14px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 47px;
}
.assignment .assignment_box::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 4px;
  background: rgba(255, 197, 21, 1);
}
.assignment .assignment_box::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 4px;
  background: rgba(204, 68, 39, 1);
}
.assignment .assignment_box .assignment_item {
  margin: 0 25px 5px 0;
  padding: 7px 16px;
  display: flex;
  align-items: center;
  background-color: rgba(255, 231, 85, 1);
  background-image: -webkit-linear-gradient(#ffe34d, #ffc208);
  background-image: linear-gradient(#ffe34d, #ffc208);
  border-radius: 8px;
}
.assignment .assignment_box .assignment_item .item_img {
  width: 83px;
  height: 83px;
  margin-right: 14px;
  background: url("../../../assets/img/task/renwu_left_bg.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.assignment .assignment_box .assignment_item .item_info {
  margin-right: 36px;
}
.assignment .assignment_box .assignment_item .item_info ._name {
  font-size: 32px;
  font-family: "PingFangR";
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  -webkit-text-stroke: 2px rgba(185, 51, 0, 1);
  min-width: 350px;
  max-width: 350px;
  overflow: hidden;
}
.assignment .assignment_box .assignment_item .item_info ._info {
  font-size: 16px;
  font-family: "PingFangR";
  font-weight: bold;
  color: rgba(180, 64, 47, 1);
}
.assignment .assignment_box .assignment_item .item_btn img {
  display: block;
  cursor: pointer;
}
.assignment .assignment_box .assignment_item .item_btn ._gray {
  background-color: #CCCCCC;
  color: white;
  display: inline-block;
  width: 148px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  font-size: 28px;
  font-family: "PingFangR";
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  border-radius: 17px
}
.assignment .assignment_box .assignment_item .item_btn ._gray._green{
  background-color: #5FBF8D;
}
</style>
<template>
  <div class="assignment">
    <div class="assignment_bg" :style="{zoom: zoom}">
      <ul class="assignment_box">
        <li class="assignment_item" v-for="(item, index) in dataList">
          <div class="item_img">
            <img src="../../../assets/img/task/bingqiling1.png" alt>
          </div>
          <div class="item_info">
            <p class="_name">{{item.taskName}}</p>
            <p class="_info">{{item.awardMaterials}}</p>
          </div>
          <div class="item_btn">
            <img v-if="item.taskStatus === 0" src="../../../assets/img/task/renwu_qu.png" @click="goUrl(item.taskLink)">
            <span class="_gray _green" v-else-if="item.taskStatus === 1">已完成</span>
            <span class="_gray" v-else>未完成</span>
          </div>
        </li>
      </ul>
      <div
        @mouseover="closeShow = 1"
        @mouseout="closeShow = 2"
        class="assignment_close"
        @click="close"
      >
        <img v-if="closeShow === 2" src="../../../assets/img/task/renwu_close.png" alt>
        <img v-else src="../../../assets/img/task/renwu_close.png" alt>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["zoom"],
  data() {
    return {
      closeShow: 2,
      dataList: [],
    };
  },
  methods: {
    getTask: function(customerId) {
      let msg = {
        customerId: customerId,
        activityId: 1
      };
      this.apiJavaPost(
        "/api/mactivity/getTask",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            let data = res.data.data
            this.dataList = data;
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    close: function() {
      this.$emit("closeMyWindow", "myAssignment");
    },
    goUrl: function (path) {
      this.$router.push({path: path});
    }
  },
  mounted() {
    let userInfo = JSON.parse(localStorage.userInfo)
    this.getTask(userInfo.customerId);
  }
};
</script>
