<template>
    <div>
        <slot name="add"></slot>
        <!-- <div class="container normal-panel normal-margin"></div> -->
        <div class="container normal-panel">
            <!-- 表格筛选搜索 -->
            <div class="flex-align-center search-panel" style="margin-bottom:16px">
                <div class="flex-align-center">
                    <p style="flex:1 0 auto;font-size:14px">素材分类:&nbsp;</p>

                    <el-cascader class="cascader" size="small" v-model="selectClassId" :options="selectList"
                        :props="{ expandTrigger: 'hover', label: 'classname', value: 'sat_sharematerial_classid' }"
                        @change="handleChange" clearable />

                    <el-input style="width:270px" v-model="params.content.where.condition" @change="getList(true)"
                        @clear="getList(true)" placeholder="请输入内容" class="input-with-select" size="small" clearable>
                        <el-button style="width:82px;" slot="append" icon="el-icon-search">查 询
                        </el-button>
                    </el-input>

                </div>
            </div>

            <!-- 表格 -->
            <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>{{ 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>
export default {
    name: "list",
    components: {},
    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,

            selectList: [],//分类列表
            selectClassId: "",

        }
    },
    created() {
        //获取表结构
        this.tablecols = this.tool.tabelCol(this.$route.name)['listTable'].tablecols;
        this.getList();
        this.getSelectList();
    },
    methods: {
        /* 获取分类列表 */
        getSelectList() {
            this.$api.requested({
                "classname": "webmanage.saletool.sharematerial.sharematerialClass",
                "method": "select",
                "content": {
                    parentid: 0
                }
            }).then(res => {
                if (res.msg != '成功') return this.$message.error(res.data);
                this.selectList = res.data;
            })
        },
        /* 获取列表 */
        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();
        },
        handleChange(value) {
            this.selectClassId = value[1] ? value[1] : '';
            this.getList(true);
        }
    }
}
</script>

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