<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="title" label="标题">
                <el-input v-model="formData.title"></el-input>
            </el-form-item>
            <el-form-item prop="price" label="价格">
                <el-input type="number" v-model="formData.price"></el-input>
            </el-form-item>
            <el-form-item prop="payMode" label="付款方式">
                <el-input v-model="formData.payMode"></el-input>
            </el-form-item>
            <el-form-item prop="featureCode" label="房源特色">

                <el-select v-model="formData.featureCode" multiple placeholder="请选择" style="width: 100%;">
                    <el-option v-for="item in houseFeatures" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                </el-select>

            </el-form-item>
            <el-form-item prop="houseArea" label="面积">
                <el-input v-model="formData.houseArea"></el-input>
            </el-form-item>
            <el-form-item prop="room" label="室">
                <el-input type="number" v-model="formData.room"></el-input>
            </el-form-item>
            <el-form-item prop="hall" label="厅">
                <el-input type="number" v-model="formData.hall"></el-input>
            </el-form-item>
            <el-form-item prop="guard" label="卫">
                <el-input type="number" v-model="formData.guard"></el-input>
            </el-form-item>
            <el-form-item prop="totalFloor" label="总楼层">
                <el-input type="number" v-model="formData.totalFloor"></el-input>
            </el-form-item>
            <el-form-item prop="houseFloor" label="层">
                <el-input type="number" v-model="formData.houseFloor"></el-input>
            </el-form-item>
            <el-form-item prop="faced" label="朝向">
                <el-select placeholder="朝向" size="small" v-model="formData.faced" class="filter-item">
                    <el-option v-for="item in faceds" :key="item.facedName" :label="item.facedName" :value="item.facedName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="decoration" label="装修">
                <el-input v-model="formData.decoration"></el-input>
            </el-form-item>
            <el-form-item prop="checkIn" label="入住">
                <el-input v-model="formData.checkIn"></el-input>
            </el-form-item>
            <el-form-item prop="elevator" label="电梯">
                <el-select placeholder="电梯" size="small" v-model="formData.elevator" class="filter-item">
                    <el-option label="有" value="有">
                    </el-option>
                    <el-option label="无" value="无">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="rentingType" label="出租类型">

                <el-select placeholder="出租类型" size="small" v-model="formData.rentingType" class="filter-item">
                    <el-option label="整租" value="0">
                    </el-option>
                    <el-option label="合租" value="1">
                    </el-option>
                    <el-option label="品牌公寓" value="2">
                    </el-option>
                </el-select>

            </el-form-item>
            <el-form-item prop="partCode" label="房源配置">

                <el-select v-model="formData.partCode" multiple placeholder="请选择" style="width: 100%;">
                    <el-option v-for="item in houseParts" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                </el-select>

            </el-form-item>
            <el-form-item prop="houseIntroduce" label="房源介绍">
                <el-input type="textarea" :rows="5" v-model="formData.houseIntroduce"></el-input>
            </el-form-item>
            <el-form-item prop="housekeeper" label="管家">

                <el-select v-model="formData.housekeeper" placeholder="请选择" size="small">
                    <el-option v-for="item in houseKeepers" :key="item.id" :label="item.keepName" :value="item.id">
                    </el-option>
                </el-select>

            </el-form-item>
             <el-form-item prop="phone" label="业务员电话">
                <el-input v-model="formData.phone"></el-input>
            </el-form-item>
            <el-form-item prop="retrieval" label="检索关键字">
                <el-input v-model="formData.retrieval"></el-input>
            </el-form-item>

            <el-form-item prop="cityCode" label="市">

                <el-select placeholder="市" size="small" @change="cityChange" filterable v-model="formData.cityCode" class="filter-item">
                    <el-option v-for="item in cityCodeOptions" :key="item.code" :label="item.shortName" :value="item.code">
                    </el-option>
                </el-select>

            </el-form-item>

            <el-form-item prop="districtCode" label="区">

                <el-select v-model="formData.districtCode" filterable @change="districtChange" placeholder="请选择" size="small">
                    <el-option v-for="item in districts" :key="item.code" :label="item.fullName" :value="item.code">
                    </el-option>
                </el-select>

            </el-form-item>

            <el-form-item prop="streetCode" label="街道">

                <el-select v-model="formData.streetCode" @change="streetChange" filterable placeholder="请选择" size="small">
                    <el-option v-for="item in streets" :key="item.code" :label="item.fullName" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="housingDistrict" label="小区">

                <el-select v-model="formData.housingDistrict" filterable placeholder="请选择" size="small">
                    <el-option v-for="item in housingDistricts" :key="item.code" :label="item.fullName" :value="item.code">
                    </el-option>
                </el-select>

            </el-form-item>

            <el-form-item prop="lineCode" label="地铁">

                <el-select v-model="formData.lineCode" @change="lineCodeChange" clearable filterable placeholder="请选择" size="small">
                    <el-option v-for="item in lineCodes" :key="item.code" :label="item.metroName" :value="item.code">
                    </el-option>
                </el-select>

            </el-form-item>

            <el-form-item prop="stationCode" label="地铁站">

                <el-select v-model="formData.stationCode" clearable filterable placeholder="请选择" size="small">
                    <el-option v-for="item in stationCodes" :key="item.code" :label="item.stationName" :value="item.code">
                    </el-option>
                </el-select>

            </el-form-item>

            <el-form-item prop="businessCircleCode" label="商圈">

                <el-select v-model="formData.businessCircleCode" filterable placeholder="请选择" size="small">
                    <el-option v-for="item in businessCircles" :key="item.code" :label="item.fullName" :value="item.code">
                    </el-option>
                </el-select>

            </el-form-item>

            <el-form-item prop="remark" label="备注">
                <el-input v-model="formData.remark"></el-input>
            </el-form-item>
            <el-form-item prop="rank" label="排序">
                <el-input v-model="formData.rank"></el-input>
            </el-form-item>
            <el-form-item prop="hot" label="热度">
                <el-input v-model="formData.hot"></el-input>
            </el-form-item>
            <el-form-item prop="recommendFlag" label="推荐">

                <el-select placeholder="是否推荐" size="small" v-model="formData.recommendFlag" class="filter-item">
                    <el-option label="推荐" value="Y">
                    </el-option>
                    <el-option label="不推荐" value="N">
                    </el-option>

                </el-select>

            </el-form-item>
            <el-form-item prop="selectedFlag" label="精选">

                <el-select placeholder="是否精选" size="small" v-model="formData.selectedFlag" class="filter-item">
                    <el-option label="精选" value="Y">
                    </el-option>
                    <el-option label="不精选" value="N">
                    </el-option>

                </el-select>

            </el-form-item>

            <el-form-item prop="buildYear" label="建造年">
                <el-input v-model="formData.buildYear"></el-input>
            </el-form-item>

            <el-form-item prop="statusFlag" label="状态">

                <el-select placeholder="状态" size="small" v-model="formData.statusFlag" class="filter-item">
                    <el-option label="编辑" value="0">
                    </el-option>
                    <el-option label="上线" value="1">
                    </el-option>
                    <el-option label="下线" value="2">
                    </el-option>
                </el-select>

            </el-form-item>

            <el-form-item>
                <el-button type="text" @click="mapDialogVisible = !mapDialogVisible">点击打开地图选择地址</el-button>

                <div class="amap-page-container" v-if="mapDialogVisible">
                    <coordinate-select :value="[formData.lng,formData.lat]" @selected="coordinateSelected" v-if="mapDialogVisible"></coordinate-select>
                </div>
            </el-form-item>

            <el-form-item prop="address" label="地址">
                <el-input v-model="formData.address"></el-input>
            </el-form-item>
            <el-form-item prop="addressDetail" label="详细地址">
                <el-input v-model="formData.addressDetail"></el-input>
            </el-form-item>

            <el-form-item prop="lat" label="纬度">
                <el-input v-model="formData.lat"></el-input>
            </el-form-item>
            <el-form-item prop="lng" label="经度">
                <el-input v-model="formData.lng"></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'
import CoordinateSelect from '../components/CoordinateSelect'

export default {
    created() {



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

                    res.data.featureCode = res.data.featureCode ? res.data.featureCode.split(',').map(i => String(i)) : [];
                    res.data.partCode = res.data.partCode ? res.data.partCode.split(',').map(i => String(i)) : [];
                    res.data.statusFlag = String(res.data.statusFlag);
                    this.formData = res.data;
                }
            })
        }

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

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

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

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



        this.$http.get({
            url: '/districtInfo/all',
            data: {
                useFlag: 'Y'
            }
        }).then(res => {
            if (res.success) {
                this.cityCodeOptions = res.data;
            }
        })



        this.getDistricts(this.formData.cityCode);

        this.getLineCode(this.formData.cityCode);

        this.getStreets(this.formData.districtCode);

        this.getHousingDistrict(this.formData.streetCode);

        this.getBusinessCircle(this.formData.districtCode);

        this.getStationCode(this.formData.lineCode);

    },
    data() {
        let self = this
        return {
            saving: false,
            formData: {
                featureCode: [],
                partCode: [],
                cityCode: '320100',
                districtCode: '320115',
                streetCode: '320115002',
                lat: 32.05838,
                lng: 118.79647,
                address: '',
                selectedFlag: 'N',
                recommendFlag: 'N',
                statusFlag: '0',
                lineCode: '110460689',
            },
            rules: {
                title:
                    [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                    ],
                price:
                    [
                        { required: true, message: '请输入价格', trigger: 'blur' },
                    ],
                payMode:
                    [
                        { required: true, message: '请输入付款方式', trigger: 'blur' },
                    ],
            },
            houseFeatures: [],
            houseParts: [],
            houseKeepers: [],
            housingDistricts: [],
            districts: [],
            streets: [],
            businessCircles: [],
            mapDialogVisible: false,
            faceds: [
                { facedName: '东' },
                { facedName: '南' },
                { facedName: '西' },
                { facedName: '北' },
                { facedName: '南北' },
            ],
            lineCodes: [],
            stationCodes: [],
            cityCodeOptions: [],
        }
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            var data = JSON.parse(JSON.stringify(this.formData));
            delete data.houseImages;
            delete data.houseFeatures;

            this.$http.post({
                url: this.formData.id ? '/houseInfo/update' : '/houseInfo/save',
                data: data
            }).then(res => {
                if (res.success) {
                    this.$message.success('成功');
                    this.$router.go(-1);
                } else {
                    this.$message.warning('失败')
                }
            });
        },
        cityChange() {
            console.log(this.formData.cityCode)
            this.getDistricts(this.formData.cityCode);
            this.getLineCode(this.formData.cityCode);
        },
        getDistricts(code) {
            this.districts = [];
            if (code) {

                this.$http.get({
                    url: '/districtInfo/all?cityCode=' + code
                }).then(res => {
                    if (res.success) {
                        this.districts = res.data;
                    }
                });
            }
        },
        districtChange() {
            this.getStreets(this.formData.districtCode);
            this.getBusinessCircle(this.formData.districtCode);
        },

        getStreets(code) {
            this.streets = [];
            if (code) {

                this.$http.get({
                    url: '/districtInfo/all?districtCode=' + code
                }).then(res => {
                    if (res.success) {
                        this.streets = res.data;
                    }
                });
            }
        },
        streetChange() {
            this.getHousingDistrict(this.formData.streetCode);
        },
        getHousingDistrict(code) {
            this.housingDistricts = [];
            if (code) {

                this.$http.get({
                    url: '/housingDistrict/all?street=' + code
                }).then(res => {
                    if (res.success) {
                        this.housingDistricts = res.data;
                    }
                });
            }
        },
        getBusinessCircle(code) {
            this.businessCircles = [];
            if (code) {

                this.$http.get({
                    url: '/businessCircle/all?districtCode=' + code
                }).then(res => {
                    if (res.success) {
                        this.businessCircles = res.data;
                    }
                });
            }
        },
        getLineCode(code) {
            this.lineCodes = [];
            if (code) {

                this.$http.get({
                    url: '/metroInfo/all?cityCode=' + code
                }).then(res => {
                    if (res.success) {
                        this.lineCodes = res.data;
                    }
                });
            }
        },
        lineCodeChange() {
            this.getStationCode(this.formData.lineCode);
        },
        getStationCode(code) {
            this.stationCodes = [];
            if (code) {

                this.$http.get({
                    url: '/metroStation/all?metroCode=' + code
                }).then(res => {
                    if (res.success) {
                        this.stationCodes = res.data;
                    }
                });
            }
        },

        coordinateSelected(data) {
            this.formData.address = data.formattedAddress;
            this.formData.lat = data.lnglat.lat;
            this.formData.lng = data.lnglat.lng;
        },
        onDelete() {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
                return this.$http.post({
                    url: '/houseInfo/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('删除失败');
                }
            })
        },
    },
    components: {
        CoordinateSelect
    }
}
</script>
<style lang="less" scoped>
</style>

