<template>
    <el-dialog :title="form.id ? '编辑店铺' : '添加店铺'" :visible.sync="dialogVisible" @close="reset">
        <div style="height: 50vh;overflow-y: auto;">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
                <el-form-item label="店铺名称" prop="shopName">
                    <el-input v-model="form.shopName" placeholder="请输入门店名称"></el-input>
                </el-form-item>
                <el-form-item label="店铺类型">
                    <el-radio-group v-model="form.type">
                        <el-radio-button label="only">单店</el-radio-button>
                        <el-radio-button label="chain">连锁店</el-radio-button>
                        <el-radio-button label="join">加盟店</el-radio-button>
                    </el-radio-group>
                    <div class="tips">请谨慎修改！！！</div>
                </el-form-item>
                <el-form-item label="主店账号" prop="mainId" v-if="form.type != 'only'">
                    <el-select v-model="form.mainId" placeholder="请选择主店铺" filterable remote reserve-keyword
                        :remote-method="getTableData" :loading="shopListLoading">
                        <el-option v-for="item in shopList" :label="`ID:${item.id} - 名称：${item.shopName}`" :value="item.id"
                            :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="连锁店扩展店名">
                    <el-input v-model="form.chainName" placeholder="请输入连锁店扩展店名"></el-input>
                </el-form-item>
                <el-form-item label="门店logo" prop="logo">
                    <el-image :src="form.logo || require('@/assets/images/upload.png')" fit="contain"
                        style="width: 80px;height: 80px;" @click="showUpload = true; uploadIndex = 1"></el-image>
                </el-form-item>
                <el-form-item label="门店照片">
                    <el-image :src="form.coverImg || require('@/assets/images/upload.png')" fit="contain"
                        style="width: 80px;height: 80px;" @click="showUpload = true; uploadIndex = 2"></el-image>
                </el-form-item>
                <el-form-item label="经营模式">
                    <el-radio-group v-model="form.registerType">
                        <el-radio-button label="munchies">快餐版</el-radio-button>
                        <el-radio-button label="restaurant">餐饮版</el-radio-button>
                    </el-radio-group>
                    <div class="tips">请谨慎修改！！！</div>
                </el-form-item>
                <el-form-item label="管理方式" v-if="form.type != 'only'">
                    <el-radio-group v-model="form.tube_type">
                        <el-radio-button label="0">不可直接管理</el-radio-button>
                        <el-radio-button label="1">直接管理</el-radio-button>
                    </el-radio-group>
                    <div class="tips">请谨慎修改！！！</div>
                </el-form-item>
                <el-form-item label="试用/正式">
                    <el-radio-group v-model="form.profiles">
                        <el-radio-button label="probation">试用</el-radio-button>
                        <el-radio-button label="release">正式</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="激活码">
                    <el-input v-model="form.registerCode" placeholder="请输入激活码"></el-input>
                    <div class="tips">注：输入有效激活码表示添加的同时直接激活该店铺。</div>
                </el-form-item>
                <el-form-item label="登录账号" prop="account">
                    <el-input v-model="form.account" placeholder="请输入登录账号"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="password" v-if="!form.id">
                    <el-input type="password" show-password v-model="form.password" placeholder="请输入登录密码"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="设备数量">
                    <el-input-number v-model="form.supportDeviceNumber" controls-position="right" :min="1" :step="1"
                        step-strictly></el-input-number>
                </el-form-item>
                <!-- <el-form-item label="外卖起送金额">
                    <el-input-number v-model="form.takeaway_money" placeholder="0.00" controls-position="right"
                        :min="0"></el-input-number>
                </el-form-item> -->
                <el-form-item label="店铺经度" prop="provinces">
                    <el-row>
                        <el-col :span="9" v-if="form.provinces">
                            <el-input :value="`${form.provinces}-${form.cities}-${form.districts}`" disabled />
                        </el-col>
                        <el-col :span="4" v-if="form.lng">
                            <el-input v-model="form.lng" placeholder="经度" disabled></el-input>
                        </el-col>
                        <el-col :span="4" v-if="form.lng">
                            <el-input v-model="form.lat" placeholder="纬度" disabled></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="primary" plain icon="el-icon-place"
                                @click="showLocation = true">选择坐标</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="店铺详细地址">
                    <el-input type="textarea" v-model="form.address" placeholder="请输入门店详细地址"></el-input>
                </el-form-item>
                <el-form-item label="店铺简介">
                    <el-input type="textarea" v-model="form.detail" placeholder="请输入店铺简介"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <el-dialog title="选择地址" :visible.sync="showLocation" :modal="false" :modal-append-to-body="false">
            <div class="map_box">
                <div class="map">
                    <el-amap ref="map" :center="amapOptions.center">
                        <el-amap-marker :position="amapOptions.center"></el-amap-marker>
                    </el-amap>
                </div>
                <div class="search_box">
                    <el-amap-search-box :search-option="searchOption"
                        :on-search-result="onSearchResult"></el-amap-search-box>
                </div>
                <div class="search_wrap">
                    <div class="item" v-for="item in locationSearchList" :key="item.id">
                        <div class="left">
                            <div class="name">{{ item.name }}-{{ item.address }}</div>
                            <div class="location">
                                经纬度：{{ item.lng }},{{ item.lat }}
                            </div>
                        </div>
                        <div class="btn">
                            <el-button type="primary" @click="selectLocationHandle(item)">
                                选择
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="500px"
            @close="showUpload = false">
            <el-upload :before-remove="handleBeforeRemove" :on-success="handleSuccess" :on-error="handleError"
                :file-list="fileList" :headers="headers" :action="qiNiuUploadApi" class="upload-demo" multiple>
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" style="display: block;" class="el-upload__tip">请勿上传违法文件，且文件不超过15M</div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doSubmit">确认</el-button>
                <el-button @click="uploadClose">取消</el-button>
            </div>
        </el-dialog>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submitHandle" :loading="formLoading">
                <span v-if="!formLoading">保存</span>
                <span v-else>保存中...</span>
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import crudQiNiu from '@/api/tools/qiniu'
import { tbShopInfoPost, geocode, tbShopInfo } from '@/api/shop'
export default {
    computed: {
        ...mapGetters([
            'qiNiuUploadApi'
        ])
    },
    data() {
        const validateLogo = (rule, value, callback) => {
            if (!this.form.logo) {
                callback(new Error('请上传门店logo'))
            } else {
                callback()
            }
        }
        return {
            dialogVisible: false,
            showLocation: false,
            showUpload: false,
            uploadIndex: 1,
            startTime: '',
            endTime: '',
            formLoading: false,
            form: {
                id: '',
                shopName: '',
                mainId: '',
                type: 'only',
                tube_type: '0',
                registerType: 'restaurant',
                profiles: 'release',
                registerCode: '',
                account: '',
                password: '',
                phone: '',
                supportDeviceNumber: '',
                lat: '',
                lng: '',
                address: '',
                detail: '',
                status: 1,
                logo: '',
                coverImg: '',
                provinces: '',
                cities: '',
                districts: '',
                chainName: ''
            },
            resetForm: '',
            rules: {
                shopName: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ],
                mainId: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ],
                provinces: [
                    {
                        required: true,
                        message: '请选择坐标',
                        trigger: 'change'
                    }
                ],
                logo: [
                    {
                        required: true,
                        validator: validateLogo,
                        trigger: 'change'
                    }
                ],
                account: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'change'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'change'
                    }
                ]
            },
            fileList: [],
            files: [],
            headers: {
                'Authorization': getToken()
            },
            searchOption: {
                city: '西安',
                citylimit: false
            },
            locationSearchList: [],
            amapOptions: {
                center: [108.946465, 34.347984],
                position: []
            },
            shopListLoading: false,
            shopList: []
        }
    },
    mounted() {
        this.resetForm = { ...this.form }
    },
    methods: {
        // 获取商家列表
        async getTableData(query = '') {
            this.shopListLoading = true
            try {
                const res = await tbShopInfo({
                    page: 0,
                    size: 100,
                    shopName: query,
                    type: 'only'
                })
                this.shopListLoading = false
                this.shopList = res.content
            } catch (error) {
                this.shopListLoading = false
                console.log(error)
            }
        },
        onSearchResult(res) {
            this.locationSearchList = res
            this.amapOptions.center = [res[0].lng, res[0].lat]
        },
        // 确认地址选择
        async selectLocationHandle(item) {
            console.log(item);
            this.form.lng = item.lng
            this.form.lat = item.lat
            this.form.address = item.address
            this.showLocation = false

            const position = `${item.lng},${item.lat}`;
            const res = JSON.parse(await geocode({ location: position }))
            console.log(res);

            this.form.provinces = res.addressComponent.province
            this.form.cities = res.addressComponent.city
            this.form.districts = res.addressComponent.district
        },
        // 保存
        submitHandle() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    this.formLoading = true
                    try {
                        await tbShopInfoPost(this.form, this.form.id ? 'put' : 'post')
                        this.$emit('success')
                        this.formLoading = false
                        this.$notify({
                            title: '成功',
                            message: `${this.form.id ? '编辑' : '添加'}成功`,
                            type: 'success'
                        });
                        this.close()
                    } catch (error) {
                        this.formLoading = false
                        console.log(error)
                    }
                }
            })
        },
        handleSuccess(response, file, fileList) {
            // const uid = file.uid
            // const id = response.id
            // this.files.push({ uid, id })
            console.log('上传成功', response)
            this.files = response.data
        },
        handleBeforeRemove(file, fileList) {
            for (let i = 0; i < this.files.length; i++) {
                if (this.files[i].uid === file.uid) {
                    crudQiNiu.del([this.files[i].id]).then(res => { })
                    return true
                }
            }
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        // 监听上传失败
        handleError(e, file, fileList) {
            const msg = JSON.parse(e.message)
            this.crud.notify(msg.message, CRUD.NOTIFICATION_TYPE.ERROR)
        },
        // 刷新列表数据
        doSubmit() {
            this.fileList = []
            this.showUpload = false
            switch (this.uploadIndex) {
                case 1:
                    this.form.logo = this.files[0]
                    break;
                case 2:
                    this.form.coverImg = this.files[0]
                    break;
                default:
                    break;
            }
        },
        show(obj) {
            this.getTableData()

            this.dialogVisible = true
            if (obj && obj.id) {
                this.form = { ...obj }
            }
        },
        close() {
            this.dialogVisible = false
        },
        uploadClose() {
            this.showUpload = false
        },
        reset() {
            this.form = { ...this.resetForm }
        }
    }
}
</script>

<style scoped lang="scss">
.map_box {
    width: 100%;
    position: relative;

    .map {
        height: 300px;
    }

    .search_box {
        position: absolute;
        top: 10px;
        left: 10px;
    }

    .search_wrap {
        padding: 6px 0;

        .item {
            display: flex;
            padding: 12px 0;

            .left {
                flex: 1;
                display: flex;
                flex-direction: column;
                padding-right: 20px;

                .location {
                    color: #999;
                    padding-top: 4px;
                }
            }
        }
    }
}
</style>