<template>
    <div class="store-info">
        <div class="info-cell">
            <p class="title">门店信息</p>
            <el-form
                class="store-info-form info-form"
                label-width="70px">
                <el-form-item label="门店名称" prop="name">
                    <el-input v-model="storeInfo.name">
                        <template slot="suffix">{{storeInfo.name.length}}/20</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="所属分组" prop="group">
                    <el-input v-model="storeInfo.name">
                        <i slot="suffix" class="el-input__icon el-icon-arrow-down"></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="门店图片" prop="imageUrls">
                    <ul class="img-list">
                        <li class="img-li" v-for="(img, index) in storeInfo.imageUrls.split(',')" :key="index + '_' + img ">
                            <img :src="img">
                        </li>
                        <li class="img-li J_add-img">
                            <i class="el-icon-plus"></i>
                            <p class="tip">图片规格640*340像素</p>
                        </li>
                    </ul>
                </el-form-item>
                <el-form-item label="联系电话" prop="phoneNumber">
                    <el-input v-model="storeInfo.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="营业时间" prop="phoneNumber">
                    <el-time-picker
                        is-range
                        v-model="storeInfo.operateTime"
                        :picker-options="{
                            start: '00:00',
                            step: '00:01',
                            end: '23:59'
                        }"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围">
                    </el-time-picker>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    name: "storeInfo",
    data() {
        return {
            storeInfo: {
                name: "",
                group: "",
                imageUrls: "https://www.foodnext.net/dispPageBox/getFile/GetImg.aspx?FileLocation=%2FPJ-FOODNEXT%2FFiles%2F&FileName=photo-03817-i.jpg,https://video.nextmag.com.tw/photo/2015/04/19/00bOOOPIC2b_1429452213732_209232_ver1.0.jpg,https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2017/12/28/20171228-052047_U9180_M363881_1edc.jpg?itok=Swxr8yZb,https://www.yw11.com/uploads/allimg/161224/16-16122413133KM.jpg",
                phoneNumber: 18758198024,
                operateTime: []
            }
        };
    }
};
</script>
<style lang="scss">
.store-info {
    flex: 1;
    .info-cell {
        margin-bottom: 24px;
        background: #fff;
        padding-bottom: 24px;
        >.title {
            line-height: 55px;
            text-indent: 32px;
            border-bottom: 1px solid #E4E7ED;
        }
        .store-info-form {
            padding: 24px 60px 0;
            .el-input {
                width: 500px;
            }
            .img-list {
                display: flex;
                flex-wrap: wrap;
                width: 500px;
                .img-li {
                    width:148px;
                    height:148px;
                    border-radius:6px;
                    margin-right: 8px;
                    margin-bottom: 10px;
                    &.J_add-img {
                        position: relative;
                        text-align: center;
                        line-height: 150px;
                        border:1px solid rgba(192,204,218,1);
                        font-size: 23px;
                        color: #909399;
                        .tip {
                            position: absolute;
                            font-size: 13px;
                            bottom: -23px;
                            height: 13px;
                            line-height: 13px;
                            text-align: center;
                            width: 100%;
                        }
                    }
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius:6px;
                    }
                }
            }
        }
    }
}
</style>


