<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 30rpx 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>
                <view class="templates">
                    <u-swipe-action
                        :index="index"
                        v-for="(item, index) in orders"
                        :key="item.Id"
                        @click="click"
                        :options="options"
                    >
                        <u-card :show-head="false" :show-foot="false" margin="0" padding="0" @click="editTemplate(item.Id)">
                            <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 ? item.FModel : '无' }}
                                    </view>
                                </view> -->
                                    </view>
                                </view>
                            </view>
                            <!-- <view slot="foot">
                            <view class="action">
                                <u-button size="mini" @click="editTemplate(item.Id)">编辑</u-button>
                                <u-button size="mini" @click="deleteTemplate(item.Id)">删除</u-button>
                            </view>
                        </view> -->
                        </u-card>
                    </u-swipe-action>
                </view>
            </template>
        </view>
        <u-toast ref="uToast" />
    </div>
</template>

<script>
import { mapActions } from 'vuex';
import request from '../../common/service';
export default {
    data() {
        return {
            orders: [],
            showLoading: false,
            options: [
                {
                    text: '编辑',
                    style: {
                        backgroundColor: '#007aff',
                    },
                },
                {
                    text: '删除',
                    style: {
                        backgroundColor: '#dd524d',
                    },
                },
            ],
        };
    },
    onLoad() {
        this.getTemplates();
    },
    onShow() {
        this.getTemplates();
    },
    computed: {},
    methods: {
        ...mapActions({
            updateTemplateList: 'templateModule/updateTemplateList',
            updateCurrentTemplate: 'templateModule/updateCurrentTemplate',
        }),
        addTemplate() {
            this.$u.route('/pages/good-template/add/index');
        },
        click(index, index1) {
            const item = this.orders[index];
            if (index1 === 0) {
                this.editTemplate(item.Id);
            } else if (index1 === 1) {
                this.deleteTemplate(item.Id);
            }
        },
        contentClick(index) {
            const item = this.orders[index];
            this.editTemplate(item.Id);
        },
        async getTemplates() {
            this.showLoading = true;
            const response = await request.get('/api/GoodsMould/View');
            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(temp[0]);
                        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;
                }
                this.orders = result;
                this.updateTemplateList(result);
            } else {
                this.orders = [];
                this.updateTemplateList([]);
            }
            this.showLoading = false;
        },
        async getImageUrl(fileId) {
            const res = await request.get('/api/UploadAttachments/GetUrl', { fileid: fileId });
            return res.result;
        },
        editTemplate(id) {
            const curTemplate = this.orders.find((x) => x.Id === id);
            console.log(curTemplate);
            this.updateCurrentTemplate(curTemplate).then(() => {
                this.$u.route('/pages/good-template/edit/index');
            });
        },
        deleteTemplate(id) {
            if (!id) {
                return;
            }
            request
                .post('/api/GoodsMould/Delete', {
                    FID: id,
                })
                .then((res) => {
                    const { code, message } = res;
                    if (code === 0) {
                        this.getTemplates();
                    } else {
                        this.$refs.uToast.show({
                            title: message,
                        });
                    }
                });
        },
        handleSearch(value) {
            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({
                                    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;
                        }
                        this.orders = result;
                        this.updateTemplateList(result);
                    } else {
                        this.$refs.uToast.show({
                            title: message,
                        });
                    }
                });
        },
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '京台分享更多精彩',
            path: '/pages/index/index',
            imageUrl: '/static/images/share/WechatIMG96.png'
        };
    },
};
</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;
            }
        }
        .templates {
            padding: 0 30rpx;
            /deep/ .u-swipe-action {
                margin-bottom: 24rpx;
                background-color: #f4f4f5;
                border-radius: 12rpx;
            }
        }
    }
}
</style>
