<template>
  <div>
    <slot name="add"></slot>
    <div class="container normal-panel">
      <!-- 分类筛选及搜索 -->
      <filter-list @changeTypeId="changeTypeId" @startSearch="startSearch" />
      <!-- 表格 -->
      <tableLayout :layout="tablecols" :data="list" :custom="true" :height="tableHieght">
        <template v-slot:customcol="scope">
          <div v-if="scope.column.columnname === 'status'">
            <span :style="scope.column.data.status === '审核' ? 'color:#52C41A' : ''">{{
                scope.column.data.status == '审核' ? '发布' : scope.column.data.status
            }}</span>
          </div>
          <p v-else-if="scope.column.columnname === 'title'">
            【{{ getType(scope.column.data.type) }}】{{ scope.column.data.title }}
          </p>
          <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
        </template>

        <template v-slot:opreation="scope">
          <slot name="detail" :data="scope"></slot>
          <slot name="edit" :data="scope"></slot>
          <slot name="release" :data="scope"></slot>
          <slot name="data_statistics" :data="scope"></slot>
          <!-- <el-button size="mini" type="text" @click="onEdit(scope)">数据统计</el-button> -->
          <slot name="del" :data="scope"></slot>
        </template>

      </tableLayout>

      <div style="margin-top:16px;text-align:right">
        <el-pagination background small @current-change="handleCurrentChange" :current-page="currentPage"
          :page-size="params.content.pageSize" layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
import filterList from "./filterList";
export default {
  name: "list",
  components: { filterList },
  data() {
    return {
      list: [],
      tablecols: [],
      params: {
        "classname": "webmanage.saletool.sharematerial.sharematerial",
        "method": "select",
        "content": {
          "nocache": true,
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ""
          }
        }
      },
      currentPage: 1,
      total: 0,
      selectClassId: "",//筛选分类ID
    }
  },
  created() {
    //获取表结构
    this.tablecols = this.tool.tabelCol(this.$route.name)['listTable'].tablecols;
    this.getList();
  },
  methods: {
    getType(type) {
      if (type == 1) {
        return '图片'
      } else if (type == 2) {
        return '视频'
      } else if (type == 3) {
        return '图文'
      }
    },
    /* 获取列表 */
    getList(init = false) {
      let initID = '9999' + JSON.parse(window.sessionStorage.getItem("active_account")).userid;
      //初始化分页
      if (init) this.currentPage = 1;
      //是否分类筛选
      (this.selectClassId) ? this.params.content.where.sat_sharematerial_classid = this.selectClassId : delete (this.params.content.where.sat_sharematerial_classid);
      //发送请求
      this.$api.requested(this.params).then(res => {
        console.log("素材列表", res)
        if (res.msg != '成功') return this.$message.error(res.data);
        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.list = res.data;
        this.total = res.total;
        this.params.content.pageNumber = res.pageNumber;
      })
    },
    /* 处理批量删除 */
    handleDelete(list) {
      this.$api.requested({
        "classname": "webmanage.saletool.sharematerial.sharematerial",
        "method": "delete",
        "content": {
          "sat_sharematerialid": list
        }
      }).then(res => {
        console.log("处理删除", res);
        if (res.msg == '成功') this.getList();
      })
    },
    /* 切换分页 */
    handleCurrentChange(e) {
      this.currentPage = e;
      this.params.content.pageNumber = e;
      this.getList();
    },
    /* 改变分类ID */
    changeTypeId(id) {
      this.selectClassId = id == 0 ? "" : id;
      this.getList(true);
    },
    /* 开始搜索 */
    startSearch(value) {
      console.log(value)
      this.params.content.where.condition = value;
      this.getList(true);
    }
  }
}
</script>

<style scoped>
/* 级联选择器 */
.cascader {
  width: 120px;
  margin-right: 16px;
}
</style>