<template>
    <div class="add-edit-dialog-container">
        <el-dialog
            :title="title"
            :visible.sync="visible"
            width="600px"
            :before-close="close"
            :close-on-click-modal="false"
        >
            <el-form :model="formData" ref="formData" label-width="100px">
                <el-form-item label="商品名称:">
                    <span>{{ formData.name }}</span>
                </el-form-item>
                <el-form-item label="品牌:">
                    <span>{{ formData.brandName }}</span>
                </el-form-item>
                <el-form-item label="图集:">
                    <span @click="imgOpen(formData.imgs)">
                    <el-image
                        v-for="(item, i) in formData.imgs"
                        :key="i"
                        :src="item | pathPipe"
                        style="width:50px;height:50px;cursor:pointer"
                        class="images"
                    ></el-image>
                    </span>
                </el-form-item>
                <el-form-item label="推荐价格:">
                    <span>{{ formData.price }}</span>
                </el-form-item>
                <el-form-item label="供应商:">
                    <span>{{ formData.manufacturer }}</span>
                </el-form-item>
                <el-form-item label="联系电话:">
                    <span>{{ formData.telephone }}</span>
                </el-form-item>
                <el-form-item label="联系人:">
                    <span>{{ formData.contactPerson }}</span>
                </el-form-item>
                <el-form-item label="描述:">
                    <span>{{ formData.descr }}</span>
                </el-form-item>
                <el-form-item label="首页展示" min-width="110px;">
                    <el-switch
                        v-model="formData.hotFlag"
                        disabled
                        active-text="是"
                        inactive-text="否"
                        :active-value="1"
                        :inactive-value="0"
                    ></el-switch>
                </el-form-item>
                <el-form-item label="启用状态" min-width="110px;">
                    <el-switch
                        v-model="formData.statuz"
                        disabled
                        active-text="是"
                        inactive-text="否"
                        :active-value="1"
                        :inactive-value="0"
                    ></el-switch>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            type: null,
            title: '详情',
            submitBtndisabled: false,
            formData: {},
            visible: false,
        };
    },
    methods: {
        open(data) {
            this.formData = { ...data };
            this.formData.imgs = this.formData.imgs;
            this.visible = true;
            console.log(data, 'da');
        },
        close() {
            this.formData = {};
            this.visible = false;
        },
        imgOpen(imgs){
            window.open(imgs);
        }
    },
};
</script>
<style lang="stylus" scoped>
.add-edit-dialog-container {
    ::v-deep .el-form-item {
        margin-bottom: 0;
    }

    .images {
        margin-right: 5px;
    }
}
</style>
