<template>
    <!-- 面包屑 -->
    <el-breadcrumb>
        <el-breadcrumb-item>联系方式</el-breadcrumb-item>
        <el-breadcrumb-item to="/ContactInfo'">联系信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="formRef" :model="formData" :rules="rules">
        <el-row>

            <el-col :span='24'>
                <el-form-item :label-width="labelWidth" label="名称" prop="shopName">
                    <el-input v-model="formData.shopName" placeholder="请输入名称" />
                </el-form-item>
            </el-col>

            <el-col :span="24">
                <el-form-item :label-width="labelWidth" label="简介" prop="shopIntro">
                    <el-input v-model="formData.shopIntro" type="textarea" :rows="5" placeholder="请输入简介" />
                </el-form-item>
            </el-col>

            <el-col :span='6'>
                <el-form-item :label-width="labelWidth" label="图标" prop="shopLogo">
                    <UploadImage ref="uploadRef" v-model="formData.shopLogo" :data=imgData :limit="1" :fileSize="5"
                        :drag="true" />
                </el-form-item>
            </el-col>


        </el-row>
        <el-row>
            <el-button type="primary" class="sus_button" @click="save(formRef)">
                保存
            </el-button>
        </el-row>
    </el-form>
</template>
<script setup>
import { ref, reactive } from "vue";
import { getShopOperatorDetail, editShopOperatorDetail } from "@/api/business/ShopManager/Shops/shopOperator.js";
import modal from '@/plugins/modal.js'


let formData = ref({});


const imgData = ref({
    dirName: "ContactInfo"
})

//验证规则
const rules = reactive({

});

const labelWidth = 200;
const formRef = ref();

//获取
const getContent = async () => {
    const { code, data } = await getShopOperatorDetail();
    if (code == 200) {
        formData.value = data;
    }
};
getContent()


//保存
const save = async (formEl) => {
    if (!formEl) return;
    formEl.validate(async (valid) => {
        if (!valid) {
            return;
        }

        const { code } = await editShopOperatorDetail(formData.value);
        if (code == 200) {
            modal.msgSuccess('编辑成功')
        }
    });
};

</script>
<style lang="scss" scoped>
.sus_button {
    width: 300px;
    height: 50px;
    margin: 20px auto;
}

// .upLoadEl {
//     :deep(.el-upload-list__item) {
//         height: 200px;
//         width: 300px;
//     }

//     :deep(.el-upload-list__item-thumbnail) {
//         object-fit: contain;
//     }
// }
</style>
    