<template>
    <view class="container">
        <view style="height:25rpx;"></view>
        <form @submit="onSubmit">
            <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="title" :value="info.title" placeholder="请输入名称" />
                        </view>
                    </view>

                    <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>

                    <navigator url="./category" class="cell flex flex-y-center">
                        <view class="title-block">
                            <text>经营类目</text>
                        </view>
                        <view class="desc box-pack-between flex-y-center">
                            <view class="input-box">{{new_shop_category_txt}}</view>
                            <text class="iconfont icongengduo"></text>
                        </view>
                    </navigator>

                    <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 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="choicehall(index)"
                                v-for="(item,index) of hall_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>
            </view>

            <view class="info-car">
                <view class="title-block">
                    <view class="title">
                        门店公告
                    </view>
                </view>
                <view class="content">
                    <input type="text" name="announcement" :value="info.announcement" placeholder="请输入内容(选填)" />
                </view>
            </view>

            <view class="info-car">
                <view class="title-block">
                    <view class="title">
                        请上传LOGO
                    </view>
                </view>
                <view class="content" @click="ChooseImage">
                    <image :src="thumb?URL+thumb:'../static/images/icon_6.png'" class="logo-img" mode="">
                    </image>
                </view>
            </view>
            <view style="height:30rpx;"></view>
            <view class="footer-bar">
                <view class="content flex flex-center" style="background: none;position: relative;z-index: 1;">
                    <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: [
                    '餐前付款',
                    '餐后付款'
                ],
                id: "",
                is_pay: 0,

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


                wai_list: [
                    '否', '是'
                ],
                is_wai: 0,
                Prov_arr: [],

                address: {
                    Prov_title: "",
                    City_title: "",
                    Dist_title: ""
                },

                imgid: "",
                admin_id: "",
                shop_category: "",
                three_code: "",
                thumb: "",
                zt_list: [
                    '否', '是'
                ],
                is_zt: 0,
                is_out: true,
                addr_input: '', //用户输入地址
                lat: '',
                lng: '',
                new_shop_category: {},
                new_shop_category_txt: '',
            }
        },

        onLoad(e) {
            // this.storeinfo();
            this.Prov();
            this.admin_id = uni.getStorageSync("admin_id");
            if (e.id) {
                this.id = e.id;
                this.store_user_info(e.id)
            }
        },

        onShow() {
            let cate = uni.getStorageSync("category")
            if (cate.three_code) {
                this.shop_category = cate.three_category;
                this.three_code = cate.three_code;
            }
        },
        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 => {

                    }
                });
            },
            choicezt(index) {
                this.is_zt = index;
            }, 
            choicehall(index) {
                this.is_hall = index;
            },
            //获取详情
            store_user_info(id) {
                this.request({
                    url: 'Smdcshop/storeinfo',
                    data: {
                        store_id: id,
                    }
                }).then(res => {
                    if (res.code == 200) {
                        this.info = res.data;
                        this.thumb = res.data.thumb;
                        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_wai = res.data.is_waimai;
                        this.is_zt = res.data.is_ziti;
                        this.is_hall = res.data.is_hall;
                        if(res.data.one_category && res.data.two_category){
                            this.new_shop_category = {
                                one_category: {
                                    code: res.data.one_category,
                                    id: res.data.one_category_id,
                                    name: res.data.one_category_name,
                                },
                                two_category: {
                                    code: res.data.two_category,
                                    id: res.data.two_category_id,
                                    name: res.data.two_category_name,
                                }
                            }
                            this.new_shop_category_txt =
                                `${res.data.one_category_name}>${res.data.two_category_name}`
                        }
                        
                    }
                })
            },
            open(e) {
                this.$refs.uniScroll.open();
            },

            select(e) {

                this.address = e;
            },

            Prov(e) {
                this.request({
                    url: "Smdcshop/citys",
                    data: {},
                }).then(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) => {

                        // var tempFilesSize = res.tempFiles[0].size;//获取图片的大小，单位B
                        res.tempFilePaths.forEach((v, i) => {
                            // 
                            this.Upload({
                                url: "Smdcshop/upload",
                                data: {
                                    url: v,
                                    type: "",
                                    token: "",
                                    admin_id: this.admin_id
                                }
                            }).then(res => {

                                this.imgid = res.id;
                                this.thumb = res.src;
                            }).catch(err => {
                                uni.showToast({
                                    title: err.message,
                                    icon: 'none'
                                })
                            });
                        })
                    },
                });
            },


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

            onSubmit(e) {
                let params = {
                        admin_id: this.admin_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_hall:this.is_hall,
                        is_waimai: this.is_wai,
                        num: 1,
                        is_ziti: this.is_zt,
                        is_hall:this.is_hall,
                        thumb: this.imgid,
                        lat: this.lat,
                        lng: this.lng,
						
                    },
                    url;

                if (this.id) {
                    params.id = this.id
                    url = 'Smdcshop/store_update'
                } else {
                    url = 'Smdcshop/shop_store_add'
                }

                var data = Object.assign(params, e.detail.value);

                if (!data.title || !data.tel || !data.city_code || !data.address) {
                    uni.showToast({
                        title: "必填项不能为空",
                        icon: 'none'
                    })
                    return false
                }
                if (!this.new_shop_category_txt) {
                    uni.showToast({
                        title: "请选择经营类目",
                        icon: 'none'
                    })
                    return false
                } else {
                    data.one_category = this.new_shop_category.one_category.code
                    data.two_category = this.new_shop_category.two_category.code
                }
                this.request({
                    url,
                    data: data
                }).then(res => {

                    if (res.code == 200) {
                        uni.showToast({
                            title: res.message,
                            icon: 'none'
                        })
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 3000)
                    }

                }).catch((res) => {

                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    })

                });
            },

        }
    }
</script>

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

    .info-car {
        margin-top: 25rpx;
        background-color: #fff;
        padding: 0 25rpx;
    }

    .info-car .title-block {
        border-bottom: 1rpx solid #f5f5f5;
    }

    .info-car .title {
        height: 100rpx;
        line-height: 100rpx;
        font-size: 30rpx;
        color: #333;
        font-weight: 600;
    }

    .info-car .content {
        padding: 30rpx 0;
    }

    .info-car .input-box {
        font-size: 30rpx;
        color: #000;
    }

    .info-car .logo-img {
        display: block;
        width: 120rpx;
        height: 120rpx;
    }

    page {
        background-color: #F4F5F7;
    }

    .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);
    }

    page .act_border {
        border-color: #007AFF;
    }

    .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>
