<template>
    <div class="content">
        <el-input class="search" v-model="input" placeholder="请输入" suffix-icon="el-icon-search"></el-input>
        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" :show-header="false"
            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 95%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column prop="photo">
                <template slot-scope="scope">
                    <el-image :src="scope.row.photo" style="width: 40px; height: 40px;"
                        :preview-src-list="[scope.row.photo]"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="introduction">
                <template slot-scope="scope">
                    <el-descriptions :title="scope.row.name">
                        <el-descriptions-item label="功能简介">{{ scope.row.introduction }}</el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-table-column>
            <el-table-column prop="updatetime">
                <template slot-scope="scope">
                    <el-form label-position="right" label-width="100px" v-model="form">
                        <el-form-item label="版本号：">
                            <el-select v-model="form.version">
                                <el-option value="v1.0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="更新时间：">
                            <span style="margin-right: 110px;">{{ scope.row.updatetime }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column prop="operation">
                <template slot-scope="scope">
                    <el-button style="width: 80px; height: 40px;"
                        :type="scope.row.status == '1' ? 'primary' : scope.row.status == '2' ? 'info' : 'danger'">
                        {{ scope.row.status == '1' ? '安装' : scope.row.status == '2' ? '未配置' : '卸载' }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="bottom">
            <div>
                <checkbox class="checkbox" :total="total"></checkbox>
                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
            </div>
            <div class="bottom_button" v-show="show">
                <el-button class="delete" type="text">批量删除</el-button>
                <el-button class="disabled" type="text">批量激活</el-button>
                <el-button class="export" type="text">导出数据</el-button>
            </div>
            <page class="page"></page>
        </div>
    </div>
</template>

<script >
import checkbox from '@/components/Checkbox/index'
import page from '@/components/pagination/index'
export default {
    components: { checkbox, page },
    data() {
        return {
            input: '',
            show: true,
            form:{},
            tableData: [
                {
                    photo: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
                    updatetime: '2023-01-01 00:00',
                    name: '海康威视软件包',
                    introduction: 'xxxxxxxxxxxxx',
                    status: '1'
                },
                {
                    photo: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
                    updatetime: '2023-01-01 00:00',
                    name: '海康威视软件包',
                    introduction: 'xxxxxxxxxxxxx',
                    status: '2'
                },
                {
                    photo: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
                    updatetime: '2023-01-01 00:00',
                    name: '海康威视软件包',
                    introduction: 'xxxxxxxxxxxxx',
                    status: '3'
                },
            ]
        }
    },
    methods: {
    }
};
</script>
<style lang="less" scoped>
.content {
    top: 150px;
    position: absolute;
    left: 218px;
    right: 16px;
    height: -webkit-fill-available;
    margin-bottom: 20px;
    background-color: #ffffff;
}

.el-table {
        top: 100px;
        margin-left: 2.5%;
    }

.el-form-item {
    margin-bottom: 0 !important;
}

/deep/.el-form-item__label {
    padding: 0;
}

/deep/.el-form-item__content {
    margin-right: 8px;
}

.bottom {
    position: relative;
    top: 50%;
    left: 2.5%;
    height: 50px;
    width: 95%;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;

    .checkbox {
        position: absolute;
        left: 29px;
        top: 15px;
        font-size: 14px;
    }

    .check-cancel {
        position: absolute;
        // line-height: 20px;
        font-size: 14px;
        text-align: center;
        left: 140px;
        top: 10px;
    }

    .bottom_button {
        position: absolute;
        left: 200px;
        margin-top: 15px;

        .delete {
            font-size: 14px;
            text-align: center;
            padding: 1px;
        }

        .disabled {
            font-size: 14px;
            text-align: center;
            padding: 1px;
        }

        .export {
            font-size: 14px;
            text-align: center;
            padding: 1px;
        }
    }
}

.search {
    position: absolute;
    width: 300px;
    top: 20px;
    right: 2.5%;
}
</style>