<style lang="scss">
    .govern{
        display: flex;
        justify-content: space-between;
        li{
            width: 32%;
            list-style: none;
            min-height: 70vh;
            background: #fff;
            border: 1px solid #d9d9d9;
            padding:20px 10px;
        }
        .custom-tree-node{
                    width: 100%;
                    .el-tree-node__content{
                        height: 32px;
                    }
                    .label_name{
                        font-size: 14px;
                    }
                    .edit{
                        float: right;
                        i{
                            font-weight: bolder;
                            font-size: 14px;
                        }
                    }
        }
        .form{
            .el-input,.el-textarea{
                width: 90%;
            }
            .el-select{
                width: 100%;
            }
            .req{
                color:red;
                font-weight: 600;
                margin-left: 5px;
            }
        }
        .company{
            h1{
                font-size: 18px;
                margin-bottom: 20px;
                button{
                    float: right;
                }
            }
            p{
                color: #409EFF;
                padding: 10px 0;
                border-bottom: 1px solid #d9d9d9;
                font-size: 14px;
                width: 90%;
                margin: 0 auto;
                button{
                    float: right;
                    i{
                        font-weight: 700;
                        font-size: 16px;
                        position: relative;
                        top: -4px;
                    }
                }
            }
        }
    }
</style>
<template>
  <section>
    <p>政府管理</p>
    <div class="content">
        <ul class="govern">
            <li>
                <el-form :inline="true" size="small" label-width="40px">
                    <el-form-item label="区域">
                        <el-select class="input_100" v-model="filter.area" clearable @change="getData" placeholder="请选择">
                            <el-option v-for="(item,index) in area" :key="index" :label="item" :value="item"></el-option>
                        </el-select>
                        <el-input style="width:62%;margin-left:5px;" @change="getData"  v-model="filter.name" placeholder="政府名称"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="show=1,form={parent_id:null,is_active:false}" icon="el-icon-circle-plus" size="mini" style="width:100%;margin-bottom:10px;">新增政府单位</el-button>
                <el-tree  
                    :data="data" default-expand-all 
                    node-key="id"  :props='props'
                    :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{ node, data }" @click.stop="() => edit(data)" >
                        <span class="label_name">{{ node.label }}</span>
                        <span class="edit">
                        <el-button
                            type="text"
                            size="mini"
                            @click.stop="() => append(data)">
                            <i class="el-icon-plus"></i>
                        </el-button>
                        <el-button
                            type="text"
                            size="mini"
                            @click.stop="() => edit(data)">
                            <i class="el-icon-edit"></i>
                        </el-button>
                        <el-button
                            type="text"
                            size="mini"
                            @click.stop="() => remove(data)">
                            <i class="el-icon-delete"></i>
                        </el-button>
                        </span>
                    </span>
                </el-tree>
            </li>
            <li v-show="show">
                <p v-if="form.parent_id">上级政府：{{form.parent_name}} <el-divider></el-divider></p>
                
                <el-form class="form" label-width="80px" label-position='right' size="small">
                    <el-form-item label="政府名称">
                        <el-input v-model="form.name"></el-input>
                        <span class="req">*</span>
                    </el-form-item>
                    <el-form-item label="账号" >
                        <el-input v-model="form.username"></el-input>
                        <span class="req">*</span>
                    </el-form-item>
                    <el-form-item label="区域" >
                        <el-select v-model="form.area" clearable placeholder="请选择">
                            <el-option v-for="(item,index) in area" :key="index" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="密码" >
                        <el-input v-model="form.password" type="password"></el-input>
                        <span class="req">*</span>
                    </el-form-item>
                    <el-form-item label="确认密码" >
                        <el-input v-model="form.repassword" type="password"></el-input>
                        <span class="req">*</span>
                    </el-form-item>
                    <el-form-item label="账号状态">
                        <el-switch
                        v-model="form.is_active"
                        active-text="启用"
                        inactive-text="禁用">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input :rows="4" type="textarea" v-model="form.remark"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="save" type="primary">保存</el-button>
                        <el-button @click="show=0,form={parent_id:null,is_active:false}" type="info">取消</el-button>
                    </el-form-item>
                </el-form>
            </li>
            <li class="company" v-show="show">
                <h1 v-if="form.id"><span style="width:75%;display:inline-block;">{{form.name}}监管企业</span>  <el-button @click="dialogFormVisible=true" size='mini' type="primary">添加</el-button></h1>
                <p v-for="item in form.enterprise" :key="item.id">{{item.name}}
                    <el-button
                            type="text"
                            size="mini"
                            @click="() => del(item.id)">
                            <i class="el-icon-delete"></i>
                    </el-button>
                </p>
            </li>
        </ul>
    </div>

    <el-dialog title="添加下属企业" :visible.sync="dialogFormVisible" width="500px" :close-on-click-modal='false' :close-on-press-escape='false'>
        <el-form :model="form">
            <el-form-item label="企业名称" >
                <el-select filterable v-model="enterprise.enterprise_id" placeholder="请选择">
                    <el-option v-for="(item,index) in enterpriseList" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>
  </section>
</template>
<script>
export default {
	data() {
		return {
            filter:{
                area:'',
                name:''
            },
            dialogFormVisible:false,
            data:[{
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            form:{parent_id:null,is_active:false},
            props:{
                label:'name'
            },
            //下属企业
            enterprise:{
                enterprise_id:''
            },
            enterpriseList:[],
            area:[],
            show:0
		};
	},
	methods: {
        getData(){
            this.$api.getGovermentList(this.filter).then(res=>{
                this.data=res.data.data;
                this.area=this.store.area;
            })
            this.$api.getEnterpriseAll().then(res=>{
                this.enterpriseList=res.data.data;
            })
        },
        append(data){
            this.show=1;
            this.form={
                parent_id:data.id,
                parent_name:data.name
            }
        },
        edit(data){
            this.show=1;
            this.$api.getGoverment({id:data.id}).then(res=>{
                this.form=res.data.data;
                this.form.is_active=Boolean(this.form.is_active);
            })
        },
        remove(data){
           this.$confirm('确定删除“'+data.name+'”政府管理？', '提示', {
                    type: 'warning'
                }).then(() => {
                   this.$api.deleteGoverment({id:data.id}).then(res=>{
                        this.$message({message: '删除成功！',type: 'success'});
                        this.getData()
                    })
            })
          
        },
        save(){
          var parm=this.form;
          parm.is_active=String(Number(parm.is_active))

          if(parm.password!=parm.repassword){
                this.$message.error('两次输入的密码不一致，请检查！');
                return;
          }
          if(parm.id){
              this.$api.putGoverment(parm).then(res=>{
                  if(res.data.code==0){
                      this.$message({message: '修改成功！',type: 'success'});
                      this.getData()
                      this.form={
                          parent_id:null,
                          is_active:false
                      }
                  }else{
                      this.$message.error(res.data.message);
                  }
              })
          }else{
              this.$api.saveGoverment(parm).then(res=>{
                  if(res.data.code==0){
                      this.$message({message: '添加成功！',type: 'success'});
                      this.getData()
                      this.form={
                          parent_id:null,
                          is_active:false
                      }
                  }else{
                      this.$message.error(res.data.message);
                  }
              })
          }
        },
        //下属企业
        add(){
            let parm=this.enterprise;
            parm.goverment_id=this.form.id;
            if(!parm.enterprise_id){
                this.$message.error('请选择企业');
            }
            this.$api.saveSubent(parm).then(res=>{
                if(res.data.code==0){
                      this.$message({message: '添加成功！',type: 'success'});
                      this.dialogFormVisible=false
                      this.edit({id:parm.goverment_id})
                  }else{
                      this.$message.error(res.data.message);
                  }
            })
        },
        del(id){
            this.$confirm('确定删除该企业?', '提示', {
                    type: 'warning'
                }).then(() => {
                   this.$api.deleteSubent({enterprise_id:id,goverment_id:this.form.id}).then(res=>{
                        this.$message({message: '删除成功！',type: 'success'});
                        this.edit({id:this.form.id})
                    })
            })
        }

    },
	created(){
        this.getData();
        // this.store.getDefault();
        
	}
};
</script>