<template>
  <div class="doc_manage_container">
    <apass-list
      ref="list"
      search-placeholder="请输入关键字"
      :list-padding-left="paddingLeft"
      :hide-search="true"
      :list-total="listTotal"
      :list-header="listHeader"
      :list-data="listData"
      @list-action="init"
    >
      <el-breadcrumb separator="/" slot="breadcrumb">
        <el-breadcrumb-item to="/technical_support">
          技术支持
        </el-breadcrumb-item>
        <el-breadcrumb-item to="/technical_support/doc_manage">
          SDK管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          SDK类型管理
        </el-breadcrumb-item>
      </el-breadcrumb>

      <template slot="top">
        <div class="top_fliter">
          <show-more-filter class="filter_list">
            <div class="filter_item">
              <span class="filter_title">SDK类型：</span>
              <el-select v-model="topFilter.type" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option
                  v-for="(item, index) in types"
                  :key="'top_type_' + index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="filter_item">
              <span class="filter_title">最后更新时间：</span>
              <el-date-picker
                v-model="topFilter.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </show-more-filter>
          <div class="filter_action apaas_button">
            <el-button type="primary" @click="topFilterAction">
              查询
            </el-button>
            <el-button type="defalut" @click="topFilterClear">
              重置
            </el-button>
          </div>
        </div>
      </template>

      <div class="main_top_action apaas_button" slot="main-top">
        <el-button class="delete_btn" type="danger" @click="deleteSlectedItem">
          批量删除
        </el-button>
        <span class="selected_text">
          已选择
          <span>3</span>
          项
        </span>
        <a class="clean_btn" @click.prevent="cleanSlectedItem">清空</a>
        <el-button class="add_btn" type="primary" @click="addNewSdk">
          新增SDK类型
        </el-button>
      </div>
    </apass-list>
  </div>
</template>

<script>
import helper from "@/services/helper.js";
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";
import showMoreFilter from "@/components/show-more-filter";

export default {
  components: {
    apassList,
    apassDialog,
    showMoreFilter,
  },
  data() {
    return {
      paddingLeft: 25,
      listTotal: 0,
      listHeader: [{}],
      listData: [],
      topFilter: {
        type: "",
        time: "",
      },
      types: [],
      tempFilter: {},
    };
  },
  methods: {
    init(filter) {
      let fullFilter = {
        ...filter,
        ...this.topFilter,
      };

      this.tempFilter = filter;

      console.log(fullFilter);
    },
    topFilterClear() {
      this.topFilter = {
        name: "",
        type: "",
        time: "",
      };
      this.refreshPage();
    },
    topFilterAction() {
      this.refreshPage();
    },
    refreshPage() {
      this.$refs.list.resetCurrentPage();
    },
    deleteSlectedItem() {
      console.log("deleteSlectedItem");
    },
    cleanSlectedItem() {
      console.log("cleanSlectedItem");
    },
    addNewSdk() {
      console.log("addNewSdk");
    },
  },
};
</script>

<style>
.main_top_action {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.main_top_action .delete_btn {
}
.main_top_action .selected_text {
  margin-left: 30px;
}
.main_top_action .clean_btn {
  font-size: 14px;
  line-height: 24px;
  color: #2b4695;
  text-decoration: underline;
  margin-left: 30px;
}
.main_top_action .add_btn {
  margin-left: auto;
}
</style>
