<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="flex_row">
      <div class="flex_left">
        <div class="box">
          <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>
      <div class="flex_right">
        <div class="main_container">
          <bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入能力名称">
            <template v-slot:left_action>
              <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>
            </template>
            <template v-slot:filter_group>
              <div class="left-filter filter_list">
                <div class="filter_item">
                  <span class="filter_title">状态</span>
                  <el-select
                    v-model="filter.state"
                    placeholder="请选择"
                    style="width: 300px"
                  >
                    <el-option
                      v-for="(item, index) in stateOptions"
                      :key="'pushOptions' + index"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="right-action apaas_button">
                <el-button type="primary" @click="filterAction"> 查询 </el-button>
                <el-button type="default" @click="filterClear"> 重置 </el-button>
              </div>
            </template>
          </bg-filter-group>
          <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>
  </div>
</template>

<script setup>
import { reactive, ref,onBeforeMount,toRefs,computed,watch  } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import axios from '../../../../request/http.js'
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",
    },
    {
      label: "状态",
      prop: "state",
    },
    {
      label: "更新时间",
      prop: "updated_time",
    },
    {
      label: "操作",
      prop: "action",
      width: 260,
      fixed: "right",
    },
  ],
  tableRows: [
    {
      name: "www",
      describe: "sajdashkjdhsdjfkhsadjkfhkjsdahfkjashdkfjhsdjkafhkjsdhfkjshjkdfhajkhsdjkf",
      state: 1,
      updated_time: "2022-10-12 12:12:12"
    },
  ],
  tableTotal: 0,
  filter: {
    state: "",
    search: "",
    page: 1,
    limit: 10,
    kind: "business_type",
  },
  stateOptions: [
    {
      name: "全部",
      value: ""
    },
    {
      name: "启用",
      value: "1"
    },
    {
      name: "禁用",
      value: "2"
    },
  ],
})
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 changeSearch = (val) => {
  state.filter.search = val
  console.log(state.filter)
}
const filterAction = () => {
  console.log(state.filter)
}
const filterClear = () => {
  state.filter = {
    state: "",
    search: "",
    limit: 10,
    page: 1,
    kind: "business_type",
  }
  console.log(state.filter)
}
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 {
        ElMessage.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,
  stateOptions,
} = toRefs(state)
  

</script>

<style lang="scss" scoped>
.detail_container {
  width: 100%;
  height: calc(100vh - 56px);
  padding: 0 24px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  .flex_row {
    // flex-grow: 1;
    width: 100%;
    display: flex;
    
    margin-bottom: 16px;
    position: relative;
    height: calc(100% - 62px);
    .flex_left {
      width: 280px;
      background-color: #fff;
      margin-right: 16px;
      border-radius: 6px;
      padding: 16px;
      height: 100%;
      box-shadow: 0px 1px 4px 0px 
      	rgba(0, 7, 101, 0.15);
      overflow: hidden;
      
      .box {
        width: 248px;
        height: 100%;
        overflow: hidden;
        .type_station {
          width: 100%;
          margin-top: 16px;
          height: calc(100% - 50px);
          // overflow: hidden;
          .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;
          }
        }
      }
    }
    .flex_right {
      flex: 1;
      background-color: #fff;
      border-radius: 6px;
      box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
      height: 100%;
      .filter-group {
        .left-filter {
          flex: 1;
          display: flex;
          justify-content: start;
          flex-wrap: wrap;
        }
        .right-action {
          width: 144px;
          padding-bottom: 16px;
          .el-button {
            width: 64px;
          }
        }
      }

      .table_container {
        width: 100%;
        padding: 0 16px;
      }
    }
  }
  
}

</style>