<template>
  <div class="detail_container">
    <div class="bg-breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> 配置管理 </el-breadcrumb-item>
        <el-breadcrumb-item> 字典配置 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main_container">
      <div class="left_type">
        <el-input class="type-input" v-model="search" @input="searchType" placeholder="请输入内容"></el-input>
          
        <div class="type_station bg-scroll">
          <div class="type-box" :class="{'current-type':nodeId==item.id}" @click="nodeClick(item)" v-for="(item,index) in typeList" :key="'type'+index+200">
            {{item.name}}
          </div>
        </div>
            
      </div>
      <div class="right_container">
        
        <div class="apaas_button">
          <el-button class="register_btn" type="primary" @click="register">
            <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
              新建
          </el-button>
        </div>
        <div class="table_container">
          <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
            <template v-slot:state="{ row }">
              {{ ["-","启用","禁用"][row.state] }}
            </template>
            <template v-slot:updated_time="{ row }">
              {{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
            </template>
            <template v-slot:action="{ row }">
              <bg-table-btn class="btn" :click="()=>{edit_row(row)}" :disabled="row.state == 1">
                编辑
              </bg-table-btn>
              <bg-table-btn class="btn" :click="()=>{delete_row(row)}" :disabled="row.state == 1">
                删除
              </bg-table-btn>
            </template>
          </bg-table>
          <bg-pagination
            :page="filter.page"
            :size="filter.size"
            :total="tableTotal"
            @change-page="changePage"
            @change-size="changeSize"
          >
          </bg-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue'
import { computed, onBeforeMount, watch } from '@vue/runtime-core'
import { useRouter } from 'vue-router';
import bgTable from '@/bg-ui/bg-table.vue'
// const bgTable = ref(null)
const { proxy } = getCurrentInstance()
const { $message, $axios } = proxy
const state = reactive({
  typeList: [
    {
      name: "业务分类",
      id: 1,
    },
    {
      name: "业务领域",
      id: 2,
    },
    {
      name: "开放程度",
      id: 3,
    },
    {
      name: "开发厂商",
      id: 4,
    },
    {
      name: "菜单分组",
      id: 5,
    },
  ],
  search: "",
  nodeId: null,
  timer: null,
  headers: [
    {
      label: "业务分类名称",
      prop: "name",
    },
    {
      label: "描述",
      prop: "describe",
      minWidth: 360
    },
    {
      label: "状态",
      prop: "state",
    },
    {
      label: "更新时间",
      prop: "updated_time",
    },
    {
      label: "操作",
      prop: "action",
      width: 260,
      fixed: "right",
    },
  ],
  tableRows: [],
  tableTotal: 0,
  filter: {
    state: "",
    search: "",
    page: 1,
    limit: 10,
    kind: "business_type",
  },
})
const nodeClick = (item) => {
  state.nodeId = item.id
}
const searchType = () => {
  if (state.timer) {
    clearTimeout(state.timer);
  }
  state.timer = setTimeout(() => {  
    getTypeList()
  }, 500);
}
const getTypeList = () => {
  console.log(state.search)
}
const getTableRows = () => {
  let params = {...state.filter}
  $axios
    .get(
      `/apaas/system/v5/dictionary/list`,
      {
        params,
      }
    )
    .then((res) => {
      if (res.data.code == 200) {
        state.tableRows = res.data.data || []
        state.tableTotal = res.data.total
      }else {
        $message.error(res.data.msg)
      }
    })
} // 获取数据
const changePage = () => {

}
const changeSize = () => {

}
const register = () => {

}
const edit_row = (row) => {

}
const delete_row = (row) => {

}
onBeforeMount(() => {
 state.nodeId = 1

})
const {
  typeList,
  search,
  nodeId,
  headers,
  tableRows,
  tableTotal,
  filter,
} = toRefs(state)
  

</script>

<style lang="scss" scoped>
.detail_container {
  width: 100%;
  padding: 0 24px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  .main_container {
    flex-grow: 1;
    width: 100%;
    display: flex;
    // box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
    
    margin-bottom: 16px;
    position: relative;
    .left_type {
      height: calc(100vh - 118px);
      width: 280px;
      background-color: #fff;
      margin-right: 16px;
      border-radius: 6px;
      overflow: hidden;
      padding: 16px;
      .type_station {
        margin-top: 16px;
        height: calc(100% - 50px);
        .type-box {
          height: 32px;
          line-height: 32px;
          padding-left: 38px;
          font-size: 14px;
	        color: #404a62;
          cursor: pointer;
          &:hover { 
            color: #3759be;
            background-color: #dfe5f6;
          }
        }
        .current-type{
          color: #3759be;
          background-color: #dfe5f6;
        }
      }
    }
    .right_container {
      flex: 1;
      background-color: #fff;
      border-radius: 6px;
    }
  }
  
}

</style>