<template>
  <div class="mail">
    <div class="left">
      <div>
        <div class="title">组织架构</div>
        <div class="bottom">
          <div class="ty" @click="getMailList(1)">
            <div>
              <span>全部</span>
              <span class="number">{{ allNumber }}</span>
            </div>
          </div>
          <div class="ty" style="margin:15px 0;" @click="getNoGroupMember(1)">
            <div>
              <span>未分组</span>
              <span class="number">{{ wNumber }}</span>
            </div>
          </div>
          <div class="tree">
            <el-tree
              :props="orgData"
              :data="data1"
              node-key="id"
              :expand-on-click-node="false"
              @node-click="handleTreeClick"
            >
             <!--  <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
              </span> -->
            </el-tree>
          </div>
        </div>
      </div>
      <!--  <div class="end">
        <span class="add-r" @click="addStore">添加门店/专柜</span>
      </div> -->
    </div>
    <div class="right">
      <!-- <div class="right-c"> -->
      <div class="top">三号柜组（共18人）</div>
      <div class="searchs">
        <div class="buttons">
          <el-button class="button buttondark" size="small" @click="handleMove" :disabled="idList.length>0? false:true "
            >移动</el-button
          >
          <el-button
            class="button buttonlight"
            size="small"
            @click="synchronismMember"
            >同步记录</el-button
          >
        </div>
        <!-- 搜索区 -->
        <el-form
          class="searchzone"
          :inline="true"
          :model="formData"
          label-width="auto"
        >
          <el-form-item label="关键词">
            <el-input
              size="small"
              v-model="formData.keys"
              style="width:160px"
              placeholder="请输入关键词"
            />
          </el-form-item>
          <el-button class="button buttondark" size="small">搜索</el-button>
        </el-form>
      </div>
      <el-table
        stripe
        class="list"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        height="calc(100% - 140px)"
        @selection-change="handleMemberChange"
      >
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column
          prop="userName"
          label="姓名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="userId"
          label="企业微信ID"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="dept"
          label="部门"
          align="center"
        ></el-table-column>
        <el-table-column prop="role" label="角色" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.managerType == 0">店员</span>
            <span v-if="scope.row.managerType == 1">店长</span>
            <span v-if="scope.row.managerType == 2">柜组负责人</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号"
          align="center"
        ></el-table-column>
        <el-table-column
          label="同步时间"
          width="180"
          align="center"
          prop="synchronization"
        />
      </el-table>
      <div class="fy">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-size="page.size"
          layout="total, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
    <move-dialog
      v-if="moveDialogShow"
      :moveDialog="moveDialogShow"
      @handleCancel="moveDialogShow = false"
      @handleFinish="removeFinish"
      :idList="idList"
    ></move-dialog>
    <!--  <el-dialog title="提示" v-if="nameDialog" :visible.sync="nameDialog" width="30%" >
      <div class="changeName">
        <span style="margin:0 10px;">门店名称:</span>
        <el-input v-model="store.name" placeholder="请输入名称"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="nameDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleNameChange">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import MoveDialog from "./components/move";
import {
  getOrgTree,
  getAllMemberList,
  getNoGroupMember,
  getMemberById,
  storeNameChange,
  getGroupById
} from "@/api/in/mail";
export default {
  data() {
    const data1 = [
      {
        id: 1,
        label: "亿百分科技",
        children: [
          {
            id: 2,
            label: "一号柜组",

            children: [
              {
                id: 5,
                label: "Nike门店",
                type: "门店"
              },
              {
                id: 6,
                label: "阿迪达斯",
                type: "门店"
              }
            ]
          },
          {
            id: 3,
            label: "二号柜组",
            children: [
              {
                id: 7,
                label: "vans门店",
                type: "门店"
              }
            ]
          }
          /*  {
            id: 4,
            label: "三号柜组",
            children: [
              {
                id: 9,
                label: "匡威门店"
              }
            ]
          } */
        ]
      }
    ];
    return {
      data1: JSON.parse(JSON.stringify(data1)),
      list1: {
        main1: [
          {
            id: "1",
            name: "李振华",
            wxId: "lizhenhua",
            dept: "销售部",
            role: "店长",
            mobile: "1588171558",
            time: "2020/01/20"
          },
          {
            id: "1",
            name: "唐珊翰",
            wxId: "tangshanyu",
            dept: "销售部",
            role: "店员",
            mobile: "15655447788",
            time: "2020/01/20"
          },
          {
            id: "1",
            name: "苏聪",
            wxId: "sucong",
            dept: "销售部",
            role: "店员",
            mobile: "1887767865",
            time: "2020/01/20"
          }
        ],
        main2: [
          {
            id: "2",
            name: "胡鑫",
            wxId: "huxin",
            dept: "销售部",
            role: "店长",
            mobile: "15881715583",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "刘燕",
            wxId: "liuyan",
            dept: "销售部",
            role: "店员",
            mobile: "15655447788",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "张梦瑶",
            wxId: "zhangmengyao",
            dept: "销售部",
            role: "店员",
            mobile: "18877678653",
            time: "2020/01/20"
          }
        ],
        main3: [
          {
            id: "2",
            name: "吴倩",
            wxId: "wuqian",
            dept: "销售部",
            role: "店长",
            mobile: "15881715583",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "吕思思",
            wxId: "lvsisi",
            dept: "销售部",
            role: "店员",
            mobile: "15655443243",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "张君",
            wxId: "zhangjun",
            dept: "销售部",
            role: "店员",
            mobile: "18877678790",
            time: "2020/01/20"
          }
        ],
        main4: [
          {
            id: "1",
            name: "李振华",
            wxId: "lizhenhua",
            dept: "销售部",
            role: "店长",
            mobile: "1588171558",
            time: "2020/01/20"
          },
          {
            id: "1",
            name: "唐珊翰",
            wxId: "tangshanyu",
            dept: "销售部",
            role: "店员",
            mobile: "15655447788",
            time: "2020/01/20"
          },
          {
            id: "1",
            name: "苏聪",
            wxId: "sucong",
            dept: "销售部",
            role: "店员",
            mobile: "1887767865",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "胡鑫",
            wxId: "huxin",
            dept: "销售部",
            role: "店长",
            mobile: "15881715583",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "刘燕",
            wxId: "liuyan",
            dept: "销售部",
            role: "店员",
            mobile: "15655447788",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "张梦瑶",
            wxId: "zhangmengyao",
            dept: "销售部",
            role: "店员",
            mobile: "18877678653",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "吴倩",
            wxId: "wuqian",
            dept: "销售部",
            role: "店长",
            mobile: "15881715583",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "吕思思",
            wxId: "lvsisi",
            dept: "销售部",
            role: "店员",
            mobile: "15655443243",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "张君",
            wxId: "zhangjun",
            dept: "销售部",
            role: "店员",
            mobile: "18877678790",
            time: "2020/01/20"
          }
        ],
        main5: [
          {
            id: "1",
            name: "李振华",
            wxId: "lizhenhua",
            dept: "销售部",
            role: "店长",
            mobile: "1588171558",
            time: "2020/01/20"
          },
          {
            id: "1",
            name: "唐珊翰",
            wxId: "tangshanyu",
            dept: "销售部",
            role: "店员",
            mobile: "15655447788",
            time: "2020/01/20"
          },
          {
            id: "1",
            name: "苏聪",
            wxId: "sucong",
            dept: "销售部",
            role: "店员",
            mobile: "1887767865",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "胡鑫",
            wxId: "huxin",
            dept: "销售部",
            role: "店长",
            mobile: "15881715583",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "刘燕",
            wxId: "liuyan",
            dept: "销售部",
            role: "店员",
            mobile: "15655447788",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "张梦瑶",
            wxId: "zhangmengyao",
            dept: "销售部",
            role: "店员",
            mobile: "18877678653",
            time: "2020/01/20"
          }
        ],
        main6: [
          {
            id: "1",
            name: "李振华",
            wxId: "lizhenhua",
            dept: "销售部",
            role: "店长",
            mobile: "1588171558",
            time: "2020/01/20"
          },
          {
            id: "1",
            name: "唐珊翰",
            wxId: "tangshanyu",
            dept: "销售部",
            role: "店员",
            mobile: "15655447788",
            time: "2020/01/20"
          },
          {
            id: "1",
            name: "苏聪",
            wxId: "sucong",
            dept: "销售部",
            role: "店员",
            mobile: "1887767865",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "胡鑫",
            wxId: "huxin",
            dept: "销售部",
            role: "店长",
            mobile: "15881715583",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "刘燕",
            wxId: "liuyan",
            dept: "销售部",
            role: "店员",
            mobile: "15655447788",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "张梦瑶",
            wxId: "zhangmengyao",
            dept: "销售部",
            role: "店员",
            mobile: "18877678653",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "吴倩",
            wxId: "wuqian",
            dept: "销售部",
            role: "店长",
            mobile: "15881715583",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "吕思思",
            wxId: "lvsisi",
            dept: "销售部",
            role: "店员",
            mobile: "15655443243",
            time: "2020/01/20"
          },
          {
            id: "2",
            name: "张君",
            wxId: "zhangjun",
            dept: "销售部",
            role: "店员",
            mobile: "18877678790",
            time: "2020/01/20"
          }
        ],
        search: {
          bar: [
            {
              id: "1",
              name: "全部"
            },
            {
              id: "2",
              name: "测试"
            }
          ],
          taskType: [
            {
              id: "1",
              name: "全部"
            },
            {
              id: "2",
              name: "测试"
            }
          ]
        }
      },
      tableData: [],
      isShow: false,
      formData: {
        status: "",
        keys: ""
      },
      statusList: [],
      page: {
        currentPage: 1,
        size: 10,
        total: 100
      },
      moveDialogShow: false,
      counterDialog: false,
      storeDialog: false,
      nameDialog: false,
      allNumber: "",
      wNumber: "",
      orgData: {
        label: "name",
        children: "adminStallList",
        id: "id"
      },
      type: 1,
      idList: [],
      storeId: "",
      groupId: ""
    };
  },
  components: {
    MoveDialog
  },
  created() {
    this.getOrgTree();
    this.getMailList(1);
  },
  methods: {
    getOrgTree() {
      getOrgTree().then(res => {
        let data = res.data;
        this.allNumber = data["用户的总数"];
        this.wNumber = data["未分组用户的总数"];
        this.data1 = data["所有的柜组"];
      });
    },
    handleTreeClick(data) {
      if(data.type){
        this.storeId = data.id
        this.getStoreMember(1)
      }else {
        this.groupId = data.id
        this.getGroupMember(1)
      }     
    },
    getGroupMember(page) {
      this.type = 3
       let params = {
        pageNum: page,
        shopId: this.groupId
      };
      getGroupById(params).then(res => {
        this.tableData = res.data.list;
        this.page.total = Number(res.data.total);
      });
    },
    getStoreMember(page) {
       this.type = 4
       let params = {
        pageNum: page,
        stallId: this.storeId
      };
      getMemberById(params).then(res => {
        this.tableData = res.data.list;
        this.page.total = Number(res.data.total);
      });
    },
    listPick() {},
    testButtonClick() {},
    pagesSizeChange() {},
    pagesNowPageChange() {},
    synchronismMember() {
      this.isShow = true;
      this.$emit("isShow", this.isShow);
    },
    handleMove() {
      this.moveDialogShow = true;
    },
    removeFinish() {
      this.moveDialogShow = false;
    },
    handleCurrentChange(val) {
      console.log(val, "每页");
      if(this.type == 1) {
        this.getMailList(val)       
      }else if (this.type == 2) {        
        this.getNoGroupMember(val)
      }else if (this.type == 3) {        
        this.getGroupMember(val)
      }
      else {
        this.getStoreMember(val)
      }
    },
    getMailList(page) {
      this.type = 1;
      let params = {
        pageNum: page
      };
      getAllMemberList(params).then(res => {
        console.log(res, "res");
        this.tableData = res.data.list;
        this.page.total = Number(res.data.total);
      });
    },
    handleShopowner() {},
    getNoGroupMember(page) {
      this.type = 2;
      let params = {
        pageNum: page
      };
      getNoGroupMember(params).then(res => {
        this.tableData = res.data.list;
        this.page.total = Number(res.data.total);
      });
    },
    handleMemberChange(val) {
      console.log(val,"val");
      
      let ids = []
      val.map(function(item) {
        ids.push(item.id) 
      });
      this.idList = ids  
      console.log(this.idList,",");
          
    }
  }
};
</script>

<style scoped>
.btn >>> .el-button + .el-button {
  margin-left: 5px;
}
.mail {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
}
.run {
  height: 34px;
  width: 100%;
  position: relative;
}
.top {
  padding-bottom: 10px;
  border-bottom: 1px solid #f8f8f8;
}
.changeName {
  display: flex;
  align-items: center;
}
.changeName >>> .el-input {
  width: 70%;
}
.end {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  bottom: 0;
}
.add-l,
.add-r {
  width: 50%;
  height: 32px;
  border: 1px solid rgba(78, 89, 199, 1);
  width: 100%;
  text-align: center;
  line-height: 32px;
}
.add-l {
  background-color: #e8e9fe;
  color: rgba(78, 89, 199, 1);
}
.add-r {
  background-color: #4e59c7;
  color: #fff;
}
.ty {
  height: 40px;
  background: rgba(248, 248, 248, 1);
  border-radius: 26px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 16px;
  color: rgba(51, 51, 51, 1);
  justify-content: space-between;
  cursor: pointer;
}
.bottom {
  padding: 12px;
  margin-bottom: 20px;
}
.title {
  height: 48px;
  background: rgba(78, 89, 199, 1);
  line-height: 48px;
  text-align: center;
  color: #fff;
  font-size: 16px;
}
.ct {
  display: flex;
  flex-direction: row;
  background-color: #f8f8f8;
  min-height: 100%;
}
.left {
  position: relative;
  width: 20%;
  overflow: auto;
  flex-direction: column;
  justify-content: space-between;
}
.right {
  position: relative;
  padding: 10px;
  margin-left: 10px;
  width: 79%;
}
.left,
.right {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px 0px #ddd;
}

.number {
  font-size: 14px;
  margin-top: 2px;
  margin-left: 8px;
}
.icon {
  /* display: inline-block; */
  width: 16px;
  height: 16px;
}

.main {
  /* // border: 2px solid orange; */
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.lists {
  height: auto;
  min-height: 70%;
  width: 100%;
  margin-top: 20px;
}

.listButtonRed {
  /* // border: 2px solid green; */
  color: red;
}
.pages {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.fy {
  height: 35px;
}
.tree {
  border-radius: 10px;
  background: #f8f8f8;
}
.tree >>> .el-tree {
  background: transparent;
}
.el-icon-delete {
  color: rgba(208, 2, 27, 1);
}
.el-icon-delete,
.el-icon-edit {
  font-weight: bold;
}
</style>