<template>
  <div>
    <!--新增-->
    <normalLayout  @onRefresh="inputChange">
      <div slot="titleRight">
        <add ref="add" />
      </div>
      <div slot="content">
        <div class="normal-card">
          <div style="display:flex;align-items:center">
            <div style="display:flex;align-items:center;padding-bottom:15px">
              <p style="font-size:14px;margin-right:10px;width:50px">范围:</p>
              <el-select v-model="params.content.where.type" placeholder="请选择素材范围" size="small" @change="getFileList">
                <el-option
                  label="全部"
                  :value="0">
                </el-option>
                <el-option
                  label="我的"
                  :value="1">
                </el-option>
              </el-select>
            </div>
            <!-- 搜索及分类筛选 -->
            <filterList id="sat_sharematerial_classid" :customParam="select" @changeTypeId="changeTypeId" @startSearch="startSearch">
              <!-- <span style="flex: 1;display: flex;justify-content: flex-end;">
                <hot-new-control @sortTypeChange="sortTypeChange" />
              </span> -->
            </filterList>
          </div>
          
          <!--素材列表-->
          <list :fileData="fileData" @listItemClick="listItemClick"
            v-if="tool.checkAuth($route.name, 'read')">
            <template v-slot:edit="scope">
              <Edit :fileData="scope.data" :disabled="tool.checkAuth($route.name, 'update') && scope.data.isAuth"></Edit>
            </template>
            <template v-slot:delete="scope">
              <Delete :data="scope.data" @removeSuccess="getFileList"  :disabled="tool.checkAuth($route.name, 'delete') && scope.data.isAuth"></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>
        <!--抽屉面板-->
        <el-drawer
          title="我是标题"
          :visible.sync="drawer"
          :with-header="false"
          direction="rtl"
          size="90%"
          append-to-body
          @close="closeDrawer">
          <div class="detail__panel">
            <router-view/>
          </div>
        </el-drawer>
      </div>
    </normalLayout>
  </div>
</template>

<script>
import filterList from "@/HManagement/archives_ad/modules/filterList.vue"
import add from '../archives_ad/components/add'
import CategorySelect from '@/components/category-select/CategorySelect'
import list from '@/SManagement/archives_ad/components/list'
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'

import {mapGetters} from 'vuex'
import { log } from '@antv/g2plot/lib/utils';
export default {
  name: 'index',
  components: {
    CategorySelect,
    Pagination,
    list,
    detail,
    Delete,
    Edit,
    add,
    filterList
  },
  data() {
    return {
      drawer:false,
      params: {
        "classname": "saletool.sharematerial.sharematerial",
        "method": "selectList",
        "content": {
          "pageNumber": 1,
          "pageSize": 16,
          "nocache": true,
          "where": {
            "condition": "",
            "sat_sharematerial_classid": null,
            "type":0,
          }
        }
      },
      //分类配置
      select: {
        "classname": "saletool.sharematerial.sharematerial",
        "method": "select",
        "content": {
          "parentid": 0
        }
      },
      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)
      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
      console.log(this.fileData);
      
      this.fileData.forEach((item) => {
        item.attinfos = matchingFileType.fileList(item.attinfos)
      })
      this.params.content.sort = res.sort
    },
    /* 处理批量删除 */
    handleDelete(list) {
      this.$api.requested({
        "id": 20221102143602,
        "content": {
          "sat_sharematerialids": list
        }
      }).then(res => {
        console.log("处理删除", res);
        if (res.msg == '成功') 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()
    },
    //列表单击事件
    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(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>