<template>
  <div class="material-select">
    <a-tabs
      v-model:activeKey="search.is_public"
      @change="onSearch"
      size="small"
    >
      <a-tab-pane :key="1" tab="公共素材"></a-tab-pane>
      <a-tab-pane :key="0" tab="我的上传"></a-tab-pane>
    </a-tabs>
    <a-input-search
      v-model:value="search.name"
      :placeholder="type === 'video' ? '请输入视频名称' : '请输入图片名称'"
      style="width: 200px; margin-right: 20px"
      @search="onSearch"
    />
    <a-input-search
      v-model:value="search.bookname"
      placeholder="请输入推广书籍"
      style="width: 200px; margin-right: 20px"
      @search="onSearch"
    />
    <a-input-search
      v-model:value="search.demander"
      placeholder="请输入需求方"
      style="width: 200px; margin-right: 20px"
      @search="onSearch"
    />
    <a-spin :spinning="loading">
      <div class="content-box">
        <div
          :class="{ 'item-box': true, checked: item.checked }"
          v-for="item in list"
          :key="item.id"
          @click.stop="checkedChange(item)"
        >
          <a-checkbox
            class="checkbox"
            v-model:checked="item.checked"
            @change="checkedChange(item)"
          ></a-checkbox>
          <div class="play-box">
            <div class="player">
              <video v-if="item.video_type" :src="item.url"></video>
              <img v-if="item.image_type" :src="item.url" alt="" />
            </div>
          </div>
          <div class="title-box">{{ item.name }}</div>
        </div>
      </div>
    </a-spin>
    <a-pagination
      v-model:current="meta.current_page"
      :total="meta.total"
      show-less-items
      style="float: right; margin: 10px 10px 0 0"
      size="small"
      @change="onSearch"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { getVideoList, getImageList } from "@/api";
import { message } from "ant-design-vue";
import usePagination from "@/hooks/usePagination";

const materialSelect = defineComponent({
  props: ["materialType"],
  setup(props) {
    let { meta, tablePageOptions } = usePagination();
    const state = reactive({
      checkItem: {
        id: 0,
      },
      type: "video",
      loading: false,
      search: {
        is_public: 1, // 1公共素材 0个人素材
        name: "", // 视频/图片名称
        bookname: "", // 推广书籍
        demander: "", // 需求方
      },
      list: ref<any[]>([]),
    });
    const onSearch = async (page?: any) => {
      console.log("sss", page);
      state.loading = true;
      let param: any = {
        ...state.search,
      };
      delete param.name;
      if (state.type === "video") {
        param.video_name = state.search.name;
      } else {
        param.image_name = state.search.name;
      }
      let api = state.type === "video" ? getVideoList : getImageList;
      let { data } = await api({
        page: page ? page : 1,
        ...param,
      });
      console.log("素材库数据", data);
      state.loading = false;
      state.list = data.list;
      if (state.list.length > 0) {
        state.list.forEach((item) => {
          item.checked = false;
        });
      }
      meta.value = data.meta;
    };
    return { ...toRefs(state), onSearch, meta };
  },
  mounted() {
    this.type = this.$props.materialType;
    console.log("type", this.type);
    console.log("meta", this.meta);
    this.onSearch();
  },
  methods: {
    // 切换选中项
    checkedChange(val: any) {
      this.list.forEach((item) => {
        item.checked = false;
        if (item.id === val.id) {
          item.checked = true;
        }
      });
      this.checkItem = val;
      console.log(this.checkItem);
    },
    // 返回选中的素材
    backMaterial() {
      if (!this.checkItem.id) {
        return { flag: false, material: {} };
      } else {
        return { flag: true, material: this.checkItem };
      }
    },
  },
});

export default materialSelect;
</script>
<style lang="scss" scoped>
.material-select {
  overflow: hidden;
  .content-box {
    min-height: 100px;
    margin-top: 10px;
    .item-box {
      width: 200px;
      height: 160px;
      border: 1px solid rgb(168, 166, 166);
      float: left;
      margin-right: 20px;
      margin-bottom: 10px;
      cursor: pointer;
      position: relative;
      .checkbox {
        position: absolute;
        top: 10px;
        right: 10px;
      }
      .play-box {
        width: 100%;
        height: 130px;
        background: rgb(128, 128, 128);
        .player {
          width: 80px;
          margin: 0 auto;
          height: 100%;
          background: rgb(191, 193, 194);
          display: flex;
          justify-content: center;
          align-items: center;
          img,
          video {
            max-width: 100%;
            max-height: 100%;
          }
        }
      }
      .title-box {
        width: 100%;
        height: 38px;
        padding-left: 10px;
      }
    }
    .checked {
      border: 2px solid rgb(4, 77, 187);
    }
  }
}
</style>
