<template>
    <d2-container>
        <div class="d2-table-view-full" style="overflow: hidden">
            <div class="d2-table-view-header">

                <el-form size="small" :inline="true" :model="filter" @keyup.enter.native="handleList" class="demo-form-inline" labelPosition="right">
                    <el-form-item label="楼栋编号">
                        <el-input v-model.trim="filter.towerNo" placeholder="楼栋编号" clearable/>
                    </el-form-item>

                    <el-form-item label="楼栋名称" >
                        <el-input v-model.trim="filter.towerNm" placeholder="楼栋名称" clearable/>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="handleList('1')">查询</el-button>
                    </el-form-item>
                </el-form>


            </div>
            <div class="d2-table-view-content">

                <div class="d2-table-view-handle">
                    <!--<el-button  @click="" size="small" type="success">导出</el-button>-->
                    <el-button @click="operVisible = !operVisible" size="small" icon="el-icon-plus">新增</el-button>
                </div>

                <d2-crud
                        title="楼栋管理"
                        ref="d2Crud"
                        :options="tableOptions"
                        :loading="loading"
                        :columns="columns"
                        :data="data"
                        :rowHandle="rowHandle"
                        @edit="handleRowEdit"
                        @delete="handleRowRemove">
                </d2-crud>
            </div>
            <div class="d2-table-view-footer">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :current-page.sync="currentPage"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>

        <!-- 新增,编辑 -->
        <el-dialog
                :title="diaLogName"
                :visible.sync="operVisible"
                width="30%"
                @close="clearForm"
                :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="110px" labelPosition="right"  :rules="rules" >
                <el-row :gutter="20">

                    <el-col :span="24">
                        <el-form-item label="楼栋编号" prop="towerNo" placeholder="系统自动生成">
                            <el-input v-model.trim="form.towerNo" disabled/>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="楼栋名称" prop="towerNm">
                            <el-input v-model.trim="form.towerNm" maxlength="15"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="所属校区" prop="belongsId"> <!--belongsId所属校区id  belongs所属校区  -->
                            <el-select v-model="form.belongsId" placeholder="请选择" style="width: 100%" :disabled="isEdit">
                            <el-option
                            v-for="item in belongsOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="楼栋位置" prop="towerLocation">
                            <el-input v-model.trim="form.towerLocation"/>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="备注" prop="rmk">
                            <el-input v-model.trim="form.rmk" type="textarea" maxlength="50"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
	<zl-button @click="operInstance('form')"/>
</span>
        </el-dialog>
    </d2-container>
</template>

<script>

  import { tableOptions } from '@/assets/options'
  import { getBlockMessageList,getBelongsOptions,saveOrUpBlockData,getBlockMessageById,delBlockById} from '@/api/dormitory/manageBlock'

  export default {
    name: '',
    data () {
      return {
        isEdit:false,
        belongsOptions:[],
        readerIdsArr:[],
        tableOptions,
        loading: false,
        operVisible: false,
        currentPage:1,
        diaLogName: '新增',
        form: {
          towerNo:"",
          id:"",
          towerNm:"",
          belongsId:"",
          belongs:"",
          rmk:"",
          towerLocation:""
        },
        filter: {
          pageSize: 10,
          pageNum: 1,
          towerNm:'',//名称
          towerNo:'',//编号
        },
        pagination: {
          total: 0
        },
        columns: [
          {
            title: '楼栋编号',
            key: 'towerNo',
            minWidth: '120'
          },
          {
            title: '楼栋名称',
            key: 'towerNm',
            minWidth: '120'
          },
          {
            title: '所属校区',
            key: 'belongs',
            minWidth: '120'
          },
          {
            title: '房间数',
            key: 'rooms',
            minWidth: '90'
          },
          {
            title: '备注',
            key: 'rmk',
            minWidth: '180'
          }
        ],
        rowHandle: {
          columnHeader: '操作',
          minWidth: '150',
          align: 'center',
          custom: [
            {
              text: '编辑',
              type: 'primary',
              size: 'small',
              emit: 'edit'
            },
            {
              text: '删除',
              type: 'danger',
              size: 'small',
              emit: 'delete'
            }
          ],

        },
        rules: {
          towerNm:[{required: true, message: '请输入楼栋名称', trigger: 'blur'}],
          towerLocation:[{required: true, message: '请输入楼栋位置', trigger: 'blur'}],
          belongsId:[{required: true, message: '请选择所属校区', trigger: 'blur'}],
        },
        data: [],
      }
    },
    methods: {
      handleCurrentChange (val) {
        this.filter.pageNum = val
        this.handleList()
      },

      handleSizeChange (val) {
        this.filter.pageNum = 1
        this.filter.pageSize = val
        this.handleList()
      },


      clearForm(){
        this.diaLogName='新增'
        this.isEdit=false
        // this.$refs.equTree.setCheckedKeys([])
        this.form={}
      },
      //弹框确定按钮
      operInstance(formEquName){
        this.$refs[formEquName].validate((valid) => {
          if (valid) {
            saveOrUpBlockData(this.form).then(res => {
              this.operVisible = false
              this.$message({
                message:'操作成功',
                type: 'success'
              })
              this.handleList()
            })
          }
        })
      },


      //编辑
      handleRowEdit ({index,row}) {
        this.diaLogName='编辑'
        this.isEdit=true
        getBlockMessageById({id:row.id}).then(res => {
          this.form = res.buildingManageVO
          this.operVisible=true
        })

      },


      //删除
      handleRowRemove ({index, row}) {
        this.$confirm('确认删除当前楼栋信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          delBlockById({
           id:row.id
          }).then(res=>{
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.handleList()
          })
        })
      },






      //列表
      handleList (val) {

        if(val){
          this.filter.pageNum=1
          this.currentPage = 1
        }
        this.loading = true

        getBlockMessageList(this.filter).then(res => {
          this.loading = false
          this.data = res.list.list
          this.pagination.total = res.list.total
        }).catch(err => {
          this.loading = false
        })

      },

    },
    mounted () {
     getBelongsOptions({}).then(res=>{
       this.belongsOptions=JSON.parse(res.msgDat)

     })
      this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions,45)
      this.handleList()
    }
  }
</script>
