<template>
  <div class="box">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item,index) in breadcrumbItem" :key="index">{{item}}</el-breadcrumb-item>
     </el-breadcrumb>
     <el-table :span-method="objectSpanMethod" :data="tableData1" border>
       <!-- 所属分类 -->
        <el-table-column :label="$t('message.projectInfo.theCategory')">
          <template slot-scope="scope">
             <span>{{scope.row.className}}</span>
          </template>
        </el-table-column>
        <!-- 功能间名称 -->
        <el-table-column :label="$t('message.projectInfo.functionRoomName')">
           <template slot-scope="scope">
             <span>{{scope.row.functionRoomName}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="功能间代号" >
          <template slot-scope="scope">
             <span>{{scope.row.id}}</span>
          </template>
        </el-table-column> -->
        <!-- 操作 -->
        <el-table-column :label="$t('message.projectInfo.operation')">
          <template slot-scope="scope">
            <el-button type="text" @click.native="deleteRow(scope.row)"><!-- 删除 -->{{$t('message.energyManage.material.delete')}}</el-button>
          </template>
        </el-table-column>
     </el-table>
     <div style="padding:20px 5px">
       <el-button type="primary" @click="addFunctionRoom">
         <!-- 新增功能间 -->
         {{$t('message.projectInfo.operation')}}
        </el-button>
     </div>

     <el-dialog :title="$t('message.projectInfo.operation')" :visible.sync='addFunctionRoomDialog' width="33%" :append-to-body='false' show-close :modal-append-to-body='false'>
       <el-form :model="addForm" ref="functionRoom">
         <el-form-item :label="$t('message.projectInfo.functionRoomName')" label-width="100px" prop="name">
           <el-input v-model="addForm.name"></el-input>
         </el-form-item>
         <!-- <el-form-item label="功能间代号" label-width="100px" prop="code">
           <el-input v-model="addForm.code"></el-input>
         </el-form-item> -->
         <el-form-item :label="$t('message.projectInfo.theCategory')" label-width="100px" prop="className">
           <!-- 请选择 -->
           <el-select v-model="addForm.className" :placeholder="$t('message.projectInfo.pleaseChoose')">
             <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item>
            <div style="float:right">
              <el-button type="primary" @click="confirm('confirm')">
                 {{$t('message.energyManage.material.confirm')}}
                 <!-- 确定 -->
              </el-button>
              <el-button  @click="confirm('cancel')">
                <!-- 取消 -->
                {{$t('message.energyManage.material.cancel')}}
              </el-button>
            </div>
         </el-form-item>
       </el-form>
     </el-dialog>
     <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
       :page-size="pageSize"
      @current-change='handleChange'
      >
    </el-pagination>
  </div>
</template>

<script>
import { getFunctionRoomList,addFunctionRoom ,deleteFunctionRoom,getPageList} from "@/assets/js/api/project.js";
export default {
  data(){
    return {
      projectSn:'',
      options:/* ['卧室','客厅','餐厅','卫生间','厨房','其他'], */this.$t('message.projectInfo.functionRoomOptions'),
      breadcrumbItem:/* ['功能间命名'], */this.$t('message.projectInfo.functionRoomBreadcrumbItem'),
      tableData1:[
        
      ],
      addForm:{
        name:'',
        // code:'',
        className:''
      },
      addFunctionRoomDialog:false,
      type:'',
      spanArr:[],
      position:0,
      currentPage:1,
      total:0,
      pageSize:10
    }
  },
  created(){
    this.projectSn = this.$store.state.projectSn
    this.getFunctionRoomListApi(this.projectSn,this.currentPage-1)
  },
  mounted(){
    this.rowSpan()
  },
  methods:{
    handleChange(current){
      this.currentPage = current
      console.log(this.currentPage)
      this.getFunctionRoomListApi(this.projectSn,this.currentPage-1)
    },
    rowSpan(){
      this.spanArr = []
      this.position = 0
      this.tableData1.forEach((item,index)=>{
        if(index === 0){
          this.spanArr.push(1)
          this.position = 0
        }else{
          console.log('1')
          if(this.tableData1[index].className === this.tableData1[index-1].className){
            this.spanArr[this.position]+=1;
            this.spanArr.push(0)
          }else{
            this.spanArr.push(1)
            this.position = index
          }
        }
      })
      console.log(this.spanArr)
    },
    confirm(type){
      if(type === 'confirm'){
        console.log(this.addForm)
        if(this.addForm.className === ''){
          this.$message({
            type:'warning',
            message:this.$t('message.projectInfo.theCategory')+this.$t('message.projectInfo.cannotEmpty')})
        }else{
           let data = {
          className:this.addForm.className,
          functionRoomName:this.addForm.name,
          projectSn:this.projectSn
        }
        addFunctionRoom(data).then(res=>{
          if(res.code === 200){
             
             this.getFunctionRoomListApi(this.projectSn,this.currentPage-1)
             this.$refs.functionRoom.resetFields()
             this.addFunctionRoomDialog = false
          }
        })
        }
       
        // this.$refs.functionRoom.resetFields()
        
      }else if(type === 'cancel'){
        this.addFunctionRoomDialog = false
      }
    },
    async getFunctionRoomListApi(sn,page){
      let res = await getFunctionRoomList({projectSn:sn})
      // console.log(res2)
      if(res.code === 200){
          this.tableData1 = []
          let sleepRoom = res.result.filter(x=>x.className === this.$t('message.projectInfo.functionRoomOptions')[0]) 
          let bathRoom = res.result.filter(x=>x.className === this.$t('message.projectInfo.functionRoomOptions')[3]) 
          let cookRoom = res.result.filter(x=>x.className === this.$t('message.projectInfo.functionRoomOptions')[4]) 
          let dinnerRoom = res.result.filter(x=>x.className === this.$t('message.projectInfo.functionRoomOptions')[2]) 
          let livingRoom = res.result.filter(x=>x.className === this.$t('message.projectInfo.functionRoomOptions')[1]) 
          let elseRoom = res.result.filter(x=>x.className === this.$t('message.projectInfo.functionRoomOptions')[5])
          this.tableData1.push(...sleepRoom,...bathRoom,...cookRoom,...dinnerRoom,...livingRoom,...elseRoom)
          this.total = this.tableData1.length
          if(page===0){
             this.tableData1 = this.tableData1.slice(0,10)
              console.log(this.tableData1)
          }else{
            this.tableData1 = this.tableData1.slice(page*10,10*page+10)
            console.log(this.tableData1)
          }
         
      }
      this.rowSpan()
    },
    //  breadcrumbClick(index){
    //       console.log(index)
    //       if(this.tableType !== 0 && index === 0){
    //         this.breadcrumbItem.splice(1,this.tableType)
    //         this.tableType = 0
    //       }
          
    // },
    objectSpanMethod({row,column,rowIndex,columnIndex}){
       if(columnIndex===0){
         const _row = this.spanArr[rowIndex]
         const _col = _row>0?1:0
         return {
           rowspan:_row,
           colspan:_col
         }
       }
    },
    deleteRow(data){
         
        this.$confirm(this.$t('message.projectInfo.functionRoomConfirmTetx')+'?', this.$t('message.projectInfo.tip'), {confirmButtonText: this.$t('message.energyManage.material.confirm'),cancelButtonText: this.$t('message.energyManage.material.cancel'),type: 'warning'}).then(() => {
            
                deleteFunctionRoom({id:data.id}).then(res=>{
       if(res.code === 200){
         this.$message({
                    type: 'success',
                    message: this.$t('message.projectInfo.deleteSuccess')+'!'
                })
         this.getFunctionRoomListApi(this.projectSn,this.currentPage-1)
       }
     })
          // this.getHouseTypeListApi(this.projectSn)
          }).catch(() => {
                this.$message({
                    type: 'info',
                    message:  this.$t('message.projectInfo.cancelDelete')+'!'
                }) 
          })           
    
     
    },
    addFunctionRoom(){
      this.addFunctionRoomDialog = true
    }
  }
}
</script>

<style lang="less" scoped>
.box{
    background-color: rgb(251, 253, 255);
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    padding: 20px 20px;
    overflow: auto;
}
/deep/ .el-breadcrumb{
    line-height: 30px;
    padding: 10px 25px;
    font-size: 18px;
    background-color: rgb(235, 236, 241);
    border-radius: 10px;
}
/deep/ .el-table{
    margin-top: 20px;
    // border-radius: 10px;
}
/deep/ .el-form{
  padding: 0  10px 0 30px;
}
/deep/ .el-pagination{
  text-align: center;
}
/deep/ .el-table .cell{
  line-height: none;
}
/deep/ .el-table td{
  padding: 7px 0;
}
/deep/ .el-input{
  width: 300px;
}
</style>