<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :background="{ backgroundColor: '#ffcb57' }"
                :border-bottom="false"
                title="编辑模板"
                title-color="#472d21"
            ></u-navbar>
        </div>
        <view class="wrap">
            <u-card :foot-border-top="false" :body-style="{ padding: 0 }">
                <view slot="head">
                    <u-upload
                        :file-list="displayFileList"
                        :action="action"
                        :header="uploadHeaders"
                        @on-uploaded="onUploaded"
                        @on-remove="onRemove"
                        name="file"
                        width="190"
                    ></u-upload>
                </view>
                <view slot="body" class="goodBd">
                    <u-cell-group>
                        <u-cell-item required title="模板名称" :arrow="false">
                            <u-input
                                v-model="name"
                                type="text"
                                :clearable="false"
                                height="48"
                                input-align="right"
                                placeholder="请输入模板名称"
                            />
                        </u-cell-item>
                        <u-cell-item
                            required
                            title="服务类目"
                            arrow
                            :value="displayServiceType"
                            @click="chooseServiceType"
                        ></u-cell-item>
                        <u-cell-item
                            required
                            title="商品类别"
                            arrow
                            :value="displayGoodType"
                            @click="chooseGoodType"
                        ></u-cell-item>
                        <!-- <u-cell-item required title="商品规格" :arrow="false">
                            <u-input
                                v-model="sku"
                                type="text"
                                :border="false"
                                placeholder="墙体结构、尺寸或家具的长宽高等"
                                input-align="right"
                                :custom-style="{
                                marginRight: 0
                            }"
                            />
                        </u-cell-item> -->
                        <u-cell-item title="备注说明" :arrow="false">
                            <u-input
                                v-model="mark"
                                type="textarea"
                                input-align="right"
                                :custom-style="{ paddingLeft: '8rpx' }"
                            />
                        </u-cell-item>
                    </u-cell-group>
                </view>
            </u-card>
            <view class="mc-btn">
                <u-button
                    :custom-style="{ margin: '16rpx 30rpx', backgroundColor: '#ffcb57', color: '#472d21' }"
                    hover-class="defaultBtnhover"
                    :loading="loading"
                    @click="placeOrder"
                    >完成</u-button
                >
            </view>
            <u-picker
                mode="selector"
                v-model="showGoodTypes"
                :range="goodTypes"
                range-key="label"
                @confirm="changeGoodType"
                confirm-color="#ffcb57"
            ></u-picker>
            <u-picker
                mode="selector"
                v-model="showServiceTypes"
                :range="serviceTypes"
                range-key="label"
                @confirm="changeServiceType"
                confirm-color="#ffcb57"
            ></u-picker>
            <u-toast ref="uToast" />
        </view>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import request from '../../../common/service';
export default {
    data() {
        return {
            action: 'https://www.jtfw8.com/WXXCX/api/UploadAttachments',
            uploadHeaders: {
                'content-type': 'form-data',
                appid: 'wx08df2ca62f3e1766',
                token: uni.getStorageSync('token'),
            },
            fileList: [],
            showGoodTypes: false,
            goodTypes: [],
            goodType: null,
            showServiceTypes: false,
            serviceTypes: [],
            serviceType: null,
            // sku: '',
            mark: '',
            name: '',
            loading: false,
            displayFileList: [],
        };
    },
    onLoad() {
        this.getServiceTypes();
        this.name = this.currentTemplate.Name[0].Value;
        this.serviceType = {
            value: this.currentTemplate.FServiceItemID.Id,
            label: this.currentTemplate.FServiceItemID.Name[0].Value,
            number: this.currentTemplate.FServiceItemID.Number,
        };
        this.getGoodTypes(this.serviceType.label);
        this.goodType = {
            value: this.currentTemplate.FGoodsTypeID.Id,
            label: this.currentTemplate.FGoodsTypeID.Name[0].Value,
            number: this.currentTemplate.FGoodsTypeID.Number,
        };
        // this.sku = this.currentTemplate.FModel;
        this.mark = this.currentTemplate.Description[0].Value;
        this.displayFileList = this.currentTemplate.CustGoodsMouldImagesURL.map((x) => {
            return {
                url: x.fileurl,
            };
        });
        this.fileList = this.currentTemplate.CustGoodsMouldImagesURL;
    },
    computed: {
        ...mapGetters({
            userDetail: 'user/userDetail',
            currentTemplate: 'templateModule/currentTemplate',
        }),
        displayGoodType() {
            if (!this.goodType) {
                return '请选择商品类别';
            }
            return `${this.goodType.label}`;
        },
        displayServiceType() {
            if (!this.serviceType) {
                return '请选择服务类型';
            }
            return `${this.serviceType.label}`;
        },
    },
    methods: {
        onUploaded(lists) {
            this.fileList = lists.map((item) => {
                if (!item.response) {
                    return this.fileList.find((x) => x.fileurl === item.url);
                }
                var { code, result } = item.response;
                if (code === 0) {
                    return result;
                }
                return;
            });
        },
        onRemove(index, lists, name) {
            this.fileList.splice(index, 1);
        },
        getGoodTypes(servicename) {
            request.get('/api/BaseData/GoodsType', { serviceitem: servicename }).then((res) => {
                const { code, result } = res;
                if (code === 0) {
                    this.goodTypes = result.map((x) => {
                        return {
                            value: x.id,
                            label: x.name,
                            number: x.number,
                        };
                    });
                }
            });
        },
        getServiceTypes() {
            request.get('/api/BaseData/ServiceItem').then((res) => {
                const { code, result } = res;
                if (code === 0) {
                    this.serviceTypes = result.map((x) => {
                        return {
                            value: x.id,
                            label: x.name,
                            number: x.number,
                        };
                    });
                }
            });
        },
        changeGoodType(e) {
            this.goodType = this.goodTypes[e[0]];
        },
        chooseGoodType() {
            this.showGoodTypes = true;
        },
        changeServiceType(e) {
            this.serviceType = this.serviceTypes[e[0]];
            this.getGoodTypes(this.serviceType.label);
        },
        chooseServiceType() {
            this.showServiceTypes = true;
        },
        placeOrder() {
            const { name, goodType, serviceType, sku, mark, fileList, currentTemplate } = this;
            if (!name || !goodType || !serviceType || fileList.length === 0) {
                this.$refs.uToast.show({
                    title: '请完善信息后再提交！',
                });
                return;
            }
            const commitData = {
                Model: {
                    FID: currentTemplate.Id,
                    FName: name,
                    FBusinessID: {
                        FNumber: this.userDetail.Number,
                    },
                    FServiceItemID: {
                        FNumber: serviceType.number,
                    },
                    FGoodsTypeID: {
                        FNumber: goodType.number,
                    },
                    // FModel: sku,
                    F_PAEZ_ImagesEntity: fileList.map((x) => {
                        return {
                            FAttachmentImage: x.fileid,
                        };
                    }),
                    FDescription: mark,
                },
            };
            this.loading = true;
            request.post('/api/GoodsMould/save', commitData).then((res) => {
                const { code, message } = res;
                this.loading = false;
                if (code === 0) {
                    this.$refs.uToast.show({
                        title: '添加成功！',
                        url: '/pages/good-template/index',
                    });
                } else {
                    this.$refs.uToast.show({
                        title: message,
                    });
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    .header {
        background-color: #ffcb57;
    }
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        .goodFt {
            .price {
                display: flex;
                justify-content: flex-end;
                align-content: center;
                .unit,
                .amount {
                    font-size: 36rpx;
                    color: red;
                }
                .amount {
                    margin-right: 32rpx;
                }
            }
            .delete {
                margin-top: 12rpx;
                padding-top: 24rpx;
                border-top: 2rpx dashed #bfbfbf;
            }
        }
    }
}
</style>
