// 添加专业与人数
<template>
    <div class="content">
        <el-dialog
                :title="title"
                :close-on-click-modal="false"
                append-to-body
                width="60%"
                :visible.sync="visible">
                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
                    <el-form-item label="素材名称" prop="materialName">
                        <el-input
                            v-model="queryParams.materialName"
                            placeholder="请输入素材名称"
                            clearable
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="dataList" @row-click="getRowData" @selection-change="handleSelectionChange">
                    <el-table-column label="选择" align="center" width="55" v-if="single">
                        <template slot-scope="scope" >
                            <el-radio class="radio" v-model="templateSelection" :label="scope.row.materialId">{{''}}</el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column type="selection" width="55" align="center" v-else/>
                    <el-table-column label="素材名称" align="center" prop="materialName" />
                    <el-table-column label="缩略图" align="center" prop="savePath">
                        <template slot-scope="scope">
                            <image-preview :src="scope.row.savePath" :width="50" :height="50"/>
                          </template>
                    </el-table-column>
                    <el-table-column label="上传日期" align="center" prop="uploadTime" width="180">
                      <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.uploadTime, '{y}-{m}-{d}') }}</span>
                      </template>
                    </el-table-column>
                </el-table>
                <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
                />
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="submit()">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { listMaterial, getMaterial, delMaterial, addMaterial, updateMaterial } from "@/api/system/material";
    export default {
        name: "equipment",
        components: {

        },
        props:{
            single:{
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                
                dataList:[],
                total:0,
                templateSelection:'',
              
                visible: false,
                title:'选择素材',
                queryParams:{
                    pageNum: 1,
                    pageSize: 10,
                },
                selectRow:{},
                multipleSelection:[]
            }
        },
        methods: {
            submit() {
                if(this.single){
                    this.$emit('selectData', this.selectRow)

                }else{
                    this.$emit('selectData', this.multipleSelection)
                }
                this.visible = false
            },
            getRowData(row, column, event) {
                console.log(row)
                this.selectRow = row
            },
            init() {
                this.visible = true
                this.getList()
            },
            getList(){
                listMaterial(this.queryParams).then(response => {
                    this.dataList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            handleSearch() {
                this.pageNum = 1;
                this.getList();
            },
            handleQuery(){
                this.queryParams.pageNum = 1;
                this.getList();
            },
            resetQuery() {
                this.queryParams = {
                    pageNum: 1,
                    pageSize: 10,
                }
                this.getList();
            },
            pageChange(value) {
                this.queryParams.pageNum = value;
                this.getList();
            },
            pageSizeChange(value) {
                this.queryParams.pageSize = value;
                this.getList();
            },
            handleSelectionChange(val){
                this.multipleSelection = []
                for(let i=0;i<val.length;i++){
                    this.multipleSelection.push(val[i].materialId)
                }

            },
            closeDialog() {
                this.visible = false
            },
            
        }



    }
</script>

<style scoped>

</style>
