<template>
  <div style="height:100%">
    <div class="normal-card">
      <div class="header-panl">
        <div class="left">
          <search @searchActive="searchActive" @clearData="clearData()" v-if="tool.checkAuth($route.name, 'read')">
          </search>
          <category-select label="素材分类" :selectList="selectList" @changeSelect="changeSelect"
            @clearSelect="clearSelect()" v-if="tool.checkAuth($route.name, 'read')">
          </category-select>
        </div>
        <!--最新最热切换-->
        <hot-new-control @sortTypeChange="sortTypeChange" v-if="tool.checkAuth($route.name, 'read')"></hot-new-control>
      </div>
      <!--素材列表-->
      <list :fileData="fileData" @listItemClick="listItemClick" @itemEdit="itemEdit" :isHandle="false"
        v-if="tool.checkAuth($route.name, 'read')">
      </list>
      <pagination :total="total" :pageSize="params.content.pageSize" :currentPage="params.content.pageNumber"
        @pageChange="pageChange">
      </pagination>
      <detail ref="detail" v-if="currentFile" :currentSelectFile="currentFile"></detail>
    </div>
  </div>
</template>

<script>
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'
export default {
  name: 'index',
  data() {
    return {
      params: {
        "classname": "saletool.sharematerial.sharematerial",
        "method": "selectList",
        "content": {
          "pageNumber": 1,
          "pageSize": 12,
          "where": {
            "condition": "",
            "sat_sharematerial_classid": null
          }
        }
      },
      //分类配置
      select: {
        "accesstoken": "0b62a25619912a732160863854a9f19d",
        "classname": "saletool.sharematerial.sharematerial",
        "method": "select",
        "content": {
          "parentid": 0
        }
      },
      fileData: [],
      //列表数据
      list: [],
      //分类列表
      selectList: [],
      total: 20,
      //当前查看的素材
      currentFile: ''
    };
  },
  components: {
    HotNewControl,
    CategorySelect,
    Pagination,
    list,
    search,
    detail,
    Delete,
    Edit,
  },
  computed: {
  },
  created() {
    this.getFileList()
    this.getSelectList()
  },
  methods: {
    //获取文件数据
    getFileList() {
      this.$api.requested(this.params).then(res => {
        this.total = res.total
        for (let i = 0; i < res.data.length; i++) {
          let list = this.fileType.fileList(res.data[i].attinfos)
          if (!list.length) continue;
          let obj = list.find(item => item.fileType == 'image')
          if (!obj) continue;
          res.data[i].cover = this.fileType.getSpecifiedImage(obj)
          res.data.attinfos = list
        }
        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) this.handleDelete(deleteList);
        this.fileData = res.data
        this.params.content.sort = res.sort
      })
    },
    /* 处理批量删除 */
    handleDelete(list) {
      console.log("处理删除")
      this.$api.requested({
        "classname": "webmanage.saletool.sharematerial.sharematerial",
        "method": "delete",
        "content": {
          "sat_sharematerialid": list
        }
      }).then(res => {
        console.log("处理删除", res);
        if (res.msg == '成功') this.getList();
      })
    },
    //获取分类列表
    getSelectList() {
      this.$api.requested(this.select).then(res => {
        this.selectList = res.data
      })
    },
    //查询
    searchActive(result) {
      if (!result) return
      this.params.content.where.condition = result
      this.getFileList()
    },
    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()
    },
    //赛选
    changeSelect(id) {
      this.params.content.where.sat_sharematerial_classid = id[id.length - 1]
      this.getFileList()
    },
    //清空赛选
    clearSelect() {
      this.getFileList()
    },
    //列表单击事件
    listItemClick(data) {
      let param = {
        "classname": "saletool.sharematerial.sharematerial",
        "method": "selectDetail",
        "content": {
          "sat_sharematerialid": data.sat_sharematerialid
        }
      }
      this.$api.requested(param).then(res => {
        res.data.content = atob(res.data.content)
        res.data.attinfos = this.fileType.fileList(res.data.attinfos)
        this.currentFile = res.data
        this.$nextTick(() => {
          this.$refs.detail.isFileInfoPanlShow = true
        })
      })
    },
    itemEdit(data) {
      return console.log("应该没有用到")
      this.$router.push({
        path: '/upload_archives',
        params: JSON.stringify(data)
      })
    },
    clearData() {
      this.params.content.where.condition = ''
      this.getFileList()
    },
    uploadClick() {
      this.$router.push({
        path: '/upload_archives'
      })
    },
    pageChange(n) {
      this.params.content.pageNumber = n
      this.getFileList()
    }
  },
};
</script>

<style scoped>
.normal-card {
  min-height: 100%;
  box-sizing: border-box;
  position: relative;
}

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

.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;
}

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

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