<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="4">
                <div class="head-container">
                    <div class="list_title">衣服分类</div>
                    <el-tree :data="clothTypeList" :props="defaultProps" :expand-on-click-node="false" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
                </div>
            </el-col>
            <el-col :span="20">
                <el-table v-loading="loading" fit highlight-current-row border stripe :data="clothItemPriceDataList">
                    <el-table-column label="名称" align="center" prop="name" />
                    <!--                    <el-table-column label="单价（元）" align="center" prop="clothPrice" />-->
                    <!--                    <el-table-column label="洗衣方式" align="center" prop="washModeId">-->
                    <!--                        <template slot-scope="scope">-->
                    <!--                            <span v-if="scope.row.washModeId == item.id" v-for="item in washModeList" :key="item.id"> {{ item.name }}</span>-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->
                    <el-table-column label="洗衣方式" align="center">
                        <el-table-column label="干洗" align="center" prop="dryCleaningModePrice">
                            <template slot-scope="scope">
                                <span v-if="scope.row.dryCleaningModePrice"> {{ scope.row.dryCleaningModePrice }}</span>
                                <span v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="水洗" align="center" prop="washModePrice">
                            <template slot-scope="scope">
                                <span v-if="scope.row.washModePrice"> {{ scope.row.washModePrice }}</span>
                                <span v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="织补" align="center" prop="darningModePrice">
                            <template slot-scope="scope">
                                <span v-if="scope.row.darningModePrice"> {{ scope.row.darningModePrice }}</span>
                                <span v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="单烫" align="center" prop="ironModePrice">
                            <template slot-scope="scope">
                                <span v-if="scope.row.ironModePrice"> {{ scope.row.ironModePrice }}</span>
                                <span v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保值精洗" align="center" prop="fineWashModePrice">
                            <template slot-scope="scope">
                                <span v-if="scope.row.fineWashModePrice"> {{ scope.row.fineWashModePrice }}</span>
                                <span v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="护理" align="center" prop="nurseModePrice">
                            <template slot-scope="scope">
                                <span v-if="scope.row.nurseModePrice"> {{ scope.row.nurseModePrice }}</span>
                                <span v-else>未设置</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="奢护洗" align="center" prop="shehuModePrice">
                            <template slot-scope="scope">
                                <span v-if="scope.row.shehuModePrice"> {{ scope.row.shehuModePrice }}</span>
                                <span v-else>未设置</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="衣服类型" align="center">
                        <el-table-column label="加厚" align="center" prop="plusPrice">
                            <template slot-scope="scope">
                                <span v-if="scope.row.plusPrice"> {{ scope.row.plusPrice }}</span>
                                <span v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="羊绒" align="center" prop="sheepPrice">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sheepPrice"> {{ scope.row.sheepPrice }}</span>
                                <span v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="真丝" align="center" prop="silkPrice">
                            <template slot-scope="scope">
                                <span v-if="scope.row.silkPrice"> {{ scope.row.silkPrice }}</span>
                                <span v-else>未设置</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="儿童" align="center" prop="childPrice">
                            <template slot-scope="scope">
                                <span v-if="scope.row.childPrice"> {{ scope.row.childPrice }}</span>
                                <span v-else>未设置</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
</template>

<script>
import { listClothItem, listClothItemPrice } from '@/api/core/clothItem'
import { listType } from '@/api/core/clothType'
import { listWashMode } from '@/api/core/washMode'
export default {
    name: 'Type',
    dicts: ['cloth_type'],
    data() {
        return {
            defaultProps: {
                label: 'name'
            },
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            clothItemPriceVO: null,
            clothItemPriceDataList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                typeId: null
            },
            // 表单参数
            form: {
                status: '0'
            },
            // 表单校验
            rules: {},
            clothTypeList: [],
            washModeList: [],
            clothVO: null,
            clothType0VO: null,
            clothType0V1: null,
            clothType0V2: null,
            clothType0V3: null
        }
    },
    created() {
        this.getWashModeList()
        this.getClothTypeList()
        this.getList()
    },
    methods: {
        /** 获取洗衣方式 */
        getWashModeList() {
            listWashMode({ status: '0' }).then((response) => {
                this.washModeList = response.rows
            })
        },
        /** 获取衣服类型 */
        getClothTypeList() {
            listType({ pageSize: 9999, pageNum: 1 }).then((response) => {
                this.clothTypeList = response.rows
            })
        },
        // 节点单击事件
        handleNodeClick(data) {
            this.queryParams.typeId = data.id
            this.clothItemPriceDataList = []
            this.handleQuery()
        },
        getList() {
            this.loading = true
            listClothItemPrice(this.queryParams).then((response) => {
                this.clothItemPriceDataList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                title: null,
                rechargeAmount: null,
                giveAmount: null,
                givePointAmount: null,
                expireMonth: null,
                status: '0',
                delFlag: null,
                createById: null,
                createBy: null,
                createTime: null,
                updateById: null,
                updateBy: null,
                updateTime: null,
                remark: null
            }
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        }
    }
}
</script>
<style>
.list_title {
    text-align: center;
    line-height: 40px;
}
</style>
