<template>
    <div class="app-container">
        <el-tabs v-model="areaId" @tab-click="getPriceList">
            <el-tab-pane v-for="item in areaList" :label="item.name" :name="item.id + ''"></el-tab-pane>
        </el-tabs>

        <el-form ref="form" :model="form" size="medium" label-width="100px" v-loading="loading">
            <el-divider content-position="left" style="margin-top: 20px">洗衣方式</el-divider>
            <el-row :gutter="15">
                <el-col :span="6" v-for="item in formItems">
                    <el-form-item :label="item.washModeName" :prop="'w_' + item.washModeId" v-if="item.priceType == '0'">
                        <el-input-number v-model="form['w_' + item.washModeId]" :placeholder="'请输入' + item.washModeName + '价格'" :style="{ width: '100%' }" :precision="2" :max="9999" :min="0" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-divider content-position="left">衣服类型</el-divider>
            <el-row :gutter="15">
                <el-col :span="6" v-for="item in formItems">
                    <el-form-item :label="item.clothTypeName" :prop="'c_' + item.clothTypeCode" v-if="item.priceType == '1'">
                        <el-input-number v-model="form['c_' + item.clothTypeCode]" :placeholder="'请输入' + item.clothTypeName + '价格'" :style="{ width: '100%' }" :precision="2" :max="9999" :min="0" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="15">
                <el-col :span="24">
                    <el-form-item style="text-align: center">
                        <el-button type="primary" @click="submitForm">保存价格</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </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
                this.getPriceList()
            })
        },
        getPriceList() {
            this.form = {}
            this.loading = true
            listPrice({ storeAreaId: this.areaId, clothId: this.clothId }).then((res) => {
                this.formItems = res.data
                this.loading = false
                this.formItems.forEach((item) => {
                    if (item.price == undefined) {
                        return
                    }
                    if (item.priceType == '0') {
                        this.form['w_' + item.washModeId] = item.price
                    } else {
                        this.form['c_' + item.clothTypeCode] = item.price
                    }
                })
                this.$forceUpdate()
            })
        },
        submitForm() {
            var list = []
            for (var key in this.form) {
                if (this.form[key] == undefined || this.form[key] == 0) {
                    continue
                }

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

            console.log(JSON.stringify(list))
            setPrice({ clothId: this.clothId, storeAreaId: this.areaId, clothPriceItemDTOS: list }).then((res) => {
                this.$message.success('保存成功')
            })
        }
    }
}
</script>

<style scoped></style>
