<template>
    <div class="page_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 bgc_white">
             <div class="tree_header">
                 政务机构
             </div>
             <div class="tree_content">
               <div class="search"> 
                 <el-input
                    v-model="search"
                    placeholder="请输入组织名称搜索"
                    :prefix-icon="Search"
                  />
               </div>
               <div class="tree">
                 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true">
                    <template #default="{ node, data }">
                      <div class="custom_tree_node">
                        <span
                          class="label-text "
                          :title="node.label"
                          >{{ node.label }}
                        </span>
                      </div>
                    </template>
                 </el-tree>
               </div>
             </div>
           </div>
           <div class="flex_right bgc_white">
             <div class="main_container">
              <div class="apaas_button">
                <el-button type="primary" @click="addAccount(0)">新建</el-button><el-button @click="addAccount(1)">编辑</el-button>
              </div>
                <div class="table_container apaas_scroll">
                  <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
                    <template v-slot:business_name="{ row }">
                      <span @click="goDetail(row)" class="name_btn">
                        {{ row.business_name }}
                      </span>
                    </template>
                    <template v-slot:state="{ row }">
                      <bg-switch @click="stateChange(row)" :labels="['否','是']" :values="[0,1]" v-model="row.state"></bg-switch>
                    </template>
                    <template v-slot:action="{ row }">
                      <bg-table-btn class="btn">
                        编辑
                      </bg-table-btn>
                      <bg-table-btn class="btn">
                        修改密码
                      </bg-table-btn>
                      <bg-table-btn class="btn">
                        删除
                      </bg-table-btn>
                    </template>
                  </bg-table>
                  <div class="pagination_box">
                     <bg-pagination
                    :page="1"
                    :size="10"
                    :total="100"
                    @change-page="changePage"
                    @change-size="changeSize"
                  >
                  </bg-pagination>
                  </div>
                  
                </div>
                 
              </div>
           </div>
        </div>
    </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue'
import { computed, onBeforeMount } from '@vue/runtime-core'
import { useRouter } from 'vue-router';
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy

  const headers = ref([
        {
          label: "业务系统编码",
          prop: "business_code",
          width: 180
        },
        {
          label: "业务系统名称",
          prop: "business_name",
          minWidth: 180
        },
        {
          label: "账号",
          prop: "system_account",
          width: 150
        },
        {
          label: "所属机构",
          prop: "organization_name",
          width: 240
        },
        {
          label: "创建时间",
          prop: "created_time",
          width: 150
        },
        {
          label: "是否启用",
          prop: "state",
          width: 80
        },
        {
          label: "操作",
          prop: "action",
          width: 220,
          fixed: "right",
        },
      ])
  const tableRows = ref([])
  const search=ref("");
  const filter = reactive({
        keyword: "",
        page: 1,
        size: 10,
      });
  const tableTotal = ref(0);

  const router = useRouter();

  const getTableRows = () => {
      let params = {...filter.value}
      $axios
        .get(
          `/apaas/system/v5/user/list`,
          {
            params,
          }
        )
        .then((res) => {
          if (res.data.code == 200) {
            tableRows.value = res.data.data || []
            tableTotal.value = res.data.total
          }else {
            $message.error(res.data.msg)
          }
        })
  }

  const addAccount = (params) => {
    router.push({
        path: "/develop/account/add",
        query: {
          type: params
        }
      })
  }

  const handleNodeClick = (data) => {
    console.log(data)
  }

  const data = [
    {
      label: '湖北省',
      children: [
        {
          label: '武汉市',
          children: [
            {
              label: '公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅',
            },
            {
              label: '应急厅',
            },
            {
              label: '水利厅',
            },
          ],
        },
        {
          label: '荆州市',
          children: [
            {
              label: '公安局',
            },
            {
              label: '应急管理局',
            },
          ],
        }
      ],
    },
    {
      label: '四川省',
      children: [
        {
          label: '成都市',
          children: [
            {
              label: '天府新区',
            },
          ],
        },
      ],
    },
    {
      label: '比格大数据',
      children: [
        {
          label: '武汉研发中心',
          children: [
            {
              label: '研发部',
            },
          ],
        },
        {
          label: '西南大区',
          children: [
            {
              label: '事业部',
            },
            {
              label: '事业部',
            },
            {
              label: '事业部',
            },
            {
              label: '事业部',
            },
            {
              label: '事业部',
            },
            {
              label: '事业部',
            },
            {
              label: '事业部',
            },
          ],
        },
      ],
    },
  ]

  const defaultProps = {
    children: 'children',
    label: 'label',
  }

  const stateChange = (row) => {
    const state = row.state.toString(); 
      $axios
        .post(
          `/apaas/system/v5/user/state/${row.organization_id}/${state}`,
        )
        .then((res) => {
          if (res.data.code == 200) {
            getTableRows()
          }else {
            $message.error(res.data.msg)
          }
        })
  }

  const changeSize = (size) => {

  }

  const changePage = (size) => {

  }

  const goDetail = (params) => {
     router.push({
        path: "/develop/account/detail",
        query: {
          id: params.id
        }
      })
  }


  onBeforeMount(() => {
    getTableRows()
  })


</script>

<style scoped>
.tree_header {
  height: 40px;
  line-height: 40px;
	background-color: #f7f7f9;
	border-radius: 6px 6px 0px 0px;
  font-size: 16px;
	letter-spacing: 0px;
	color: #202531;
  padding-left: 16px;
}
.tree_content {
  overflow: hidden;
  height: calc(100% - 45px);
}
.search {
  padding: 16px;
}
.tree {
  overflow: auto;
  height: calc(100% - 65px);
  padding: 5px;
}
.tree :deep() .el-tree-node>.el-tree-node__children {
  overflow: unset;
}
.custom_tree_node {
  width: 100%;
  font-size: 14px;
  color: #202531;
  padding-right: 16px;
}
.label-text:hover {
  padding: 3px 0;
  background-color: var(--el-tree-node-hover-bg-color);
}
.main_container {
  padding: 15px;
  height: 100%;
}
.table_container {
  height: calc(100% - 30px);
  overflow: auto;
}

.pagination_box {
  position: sticky;
  position: -webkit-sticky;
  margin-top: 16px;
  bottom: 0px;
  background-color: #fff;
  z-index: 1024;
  height: 40px;
  line-height: 40px;
  padding-top: 8px;
}
.bg-pagination {
  bottom: unset
}

</style>