<template>
  <div>
    <d2-container>
      <!-- <template slot="header">首页/数据查询</template> -->
      <div class="main">
        <div class="right">
          <!-- <template slot="header">首页/数据查询</template> -->
          <div class="nav">当前所在位置:首页>用户管理</div>
          <div class="right_main">
            <div class="right_title">
              <i class="fa fa-bar-chart" aria-hidden="true" style="padding-right: 5px"></i>
              用户管理
            </div>
            <div class="right_table">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <div class="float-left">
                  <el-form-item label="机构名称">
                    <el-autocomplete popper-class="my-autocomplete" v-model="state" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
                      <i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick">
                      </i>
                      <template slot-scope="{ item }">
                        <div class="name">{{ item.value }}</div>
                        <!-- <span class="addr">{{ item.address }}</span> -->
                      </template>
                    </el-autocomplete>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-refresh-left" @click="reset">重置</el-button>
                  </el-form-item>
                </div>
                <div class="float-right">
                  <el-form-item>

                    <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">新建机构</el-button>
                  </el-form-item>

                </div>
              </el-form>
              <el-table :data="tableData" ref='dataTreeList' style="width: 100%" :header-cell-style="{ background: '#0064b9', color: '#c9f5fa' }" row-key="id" border :tree-props="{children: 'children',hasChildren: 'hasChildren',}">
                <el-table-column prop="OrganizationName" label="组织机构名称" align="center">
                </el-table-column>
                <el-table-column prop="storeType" label="仓库类型" align="center">
                </el-table-column>

                <el-table-column prop="state" label="机构状态" align="center">
                </el-table-column>
                <el-table-column prop="CreateDate" label="创建时间" align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                  <template slot-scope="scope">
                    <el-button @click="detail(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="detail(scope.row)" type="text" size="small">删除</el-button>
                    <el-button @click="detail(scope.row)" type="text" size="small">查看</el-button>
                    <el-switch v-model="value" active-value='启用' inactive-value='禁用'active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1" :page-sizes="[10, 20, 30, 40]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="活动名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" style="width:223px"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </d2-container>
  </div>
</template>
<script>
export default {
  name: 'userManagement',
  data () {
    return {
      value:'true',//启用开关默认值
      filterText: '',
      restaurants: [], //组织机构搜索
      state: '',

      formInline: {
        scanTime: ''
      },
      // 表格字段
      dataSearchList: [
        {
          directLibrary: '',
          subTreasury: '',
          cfName: '',
          scanStart: '',
          scanEnd: '',

          cfState: ''
        }
      ],
      tableData: [{
        id: 1,
        CreateDate: '2016-05-02',
        OrganizationName: '王小虎',
        storeType: '直属库',
        state: '启用',
      }, {
        id: 2,
        CreateDate: '2016-05-02',
        OrganizationName: '王小虎',
        storeType: '直属库',
        state: '启用',
      }, {
        id: 3,
        CreateDate: '2016-05-02',
        OrganizationName: '王小虎',
        storeType: '直属库',
        state: '启用',
        children: [{
          id: 31,
          CreateDate: '2016-05-02',
          OrganizationName: '王小虎',
          storeType: '直属库',
          state: '启用',
        }, {
          id: 32,
          CreateDate: '2016-05-02',
          OrganizationName: '王小虎',
          storeType: '直属库',
          state: '启用',
        }]
      }, {
        id: 4,
        CreateDate: '2016-05-02',
        OrganizationName: '王小虎',
        storeType: '直属库',
        state: '启用',
      }],
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form: {
        name: '',
        region: ''
      },
      pagination: {
        // 每页显示的条数
        pageSize: 10,
        // 当前页
        curPage: 1,
        // 总数
        total: 20
      }
    }
  },
  watch: {
    filterTest (val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted () {
    this.restaurants = this.loadAll();
  },
  methods: {
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    search () { },
    reset () { },
    // 每页条数改变
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    // 当前页改变
    handleCurrentChange (val) {
      // this.pagination.curPage = val;
      console.log(`当前页: ${val}`)
    },
    detail () { },

    querySearch (queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll () {
      return [
        { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
        { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
        { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
        { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
        { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
        { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
        { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
        { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
        { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
        { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
        { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
        { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
        { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
        { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
        { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
        { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
        { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
        { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
        { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
        { "value": "枪会山", "address": "上海市普陀区棕榈路" },
        { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
        { "value": "钱记", "address": "上海市长宁区天山西路" },
        { "value": "壹杯加", "address": "上海市长宁区通协路" },
        { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
        { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
        { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
        { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
        { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
        { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
        { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
        { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
        { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
        { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
        { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
        { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
        { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
        { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
        { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
        { "value": "浏阳蒸菜", "address": "天山西路430号" },
        { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
        { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
        { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
        { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
        { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
        { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
        { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
        { "value": "阳阳麻辣烫", "address": "天山西路389号" },
        { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
      ];
    },
    handleSelect (item) {
      console.log(item);
    },
    handleIconClick (ev) {
      console.log(ev);
    },
    // 全部展开
    toggleRowExpansion (isExpansion) {
      this.tableData.forEach(item => {
        this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
      })
    },

  }
}
</script>
<style lang="scss" scoped>
/* .main .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  border-bottom: none ;
} */
// 组织机构输入框
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}

.main {
  height: 100%;
  display: flex;
  .left {
    width: 250px;
    height: 100%;
    background: #163d79;
  }
  .right {
    // margin-left: 20px;
    // width: calc(100% - 250px);
    .nav {
      padding: 10px 0 10px 10px;
      color: #fff;

      font-size: 14px;

      background: #004a93;
    }
    .right_main {
      border: 1px solid #67a7df;
      background: #112f5d;

      margin-top: 10px;
      .right_title {
        color: #fff;
        border-bottom: 1px solid #67a7df;
        padding: 10px;
        font-size: 14px;
      }
      .right_table {
        padding: 20px;
      }
    }
  }
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
</style>
