<template>
    <div class="app-container">
        <el-card class="price-card" shadow="never">
            <div slot="header" class="price-header">
                <span class="title">价格设置</span>
                <el-tabs v-model="areaId" @tab-click="getPriceList" type="card">
                    <el-tab-pane 
                        v-for="item in areaList" 
                        :key="item.id"
                        :label="item.name" 
                        :name="item.id + ''">
                    </el-tab-pane>
                </el-tabs>
            </div>

            <el-form ref="form" :model="form" size="medium" label-width="120px" v-loading="loading">
                <!-- 洗衣方式价格设置 -->
                <div class="price-section">
                    <div class="section-header">
                        <i class="el-icon-s-operation"></i>
                        <span>洗衣方式价格</span>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="6" v-for="item in washModeItems" :key="item.washModeId">
                            <el-card 
                                shadow="hover" 
                                class="price-item-card"
                                :class="{'has-price': form['w_' + item.washModeId] > 0}">
                                <div class="price-item-header">
                                    <span class="name">{{item.washModeName}}</span>
                                    <el-tag size="mini" :type="form['w_' + item.washModeId] > 0 ? 'success' : 'info'">
                                        {{form['w_' + item.washModeId] > 0 ? '已设置' : '未设置'}}
                                    </el-tag>
                                </div>
                                <el-form-item :prop="'w_' + item.washModeId">
                                    <el-input-number 
                                        v-model="form['w_' + item.washModeId]" 
                                        :placeholder="'请输入' + item.washModeName + '价格'" 
                                        :precision="2"
                                        :step="0.1"
                                        :min="0"
                                        :max="9999.99"
                                        controls-position="right"
                                        style="width: 100%">
                                    </el-input-number>
                                </el-form-item>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>

                <!-- 衣服类型价格设置 -->
                <div class="price-section">
                    <div class="section-header">
                        <i class="el-icon-s-goods"></i>
                        <span>衣服类型价格</span>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="6" v-for="item in clothTypeItems" :key="item.clothTypeCode">
                            <el-card 
                                shadow="hover" 
                                class="price-item-card"
                                :class="{'has-price': form['c_' + item.clothTypeCode] > 0}">
                                <div class="price-item-header">
                                    <span class="name">{{item.clothTypeName}}</span>
                                    <el-tag size="mini" :type="form['c_' + item.clothTypeCode] > 0 ? 'success' : 'info'">
                                        {{form['c_' + item.clothTypeCode] > 0 ? '已设置' : '未设置'}}
                                    </el-tag>
                                </div>
                                <el-form-item :prop="'c_' + item.clothTypeCode">
                                    <el-input-number 
                                        v-model="form['c_' + item.clothTypeCode]" 
                                        :placeholder="'请输入' + item.clothTypeName + '价格'" 
                                        :precision="2"
                                        :step="0.1"
                                        :min="0"
                                        :max="9999.99"
                                        controls-position="right"
                                        style="width: 100%">
                                    </el-input-number>
                                </el-form-item>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>

                <div class="form-footer">
                    <el-button type="primary" @click="submitForm" :loading="loading">保存价格</el-button>
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { listStoreArea } from '@/api/system/storeArea'
import { listPrice, setPrice } from '@/api/cloth/price'

export default {
    name: 'setClothPrice',
    data() {
        return {
            areaId: '1',
            areaList: [],
            form: {},
            formItems: [],
            clothId: '',
            loading: false
        }
    },
    created() {
        this.clothId = this.$route.params && this.$route.params.clothId
        this.getAreaList()
    },
    methods: {
        getAreaList() {
            this.loading = true
            listStoreArea({ pageSize: 10000, pageNum: 1, status: '0' }).then((res) => {
                this.areaList = res.rows
                console.log('区域列表:', this.areaList)
                this.getPriceList()
            })
        },
        getPriceList() {
            this.form = {}
            this.loading = true
            listPrice({ storeAreaId: this.areaId, clothId: this.clothId }).then((res) => {
                console.log('价格列表原始数据:', res.data)
                this.formItems = res.data || []
                this.loading = false
                
                // 确保formItems是数组
                if (!Array.isArray(this.formItems)) {
                    this.formItems = []
                    return
                }
                
                this.formItems.forEach((item) => {
                    if (item.price === undefined) {
                        return
                    }
                    // 转换price为数字并保留两位小数
                    const price = Number(parseFloat(item.price).toFixed(2))
                    if (String(item.priceType) === '0') {
                        this.form['w_' + item.washModeId] = price
                    } else if (String(item.priceType) === '1') {
                        this.form['c_' + item.clothTypeCode] = price
                    }
                })
                
                console.log('处理后的表单数据:', this.form)
            }).catch(error => {
                console.error('获取价格列表失败:', error)
                this.loading = false
            })
        },
        submitForm() {
            var list = []
            for (var key in this.form) {
                if (this.form[key] == undefined || this.form[key] == 0) {
                    continue
                }

                const price = Number(parseFloat(this.form[key]).toFixed(2))
                if (key.split('_')[0] == 'w') {
                    list.push({ washModeId: key.split('_')[1], priceType: '0', price: price })
                } else {
                    list.push({ clothType: key.split('_')[1], priceType: '1', price: price })
                }
            }

            console.log(JSON.stringify(list))
            setPrice({ clothId: this.clothId, storeAreaId: this.areaId, clothPriceItemDTOS: list }).then((res) => {
                this.$message.success('保存成功')
            })
        }
    },
    computed: {
        // 获取洗衣方式价格项
        washModeItems() {
            console.log('formItems数据类型检查:', this.formItems.map(item => ({
                priceType: item.priceType,
                typeOf: typeof item.priceType
            })))
            
            const items = this.formItems.filter(item => 
                item.priceType === '0' || 
                item.priceType === 0 || 
                String(item.priceType) === '0'
            )
            console.log('过滤后的洗衣方式:', items)
            return items
        },
        // 获取衣服类型价格项
        clothTypeItems() {
            const items = this.formItems.filter(item => 
                item.priceType === '1' || 
                item.priceType === 1 || 
                String(item.priceType) === '1'
            )
            console.log('过滤后的衣服类型:', items)
            return items
        }
    }
}
</script>

<style lang="scss" scoped>
.price-card {
    .price-header {
        padding: 0;
        .title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 20px;
            display: block;
        }
    }
}

.price-section {
    margin-bottom: 30px;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 4px;
    
    .section-header {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 15px 20px;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.05);
        
        i {
            margin-right: 8px;
            font-size: 18px;
            color: #409EFF;
        }
        
        span {
            font-size: 15px;
            font-weight: 500;
        }
    }
}

.price-item-card {
    margin-bottom: 20px;
    border: 1px solid #EBEEF5;
    transition: all 0.3s ease;
    
    &.has-price {
        background: linear-gradient(to right bottom, #f0f9eb, #ffffff);
        border-color: #b3e19d;
        
        .price-item-header .name {
            color: #67c23a;
        }
    }
    
    .price-item-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px dashed #EBEEF5;
        
        .name {
            font-size: 14px;
            font-weight: 500;
        }
    }
    
    .el-form-item {
        margin-bottom: 0;

        :deep(.el-input-number) {
            width: 100%;
            
            .el-input__inner {
                text-align: left;
                padding-left: 25px;
            }
            
            .el-input-number__decrease, 
            .el-input-number__increase {
                background-color: #f5f7fa;
                border-left: 1px solid #dcdfe6;
            }
        }
    }
    
    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    }
}

.form-footer {
    text-align: center;
    margin-top: 30px;
    padding: 20px 0;
    background-color: #fff;
    border-top: 1px solid #EBEEF5;
    position: sticky;
    bottom: 0;
    z-index: 1;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

:deep(.el-tabs--card > .el-tabs__header) {
    border-bottom: none;
    margin: 0;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
    border: none;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    margin-right: 10px;
    height: 32px;
    line-height: 32px;
    
    &.is-active {
        background-color: #409EFF;
        border-color: #409EFF;
        color: #fff;
    }
}

:deep(.el-input-number.is-controls-right .el-input__inner) {
    padding-left: 35px;
    padding-right: 30px;
}
</style>
