<template>
  <div class="listcom-box">
    <div class="list-box">
      <van-checkbox-group v-model="checked" ref="checkboxGroup">
        <van-cell-group>
          <van-pull-refresh v-model="refreshing" @refresh="onLoad">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-swipe-cell
                v-for="(item, index) in list"
                :key="index"
                :disabled="isChoose"
              >
                <van-cell
                  class="cell-box"
                  clickable
                  :title="`${item.id}. ${item.issue}`"
                  @click="goExercise(item)"
                >
                  <template slot="icon" >
                    <van-checkbox v-if="isChoose" :name="item.id" class="checkbox" />
                  </template>
                </van-cell>
                <template #right>
                  <van-button
                    square
                    style="height: 100%"
                    type="danger"
                    text="删除"
                    @click="deleteClick(item.id)"
                  />
                  <van-button
                    square
                    style="height: 100%"
                    type="primary"
                    text="收藏"
                    @click="collectionClick(item.id)"
                    v-if="props.type == 'wrong'"
                  />
                </template>
              </van-swipe-cell>
            </van-list>
          </van-pull-refresh>
        </van-cell-group>
      </van-checkbox-group>
    </div>
    <div class="bottom-cell">
      <div>
        <span v-if="!isChoose" @click="isChoose = true">批量选中</span>
        <div class="choose" v-else>
          <van-checkbox v-model="isSelectAll">全选</van-checkbox>
          <span
            @click="
              isChoose = false;
              unSelectAll();
            "
            >取消</span
          >
        </div>
      </div>
      <div>
        <div class="operate">
          <van-button
            round
            type="danger"
            size="small"
            :disabled="checked.length == 0"
            @click="deletesClick"
            >删除选中</van-button
          >
          <van-button
            round
            type="primary"
            size="small"
            :disabled="checked.length == 0"
            @click="collectionClick"
            v-if="type == 'wrong'"
            >移入收藏夹</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
	data() {
		return {
			list:[]
		}
	},
  props: {
    type: {
      type: String,
      default:'wrong'
    },
  },
	methods: {
		name() {
			
		}
	},
};
</script>



<style lang="scss" scoped>
.listcom-box {
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
}

.list-box {
  flex-grow: 1;
  overflow-y: auto;
  .cell-box {
    min-height: 70px;
  }
}
.checkbox {
  margin-right: 5px;
}
.bottom-cell {
  flex-shrink: 0;
  border-top: 1px solid #bdbaba;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 50px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 400;
  font-family: PingFang SC;
  background-color: #ffffff;
  padding: 10px 15px;
  .choose {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100px;
  }
  .operate {
    display: flex;
    justify-content: space-between;

    span {
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      border-radius: 15px;

      &:nth-of-type(1) {
        background-color: #ff4d53;
      }
      &:active {
        filter: brightness(50%);
      }
      &:nth-of-type(2) {
        background-color: #498ef5;
      }
    }
  }
}
</style>
