<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">
            <view class="search">
                <u-search
                    placeholder="模板名称/商品类目"
                    bg-color="#ffffff"
                    @search="handleSearch"
                    @custom="handleSearch"
                ></u-search>
            </view>
            <u-button size="mini" :custom-style="{ margin: '30rpx 32rpx 32rpx 32rpx' }" @click="addTemplate">
                <u-icon name="plus"></u-icon>添加模板
            </u-button>
            <view class="u-flex u-row-center u-margin-top-24" v-show="showLoading">
                <u-loading mode="flower"></u-loading>
            </view>
            <template v-if="orders.length === 0 && !showLoading">
                <u-empty text="暂无模板信息，前往添加" mode="list"></u-empty>
            </template>
            <template v-else>
                <u-card :show-foot="false" margin="0 30rpx 15rpx 30rpx" v-for="item in orders" :key="item.Id">
                    <view slot="head">
                        <u-checkbox
                            v-model="item.checked"
                            shape="circle"
                            active-color="#ffcb57"
                            :size="48"
                        ></u-checkbox>
                    </view>
                    <view slot="body">
                        <view class="gdtemplate">
                            <view class="left">
                                <image :src="item.thumbImg" mode="aspectFill" />
                            </view>
                            <view class="right">
                                <view class="title">{{ item.Name[0].Value }}</view>
                                <view class="type">{{ item.FServiceItemID.Name[0].Value }}</view>
                                <!-- <view class="extra">
                                    <view class="exitem">
                                        <span class="title">商品规格：</span>
                                        {{item.FModel || '无'}}
                                    </view>
                                </view> -->
                            </view>
                        </view>
                    </view>
                </u-card>
            </template>
        </view>
        <view class="fixBtn" v-if="selected" @click="confirmSelected">
            <u-icon name="checkbox-mark"></u-icon>
        </view>
        <u-toast ref="uToast" />
    </div>
</template>

<script>
import { mapActions } from 'vuex';
import request from '../../../common/service';
export default {
    data() {
        return {
            categoryId: '',
            orders: [],
            showLoading: false,
        };
    },
    onLoad(options) {
        this.categoryId = options.id;
        this.getTemplates(options.id);
    },
    onShow() {
        if (this.categoryId) {
            this.getTemplates(this.categoryId);
        }
    },
    computed: {
        selected() {
            return this.orders.some((x) => x.checked);
        },
    },
    methods: {
        ...mapActions({
            updateTemplateList: 'templateModule/updateTemplateList',
            importTemplates: 'publish/importTemplates',
        }),
        addTemplate() {
            this.$u.route('/pages/good-template/add/index');
        },
        async getTemplates(id) {
            this.showLoading = true;
            const response = await request.get('/api/GoodsMould/View', { id: id });
            const { code, message, result } = response;
            if (code === 0) {
                for (let index = 0; index < result.length; index++) {
                    const item = result[index];
                    let imgArr = [];
                    for (let j = 0; j < item.CustGoodsMouldImages.length; j++) {
                        // const temp = await this.getImageUrl(item.CustGoodsMouldImages[j].FAttachmentImage);
                        imgArr.push({
                            fileid: item.CustGoodsMouldImages[j].FAttachmentImage,
                            filename: `${item.CustGoodsMouldImages[j].FAttachmentImage}.jpg`,
                            fileurl: `https://www.jtfw8.com/WXXCX/FileService/${item.CustGoodsMouldImages[j].FAttachmentImage}.jpg`,
                        });
                    }
                    item.CustGoodsMouldImagesURL = [...imgArr];
                    item.thumbImg = imgArr[0].fileurl;
                    item.checked = false;
                }
                this.orders = result;
                console.log(result);
                this.updateTemplateList(result);
            } else {
                this.$refs.uToast.show({
                    title: message,
                });
            }
            this.showLoading = false;
        },
        async getImageUrl(fileId) {
            const res = await request.get('/api/UploadAttachments/GetUrl', { fileid: fileId });
            return res.result;
        },
        confirmSelected() {
            if (this.selected) {
                this.importTemplates(this.orders.filter((x) => x.checked)).then(() => {
                    let pages = getCurrentPages();
                    let prevPage = pages[pages.length - 2]; //上一页页面实例
                    prevPage.$vm.isAdding = true;
                    uni.navigateBack();
                });
            }
        },
        handleSearch(value) {
            const { categoryId } = this;
            request
                .get('/api/GoodsMould/Search', {
                    name: value,
                })
                .then(async (res) => {
                    const { code, message, result } = res;
                    if (code === 0) {
                        for (let index = 0; index < result.length; index++) {
                            const item = result[index];
                            let imgArr = [];
                            console.log('item', item);
                            for (let j = 0; j < item.CustGoodsMouldImages.length; j++) {
                                const temp = await this.getImageUrl(item.CustGoodsMouldImages[j].FAttachmentImage);
                                imgArr.push(temp[0]);
                            }
                            item.CustGoodsMouldImagesURL = [...imgArr];
                            item.thumbImg = imgArr[0].fileurl;
                            item.checked = false;
                        }
                        this.orders = result.filter((x) => x.FServiceItemID_Id == categoryId);
                        this.updateTemplateList(result);
                    } 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%;
        .search {
            padding: 30rpx 16rpx;
        }
        .gdtemplate {
            display: flex;
            align-items: flex-start;
            .left {
                margin-right: 20rpx;
                image {
                    width: 200rpx;
                    height: 200rpx;
                    border-radius: 10rpx;
                }
            }
            .right {
                .title {
                    font-size: 28rpx;
                    line-height: 50rpx;
                }
                .type {
                    margin: 10rpx 0;
                    font-size: 24rpx;
                    color: $u-tips-color;
                }
                .extra {
                    .exitem {
                        .title {
                            color: #595959;
                            font-size: 24rpx;
                        }
                    }
                }
            }
        }
        .action {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            /deep/.u-btn {
                margin-left: 12rpx;
            }
        }
    }
    .fixed-bottom-button {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffcb57;
        font-size: 28rpx;
        color: #472d21;
        padding-top: 24rpx;
        padding-bottom: 24rpx;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
    }
    .fixBtn {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 32rpx;
        bottom: 180rpx;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background-color: #ffcb57;
        color: #472d21;
        box-shadow: 0 0 6rpx #595959;
        z-index: 200000;
    }
}
</style>
