<template>
  <div>
    <div class="checkboxs">
      <van-cell
        clickable
        v-for="o in list"
        :key="o.value"
        :title="o.text"
        @click="o.checked = !o.checked"
      >
        <template #right-icon>
          <van-checkbox :value="o.checked" :name="o.value" />
        </template>
      </van-cell>
    </div>
    <van-cell class="selectStudent-action-cell" center>
      <template #title>
        <van-checkbox
          style="margin-right: 15px"
          :value="checkAll"
          @click="setCheckAll"
          >全选<span v-if="getSelectedLength">(已选 {{getSelectedLength}})</span>
        </van-checkbox>
      </template>
      <van-button size="small" round block style="margin-right: 10px;" @click="onreSet"
        >重置</van-button
      >
      <van-button size="small" round block type="info" @click="onFilter"
        >确定</van-button
      >
    </van-cell>
    <!-- <van-goods-action>
      <van-checkbox
        style="margin-right: 15px"
        :value="checkAll"
        @click="setCheckAll"
        >全选</van-checkbox
      >

      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onFilter"
      />
    </van-goods-action> -->
  </div>
</template>

<script>
export default {
  name: "dropSelect",
  props: {
    time: {
      type: Number,
      default: 0,
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    time() {
      console.log(1);
    },
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    checkAll() {
      if (this.list) {
        const total = this.list.filter((n) => n.checked).length;
        if (total === 0) return false;
        return total === this.list.length;
      }
      return false;
    },

    getSelectedLength(){
      return this.list.filter((n) => n.checked).length
    }
  },
  mounted() {
    this.list = this.options.map((n) => {
      return {
        ...n,
      };
    });
  },
  methods: {
    setCheckAll() {
      const checkAll = this.checkAll;
      this.list.forEach((n) => (n.checked = !checkAll));
    },

    setList() {
      this.list = this.options.map((n) => {
        return {
          ...n,
        };
      });
    },

    onFilter() {
      this.$emit("onFilter", this.list);
    },

    onreSet(){
      this.list.forEach((n) => (n.checked = false));
    }
  },
};
</script>

<style lang="less">
.selectStudent-action-cell {
  box-shadow: 0 -2px 12px rgba(100, 101, 102, 0.12);
  .van-cell__title {
    flex: inherit;
    width: 1.3rem;
  }
  .van-cell__value {
    margin: 0 auto;
    display: flex;
  }
}
</style>
