<template>
  <div class="mail">
    <div class="left">
      <div>
        <div class="title">组织架构</div>
        <div class="bottom">
          <div class="ty">
            <div>
              <span>全部</span>
              <span class="number">(103)</span>
            </div>
          </div>
          <div class="ty" style="margin:15px 0;">
            <div>
              <span>未分组</span>
              <span class="number">(8)</span>
            </div>
          </div>
          <div class="tree">
            <el-tree
              :data="data1"
              node-key="id"
              :expand-on-click-node="false"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span style="margin-left:30px;" class="btn">
                  <el-button type="text" size="mini" @click="() => edit(data)">
                    <i class="el-icon-edit"></i>
                  </el-button>
                  <el-button type="text" size="mini" @click="() => remove(node, data)">
                    <i class="el-icon-delete" ></i>
                  </el-button>
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </div>
      <div class="end">
        <!-- <span class="add-l" @click="addCounter">添加柜组</span> -->
        <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"
            >移动</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="list.main"
        tooltip-effect="dark"
        style="width: 100%"
        height="calc(100% - 140px)"
      >
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column
          prop="taskName"
          label="姓名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="企业微信ID"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="taskType"
          label="部门"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="taskType"
          label="角色"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="bar"
          label="手机号"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column label="同步时间" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.sendDate }}</template>
        </el-table-column>
        <el-table-column
          prop="bar"
          label="备注"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="120">
          <template slot-scope="scope">
            <el-button  class="btn" @click="handleShopowner(scope.row)" size="small"
              >设为店长</el-button
            >
          </template>
        </el-table-column>
      </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"
    ></move-dialog>
    <add-store ref="addStore"></add-store>
    <!-- <add-counter ref="addCounter"></add-counter> -->
    
  </div>
</template>

<script>
import MoveDialog from "./components/move";
// import AddCounter from "./components/addCounter";
import AddStore from "./components/addStore";
import { getMailList } from "@/api/jinjian"
export default {
  data() {
    const data1 = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1"
              },
              {
                id: 10,
                label: "三级 1-1-2"
              }
            ]
          }
        ]
      },
      {
        id: 2,
        label: "一级 2",
        children: [
          {
            id: 5,
            label: "二级 2-1"
          },
          {
            id: 6,
            label: "二级 2-2"
          }
        ]
      },
      {
        id: 3,
        label: "一级 3",
        children: [
          {
            id: 7,
            label: "二级 3-1"
          },
          {
            id: 8,
            label: "二级 3-2"
          }
        ]
      },
      {
        id: 9,
        label: "一级 3",
        children: [
          {
            id: 10,
            label: "二级 3-1"
          },
          {
            id: 11,
            label: "二级 3-2"
          }
        ]
      }
    ];
    return {
      data1: JSON.parse(JSON.stringify(data1)),
      list: {
        main: [
          {
            id: "1001",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1002",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1003",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1003",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1003",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1003",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1003",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1003",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          }
        ],
        search: {
          bar: [
            {
              id: "1",
              name: "全部"
            },
            {
              id: "2",
              name: "测试"
            }
          ],
          taskType: [
            {
              id: "1",
              name: "全部"
            },
            {
              id: "2",
              name: "测试"
            }
          ]
        }
      },
      isShow: false,
      formData: {
        status: "",
        keys: ""
      },
      statusList: [],
      page: {
        currentPage: 1,
        size: 20,
        total: 100
      },
      moveDialogShow: false,
      counterDialog: false,
      storeDialog: false
    };
  },
  components: {
    MoveDialog,
    // AddCounter,
    AddStore
  },
  created() {
    this.getMailList()
  },
  methods: {
    append(data) {
      const newChild = { id: id++, label: "testtest", children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },
    edit(data) {
      
    },
    remove(data) {
      console.log("删除");
      
       this.$confirm('门店下包含成员，删除后所有成员将被移动到“未分组”列表，是否确认继续删除？', {
        }).then(() => {
          this.$message.success("删除成功")
        }).catch(() => {
          this.$message.info("取消删除")         
        });     
    },
    listPick() {},
    testButtonClick() {},
    pagesSizeChange() {},
    pagesNowPageChange() {},
    synchronismMember() {
      this.isShow = true;
      this.$emit("isShow", this.isShow);
    },
    handleMove() {
      this.moveDialogShow = true;
    },
    removeFinish() {
      this.moveDialogShow = false;
    },
    handleCurrentChange() {},
    /* addCounter() {
      this.$refs.addCounter.counterDialog = true;
    }, */
    addStore() {
      console.log("触发没");
      
      this.$refs.addStore.addStoreDialog = true;
    },
    getMailList() {
      /* let data = {

      }
      getMailList(data).then(res => {
        console.log(res,"通讯录表格数据");
        
      }) */
    },
    handleShopowner() {

    }
  }
};
</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;
}

.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;
}
.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>