<template>
  <div class="play-material">
    <el-checkbox
      style="margin-bottom: 15px"
      v-model="checkAll"
      @change="handleCheckAllChange"
      >全选</el-checkbox
    >

    <el-button @click="confirmRemove" size="medium">批量删除</el-button>

    <el-checkbox-group v-model="selectList" class="material-list">
      <el-checkbox
        v-for="(item, index) in materialData.content"
        :key="index"
        :label="item.id"
        class="material-item"
      >
        <div class="content">
          <div class="row1">
            <img src="@/assets/img/zip.jpg" alt="" />
          </div>
          <p class="row2">{{ item.name }}</p>
          <div class="row3">
            <span>{{ item.pkg }}</span>
            <span>{{ item.datadate }}</span>
          </div>
        </div>
      </el-checkbox>
    </el-checkbox-group>

    <!-- 删除确认 -->

    <!-- 分页 -->
    <el-pagination
      v-show="materialData.total && materialData.total > 0"
      background
      :total="materialData.total"
      :page-size="paginationInfo.size"
      :current-page="paginationInfo.page"
      style="text-align: right; margin-bottom: 5px"
      layout="total, prev, pager, next, sizes"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
import { batchRemove } from "@/api/report";
export default {
  props: {
    materialData: {
      type: Object,
      require: true,
    },
  },

  data() {
    return {
      selectList: [], // 选中item
      checkAll: false, // 全选状态
      paginationInfo: {
        size: 20,
        page: 1,
      },
    };
  },

  created() {},

  methods: {
    // 批量删除
    _batchRemove() {
      let params = {
        ids: this.selectList.toString(),
      };
      batchRemove(params).then((res) => {
        if (res.status == 200) {
          this.$message.success("恭喜您, 删除成功");
          this.$emit("remove");
        } else {
          this.$message.warning("删除失败!");
        }
      });
    },

    // 全选
    handleCheckAllChange(val) {
      if (val) {
        const tempArr = this.materialData.content;
        tempArr.forEach((item) => {
          this.selectList.push(item.id);
        });
      } else {
        this.selectList = [];
      }
    },

    // 分页改变
    handleCurrentChange(val) {
      console.log(val);
      this.paginationInfo.page = val;
      this.$emit("paginationChange", this.paginationInfo);
    },

    handleSizeChange(val) {
      console.log(val);
      this.paginationInfo.size = val;
      this.$emit("paginationChange", this.paginationInfo);
    },

    // 确认删除
    confirmRemove() {
      if (this.selectList && this.selectList.length > 0) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this._batchRemove(); // 删除
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$message.warning("请您选择要删除的素材!");
        return;
      }
    },

    // 对外暴露的方法 取消已选择的素材
    centerSelect() {
      this.selectList = [];
    },
  },
};
</script>

<style>
.material-list .el-checkbox {
  margin-right: 0;
}

.material-item .el-checkbox__input {
  position: absolute !important;
  right: 5%;
  top: 5%;
}

.material-item .el-checkbox__label {
  padding: 0;
  width: 90%;
}
</style>

<style scoped>
.play-material {
  margin: 15px 0;
}
.material-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.material-item {
  width: 18%;
  height: 200px;
  padding: 8px;
  padding-bottom: 0;
  border: 1px dashed #eee;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 100%;
  overflow: hidden;
}

.row1 {
  display: flex;
  width: 100%;
  height: 130px;
  justify-content: center;
  align-items: center;
  background-color: #eee;
  opacity: 0.5;
}

.row1 img {
  width: 40%;
}

.row2 {
  margin: 6px 0;
}

.row3 {
  display: flex;
  justify-content: space-between;
}
</style>