<template>
  <div style="height:100%">
    <Header v-if="tool.checkAuth($route.name, 'insert')">
      <save></save>
    </Header>
    <div class="normal-card">
      <!-- 搜索及分类筛选 -->
      <filterList @changeTypeId="changeTypeId" @startSearch="startSearch">
        <span style="flex: 1;display: flex;justify-content: flex-end;">
          <hot-new-control @sortTypeChange="sortTypeChange" />
        </span>
      </filterList>
      <!--素材列表-->
      <list :fileData="fileData" @listItemClick="listItemClick" :isHandle="true"
        v-if="tool.checkAuth($route.name, 'read')">
        <template v-slot:edit="scope">
          <Edit :fileData="scope.data" v-if="tool.checkAuth($route.name, 'update')"></Edit>
        </template>
        <template v-slot:delete="scope">
          <Delete :data="scope.data" @removeSuccess="getFileList" v-if="tool.checkAuth($route.name, 'delete')"></Delete>
        </template>
      </list>
      <pagination :total="total" :pageSize="params.content.pageSize" :currentPage="params.content.pageNumber"
        @pageChange="pageChange">
      </pagination>
      <detail ref="detail" v-if="currentFile && tool.checkAuth($route.name, 'read')" :currentSelectFile="currentFile">
      </detail>
    </div>
  </div>
</template>

<script>
import filterList from "@/HManagement/archives_ad/modules/filterList.vue";
import Header from '@/SManagement/archives_upload/components/Header'
import save from '@/SManagement/archives_upload/components/save'
import HotNewControl from '@/components/hot-new-control/HotNewControl'
import CategorySelect from '@/components/category-select/CategorySelect'
import list from '@/SManagement/archives_ad/components/list'
import search from '@/components/search/index'
import detail from '@/SManagement/archives_ad/components/detail'
import Delete from '@/SManagement/archives_ad/components/delete'
import Edit from '@/SManagement/archives_ad/components/Edit'
import Pagination from '@/components/pagination/Pagination'



import matchingFileType from '@/utils/matchingFeilType'
export default {
  name: 'index',
  data() {
    return {
      params: {
        "classname": "saletool.sharematerial.sharematerial",
        "method": "selectMyList",
        "content": {
          "pageNumber": 1,
          "pageSize": 12,
          "nocache": true,
          "where": {
            "condition": "",
            "sat_sharematerial_classid": null
          }
        }
      },
      //分类配置
      select: {
        "classname": "saletool.sharematerial.sharematerial",
        "method": "select",
        "content": {
          "parentid": 0
        }
      },
      fileData: [],
      //列表数据
      list: [],
      //分类列表
      selectList: [],
      total: 0,
      //当前查看的素材
      currentFile: ''
    };
  },
  components: {
    HotNewControl,
    CategorySelect,
    Pagination,
    list,
    search,
    detail,
    Delete,
    Edit,
    Header,
    save,
    filterList
  },
  computed: {
  },
  created() {
    this.getFileList()
    this.getSelectList()
  },
  methods: {
    /* 改变分类ID */
    changeTypeId(id) {
      this.params.content.where.sat_sharematerial_classid = id == 0 ? null : id;
      this.getFileList(true);
    },
    /* 开始搜索 */
    startSearch(value) {
      this.params.content.where.condition = value;
      this.getFileList(true);
    },
    //获取文件数据
    async getFileList(init = false) {
      if (init) this.params.content.pageNumber = 1;
      let res = await this.$api.requested(this.params)
      let initID = '9999' + JSON.parse(window.sessionStorage.getItem("active_account")).userid;
      let deleteList = [];
      res.data.forEach(v => (initID == v.sat_sharematerial_classid && v.title == '') ? deleteList.push(v.sat_sharematerialid) : '');
      if (deleteList.length != 0) return this.handleDelete(deleteList);
      this.total = res.total
      this.fileData = res.data
      this.fileData.forEach((item) => {
        item.attinfos = matchingFileType.fileList(item.attinfos)
      })
      this.params.content.sort = res.sort
    },
    /* 处理批量删除 */
    handleDelete(list) {
      this.$api.requested({
        "classname": "webmanage.saletool.sharematerial.sharematerial",
        "method": "delete",
        "content": {
          "sat_sharematerialid": list
        }
      }).then(res => {
        if (res.msg == '成功') this.getFileList();
      })
    },
    //获取分类列表
    async getSelectList() {
      let res = await this.$api.requested(this.select)
      this.selectList = res.data
    },
    sortTypeChange(name) {
      for (let i = 0; i < this.params.content.sort.length; i++) {
        this.params.content.sort[i].sorted = this.params.content.sort[i].sortname == name ? 1 : 0
      }
      this.getFileList()
    },
    //列表单击事件
    async listItemClick(data) {
      let param = {
        "classname": "saletool.sharematerial.sharematerial",
        "method": "selectDetail",
        "content": {
          "sat_sharematerialid": data.sat_sharematerialid
        }
      }
      let res = await this.$api.requested(param)
      res.data.attinfos = this.fileType.fileList(res.data.attinfos)
      this.currentFile = res.data
      this.$nextTick(() => {
        this.$refs.detail.isFileInfoPanlShow = true
      })
    },
    itemEdit(data) {
      this.$router.push({
        path: '/upload_archives',
        params: JSON.stringify(data)
      })
    },
    clearData() {
      this.params.content.where.condition = ''
      this.getFileList()
    },
    pageChange(n) {
      this.params.content.pageNumber = n
      this.getFileList()
    }
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.normal-card {
  min-height: calc(100% - 83px);
  box-sizing: border-box;
  position: relative;
}

.normal-card .header-panl {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.normal-card .header-panl .left {
  display: flex;
  align-items: center;
}

.normal-card .header-panl .left .select {
  margin-right: 16px;
  display: flex;
  align-items: center;
}

.normal-card .header-panl .left .select span {
  margin-right: 8px;
}

.normal-card .header-panl .left .search {
  height: 36px;
}

/deep/ .input-with-select {
  height: 34px;
}

.el-button {
  width: 180px;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #3874F6;
}

/deep/.el-button span {
  transform: translateX(-5px) !important;
}

.el-pagination {
  position: absolute;
  right: 16px;
  bottom: 0;
  margin-top: 16px;
}
</style>