<template>
  <div class="classBox">
    <div class="typeBox">
      <div :class="typeArray.length == 0 ? 'isNoArray' : type != 2 ? 'type' : 'istype'" @click="setType(2)">
        <div>完成情况</div>
        <div :class="type != 2 ? 'more' : 'isMore'"></div>
      </div>
      <div :class="type != 1 ? 'type' : 'istype'" @click="setType(1)" v-if="typeArray.length">
        <div>问卷类型</div>
        <div :class="type != 1 ? 'more' : 'isMore'"></div>
      </div>
    </div>
    <div class="typeAllBox" v-if="type == 1">
      <div class="allStatusType">
        <div @click="chooseTypeArray(item.id)" class="status" v-for="(item, index) in typeArray" :key="index">
          <div :style="{ color: typeCheck == item.id ? '#3681fc' : '#000' }">{{ item.name }}</div>
          <div v-if="typeCheck == item.id" class="chooseIcon">
            <img src="../../../assets/images/testStudent/choose.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="typeAllBox" v-if="type == 2">
      <div class="allStatusType">
        <div @click="chooseGroupA(item.id)" class="status" v-for="(item, index) in groupAType" :key="index">
          <div :style="{ color: groupA == item.id ? '#3681fc' : '#000' }">{{ item.name }}</div>
          <div v-if="groupA == item.id" class="chooseIcon">
            <img src="../../../assets/images/testStudent/choose.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="mask" @click="setType(0)" v-if="type == 1 || type == 2"></div>
  </div>
</template>

<script>
import { selectTestType } from '@/api/testStudent'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      type: 0,
      groupA: 0,
      groupAType: [
        { id: 0, name: '全部' },
        { id: 4, name: '逾期' },
        { id: 2, name: '未完成' },
        { id: 1, name: '已完成' }
      ],
      typeArray: [],
      typeCheck: ''
    }
  },
  computed: {
    ...mapGetters(['userinfo'])
  },
  methods: {
    setType(t) {
      if (t == 0) {
        this.type = 0
      } else {
        if ((t == 1 && this.type == 1) || (t == 2 && this.type == 2)) {
          this.type = 0
        } else {
          this.type = t
        }
        this.getAll()
      }
      this.$forceUpdate()
    },
    chooseGroupA(id) {
      this.groupA = id
      this.type = 0
      this.getAll()
      this.$forceUpdate()
    },
    chooseTypeArray(id) {
      this.typeCheck = id
      this.type = 0
      this.getAll()
      this.$forceUpdate()
    },
    selectTestType() {
      const params = {
        oid: this.userinfo.organizeid && this.userinfo.organizeid !== '' ? this.userinfo.organizeid : ''
      }
      selectTestType(params)
        .then(res => {
          this.typeArray = res[0]
        })
        .catch(err => {
          console.log(err)
        })
    },
    getAll() {
      this.$emit('getAll', this.groupA, this.typeCheck)
    }
  },
  mounted() {
    this.selectTestType()
  }
}
</script>

<style lang="scss" scoped>
.classBox {
  height: 40px;
  box-sizing: border-box;
  position: relative;
  background: #fff;
  .typeBox {
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    width: 100%;
    z-index: 99;
    height: 40px;
    .type,
    .istype,
    .isNoArray {
      width: calc(100% / 2);
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      cursor: pointer;
      .more,
      .isMore {
        margin-left: 5px;
        min-width: 10px;
        width: 10px;
        height: 10px;
        background-image: url(../../../assets/images/testStudent/more.png);
        background-size: 100% 100%;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .isMore {
        transform: rotate(180deg);
        background-image: url(../../../assets/images/testStudent/isMore.png);
        background-size: 100% 100%;
      }
    }
    .istype {
      color: #4f91fc;
    }
    .isNoArray {
      width: 30%;
    }
  }
  .typeAllBox {
    position: relative;
    top: 0;
    left: 0;
    z-index: 9;
    .allStatusType {
      background: #fff;
      .status {
        position: relative;
        width: 100%;
        height: 30px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        font-size: 16px;
        .chooseIcon {
          position: absolute;
          right: 50px;
          top: 18px;
          width: 15px;
          min-width: 15px;
          height: 15px;
          > img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.mask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 95px;
  background: #000;
  opacity: 0.5;
  z-index: 1;
}
</style>
