<template>
    <div>
        <el-row v-show="isShowSearch">
            <el-col :span="20"><div class="grid-content flex"><el-input v-model="name" placeholder="请输入内容"></el-input></div>
                </el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"><el-button type="primary" class="div_width div_height" @click="btnSearch">搜索</el-button></div>
            </el-col>
        </el-row>
        <el-row v-show="isShowType">
            <el-col v-show="isShowFir" :span="8"><div class="grid-content flex"><el-button class="div_width div_height" @click="btnType(0)">{{strFirs}}<i class="el-icon-arrow-right el-icon--right"></i></el-button></div>
                </el-col>
            <el-col v-show="isShowSec" :span="8"><div class="grid-content flex"><el-button class="div_width div_height" @click="btnType(1)">{{strSec}}<i class="el-icon-arrow-right el-icon--right"></i></el-button></div>
                </el-col>
            <el-col v-show="isShowThir" :span="8"><div class="grid-content flex"><el-button class="div_width div_height" @click="btnType(2)">{{strThir}}<i class="el-icon-arrow-right el-icon--right"></i></el-button></div>
                </el-col>
        </el-row>
        <el-table
        v-loading='dataListLoading'
      :data="data"
      :show-header="showHeader"
      style="width: 100%"
      @row-click="rowClick">
      <el-table-column
        prop="desc"
        style="width: 100%">
      </el-table-column>
    </el-table>
        
    </div>
</template>>
<script>
import {apiFindEquipmentType} from '@/api/api_equipment'
import * as dd from 'dingtalk-jsapi'
export default {
    data () {
        return{
            isShowSearch: true,
            data: [],
            name: '',
            categorys: '',
            input: '',
            dataListLoading: false,
            isShowType: true,
            isShowFir: false,
            isShowSec: false,
            isShowThir: false,
            strFirs: '',
            strSec: '',
            strThir: '',
            idFirs: '',
            idSec: '',
            idThir: '',
            typeIndex: 0,//0现在是1级 1二级2三级
            showHeader: false
        }

    },
    created () {
    // this.handleGetImgCaptcha()
    },
    mounted () {
        if(typeof this.$route.query.type == 'undefined'){//一级菜单
        } else if(this.$route.query.type == 1){//二级菜单过来
          this.strFirs = this.$cookie.get('strFirs')
          this.idFirs = this.$cookie.get('idFirs')
          console.log(this.strFirs)
          this.btnType(0)
        }else if(this.$route.query.type == 2){//三级菜单过来
          this.strFirs = this.$cookie.get('strFirs')
          this.idFirs = this.$cookie.get('idFirs')
          this.strSec = this.$cookie.get('strSec')
          this.idSec = this.$cookie.get('idSec')
          this.btnType(1)
        }
        
    },
    methods: {
        getData(){
          console.log('获取数据')
          console.log(this.name)
          console.log(this.categorys)
          this.dataListLoading = true
          apiFindEquipmentType({
            'name': this.name,
            'categorys': this.categorys
          }).then(data => {
            console.log(data)
            if (data && data.code === 0) {
              this.data = data.data
            } else {
              this.data = []
            }
            this.dataListLoading = false
          })
        },
        btnSearch(){
          this.getData()
        },
        btnType(type){
          
          if(type === 0){//按了一级分类
            console.log('btnType=0')
            this.typeIndex = 1
            this.isShowFir = true
            this.isShowSec = false
            this.isShowThir = false
            this.categorys = this.idFirs
            this.name = ''
            this.getData()
          } else if(type === 1){//按了二级分类
            console.log('btnType=1')
            this.typeIndex = 2
            this.isShowFir = true
            this.isShowSec = true
            this.isShowThir = false
            this.categorys = this.idFirs + ',' + this.idSec
            this.name = ''
            this.getData()
          }else{//按了三级分类
            this.typeIndex = 3
            this.isShowFir = true
            this.isShowSec = true
            this.isShowThir = true
          }

        },
        rowClick(row, event, column){
          
          if(this.typeIndex === 0){
            console.log('点击一ji')
            this.typeIndex = 1
            this.isShowFir = true
            this.idFirs = row.id
            this.strFirs = row.desc
            this.categorys = this.idFirs
            this.name = ''
          }else if (this.typeIndex === 1){
            console.log('点击二ji')
            this.typeIndex = 2
            this.isShowSec = true
            this.idSec = row.id
            this.strSec = row.desc
            this.categorys = this.idFirs + ',' + this.idSec
            this.name = ''
          }else {
            console.log('点击三ji')
            this.typeIndex = 3
            this.isShowThir = true
            this.idThir = row.id
            this.strThir = row.desc
            this.$cookie.set('strFirs', this.strFirs)
            this.$cookie.set('idFirs', this.idFirs)
            this.$cookie.set('strSec', this.strSec)
            this.$cookie.set('idSec', this.idSec)
            this.$cookie.set('strThir', this.strThir)
            this.$cookie.set('idThir', this.idThir)
            this.$router.replace({name: 'devicedetail', query:{type: 1}})
          }
          console.log('结束')
          this.getData()
        }
    }
}

</script>

<style>
  .el-row {
    margin-bottom: 20px;
    
  }
  .el-col {
    border-radius: 10px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5f2f1;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .div_height{
      height: 38px;
  }
  .div_width{
      width: 100%;
  }
  .width_100{
      width: 100px;
  }
  .center{
      position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    padding: 1em;
  }
  .flex{
	display:flex;
    align-items: center;
	justify-content:center;
	width:100%;
	height:100%;
    border:1px solid;
	}
.flex_son{
	width:100%;
	height:100%;
	border:0x solid;
}
  
</style>