<template lang="html">
  <div class="sheet_demo">
    <el-container class="container">
      <!-- aside -->
      <el-aside style="width:15%;min-width: 260px">
        <!--<el-scrollbar style="height: 100%">-->
        <el-card id="menu_card" shadow="never" :body-style="{ padding: '0px', height: '100%' }" class="aside-card">
          <div slot="header" class="clearfix">
            <span>{{leftColumnTitle}}</span>
            <!--<el-button-group style="float: right;margin-top: -6px">-->
              <!--<el-tooltip content="新增" placement="top">-->
                <!--<el-button icon="el-icon-plus" size="mini" type="primary" @click="menu_add_edit_show_dialog(1)"></el-button>-->
              <!--</el-tooltip>-->
              <!--<el-tooltip content="修改" placement="top">-->
                <!--<el-button icon="el-icon-edit" size="mini" type="primary" @click="menu_add_edit_show_dialog(2)"></el-button>-->
              <!--</el-tooltip>-->
              <!--<el-dialog :title="menu_dialog_edit_add_title" :visible.sync="menu_dialog_edit" width="60%">-->
                <!--<div>-->
                  <!--&lt;!&ndash;============================菜单修改自定义================================&ndash;&gt;-->
                  <!--<el-input auto-complete="off" v-model="menu_row.value"></el-input>-->
                  <!--&lt;!&ndash;=========================================================================&ndash;&gt;-->
                <!--</div>-->
                <!--<div slot="footer" class="dialog-footer">-->
                  <!--<el-button-group>-->
                    <!--<el-button size="small" @click="menu_dialog_edit = false">取 消</el-button>-->
                    <!--<el-button size="small" type="primary" @click="menu_edit_submit">{{menu_dialog_edit_add_title}}</el-button>-->
                  <!--</el-button-group>-->
                <!--</div>-->
              <!--</el-dialog>-->
              <!--<el-tooltip content="删除" placement="top">-->
                <!--<el-button icon="el-icon-delete" size="mini" type="primary" @click="menu_delete"></el-button>-->
              <!--</el-tooltip>-->
            <!--</el-button-group>-->
          </div>
          <el-tree
            ref="treeRef"
            node-key="id"
            :style="{height: menu_height - 55 + 'px', overflowY: 'auto'}"
            :data="menu_list"
            :props="defaultProps"
            :highlight-current="true"
            :check-on-click-node="true"
            :accordion="true"
            @node-click="click_menu_item"
          >
          </el-tree>
          <!--<el-menu :style="{height: menu_height - 55 + 'px'}" class="aside-menu" @select="select_menu">-->
          <!--<el-menu-item @click="click_menu_item(item)" :index="index + ''" v-for="(item, index) in menu_list" :key="index">-->
          <!--<i class="el-icon-document"></i>-->
          <!--<span slot="title">{{item.title}}</span>-->
          <!--</el-menu-item>-->
          <!--</el-menu>-->
        </el-card>
        <!--</el-scrollbar>-->
      </el-aside>
      <!-- main -->
      <el-container class="main">
        <el-header class="main-header">
          <el-row class="main-header-row">
            <el-col :span="3" class="search-input-area">
              当前语言: <el-tag>{{lang}}</el-tag>
            </el-col>
            <!--<el-col :span="4" class="search-button-area">-->
              <!--<el-button-group>-->
                <!--<el-button size="small" icon="el-icon-search" type="primary"></el-button>-->
                <!--<el-popover-->
                  <!--placement="bottom"-->
                  <!--width="300"-->
                  <!--trigger="click"-->
                  <!--v-model="bill_search_popover_visible">-->
                  <!--<el-row>-->
                    <!--<el-col :span="24">-->
                      <!--<el-form size="small" :inline="true" :model="searchParam" label-width="80px" label-position="left">-->
                        <!--&lt;!&ndash;=======================================更多搜索自定义==========================================&ndash;&gt;-->
                        <!--<el-form-item label="实例">-->
                          <!--<el-input size="small" clearable v-model="searchParam.text1"></el-input>-->
                        <!--</el-form-item>-->
                        <!--<el-form-item label="实例2">-->
                          <!--<el-input size="small" clearable v-model="searchParam.text2"></el-input>-->
                        <!--</el-form-item>-->
                        <!--<el-form-item label="实例3">-->
                          <!--<el-input size="small" clearable v-model="searchParam.text3"></el-input>-->
                        <!--</el-form-item>-->
                        <!--<el-form-item label="实例4">-->
                          <!--<el-input size="small" clearable v-model="searchParam.text4"></el-input>-->
                        <!--</el-form-item>-->
                        <!--&lt;!&ndash;=============================================================================================&ndash;&gt;-->
                      <!--</el-form>-->
                    <!--</el-col>-->
                  <!--</el-row>-->
                  <!--<el-row>-->
                    <!--<el-col style="float: right; width: 140px">-->
                      <!--<el-button size="small" @click="query_bill_list" type="primary">搜索</el-button>-->
                    <!--</el-col>-->
                  <!--</el-row>-->
                  <!--<el-button size="small" type="primary" slot="reference">-->
                    <!--更多搜索-->
                    <!--<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                  <!--</el-button>-->
                <!--</el-popover>-->
              <!--</el-button-group>-->
            <!--</el-col>-->
            <el-col :span="3" class="operation-area">
              <el-button-group class="operation-button-group">
                <el-tooltip content="刷新" placement="top">
                  <el-button @click="refresh" icon="el-icon-refresh" size="small" type="primary"></el-button>
                </el-tooltip>
                <el-tooltip content="保存" placement="top">
                  <el-button @click="save_list" size="small" type="primary">保存</el-button>
                </el-tooltip>
                <!--<el-tooltip content="删除" placement="top">-->
                  <!--<el-button @click="bill_delete_list" icon="el-icon-delete" size="small" type="primary"></el-button>-->
                <!--</el-tooltip>-->
              </el-button-group>
            </el-col>
          </el-row>
        </el-header>
        <el-main id="bill_main">
          <el-table
            :data="bill_list"
            ref="multipleTable"
            :border=true
            :fit=true
            :row-style="set_row_style"
            :max-height="bill_height - 120"
            style="width: 100%; overflowY: hidden"
          >
            <!--=====================================表自定义========================================-->
            <el-table-column width="350" prop="index" sortable :show-overflow-tooltip=true label="路由">
              <template slot-scope="scope">
                <span>{{scope.row.url}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" :show-overflow-tooltip=true label="标题">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="py_index"label="检索字">
              <template slot-scope="scope">
                <el-input v-if="scope.row.priority === 3" v-model="scope.row.py_index" size="mini"></el-input>
              </template>
            </el-table-column>
            <!--<el-table-column width="100" label="状态">-->
              <!--<template slot-scope="scope">-->
                <!--<span v-if="scope.row.priority === 1">一级菜单</span>-->
                <!--<span v-if="scope.row.priority === 2">二级菜单</span>-->
                <!--<span v-if="scope.row.priority === 3">三级菜单</span>-->
              <!--</template>-->
            <!--</el-table-column>-->
            <!--====================================================================================-->
          </el-table>
          <el-dialog title="详情" :visible.sync="bill_detail_add_dialog" width="600px">
            <!--===================================表详情自定义======================================-->
            <el-form ref="form" :model="bill_query_one_detail" label-width="90px" size="mini" :inline="true">
              <el-form-item label="bill_date">
                <el-input v-model="bill_query_one_detail.bill_date"></el-input>
              </el-form-item>
              <el-form-item label="bill_no">
                <el-input v-model="bill_query_one_detail.bill_no"></el-input>
              </el-form-item>
              <el-form-item label="bill_status">
                <el-input v-model="bill_query_one_detail.bill_status"></el-input>
              </el-form-item>
              <el-form-item label="sampling_rate">
                <el-input v-model="bill_query_one_detail.sampling_rate"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" style="width: 100%">
              <el-row>
                <el-button-group style="float: left" v-show="bill_query_one_detail.id">
                  <el-button size="mini" type="primary" @click="bill_next(1)" icon="el-icon-arrow-left">上一条</el-button>
                  <el-button size="mini" type="primary" @click="bill_next(2)">下一条<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </el-button-group>
                <el-button-group style="float: right">
                  <el-button size="mini" type="primary" @click="bill_save_one">保存</el-button>
                  <el-button size="mini" @click="bill_cancel_dialog">取消</el-button>
                </el-button-group>
              </el-row>
            </div>
            <!--====================================================================================-->
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style src="@components/common/sheet_demo.css" scoped></style>
<script>
  import utilSingeUc from '@basicClass/util_singe_uc.js'
  // import '@components/common/sheet_demo.css'
  export default {
    inject: ['reload'],
    mixins: [utilSingeUc],
    data() {
      return {
        defaultProps: {
          children: 'Subclass', // 子菜单
          label: 'name' // 表体
        }, // 左侧树形控件属性配置
        // index_api_query_list: 'https://easy-mock.com/mock/5b5189d898002960110f8699/example/query_list', // 左侧栏数据
        // index_api_query_list: 'https://easy-mock.com/mock/5b485045d8d71b716154eadc/example/menu_list', // 左侧栏数据
        // 左侧栏
        leftColumnTitle: '菜单项', // 左侧栏标题
        index_data_id: 'id',
        index_module_name: '/mesAPI/sm_role', // 左侧主模块名
        index_api_query_list: 'query_list', // 查询菜单
        menu_search_parm: {
          id: JSON.parse(sessionStorage.login_data).app_id
        }, // 查询参数
        bill_not_check: {
          id: ''       // 不检查字段 默认不修改
        },
        menu_list: [],
        priority: 1,
        lang: JSON.parse(sessionStorage.user_info).lang
      }
    },
    activated() {
      this.get_menu_list()
      // this.query_bill_list()
    },
    methods: {
      // 空函数占位
      query_bill_list() {},
      // 请求菜单数据完成后
      get_menu_list_after() {
        this.recursion(this.menu_list[0])
      },
      click_menu_item(node) {
        console.log(node)
        this.bill_list = []
        this.priority = 1
        this.recursion(node)
        // this.bill_list[0].priority = 1
      },
      set_row_style(scope) {
        switch (scope.row.priority) {
          case 1:
            return {
              backgroundColor: 'rgba(146,189,232, 0.3)'
            }
          case 2:
            return {
              backgroundColor: 'rgba(146,189,232,0.1)'
            }
        }
      },
      // 递归
      recursion(data) {
        const obj = {
          icon: data.icon,
          id: data.id,
          py_index: data.py_index,
          // title: data.title,
          // index: data.index,
          url: data.url,
          name: data.name,
          key: data.key,
          // permission_group: data.permission_group,
          priority: this.priority
        }
        this.bill_list.push(obj)
        if (data.Subclass.length !== 0) {
          this.priority = 2
          data.Subclass.forEach(item => {
            this.recursion(item)
          })
        } else {
          obj.priority = 3
        }
      },
      get_menu_data() {
        this.$API.get(`${this.index_module_name}/query_list/`, {}, this.menu_search_parm).then(res => {
          this.menu_list = res.data
          this.get_menu_data_after()
        })
      },
      get_menu_data_after() {
        this.menu_list.map((item, index) => {
          item.title = item.name
          item.icon = item.icon.substring(item.icon.length - 8)
          item.index = item.url
          item.subs = item.Subclass
          item.subs.map(child => {
            child.title = child.name
            child.index = child.url
            child.data = child.Subclass
            child.data.map(son => {
              son.title = son.name
              if (son.url) {
                if (son.url.substring(0, 1) === '/') {
                  son.index = son.url.substring(1, son.url.length)
                }
              } else {
                son.index = son.url
              }
            })
          })
        })
        sessionStorage.menu = JSON.stringify(this.menu_list)
        this.reload()
      },
      // 保存
      save_list() {
        console.log(this.menu_list)
        this.$API.post('/mesAPI/sm_role/save_list/', {}, {}, this.bill_list).then(res => {
          this.$message({
            type: 'success',
            message: '保存成功！'
          })
          this.get_menu_data()
        })
      }
    }
  }
</script>
<style scoped>
  .sheet_demo >>> .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: transparent!important;
  }
</style>
