<template>
    <view>
        <u-card :show-foot="false">
            <view slot="head">
                <u-upload
                    :file-list="displayThumbs"
                    :action="action"
                    :header="uploadHeaders"
                    @on-uploaded="onUploaded"
                    @on-remove="onRemove"
                    width="160"
                ></u-upload>
                <u-icon
                    class="deleteBtn"
                    name="close-circle-fill"
                    size="48"
                    color="#595959"
                    v-if="canbeDelete"
                    @click="deleteGood"
                ></u-icon>
            </view>
            <view slot="body" class="goodBd">
                <u-cell-group :border="false">
                    <u-cell-item
                        required
                        title="商品类别"
                        arrow
                        :value="goodType | formatGoodType"
                        @click="chooseGoodType"
                    ></u-cell-item>
                    <u-cell-item
                        required
                        title="商品规格"
                        arrow
                        :value="category | formatCategory"
                        @click="chooseCategory"
                    ></u-cell-item>
                    <u-cell-item required title="商品数量" :arrow="false">
                        <u-number-box v-model="count" :min="1"></u-number-box>
                    </u-cell-item>
                    <!-- <u-cell-item title="商品规格" :arrow="false">
                        <u-input
                            type="text"
                            v-model="sku"
                            :border="false"
                            placeholder="墙体结构、尺寸或家具的长宽高等"
                            input-align="right"
                            :custom-style="{
                                marginRight: 0
                            }"
                            :clearable="false"
                        />
                    </u-cell-item> -->
                    <u-cell-item title="备注说明" :arrow="false">
                        <u-input v-model="mark" type="textarea" input-align="right" :clearable="false" />
                    </u-cell-item>
                    <u-cell-item
                        title="预估价"
                        :value="totalAmount | formatPrice"
                        :arrow="false"
                        :border-bottom="false"
                    ></u-cell-item>
                </u-cell-group>
            </view>
        </u-card>
        <u-picker
            mode="selector"
            v-model="showGoodTypes"
            :range="goodTypesSource"
            range-key="label"
            @confirm="changeGoodType"
            confirm-color="#ffcb57"
        ></u-picker>
        <u-picker
            mode="selector"
            v-model="showCategories"
            :range="categories"
            range-key="label"
            @confirm="changeCategory"
            confirm-color="#ffcb57"
        ></u-picker>
    </view>
</template>

<script>
import request from '../../common/service';
export default {
    props: {
        guid: {
            type: String,
            default: function () {
                return '';
            },
        },
        canbeDelete: {
            type: Boolean,
            default: function () {
                return false;
            },
        },
        source: {
            type: Object,
            default: function () {
                return function () {};
            },
        },
        goodTypesSource: {
            type: Array,
            default: function () {
                return [];
            },
        },
    },
    data() {
        return {
            action: 'https://116.62.129.2/CSWX/api/UploadAttachments',
            uploadHeaders: {
                'content-type': 'form-data',
                appid: 'wx08df2ca62f3e1766',
                token: uni.getStorageSync('token'),
            },
            goodType: undefined,
            // sku: '',
            mark: '',
            thumbs: [],
            category: undefined,
            count: 1,
            showGoodTypes: false,
            goodType: null,
            showCategories: false,
            categories: [],
            category: null,
            fileList: [],
            displayThumbs: [],
        };
    },
    computed: {
        computedAll() {
            const { goodType, mark, category, count, fileList, guid, thumbs, totalAmount } = this;
            return {
                guid,
                goodType,
                // sku,
                mark,
                thumbs,
                category,
                count,
                totalAmount,
            };
        },
        totalAmount() {
            if (this.category) {
                return this.category.price * this.count;
            }
            return 0;
        },
    },
    watch: {
        computedAll() {
            this.$emit('change', {
                guid: this.guid,
                data: this.computedAll,
            });
        },
        goodType() {
            this.category = null;
        }
    },
    filters: {
        formatGoodType(value) {
            if (!value) {
                return '请选择商品类别';
            }
            return `${value.label}`;
        },
        formatCategory(value) {
            if (!value) {
                return '请选择商品规格';
            }
            return `${value.label}`;
        },
        formatPrice(value) {
            return `${parseFloat(value).toLocaleString()}元`;
        },
    },
    mounted() {
        this.goodType = this.source.goodType;
        // this.sku = this.source.sku;
        this.mark = this.source.mark ? this.source.mark[0].Value : '';
        this.thumbs = this.source.thumbs || [];
        this.category = this.source.category || null;
        this.displayThumbs = Array.isArray(this.source.thumbs) ? [...this.source.thumbs] : [];
        if (this.goodType) {
            this.getCategories(this.goodType.label);
        }
    },
    methods: {
        onUploaded(lists) {
            const _t = this;
            this.fileList = lists.map((item) => {
                if (!item.response) {
                    return { fileurl: item.url };
                }
                var { code, result } = item.response;
                if (code === 0) {
                    return result;
                }
                return;
            });
            this.thumbs = this.fileList.map((x) => {
                return {
                    url: x.fileurl,
                };
            });
        },
        onRemove(index, lists, name) {
            this.fileList.splice(index, 1);
            this.thumbs.splice(index, 1);
        },
        deleteGood() {
            this.$emit('delete', this.guid);
        },
        changeGoodType(e) {
            const { currentCardIndex } = this;
            this.goodType = this.goodTypesSource[e[0]];
            this.getCategories(this.goodType.label);
        },
        chooseGoodType() {
            this.showGoodTypes = true;
        },
        getCategories(goodtype) {
            request.get('/api/BaseData/ServiceType', { GoodType: goodtype }).then((res) => {
                const { code, result } = res;
                if (code === 0) {
                    this.categories = result.map((x) => {
                        return {
                            value: x.id,
                            label: x.name,
                            number: x.number,
                            price: x.price,
                        };
                    });
                }
            });
        },
        changeCategory(e) {
            const { currentCardIndex } = this;
            this.category = this.categories[e[0]];
        },
        chooseCategory() {
            this.showCategories = true;
        },
    },
};
</script>

<style>
.deleteBtn {
    position: absolute;
    top: 24rpx;
    right: 24rpx;
}
</style>