<template>
    <div v-loading="loading">
        <el-form label-position="top" ref="loginForm" :model="formData" :rules="rules" >
            <el-form-item label="巡访方式" prop="visitMode" ref="visitMode">
                <el-checkbox-group v-model="formData.visitMode" @change="changeBox">
                    <el-checkbox class="c" label="电话问候" ></el-checkbox>
                    <el-checkbox class="c" label="上门巡访"></el-checkbox>
                    <el-checkbox class="c" label="其它" ></el-checkbox>
                    <el-form-item v-if="isShow" prop="visitModeExt" ref="visitModeExt">
                        <el-input  v-model="formData.visitModeExt"
                                   @blur="(val)=>{selectPatrolInfo1(val,'visitModeExt')}"
                                   style="width: 220px"
                                   placeholder="请输入其它内容"

                        ></el-input>
                    </el-form-item>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item   prop="visitCount" label="巡访频次" ref="visitCount">
                <el-select v-model="formData.visitCount"
                           placeholder="请选择巡访频次"
                           @change="selectCount"
                >
                    <el-option
                            v-for="item in countTimes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="isOther" prop="visitCountExt"  ref="visitCountExt">
                <el-input v-model="formData.visitCountExt" autocomplete="off"
                          placeholder="请输入其它内容" style="width: 220px"
                          @blur="(val)=>{selectPatrolInfo1(val,'visitCountExt')}"
                ></el-input>
            </el-form-item>
        </el-form>
        <el-image :src="require('../../assets/ic_tip.png')" style="position: fixed;top:10vh;right: 10px;width: 20px;"/>
    </div>
</template>

<script>
    import {ownerUpdate} from '../../api'
    export default {
        name: 'patrol',
        props: ['id','patrolData','clickTabIndex'],
        data() {
            return {
                isColor:'',
                oldId:'',
                index:'',
                isOther :false,
                isShow:false,
                loading: false,
                isDependantRelationship:false,
                formData: {
                    visitMode:[],
                    visitModeExt:'',
                    visitCount:'',
                    visitCountExt:'',
                },
                countTimes:[
                    {  value: '每天', label: '每天'},
                    {  value: '每周', label: '每周'},
                    {  value: '每月', label: '每月'},
                    {  value: '每季', label: '每季'},
                    {  value: '其它', label: '其它'},
                ],
                rules: {  //数据校验规则
                    visitMode:[
                        {required: true,message:'巡访方式不能为空', trigger: 'change'},
                    ],
                    visitCount:[
                        {required: true, message:'巡访频次不能为空', trigger: 'change'},
                    ],
                    visitCountExt:[
                        {required: true,message:'其它内容不能为空', trigger: 'blur'},
                    ],
                    visitModeExt:[
                        {required: true,message:'其它内容不能为空', trigger: 'blur'},
                    ],
                },
                patrolList : {},
            }
        },
        methods: {
            Scroll() {
                setTimeout(()=> {
                    this.$refs['loginForm'].validate((valid) => {
                        if (valid) {
                            this.isColor = true;
                            this.$emit("patrolisColor", this.isColor, this.index);

                        } else {
                            this.isColor = false;
                            this.$emit("patrolisColor", this.isColor, this.index);

                        }
                    });
                    this.$refs['loginForm'].clearValidate();
                },200);

            },
            selectCount(value){
                this.isOther = value === '其它';
                if(this.isOther==false) {
                    this.formData.visitCountExt = "";
                }
                this.selectPatrolInfo1('','visitCount');
            },
            changeBox(data){
                if(data.indexOf("其它")!==-1) {
                    this.isShow=true;
                } else {
                    this.formData.visitModeExt="";
                    this.isShow=false;
                }
                this.$refs['loginForm'].validateField('visitMode', emailError => {
                    if (!emailError) {
                        this.selectPatrolInfo();
                    } else {
                        this.updateOlds();
                        this.isColor = false;
                        this.$emit("patrolisColor", this.isColor, this.index);
                        return false;
                    }
                });
            },
            selectPatrolInfo(){
                this.Scroll();
                this.updateOlds();
            },
            selectPatrolInfo1(v1,v2){
                this.$refs['loginForm'].validateField(v2, emailError => {
                    if (!emailError) {
                        this.selectPatrolInfo();
                    } else {
                        this.updateOlds();
                        this.isColor = false;
                        this.$emit("patrolisColor", this.isColor, this.index);
                        return false;
                    }
                });
            },
            async updateOlds () {
                let formNewData = JSON.parse(JSON.stringify(this.formData));
                console.log(formNewData);
                formNewData.visitMode = JSON.stringify(formNewData.visitMode);
                const result = await ownerUpdate({id:this.oldId,regularsInfo :JSON.stringify(formNewData)});
                if (result.code === 0) {
                    console.log(result);
                }
            },
            removeExcess(data) {
                if(data) {
                    data = JSON.parse(data);
                }
                return data;
            },

            getList(){
                if (this.patrolData){
                    this.patrolList = this.patrolData;
                    this.oldId =  this.patrolList._id;
                    console.log(this.patrolList);
                    if ( this.patrolList.regularsInfo){
                        const result  = this.removeExcess(this.patrolList.regularsInfo);
                        this.isOther = result.visitCount === "其它";
                        if (result.visitMode){
                            this.formData.visitMode =JSON.parse(result.visitMode);
                            console.log( this.formData.visitMode,"产看下");
                            if (this.formData.visitMode.indexOf('其它') !== -1){
                                this.isShow = true;
                            }
                        }
                        this.formData.visitModeExt = result.visitModeExt;
                        this.formData.visitCount = result.visitCount;
                        this.formData.visitCountExt = result.visitCountExt;
                    }
                    this.Scroll();
                }
            }
        },
        watch:{
            id(newValue){
                this.oldId = newValue;
            },
            clickTabIndex(newValue) {
                this.index = newValue;
            },
            patrolData(newValue){
                this.patrolList=newValue;
            }
        },
        mounted() {
            this.oldId = this.id;
            this.index = this.clickTabIndex;
            this.getList();
        }
    }

</script>

<style scoped>
</style>
