<template>
    <el-dialog title="批量设置" :visible.sync="dialogVisible" width="460px" class="dialog-info">
        <div class="info-wrp">
            <div class="title">投放信息</div>
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="投放状态">
                    <el-radio-group v-model="form.putBikeStatus">
                        <el-radio label="1">已投放</el-radio>
                        <el-radio label="0">未投放</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="所属行政区" v-show="form.putBikeStatus=='1'">
                    <select-place ref="SelectPlace" size="small" @submit="setCode"></select-place>
                </el-form-item>
                <el-form-item label="投放区域" v-show="form.putBikeStatus=='1'">
                    <el-select v-model="form.manageAreaId" size="small" placeholder="请选择" style="width: 200px;">
                        <el-option v-for="item in $root.regionOptions" :key="item.id" :label="item.name" :value="item.id" v-if="item.id!=''"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="投放时间" v-show="form.putBikeStatus=='1'">
                    <el-date-picker v-model="form.putInTime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="是否全选">
                    <el-radio-group v-model="allBike">
                        <el-radio label='1'>是</el-radio>
                        <el-radio label='0'>否</el-radio>
                    </el-radio-group>
                    <p class="radio-desc" v-show="allBike=='1'">选择“全选”，当前查询条件下，所有车辆将会一起被修改，请谨慎操作</p>
                </el-form-item>
                <div class="btn-group">
                    <el-row>
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="setup">确定</el-button>
                    </el-row>
                </div>
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
    import SelectPlace from '@/components/SelectPlace'
    import api from '@/api/bike'
    export default {
        name: "batch-setup",
        components: {
            SelectPlace
        },
        data() {
            return {
                dialogVisible: false,
                allBike: '0',
                form: {
                    id: [],
                    putBikeStatus: '1',
                    area: '',
                    putInTime: ''
                },
                params: {
                    area: '',
                    putInTime: '',
                    putBikeStatus: '',
                    troubleStatus: '',
                    putStatus: '',
                    manageAreaId: '',
                    keyword: undefined
                }
            }
        },
        created() {

        },
        methods: {
            open(idString, query) {
                this.dialogVisible = true
                this.form.id = idString
                this.params.troubleStatus = query.troubleStatus
                this.params.putStatus = query.putStatus
                this.params.keyword = query.keyword
                // this.params.putManageArea = query.putManageArea
                this.params.manageAreaId = query.manageAreaId
                setTimeout(() => {
                    this.$refs.SelectPlace.openCode()
                }, 0)
            },
            setCode(code) {
                console.log(code)
                this.form.area = code
                // const arr = code.split(',')
                // this.bike.provinceCode = arr[0]
                // this.bike.cityCode = arr[1]
                // this.bike.areaCode = arr[2]
                // console.log(code)
            },
            resetData() {
                this.$message({
                    type: 'success',
                    message: '批量设置成功!'
                })
                this.dialogVisible = false
                this.$emit('updateList')
                this.form = {
                    id: [],
                    putBikeStatus: '1',
                    area: '',
                    putInTime: ''
                }
                this.allBike = '0'
            },
            setup() {
                if(this.allBike=='1') {
                    this.params.area = this.form.area
                    this.params.putInTime = this.form.putInTime
                    this.params.putBikeStatus = this.form.putBikeStatus
                    api.putAll(this.params).then(res => {
                        console.log(res)
                        this.resetData()
                    }).catch(err => {
                        console.log(err)
                    })
                } else {
                    api.bikePutIn(this.form).then(res => {
                        console.log(res)
                        this.resetData()
                    }).catch(err => {
                        console.log(err)
                    })
                }
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .dialog-info {
        top: -5vh;
    }
    .info-wrp {
        margin-top: -50px;
        .title {
            font-size: 16px;
            margin: 20px 0 10px;
            padding-top: 20px;
            border-top: 1px solid #ccc;
        }
        .radio-desc {
            color: red;
            line-height: 1.2;
            margin: 0;
            margin-top: -5px;
            margin-bottom: -10px;
        }
        .btn-group {
            text-align: center;
            margin-top: 20px;
        }
    }
</style>
