<template>
  <div>
    <!--新增-->
    <normalLayout  @onRefresh="inputChange">
      <div slot="titleRight">
      </div>
      <div slot="content">
        <div class="normal-card">
          <div style="display:flex;align-items:center;margin-bottom:10px">
            <el-input
              placeholder="请输入搜索内容"
              suffix-icon="el-icon-search"
              v-model="params.content.where.condition"
              style="width:200px"
              size="mini"
              class="input-with-select inline-16"
              @keyup.native.enter="getFileList(params.content.pageNumber=1)"
              @clear="getFileList(params.content.where.condition='',params.content.pageNumber=1)"
              clearable>
            </el-input>
          </div>
          <!--素材列表-->
          <list :fileData="fileData" @listItemClick="listItemClick">
          </list>
          <pagination :total="total" :pageSize="params.content.pageSize" :currentPage="params.content.pageNumber"
            @pageChange="pageChange">
          </pagination>
        </div>
        <Detail v-if="currentData" :data="currentData" ref="detail"></Detail>
      </div>
    </normalLayout>
  </div>
</template>

<script>
import list from './components/list'
import Pagination from '@/components/pagination/Pagination'

import matchingFileType from '@/utils/matchingFeilType'

import Detail from './modules/detail'

import {mapGetters} from 'vuex'
export default {
  name: 'index',
  components: {
    Pagination,
    list,
    Detail
  },
  data() {
    return {
      currentData:'',
      drawer:false,
      params: {
        "id": 20220103140003,
        "version":1,
        "content": {
          "pageNumber":1,
          "pageSize":20,
          "where":{
              "condition":""
          }
        }
      },
      fileData: [],
      //列表数据
      list: [],
      total: 0,
      //当前查看的素材
      currentFile: ''
    };
  },
  
  computed: {
    ...mapGetters({
      DrawerShow:'DrawerShow'
    })
  },
  watch: {
    $route (val) {
      if (val.path == '/archives_admag') {
        this.getFileList()
        this.$refs.add.dialogVisible = false
      }
    },
    DrawerShow (val) {
      val ? this.drawer = true : this.drawer = false
    }
  },
  created() {
    this.getFileList()
  },
  methods: {
    inputChange () {

    },
    closeDrawer () {
      this.$router.push({path:'/archives_admag'})
      this.$store.dispatch('DrawerShowChange',false)
    },
    /* 改变分类ID */
    changeTypeId(id) {
      this.params.content.where.sat_sharematerial_classid = id == 0 ? null : id;
      this.getFileList(true);
    },
    /* 开始搜索 */
    startSearch(value) {
      this.params.content.pageNumber = 1
      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)
      this.total = res.total
      this.fileData = res.data
      this.fileData.forEach((item) => {
        item.attinfos = matchingFileType.fileList(item.attinfos)
      })
      console.log(this.fileData);
      
      this.params.content.sort = res.sort
    },
    //列表单击事件
    async listItemClick(data) {
      let res = await this.$api.requested({
        "id": 20221230144703,
        "version":1,
        "content": {
            "sa_promotionid":data.sa_promotionid
        }
      })
      this.currentData = res.data
      console.log(this.currentData);
      
      this.$nextTick(() => {
        this.$refs.detail.drawer = 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(100vh - 190px);
  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;
}

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

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