<template>
    <el-row :gutter="10" class="btnsA">
        <el-col :span="1.5" v-if="showAdd">
            <el-button
            type="primary"
            size="mini"
            :disabled="disAdd"
            @click="handleAdd"
            >
            <img :src="addW" style="margin-right: 10px">
            <span>新增</span>
            </el-button>
        </el-col>
        <el-col :span="1.5" v-if="showSave">
            <el-button
            type="success"
            size="mini"
            @click="handleEdit"
            :disabled="disSave"
            >
            <img :src="editW" style="margin-right: 10px">
            <span>修改</span>
            </el-button>
        </el-col>
        <el-col :span="1.5" v-if="showDelete">
            <el-button
            type="danger"
            size="mini"
            :disabled="disDelete"
            @click="handleDelete"
            >
            <img :src="deleteW" style="margin-right: 10px">
            <span>删除</span>
            </el-button>
        </el-col>
        <el-col :span="1.5" v-if="showImport">
            <el-button
            type="info"
            icon="Upload"
            size="mini"
            :disabled="disImport"
            @click="handleImport"
            >导入</el-button>
        </el-col>
        <el-col :span="1.5" v-if="showExport">
            <el-button
            type="warning"
            icon="Download"
            size="mini"
            :disabled="disExport"
            @click="handleExport"
            >导出</el-button>
        </el-col>
    </el-row>
</template>

<script>
import addW from '../assets/btnIcon/addW.png'
import editW from '../assets/btnIcon/editW.png'
import deleteW from '../assets/btnIcon/deleteW.png'
export default {
    props: {
        showAdd: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        disAdd: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        showSave: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        disSave: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        showDelete: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        disDelete: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        showImport: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        disImport: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        showExport: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        disExport: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
    },
    data() {
        return {
            addW: addW,
            editW: editW,
            deleteW: deleteW
        }
    },
    methods: {
        handleAdd() {
            this.$emit('handleAdd')
        },
        handleEdit() {
            this.$emit('handleEdit')
        },
        handleDelete() {
            this.$emit('handleDelete')
        },
        handleImport() {
            this.$emit('handleImport')
        },
        handleExport() {
            this.$emit('handleExport')
        },
    }
}
</script>

<style lang="less">
.btnsA{
    padding-left: 10px;
    .is-disabled{
        opacity: 0.5;
    }
}
</style>