<template>
    <el-dialog :title="`${type}信息`" :visible.sync="dialogVisible" width="550px" center class="dialog-info">
        <div class="add-wrp">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item :label="`${type}名称`">
                    <el-input v-model="form.name" size="small" :placeholder="`请输入${type}信息`" style="width: 300px"/>
                </el-form-item>
                <!--<el-form-item label="还车点类型">-->
                    <!--<el-radio v-model="form.parkType" label="Permit">停车区</el-radio>-->
                    <!--<el-radio v-model="form.parkType" label="Forbid">禁停区域</el-radio>-->
                <!--</el-form-item>-->
                <el-form-item label="是否开启">
                    <el-switch v-model="isOpen" :active-text="isOpen ? '开启': '关闭'"></el-switch>
                </el-form-item>
                <!--<el-form-item label="区域码">
                    <select-place ref="SelectPlace" size="small" @submit="setCode"></select-place>
                    <el-button type="primary" size="small" @click="searchLocation">查询</el-button>
                </el-form-item>-->
                <!--<el-form-item label="围栏类型">-->
                    <!--<el-radio v-model="form.fenceType" label="0">静态围栏</el-radio>-->
                    <!--<el-radio v-model="form.fenceType" label="1">动态围栏</el-radio>-->
                    <!--<el-radio v-model="form.fenceType" label="2">以某点为圆心的围栏</el-radio>-->
                <!--</el-form-item>-->
                <el-form-item label="围栏范围">
                    <el-input type="textarea" size="small" v-model="form.content" rows="4" placeholder="请点击右边的按钮绘画围栏" disabled style="width: 300px"/>
                    <el-button type="primary" size="small" @click="showDraw($event)" v-show="!form.content">画围栏</el-button>
                </el-form-item>
                <!--<el-form-item label="围栏监控时间">-->
                    <!--<el-time-select-->
                            <!--placeholder="起始时间"-->
                            <!--v-model="form.dailyStartTime"-->
                            <!--:picker-options="{-->
                              <!--start: '00:00',-->
                              <!--step: '00:30',-->
                              <!--end: '23:30'-->
                            <!--}">-->
                    <!--</el-time-select>-->
                    <!--<el-time-select-->
                            <!--placeholder="结束时间"-->
                            <!--v-model="form.dailyEndTime"-->
                            <!--:picker-options="{-->
                              <!--start: '00:00',-->
                              <!--step: '00:30',-->
                              <!--end: '23:30',-->
                              <!--minTime: form.dailyStartTime-->
                            <!--}">-->
                    <!--</el-time-select>-->
                <!--</el-form-item>-->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submit" v-show="action=='add'">确 定</el-button>
                <el-button size="small" type="primary" @click="save" v-show="action=='edit'">保 存</el-button>
            </span>
        </div>
    </el-dialog>
</template>

<script>
    import SelectPlace from '@/components/SelectPlace'
    import chinaJson from "@/utils/chinaJson"
    import api from  "@/api/bike"
    export default {
        name: "park-dot",
        props: {
            action: {
                type: String,
                default: 'add'
            },
            type: {
                type: String,
                default: '还车点'
            }
        },
        components: {
            SelectPlace
        },
        data() {
            return {
                form: {},
                isOpen: true,
                dialogVisible: false,
            }
        },
        methods: {
            open(data) {
                console.log(data)
                this.dialogVisible = true
                if(data.id) {
                    this.form = data
                    this.isOpen = !this.form.ifDisenable
                } else {
                    this.isOpen = true
                    this.form = {
                        name: '',
                        ifDisenable: false,
                        parkType: data,
                        fenceType: '0',
                        // fenceArea: '',
                        content: '',
                        // dailyStartTime: '00:00:00',
                        // dailyEndTime: '23:59:59'
                    }
                    console.log(this.form)
                }

                /*setTimeout(() => {
                    this.$refs.SelectPlace.openCode(this.form.fenceArea)
                }, 0)*/
            },
            setCode(code) {
                console.log(code)
                // const arr = code.split(',')
                this.form.fenceArea = code
            },
            showDraw(ev) {
                ev.stopPropagation()
                this.dialogVisible = false
                this.$bus.$emit('showDraw')
            },
            /*searchLocation() {
                if(this.form.fenceArea) {
                    let arr = this.form.fenceArea.split(',')
                    let province = chinaJson.china.filter((item, i) => {
                        return item.code == arr[0]
                    })
                    // console.log(province, province[0].name.indexOf('市'))
                    if(province[0].name.indexOf('市')!=-1) {
                        this.$bus.$emit('mapLocation', province[0].name)
                    } else {
                        let city = province[0].city.filter((item, i) => {
                            return item.code == arr[1]
                        })
                        this.$bus.$emit('mapLocation', city[0].name)
                    }
                } else {
                    this.$message('请选择省市');
                }
            },*/
            submit() {
                this.form.ifDisenable = !this.isOpen
                // console.log(this.form)
                api.addParkFence(this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    this.dialogVisible = false
                    this.$bus.$emit('refreshPark', {
                        parkType: res.results.parkType,
                        keyword: undefined
                    }, 1)
                }).catch(error => {
                    console.log(error)
                })
            },
            save() {
                this.form.ifDisenable = !this.isOpen
                // delete this.form.content
                api.updateParkFence(this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.dialogVisible = false
                }).catch((err) => {
                    console.log(err)
                })
            }
        },
        created() {
            this.$bus.$on('ParkDotData', (data) => {
                this.dialogVisible = true
                this.form.content = data
            })
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .add-wrp {
        .el-form-item {
            margin-bottom: 10px;
        }
        .dialog-footer {
            display: block;
            width: 100%;
            text-align: center;
        }
    }
</style>
