<template>
    <div class="app-container">
        <!-- 搜索区域 -->
        <el-card class="filter-container" shadow="never">
            <el-form :model="queryParams" ref="queryForm" @submit.native.prevent :inline="true" label-width="68px">
                <el-form-item prop="name">
                    <el-input v-model="queryParams.name" placeholder="请输入衣服名称" clearable @keyup.enter.native="handleQuery">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="typeId">
                    <el-select v-model="queryParams.typeId" placeholder="衣服种类" clearable>
                        <el-option v-for="item in clothTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 操作按钮区域 -->
        <el-row :gutter="10" class="mb8 mt15">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd" v-hasPermi="['cloth:clothItem:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['cloth:clothItem:remove']">删除</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <!-- 列表区域 -->
        <el-card shadow="never">
            <Page uri="/mapi/core/clothItem/list" :request-params="queryParams" ref="pagination" :selectionChange="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="ID" align="center" prop="id" width="100"/>
                <el-table-column label="衣服信息" align="left" min-width="200">
                    <template slot-scope="scope">
                        <div class="goods-info">
                            <el-image
                                class="goods-image"
                                :src="scope.row.imgUrl"
                                :preview-src-list="[scope.row.imgUrl]"
                                fit="cover">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <div class="goods-detail">
                                <div class="goods-name">{{scope.row.name}}</div>
                                <div class="goods-code">编号：{{scope.row.id}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="分类" align="center" width="120">
                    <template slot-scope="scope">
                        <div class="category-tags">
                            <el-tag  effect="plain">{{scope.row.typeName}}</el-tag>
                            <el-tag  type="success" effect="plain" v-if="scope.row.isSpecial === 'Y'" style="margin-top: 5px;">特殊产品</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="单位" align="center" width="80">
                    <template slot-scope="scope">
                        <el-tag  effect="plain">{{scope.row.unit}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="排序" align="center" width="80">
                    <template slot-scope="scope">
                        <span class="sort-number">{{scope.row.sort}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center" width="100">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.status"
                            active-value="0"
                            inactive-value="1"
                            @change="handleStatusChange(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="220" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['cloth:clothItem:edit']">修改</el-button>
                        <el-button type="text" icon="el-icon-money" @click="handlePriceUpdate(scope.row)" v-hasPermi="['cloth:price:list']">价格</el-button>
                        <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['cloth:clothItem:remove']">删除</el-button>
                    </template>
                </el-table-column>
            </Page>
        </el-card>

        <!-- 添加或修改衣服对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body custom-class="cloth-dialog" :close-on-click-modal="false" :before-close="checkClose">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="基本信息" name="basic">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="衣服名称" prop="name">
                                    <el-input v-model="form.name" placeholder="请输入衣服名称" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="单位" prop="unit">
                                    <el-input v-model="form.unit" placeholder="请输入单位" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="衣服分类" prop="typeId">
                                    <el-select v-model="form.typeId" placeholder="请选择衣服分类" style="width: 100%">
                                        <el-option
                                            v-for="item in clothTypeList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="显示顺序" prop="sort">
                                    <el-input-number
                                        v-model="form.sort"
                                        placeholder="请输入显示顺序(升序排列显示)"
                                        :min="0"
                                        :step-strictly="true"
                                        style="width: 100%">
                                    </el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="特殊产品" prop="isSpecial">
                                    <el-radio-group v-model="form.isSpecial" size="small">
                                        <el-radio-button v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">
                                            {{ dict.label }}
                                        </el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="状态" prop="status">
                                    <el-radio-group v-model="form.status" size="small">
                                        <el-radio-button v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">
                                            {{ dict.label }}
                                        </el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>

                    <el-tab-pane label="图片与描述" name="media">
                        <el-form-item label="商品图片" prop="imgUrl">
                            <div class="image-upload-container">
                                <image-upload v-model="form.imgUrl" />
                                <div class="image-tips">
                                    <p>建议尺寸：800x800像素</p>
                                    <p>支持格式：JPG、PNG</p>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="商品描述" prop="content">
                            <WangEditor style="width: 100%" :content="form.content" @editorContent="getEditorContent"></WangEditor>
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listClothItem, getClothItem, delClothItem, addClothItem, updateClothItem, changeClothItemStatus } from '@/api/core/clothItem'
import { listType } from '@/api/core/clothType'
import { listWashMode } from '@/api/core/washMode'
import WangEditor from '@/components/wangEditor/index.vue';
export default {
    name: 'ClothItem',
    dicts: ['sys_yes_no', 'sys_normal_disable'],
    components: { WangEditor },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 衣服表格数据
            clothItemList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                name: null,
                typeId: null,
                washId: null,
                unit: null,
                isChangePrice: null,
                isCalArea: null,
                isSpecial: null,
                imgUrl: null,
                content: null,
                sort: null,
                status: null
            },
            // 表单参数
            form: {
                isChangePrice: '1',
                isCalArea: '1',
                isSpecial: '1'
            },
            // 表单校验
            rules: {
                name: [{ required: true, message: '衣服名称不能为空', trigger: 'blur' }],
                typeId: [{ required: true, message: '衣服类型id不能为空', trigger: 'blur' }],
                washId: [{ required: true, message: '洗衣方式id不能为空', trigger: 'blur' }],
                unit: [{ required: true, message: '单位不能为空', trigger: 'blur' }],
                isCalArea: [{ required: true, message: '是否按面积计算不能为空', trigger: 'blur' }],
                isSpecial: [{ required: true, message: '是否特殊产品不能为空', trigger: 'blur' }],
                imgUrl: [{ required: true, message: '衣服图片不能为空', trigger: 'blur' }],
                sort: [{ required: true, message: '显示顺序不能为空', trigger: 'blur' }]
            },
            clothTypeList: [],
            washModeList: [],
            isChangePrices: [
                {
                    label: '是',
                    value: '0'
                },
                {
                    label: '否',
                    value: '1'
                }
            ],
            isCalAreas: [
                {
                    label: '是',
                    value: '0'
                },
                {
                    label: '否',
                    value: '1'
                }
            ],
            isSpecials: [
                {
                    label: '是',
                    value: '0'
                },
                {
                    label: '否',
                    value: '1'
                }
            ],
            activeTab: 'basic'
        }
    },
    created() {
        this.getClothTypeList()
        this.getWashModeList()
        this.getList()
    },
    methods: {
        getEditorContent(content) {
            this.form.content = content;
        },
        /** 获取衣服类型 */
        getClothTypeList() {
            listType({ pageSize: 9999, pageNum: 1 }).then((response) => {
                this.clothTypeList = response.rows
            })
        },
        /** 获取洗衣方式 */
        getWashModeList() {
            listWashMode({ status: '0' }).then((response) => {
                this.washModeList = response.rows
            })
        },
        /** 查询衣服列表 */
        getList() {
            this.$nextTick(() => {
                this.$refs.pagination.handleSearch(true)
            })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                name: null,
                typeId: null,
                washId: null,
                unit: null,
                isChangePrice: '1',
                isCalArea: '1',
                isSpecial: '1',
                imgUrl: null,
                content: null,
                sort: null,
                status: '0',
                delFlag: 0,
                createBy: null,
                createById: null,
                createTime: null,
                updateBy: null,
                updateById: null,
                updateTime: null,
                remark: null
            }
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
            console.log(this.ids)
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = '添加衣服'
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            const id = row.id || this.ids
            getClothItem(id).then((response) => {
                this.form = response.data
                this.open = true
                this.title = '修改衣服'
            })
        },
        /** 设置价格 */
        handlePriceUpdate(row) {
            this.$tab.openPage(row.name + '的价格', '/cloth/setPrice/' + row.id)
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.id != null) {
                        updateClothItem(this.form).then((response) => {
                            this.$modal.msgSuccess('修改成功')
                            this.open = false
                            this.getList()
                        })
                    } else {
                        addClothItem(this.form).then((response) => {
                            this.$modal.msgSuccess('新增成功')
                            this.open = false
                            this.getList()
                        })
                    }
                }
            })
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids
            this.$modal
                .confirm('是否确认删除衣服编号为"' + ids + '"的数据项？')
                .then(function () {
                    return delClothItem(ids)
                })
                .then(() => {
                    this.getList()
                    this.$modal.msgSuccess('删除成功')
                })
                .catch(() => {})
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                'mapi/core/clothItem/export',
                {
                    ...this.queryParams
                },
                `clothItem_${new Date().getTime()}.xlsx`
            )
        },
        checkClose(done) {
            this.$confirm('是否关闭表单，关闭后数据将丢失？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        },

        // 衣服状态修改
        handleStatusChange(row) {
            let text = row.status === '0' ? '启用' : '停用'
            this.$modal
                .confirm('确认要' + text + ' ' + row.name + ' 吗？')
                .then(function () {
                    return changeClothItemStatus(row.id, row.status)
                })
                .then(() => {
                    this.$modal.msgSuccess(text + '成功')
                })
                .catch(function () {
                    row.status = row.status === '0' ? '1' : '0'
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.filter-container {
    margin-bottom: 15px;
}

.mt15 {
    margin-top: 15px;
}

.goods-info {
    display: flex;
    align-items: center;
    padding: 10px 0;

    .goods-image {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        margin-right: 15px;
        border: 1px solid #ebeef5;

        .image-slot {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background: #f5f7fa;
            color: #909399;
            font-size: 20px;
        }
    }

    .goods-detail {
        flex: 1;
        overflow: hidden;

        .goods-name {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            margin-bottom: 8px;
        }

        .goods-code {
            font-size: 12px;
            color: #909399;
            margin-bottom: 8px;
        }

        .goods-category {
            .el-tag + .el-tag {
                margin-left: 8px;
            }
        }
    }
}

.status-column {
    .sort-number {
        margin-bottom: 8px;
        color: #909399;
        font-size: 13px;
    }
}

.cloth-dialog {
    .el-dialog__body {
        padding: 20px 30px;
    }

    .el-tabs__nav {
        padding-left: 20px;
    }

    .image-upload-container {
        display: flex;
        align-items: flex-start;

        .image-tips {
            margin-left: 20px;
            color: #909399;
            font-size: 12px;

            p {
                margin: 0;
                line-height: 1.8;
            }
        }
    }
}

.dialog-footer {
    text-align: right;
    padding-top: 20px;
}

.category-tags {
    display: flex;
    flex-direction: column;
    align-items: center;

    .el-tag + .el-tag {
        margin-top: 5px;
    }
}

.sort-number {
    color: #606266;
    font-size: 14px;
}
</style>
