<template>
  <div class="search-bar">
    <a-tabs v-model:activeKey="search.is_public" @change="onSubmit">
      <a-tab-pane :key="1" tab="公共素材"></a-tab-pane>
      <a-tab-pane :key="0" tab="我的上传"></a-tab-pane>
    </a-tabs>
    <div class="search-item">
      <span class="label">{{
        type === "video" ? "视频名称：" : "图片名称："
      }}</span>
      <a-input
        v-model:value="search.videoName"
        v-if="type === 'video'"
        placeholder="请输入"
      />
      <a-input
        v-model:value="search.imageName"
        v-if="type === 'picture'"
        placeholder="请输入"
      />
    </div>
    <div class="search-item">
      <span class="label">{{
        type === "video" ? "视频类型：" : "图片类型："
      }}</span>
      <a-select
        placeholder="请选择"
        style="width: 200px"
        v-if="type === 'video'"
        v-model:value="search.videotype"
        allowClear
      >
        <a-select-option value="H">横版视频</a-select-option>
        <a-select-option value="S">竖版视频</a-select-option>
      </a-select>
      <a-select
        placeholder="请选择"
        style="width: 200px"
        v-if="type === 'picture'"
        v-model:value="search.imagetype"
        allowClear
      >
        <a-select-option value="H">横版大图</a-select-option>
        <a-select-option value="S">竖版大图</a-select-option>
        <a-select-option value="X">小图</a-select-option>
      </a-select>
    </div>
    <div class="search-item">
      <span class="label">推广书籍：</span>
      <!-- <a-select
        allowClear
        style="width: 200px"
        v-model:value="search.bookname"
        placeholder="请选择"
        show-search
        :filter-option="filterOption"
      >
        <a-select-option
          v-for="(item, index) in bookList"
          :key="index"
          :value="item.book_name"
          >{{ item.book_name }}</a-select-option
        >
      </a-select> -->
      <a-input
        v-model:value="search.bookname"
        placeholder="请输入"
      />
    </div>
    <span class="flag" @click="openFlag = openFlag ? false : true"
      >{{ openFlag ? "收起" : "展开" }}
      <i v-if="openFlag" class="iconfont icon-shouqi"></i>
      <i v-else class="iconfont icon-zhankai"></i
    ></span>
    <div class="search-item" v-show="openFlag">
      <span class="label">需求方：</span>
      <a-input
        v-model:value="search.demander"
        type="text"
        placeholder="请输入"
      />
    </div>
    <div class="search-item" v-show="openFlag">
      <span class="label">文案：</span>
      <a-input v-model:value="search.editor" type="text" placeholder="请输入" />
    </div>
    <div class="search-item" v-show="openFlag">
      <span class="label">上传者：</span>
      <a-input
        v-model:value="search.uploader"
        type="text"
        placeholder="请输入"
      />
    </div>
    <div class="search-item">
      <span class="label"></span>
      <a-button type="primary" @click="onSubmit">搜索</a-button>
      <a-button style="margin-left: 10px" @click="reset">重置</a-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { message } from "ant-design-vue";
import { getLandingBooks } from "@/api";
const PictureLibrary = defineComponent({
  components: {},
  props: ["materialType"],
  setup(props) {
    const state = reactive({
      type: "", // 组件类型： video:picture
      openFlag: true, // 展开/收起
      bookList: ref<any[]>([]),
      search: {
        is_public: 1, // 1公共素材 0个人素材
        videoName: "", // 视频名称
        videotype: undefined, // 视频类型
        imageName: "", // 图片名称
        imagetype: undefined, // 图片类型
        bookname: '', // 推广书籍
        demander: "", // 需求方
        editor: "", // 文案
        uploader: "", // 上传者
      },
    });
    const filterOption = (input: string, option: any) => {
      return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };
    return { ...toRefs(state), filterOption };
  },

  mounted() {
    this.type = this.$props.materialType;
    this.onSubmit();
    this.getBookList();
  },
  methods: {
    // 获取推广书籍列表
    async getBookList() {
      let { data } = await getLandingBooks();
      this.bookList = data.list;
    },
    // 搜索
    onSubmit() {
      let param: any = {
        is_public: this.search.is_public,
      };
      // book_name: this.search.bookname,
      // demander: this.search.demander,
      // editor: this.search.editor,
      // uploader: this.search.uploader,
      if (this.search.bookname) param.book_name = this.search.bookname;
      if (this.search.demander) param.demander = this.search.demander;
      if (this.search.editor) param.editor = this.search.editor;
      if (this.search.uploader) param.uploader = this.search.uploader;
      if (this.type === "video") {
        param.video_name = this.search.videoName;
        param.video_type = this.search.videotype;
      }
      if (this.type === "picture") {
        param.image_name = this.search.imageName;
        param.image_type = this.search.imagetype;
      }
      console.log("上传搜索条件", param);
      this.$emit("search", param);
    },
    // 重置
    reset() {
      this.search = {
        is_public: this.search.is_public, // 1公共素材 0个人素材
        videoName: "", // 视频名称
        videotype: undefined, // 视频类型
        imageName: "", // 图片名称
        imagetype: undefined, // 图片类型
        bookname: '', // 推广书籍
        demander: "", // 需求方
        editor: "", // 文案
        uploader: "", // 上传者
      };
    },
  },
});

export default PictureLibrary;
</script>
<style lang="scss" scoped>
@import "@/assets/common-style/frame.scss";
.search-bar {
  background: white;
  overflow: hidden;
  width: 100%;
  border-bottom: 1px solid rgb(204, 203, 203);
  .search-item {
    width: 25%;
    margin-left: 20px;
    float: left;
    display: flex;
    // justify-content: center;
    align-items: center;
    height: 50px;
    line-height: 50px;
    .label {
      width: 100px;
      height: 30px;
      line-height: 30px;
      display: block;
      text-align: right;
    }
    .ant-input,
    .ant-select-selector {
      width: 200px;
    }
  }
  .flag {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    &:hover {
      color: rgb(6, 138, 190);
    }
  }
}
</style>
