<template>
    <div>
        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
            <el-form-item prop="cityId" label="城市ID">
                <template>
                    <el-select v-model="formData.cityId" clearable placeholder="请选择" :disabled="checkSubColumn('cityId')">
                        <el-option v-for="item in cityIdOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item prop="landmarkId" label="地标ID">
                <template>
                    <el-select v-model="formData.landmarkId" clearable placeholder="请选择" :disabled="checkSubColumn('landmarkId')">
                        <el-option v-for="item in landmarkIdOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item prop="areaId" label="区域ID">
                <template>
                    <el-select v-model="formData.areaId" clearable placeholder="请选择" :disabled="checkSubColumn('areaId')">
                        <el-option v-for="item in areaIdOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item prop="thingId" label="事物ID">
                <template>
                    <el-select v-model="formData.thingId" clearable placeholder="请选择" :disabled="checkSubColumn('thingId')">
                        <el-option v-for="item in thingIdOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item prop="groupName" label="点标组名称">
                <el-input v-model="formData.groupName" :disabled="checkSubColumn('groupName')"></el-input>
            </el-form-item>
            <el-form-item prop="aimTemplateId" label="点标模板">
                <template>
                    <el-select v-model="formData.aimTemplateId" clearable placeholder="请选择" :disabled="checkSubColumn('aimTemplateId')||formData.id">
                        <el-option v-for="item in aimTemplateIdOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item prop="userArea" label="区域">
                <el-input v-model="formData.userArea" :disabled="checkSubColumn('userArea')"></el-input>
            </el-form-item>
            <el-form-item prop="remark" label="备注">
                <el-input v-model="formData.remark" :disabled="checkSubColumn('remark')"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
                <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
                <el-button @click="$router.go(-1)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import formValidator from '../formValidator'

export default {
    created() {

        if (this.$route.query.column) {

            var columnList = this.$route.query.column.split(';')
            columnList.forEach(item => {
                var tempColumn = item;
                this.subColumnList.push(tempColumn.split(',')[1]);
            })

        }

        if (this.$route.query.id) {
            this.$http.get({
                url: '/aimGroupInfo/getOne',
                data: {
                    id: this.$route.query.id
                }
            }).then(res => {
                if (res.success) {


                    this.formData = res.data;

                    if (this.$route.query.column) {
                        var columnList = this.$route.query.column.split(';')
                        columnList.forEach(item => {
                            var tempColumn = item;
                            this.formData[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
                        })

                    }
                }
            })
        } else {
            if (this.$route.query.column) {
                var columnList = this.$route.query.column.split(';')
                columnList.forEach(item => {
                    var tempColumn = item;
                    this.formData[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
                })

            }
        }




        this.$http.get({
            url: '/cityInfo/all'
        }).then(res => {
            if (res.success) {

                if (res.data.length > 0) {
                    res.data.forEach(item => {
                        this.cityIdOptions.push({ label: item.cityName, value: String(item.id) });
                    })
                }
            }
        });



        this.$http.get({
            url: '/landMark/all'
        }).then(res => {
            if (res.success) {

                if (res.data.length > 0) {
                    res.data.forEach(item => {
                        this.landmarkIdOptions.push({ label: item.mapName, value: String(item.id) });
                    })
                }
            }
        });



        this.$http.get({
            url: '/areaInfo/all'
        }).then(res => {
            if (res.success) {

                if (res.data.length > 0) {
                    res.data.forEach(item => {
                        this.areaIdOptions.push({ label: item.areaName, value: String(item.id) });
                    })
                }
            }
        });



        this.$http.get({
            url: '/thingInfo/all'
        }).then(res => {
            if (res.success) {

                if (res.data.length > 0) {
                    res.data.forEach(item => {
                        this.thingIdOptions.push({ label: item.thingName, value: String(item.id) });
                    })
                }
            }
        });



        this.$http.get({
            url: '/aimTemplate/all'
        }).then(res => {
            if (res.success) {

                if (res.data.length > 0) {
                    res.data.forEach(item => {
                        this.aimTemplateIdOptions.push({ label: item.templateName + '(适用于' + item.applyTo + ')', value: String(item.id) });
                    })
                }
            }
        });
    },
    data() {
        return {
            saving: false,
            formData: {},
            rules: {

                cityId:
                    [
                        { required: true, message: '请选择 城市', trigger: 'blur' },
                    ],
                aimTemplateId:
                    [
                        { required: true, message: '请选择 点标模板', trigger: 'blur' },
                    ],
                landmarkId:
                    [
                        { required: true, message: '请选择 地标', trigger: 'blur' },
                    ],

            },
            cityIdOptions: [],
            landmarkIdOptions: [],
            areaIdOptions: [],
            thingIdOptions: [],
            aimTemplateIdOptions: [],
            subColumn: '',
            subValue: '',
            subColumnList: [],
        }
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            var data = JSON.parse(JSON.stringify(this.formData));
            this.$http.post({
                url: this.formData.id ? '/aimGroupInfo/update' : '/aimGroupInfo/save',
                data: data
            }).then(res => {
                if (res.success) {
                    this.$message.success('成功');
                    this.$router.go(-1);
                } else {
                    this.$message.warning('失败')
                }
            });
        },
        onDelete() {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
                return this.$http.post({
                    url: '/aimGroupInfo/del',
                    data: { id: this.formData.id }
                })
            }).then(() => {
                this.$message.success('删除成功');
                this.$router.go(-1);
            }).catch(action => {
                if (action === 'cancel') {
                    this.$message.info('删除取消');
                } else {
                    this.$message.error('删除失败');
                }
            })
        },
        checkSubColumn(value) {
            if (this.$route.query.column) {
                if (this.subColumnList.indexOf(value) >= 0) {
                    return true;
                }

            }
            return false;
        },
    }
}
</script>
<style lang="less" scoped>
</style>
