<template>
    <view class="container">

        <view style="height:25rpx;"></view>

        <form @submit="onSubmit">

            <view class="header flex flex-y-center arr-r">
                <view class="" @click="ChooseImage">
                    <image class="logo-img" :src="info.thumb?URL+''+info.thumb:'../../static/images/avatar_def.png'">
                    </image>
                    <!-- <image  src="../static/images/avatar_def.png" mode="aspectFill" class="logo-img"></image> -->
                </view>

                <view class="name">
                    <input type="text" name="title" :value="info.title" placeholder="请输入联系电话" />
                </view>

            </view>

            <view class="page-block">
                <view class="page-title-block">
                    <view class="title">门店信息</view>
                </view>

                <view class="content">

                    <view class="cell flex flex-y-center">
                        <view class="title-block">
                            <text>联系电话</text>
                        </view>
                        <view class="desc">
                            <input type="text" name="tel" :value="info.tel" placeholder="请输入联系电话" />
                        </view>
                    </view>
                    <view class="cell flex flex-y-center box-pack-between" @click="open" data-type="1">

                        <view class="title-block">
                            <text>省市</text>
                        </view>

                        <view class="desc flex-grow-0" style="flex-grow: 0;">
                            {{address.Prov_title}}{{address.City_title}}{{address.Dist_title}}
                            <text class="iconfont icongengduo"></text>
                        </view>

                    </view>


                    <view class="cell flex flex-y-center" data-type="1">
                        <view class="title-block">
                            <text>门店地址</text>
                        </view>
                        <view class="desc">
                            <input type="text" name="address" :value="addr_input" placeholder="请输入门店地址"
                                @input="onInputAddr" />
                        </view>
                        <view class="positon-btn flex-center" @click="chooseAddr">
                            <image src="../../static/images/map.png" mode="aspectFit" class="icon-map"></image>定位
                        </view>
                    </view>

                    <view class="cell flex flex-y-center">
                        <view class="title-block">
                            <text>门店公告</text>
                        </view>
                        <view class="desc">
                            <input type="text" name="announcement" :value="info.announcement" placeholder="请输入门店公告" />
                        </view>
                    </view>

                    <view class="cell flex flex-y-center">
                        <view class="title-block">
                            <text>支付方式</text>
                        </view>

                        <view class=" flex-center">

                            <view class="checklist-box " @click="choicepay(index)" v-for="(item,index) of pay_list"
                                :key='index' :class="is_pay==index?'actt':''">
                                <view class="radio__inner" :class="is_pay==index?'act_border':''">
                                    <view :class="is_pay==index?'is-default-checked':''"
                                        class="radio__inner-icon radio__inner-icon ">
                                    </view>
                                </view>
                                <text class="checklist-text">{{item}}</text>
                            </view>

                        </view>
                    </view>

                    <view class="cell flex flex-y-center">
                        <view class="title-block">
                            <text>经营类目</text>
                        </view>
                        <view class="desc">
                            <view class="input-box">{{info.shop_category}} <text style="color: red;">(类目不可更改)</text>
                            </view>
                        </view>
                    </view>

                    <view class="cell flex flex-y-center">
                        <view class="title-block">
                            <text>是否开启会员</text>
                        </view>

                        <view class="desc flex-center ">
                            <view class="checklist-box " @click="choicemenber(index)"
                                v-for="(item,index) of menber_list" :key='index' :class="is_menber==index?'actt':''">
                                <view class="radio__inner" :class="is_menber==index?'act_border':''">
                                    <view :class="is_menber==index?'is-default-checked':''"
                                        class="radio__inner-icon radio__inner-icon ">
                                    </view>
                                </view>
                                <text class="checklist-text">{{item}}</text>
                            </view>
                        </view>

                    </view>

                    <view class="cell flex flex-y-center">
                        <view class="title-block">
                            <text>是否开启堂食</text>
                        </view>
                        <view class="desc flex-center">
                            <view class="checklist-box " @click="choiceTang(index)" v-for="(item,index) of tangshi_list"
                                :key='index' :class="is_hall==index?'actt':''">
                                <view class="radio__inner" :class="is_hall==index?'act_border':''">
                                    <view :class="is_hall==index?'is-default-checked':''"
                                        class="radio__inner-icon radio__inner-icon ">
                                    </view>
                                </view>
                                <text class="checklist-text">{{item}}</text>
                            </view>
                        </view>
                    </view>

                    <view class="cell flex flex-y-center">
                        <view class="title-block">
                            <text>是否开启外卖</text>
                        </view>
                        <view class="desc flex-center">
                            <view class="checklist-box " @click="choicewai(index)" v-for="(item,index) of wai_list"
                                :key='index' :class="is_wai==index?'actt':''">
                                <view class="radio__inner" :class="is_wai==index?'act_border':''">
                                    <view :class="is_wai==index?'is-default-checked':''"
                                        class="radio__inner-icon radio__inner-icon ">
                                    </view>
                                </view>
                                <text class="checklist-text">{{item}}</text>
                            </view>
                        </view>
                    </view>

                    <view class="cell flex flex-y-center">
                        <view class="title-block">
                            <text>是否开启到店自提</text>
                        </view>
                        <view class="desc flex-center">
                            <view class="checklist-box " @click="choicezt(index)" v-for="(item,index) of zt_list"
                                :key='index' :class="is_zt==index?'actt':''">
                                <view class="radio__inner" :class="is_zt==index?'act_border':''">
                                    <view :class="is_zt==index?'is-default-checked':''"
                                        class="radio__inner-icon radio__inner-icon ">
                                    </view>
                                </view>
                                <text class="checklist-text">{{item}}</text>
                            </view>
                        </view>
                    </view>

                    <view class="flex home-qrcode">
                        <view class="title-block">
                            码管理
                        </view>
                        <view class="">
                            <image :src="URL+info.skm" @click="previewImage"></image>
                            <text>收款码</text>
                        </view>
                        <view class="">
                            <image :src="URL+info.line_qrcode" @click="previewImage"></image>
                            <text>排队取号</text>
                        </view>
                    </view>
                </view>
            </view>
            <view style="height:30rpx;"></view>
            <view class="footer-bar">
                <view class="content flex flex-center" style="background: none;position: relative;">
                    <button class="btn" hover-class="none" form-type="submit">
                        立即提交
                    </button>
                </view>
            </view>
        </form>
        <zx-uni-popup ref="uniScroll" type="bottom">
            <uni-scroll :Prov_arr="Prov_arr" @select="select"></uni-scroll>
        </zx-uni-popup>
    </view>


</template>

<script>
    import zxUniPopup from '@/components/zx-uni-popup/uni-popup.vue'
    import uniScroll from '@/components/uni-scroll/uni-scroll.vue'
    export default {
        components: {
            zxUniPopup,
            uniScroll,
        },
        data() {
            return {
                URL: getApp().globalData.URL,
                info: {},
                pay_list: [
                    '餐前付款',
                    '餐后付款'
                ],

                is_pay: 0,

                menber_list: [
                    '否', '是'
                ],
                is_menber: 0,

                tangshi_list: [
                    '否', '是'
                ],
                is_hall: 0,

                wai_list: [
                    '否', '是'
                ],
                is_wai: 0,
                zt_list: [
                    '否', '是'
                ],
                is_zt: 0,
                Prov_arr: [],
                address: {
                    Prov_title: "",
                    City_title: "",
                    Dist_title: ""
                },
                imgid: "",
                store_id: "",
                addr_input: '', //用户输入地址
                lat: '',
                lng: ''
            }
        },
        onLoad() {
            this.storeinfo();
            this.Prov();
            this.store_id = uni.getStorageSync("store_id");
        },

        methods: {
            onInputAddr(e) {
                this.addr_input = e.detail.value
            },
            chooseAddr() {
                let params = {
                    province: '',
                    city: '',
                    county: '',
                    address: '',
                }
                let flag = true
                if (this.address.Prov_code) {
                    params.province = this.address.Prov_code
                    params.city = this.address.City_code
                    params.county = this.address.Dist_code
                    flag = true
                }
                if (this.addr_input) {
                    params.address = this.addr_input
                    flag = true
                }
                if (flag) {
                    this.request({
                        url: 'Smdcshop/getLocation',
                        data: params
                    }).then(res => {

                        if (res && res.code == 200) {
                            this.chooseLocation(res.data.lat, res.data.lng)
                        } else {
                            this.chooseLocation()
                        }

                    }).catch(e => {
                        this.chooseLocation()
                    })
                } else {
                    this.chooseLocation()
                }


            },
            chooseLocation(lat = '', lng = '') {


                uni.chooseLocation({
                    latitude: lat,
                    longitude: lng,
                    success: res => {
                        this.lat = res.latitude
                        this.lng = res.longitude

                        if (this.addr_input === '') {

                            this.addr_input = res.address
                        }
                    },
                    complete: r => {

                    }
                });
            },
            previewImage() {
                let url = this.URL + this.info.line_qrcode;
                uni.previewImage({
                    current: 1,
                    urls: [url],
                    longPressActions: {
                        itemList: ['保存图片'],
                        success: function(data) {
                            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                        },
                        fail: function(err) {
                            console.log(err.errMsg);
                        }
                    }
                });
            },
            open(e) {
                this.$refs.uniScroll.open();
            },

            select(e) {
                console.log(e)
                this.address = e;
            },

            Prov(e) {
                this.request({
                    url: "Smdcshop/citys",
                    data: {},
                }).then(res => {
                    console.log(res, "res")
                    if (res.code === '200') {
                        this.Prov_arr = res.data;
                    }
                });
            },

            ChooseImage(e) {
                let type = e.currentTarget.dataset.type;
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: (res) => {
                        console.log(res)
                        // var tempFilesSize = res.tempFiles[0].size;//获取图片的大小，单位B
                        res.tempFilePaths.forEach((v, i) => {
                            // console.log(v)
                            this.Upload({
                                url: "Smdcshop/upload",
                                data: {
                                    url: v,
                                    type: "",
                                    token: "",
                                    admin_id: uni.getStorageSync("admin_id")
                                }
                            }).then(res => {
                                console.log(res, "res")
                                this.imgid = res.id;
                                this.info.thumb = res.src;
                            }).catch(err => {
                                uni.showToast({
                                    title: err.message,
                                    icon: 'none'
                                })
                            });
                        })
                    },
                });
            },

            storeinfo() {
                this.request({
                    url: 'Smdcshop/storeinfo',
                    data: {
                        store_id: uni.getStorageSync("store_id")
                    }
                }).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        this.info = res.data

                        this.address = {
                            Prov_code: res.data.province_code,
                            Prov_title: res.data.province_name,
                            City_code: res.data.city_code,
                            City_title: res.data.city_name,
                            Dist_code: res.data.district_code,
                            Dist_title: res.data.district_name
                        }
                        this.addr_input = res.data.address || ''
                        this.lat = res.data.lat
                        this.lng = res.data.lng

                        this.is_pay = Number(res.data.pay_type) - 1;

                        this.is_menber = res.data.is_vip;
                        this.is_hall = res.data.is_hall;
                        this.is_wai = res.data.is_waimai;
                        this.is_zt = res.data.is_ziti;

                    }
                })
            },

            choicepay(index) {
                this.is_pay = index;
            },
            choicemenber(index) {
                this.is_menber = index;
            },
            choiceTang(index) {
                this.is_hall = index;
            },
            choicewai(index) {
                this.is_wai = index;
            },

            choicezt(index) {
                this.is_zt = index;
            },

            onSubmit(e) {
                let params = {
                        store_id: this.store_id,
                        province_code: this.address.Prov_code,
                        city_code: this.address.City_code,
                        district_code: this.address.Dist_code,
                        pay_type: Number(this.is_pay) + 1,
                        is_vip: this.is_menber,
                        is_waimai: this.is_wai,
                        is_hall: this.is_hall,
                        is_ziti: this.is_zt,
                        num: 1,
                        id: this.info.id,
                        thumb: this.imgid,
                        lat: this.lat,
                        lng: this.lng
                    },
                    url;
                url = 'Smdcshop/store_update'
                var data = Object.assign(params, e.detail.value);
                if (params.name == "") {
                    uni.showToast({
                        title: "请输入名称",
                        icon: 'none'
                    })
                    return false
                }

                this.request({
                    url,
                    data: params
                }).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: res.message,
                            icon: 'none'
                        })
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 2000)
                    }
                }).catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    })
                });
            },

        }
    }
</script>

<style>
    @import url("../static/css/common.css");

    .home-qrcode {
        text-align: center;
        font-size: 28rpx;
        padding: 20rpx 0;
    }

    .home-qrcode .title-block {
        font-size: 30rpx;
        color: #333;
        font-weight: 600;
        padding-right: 20rpx;
    }

    .home-qrcode image {
        width: 250rpx;
        height: 250rpx;
        display: block;
    }

    page {
        background-color: #F4F5F7;
    }

    page .act_border {
        border: 1rpx solid #007AFF;
    }

    .header {
        height: 148rpx;
        padding: 0 25rpx;
        background-color: #fff;
    }

    .header .logo-img {
        display: block;
        width: 100rpx;
        height: 100rpx;
        border-radius: 8rpx;
        margin-right: 24rpx;
    }


    .checklist-box {

        display: -webkit-box;
        display: -webkit-flex;
        display: flex;

        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        margin: 5px 0;
        margin-right: 22px;
    }

    .radio__inner {
        -webkit-flex-shrink: 0;
        flex-shrink: 0;

        display: -webkit-box;
        display: -webkit-flex;
        display: flex;

        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        position: relative;
        border: 1px solid #DCDFE6;
        border-radius: 2px;
        box-sizing: border-box;
        width: 16px;
        height: 16px;
        border-radius: 16px;
        background-color: #fff;
        z-index: 1;
        -webkit-transition: border-color .3s;
        transition: border-color .3s;
    }

    .radio__inner-icon {
        width: 8px;
        height: 8px;
        border-radius: 10px;
        opacity: 0;
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s, -webkit-transform .3s;
    }

    .is-default-checked {
        opacity: 1;
        background-color: #007aff;
        -webkit-transform: rotate(45deg) scaleY(1);
        transform: rotate(45deg) scaleY(1);
    }

    .checklist-text {
        font-size: 28rpx;
        margin-left: 5px;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
        color: #000;
    }

    .positon-btn {
        font-size: 26rpx;
        color: #007aff;

    }

    .positon-btn .icon-map {
        display: block;
        width: 30rpx;
        height: 30rpx;
    }
</style>
