<template>
    <el-container class="flex-column">
        <div class="table-search-menu">
            <div class="menu-left">洗涤风险</div>
            <div class="menu-right">
                <el-button type="default" icon="el-icon-plus" @click="table_add()">新增洗涤风险项</el-button>
            </div>
        </div>
        <el-main v-loading="isLoading">
            <div v-if="list.length == 0">
                <el-empty description="暂无数据" :image-size="100"></el-empty>
            </div>
            <el-row :gutter="15" v-else>
                <el-col :xl="3" :sm="6" :xs="24" v-for="(item,index) in list" :key="index">
                    <el-card shadow="hover" :body-style="{ padding: '0px' }">
                        <div class="code-item">
                            <div class="title">
                                <h2>{{item.name}}</h2>
                                <p><el-button type="primary" size="small" @click="table_edit(item,index)">编辑</el-button><el-button icon="el-icon-delete" plain size="small" type="danger" @click="del(index)"></el-button></p>
                            </div>
                        </div>

                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
    <editForm ref="editForm" @success="hanldeSuccess"></editForm>
</template>

<script>
import editForm from "../defect/components/form";
export default {
    components: {
        editForm
    },
    data(){
        return {
            list: [],
            maxNum:0,
            isLoading:false
        }
    },
    created(){
        this.getList()
    },
    methods: {
        async del(data){
            var confirm = await this.$confirm('确认删除吗？','提示', {
                type: 'warning',
                confirmButtonText: '删除',
                confirmButtonClass: 'el-button--danger'
            }).catch(() => {})
            if(confirm != 'confirm'){
                return false
            }
            var resp = await this.$API.cloth.del.post({id:data,"type":"risk"});
            if (resp.code == 0) {
                return this.$message.error(resp.msg)
            }
            this.$message.success(resp.msg);
            this.getList();
        },
        hanldeSuccess(){
            this.getList()
        },
        async getList(){
            this.isLoading = true;
            var resp = await this.$API.cloth.color.get({"type":"risk"});
            this.isLoading = false;
            if (resp.code == 0) {
                return this.$message.warning(resp.msg)
            }
            this.list = resp.data.data;
            this.maxNum = resp.data.num;
        },
        table_add() {
            this.$nextTick(() => {
                this.$refs.editForm.open().setData(this.maxNum,{},"risk")
            })
        },
        table_edit(data,index) {
            this.$nextTick(() => {
                this.$refs.editForm.open('edit').setData(index,data,"risk")
            })
        }
    }
}
</script>

<style scoped>
	.el-card {margin-bottom: 15px;}
	.code-item {cursor: pointer;}
	.code-item .img {width: 100%;height: 150px;background: #09f;display:flex;align-items: center;justify-content: center;background-repeat: no-repeat;background-size: cover;}
	.code-item .img i {font-size: 100px;color: #fff;background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
	.code-item .title {padding:15px;}
	.code-item .title h2 {font-size: 16px;}
	.code-item .title h4 {font-size: 12px;color: #999;font-weight: normal;margin-top: 5px;}
	.code-item .title p {margin-top: 15px;}
</style>