<template>
    <div>

        <el-row style="height: 720px;">
            <el-col :span="12" style="height: 100%; padding-right: 10px;">
                <fw-card2 title="景区基本信息">
                    <el-row style="height: 100%;">
                        <el-col :span="24" style="height: 100%;">
                            <fw-table :apiService="scenicInfoService" :grid-config="scenicData.gridConfig"
                                :grid-btn-config="scenicData.gridBtnConfig" :form-config="scenicData.formConfig"
                                :form-data="scenicData.formModel" :grid-edit-width="200" :grid-top-btn-config="scenicData.gridTopBtnConfig"
                                form-title="景区基本信息" :is-async="true" :query-config="scenicData.queryConfig"
                                :query-model="scenicData.queryModel" :grid-opera-btn-config="scenicData.gridOperaBtnConfig"
                                @cellClickEmit="cellClickEmit">
                                </fw-table>
                        </el-col>
                    </el-row>
               </fw-card2>
            </el-col>
            <el-col :span="12" style="height: 100%;padding-left:10px;">
                <fw-card2 title="景区集疏监测设置" :buttons="buttons" @btnCustomClick="submitForm">
                    <el-row>
                        <el-col :span="24" style="height: 100%;">
                            <div>
                                <fw-form ref="paiViewForm" :dialogConfig="configData.dialogConfig" :formConfig="configData.formConfig"
                                    :formData="configDataFormModel" @submit="submitDo"
                                    @openSelect="openSelect">
                                </fw-form>
                            </div>
                            <fw-select @modifyRol="saveSelectUser" ref="selectUser" :maxSelect="1"  :list="allUser" :selectList="selectUser"></fw-select>
                        </el-col>
                    </el-row>
                </fw-card2>
            </el-col>
        </el-row>


    </div>
</template>

<script>
  import lodash from 'lodash'
    import {
        DATA_CONFIG
    } from './config/jishuInfoconfig.js'
    import {SCENIC_DATA_CONFIG} from './config/scenicConfig.js'
    import { scenicInfoService}  from '../../../api/jishu/scenicInfo.js'
    import {
        jishuInfoService,getAllUserService,getSelectUserService
    } from '../../../api/jishu/jishuInfo.js'

    export default {
        components: {

        },
        data() {
            return {
                testData: [],
                buttons:[
                    {
                        "classify":"submitForm",
                        "name":"保存"
                    }
                ],
                configData: DATA_CONFIG,
                configDataFormModel: lodash.cloneDeep(DATA_CONFIG.formModel),
                scenicData:SCENIC_DATA_CONFIG,
                allUser:[],
                selectUser:[],
                id: '',
                scenicCode:'',
                scenicName:'',
                scenicInfoService:scenicInfoService,
                dialogRoleVisible: false,
                jishuInfoService: jishuInfoService
            }
        },
        name: 'jishuInfo-list',
        mounted() {
            this.queryData()

        },
        watch: {
            id() {
                this.queryData()
            }
        },
        methods: {
            open() {
                this.$refs.jishuInfoTable.showDialog()
            },
            getcheckedNodes(data) {
                console.log("11111111111")
                console.log(data)
            },
            cellClickEmit(row) {
              console.log(row)
                this.id = row.id
                this.scenicCode=row.code
                this.scenicName=row.name
                this.allUser=[]
                this.selectUser=[]
                getAllUserService({jishuId:row.id}).then((res)=>{
                    this.allUser=res
                })
                getSelectUserService({jishuId:row.id}).then((res)=>{
                    this.selectUser=res
                })
            },
            queryData() {
                if (this.id) {
                    jishuInfoService.view(this.id).then((res) => {
                        if (res) {
                            this.configDataFormModel = res
                            if(!res.id){
                                this.configDataFormModel.scenicCodeDisplay=this.scenicName
                            }
                        }
                    })
                }
            },

            submitForm() {
                this.$refs.paiViewForm.submitForm()
            },

            submitDo(data) {
                this.configDataFormModel = data
                //this.configDataFormModel.id = this.id
                if( this.configDataFormModel.id){
                    jishuInfoService.update(this.id, this.configDataFormModel).then((res) => {

                        this.$notify.success("保存成功!")
                    }, res => {
                        this.$notify.warning("保存失败!");
                    })
                }else{
                     this.configDataFormModel.scenicCode=this.scenicCode
                    jishuInfoService.create(this.configDataFormModel).then((res) => {
                        
                        this.$notify.success("保存成功!")
                    }, res => {
                        this.$notify.warning("保存失败!");
                    })
                }

            },
            openSelect(item){
              this.configDataFormModel=this.$refs.paiViewForm.getData()
              this.$refs.selectUser.showDialog()
            },
            saveSelectUser(userId,userName){
                this.configDataFormModel.userId=userId
                this.configDataFormModel.userName=userName
                this.$refs.selectUser.hideDialog()
            }


        }
    }
</script>
<style>
    .el-input.is-disabled .el-input__inner {

        height: 30px;
    }
</style>
