
<template>
  <div class="main">
    <!-- 搜索区 -->
    <div class="searchs">
      <div class="buttons">
        <el-button class="button buttonlight" size="small" @click="orgMainAdd">添加组织</el-button>
        <el-button class="button buttondark" size="small" @click="orgMainDels">批量删除</el-button>
      </div>

      <el-form class="searchzone" :inline="true" :model="zdata.searchPost" label-width="auto">
        <el-form-item label="关键词">
          <el-input
            size="small"
            v-model="zdata.search.post.keyword"
            style="width:160px"
            :placeholder="zcache.search.keywordTip"
          />
        </el-form-item>
        <el-button
          class="button buttondark"
          size="small"
          @click="orgMainSearch"
          style="margin-top:4px;"
        >搜索</el-button>
      </el-form>
    </div>

    <!-- 列表区 -->
    <div class="lists">
      <el-table
        stripe
        class="list"
        ref="multipleTable"
        :data="zlist.org"
        tooltip-effect="dark"
        style="width: 100%"
        height="calc(100vh - 312px)"
        row-key="id"
        :tree-props="{children: 'children',hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="name" label="名称" align="left"></el-table-column>
        <el-table-column prop="typeName" label="类型" align="center"></el-table-column>
        <el-table-column prop="bossName" label="主管" align="center"></el-table-column>
        <el-table-column prop="bossWxId" label="主管微信ID" align="center"></el-table-column>
        <el-table-column prop="bossPhoneNum" label="主管电话" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="orgMainSee(scope.row.id)" class="btn">详情</el-button>
            <el-button type="text" @click="orgMainEdit(scope.row.id)" class="btn">编辑</el-button>
            <el-button
              type="text"
              @click="orgMainDel(scope.row.id)"
              class="listButtonRed"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <el-pagination
        @current-change="orgMainPageChange"
        :current-page="zcache.page.nowPage"
        :page-size="zcache.page.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="zcache.page.allItem"
      ></el-pagination>
    </div>

    <!-- 对话框区 -->
    <div class="dialogs">
      <el-dialog
        title="新建组织"
        :visible.sync="zcache.status.dialog.new"
        width="65%"
        :before-close="orgNewClose"
      >
        <div class="dialogMain">
          <el-form :model="zdata.new.post" label-width="auto" ref="orgNewForm">
            <el-form-item label="名称:" prop="name">
              <el-input
                size="small"
                v-model="zdata.new.post.name"
                style="width:240px;"
                :placeholder="zcache.new.nameTip"
              />
            </el-form-item>

            <!-- <el-form-item label="类型:" prop="type">
              <el-select
                size="small"
                v-model="zdata.new.post.typeId"
                placeholder="请选择品牌类型"
                style="width:240px"
              >
                <el-option
                  v-for="item in ztrans.orgType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>-->

            <!-- <el-form-item v-if="zdata.new.post.typeId == '2'" label="所属门店:" prop="type">
              <el-select
                size="small"
                v-model="zdata.new.post.typeId"
                placeholder="请选择品牌类型"
                style="width:240px"
              >
                <el-option
                  v-for="item in ztrans.orgType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>-->

            <el-form-item label="所属上级:" prop="from">
              <el-tree
                :data="ztrans.org"
                show-checkbox
                default-expand-all
                node-key="id"
                :props="ztrans.new.from"
                @node-click="orgNewFromPick"
              ></el-tree>
            </el-form-item>

            <el-form-item label="品牌负责人:" prop="people"></el-form-item>
          </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="orgNewCancel">取 消</el-button>
          <el-button type="primary" @click="orgNewSubmit" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {} from "@api/in/org";
const zlog = console.log.bind(console);

export default {
  components: {},
  data() {
    return {
      zcache: {
        status: {
          dialog: {
            new: false,
            see: false,
            edit: false
          }
        },
        search: {
          keywordTip: "请输入关键词"
        },
        page: {
          pageSize: 10,
          allItem: 9,
          nowPage: 1
        },
        new: {
          nameTip: "请输入名称"
        }
      },
      ztrans: {
        new: {
          from: {
            label: "name",
            children: "children",
            disabled: true,
            isLeaf: true,
          }
        },
        orgS: [
            {
                id: 1001,
                name: 'A',
                children: [
                    {
                        id: 2001,
                        name: 'A1',

                    }
                ]
            }
        ],
        org: [
          {
            id: "01000000",
            name: "欧亚万豪购物中心",
            typeId: "",
            typeName: "门店",
            bossId: "",
            bossName: "Alice",
            bossWxId: "WxAlice",
            bossPhoneNum: "18800000001",
            createTime: "2019/01/01",
            children: [
              {
                id: "01010000",
                name: "品牌店",
                typeId: "",
                typeName: "商场",
                bossId: "",
                bossName: "Bob",
                bossWxId: "WxBob",
                bossPhoneNum: "18800000002",
                createTime: "2019/02/01",
                children: [
                  {
                    id: "01010100",
                    name: "精品男装",
                    typeId: "",
                    typeName: "柜组",
                    bossId: "",
                    bossName: "Clid",
                    bossWxId: "WxClid",
                    bossPhoneNum: "18800000003",
                    createTime: "2019/03/01",
                    children: [
                      {
                        id: "01010101",
                        name: "Asics",
                        typeId: "",
                        typeName: "专柜",
                        bossId: "",
                        bossName: "Dive",
                        bossWxId: "WxDive",
                        bossPhoneNum: "18800000004",
                        createTime: "2019/04/01"
                      },
                      {
                        id: "01010102",
                        name: "Adidas",
                        typeId: "",
                        typeName: "专柜",
                        bossId: "",
                        bossName: "Eva",
                        bossWxId: "WxEva",
                        bossPhoneNum: "18800000005",
                        createTime: "2019/04/02"
                      },
                      {
                        id: "01010103",
                        name: "Nike",
                        typeId: "",
                        typeName: "专柜",
                        bossId: "",
                        bossName: "Fox",
                        bossWxId: "WxFox",
                        bossPhoneNum: "18800000006",
                        createTime: "2019/04/03"
                      }
                    ]
                  },
                  {
                    id: "01010200",
                    name: "精品女装",
                    typeId: "",
                    typeName: "柜组",
                    bossId: "",
                    bossName: "Gome",
                    bossWxId: "WxGome",
                    bossPhoneNum: "18800000007",
                    createTime: "2019/03/02",
                    children: []
                  },
                  {
                    id: "01010300",
                    name: "皮鞋柜组",
                    typeId: "",
                    typeName: "柜组",
                    bossId: "",
                    bossName: "Hola",
                    bossWxId: "WxHola",
                    bossPhoneNum: "18800000008",
                    createTime: "2019/03/03",
                    children: []
                  },
                  {
                    id: "01010400",
                    name: "护肤美颜",
                    typeId: "",
                    typeName: "柜组",
                    bossId: "",
                    bossName: "Ink",
                    bossWxId: "WxInk",
                    bossPhoneNum: "18800000009",
                    createTime: "2019/03/04",
                    children: []
                  }
                ]
              }
            ]
          }
        ],
        orgType: [
          {
            id: "01",
            name: "门店"
          },
          {
            id: "02",
            name: "商场"
          },
          {
            id: "03",
            name: "柜组"
          },
          {
            id: "04",
            name: "品牌店"
          }
        ]
      },
      zdata: {
        search: {
          post: {
            keyword: ""
          },
          default: {
            keyword: ""
          }
        },
        new: {
          post: {
            name: "",
            typeId: "",
            typeName: "",
            fromType1Id: "",
            formType1Name: "",
            fromType2Id: "",
            formType2Name: "",
            fromType3Id: "",
            formType3Name: "",
            fromType4Id: "",
            formType4Name: "",
            bossId: "",
            bossName: ""
          },
          default: {
            name: "",
            typeId: "",
            typeName: "",
            fromType1Id: "",
            formType1Name: "",
            fromType2Id: "",
            formType2Name: "",
            fromType3Id: "",
            formType3Name: "",
            fromType4Id: "",
            formType4Name: "",
            bossId: "",
            bossName: ""
          }
        }
      },
      zlist: {
        org: [
          {
            id: "01000000",
            name: "欧亚万豪购物中心",
            typeId: "",
            typeName: "门店",
            bossId: "",
            bossName: "Alice",
            bossWxId: "WxAlice",
            bossPhoneNum: "18800000001",
            createTime: "2019/01/01",
            children: [
              {
                id: "01010000",
                name: "品牌店",
                typeId: "",
                typeName: "商场",
                bossId: "",
                bossName: "Bob",
                bossWxId: "WxBob",
                bossPhoneNum: "18800000002",
                createTime: "2019/02/01",
                children: [
                  {
                    id: "01010100",
                    name: "精品男装",
                    typeId: "",
                    typeName: "柜组",
                    bossId: "",
                    bossName: "Clid",
                    bossWxId: "WxClid",
                    bossPhoneNum: "18800000003",
                    createTime: "2019/03/01",
                    children: [
                      {
                        id: "01010101",
                        name: "Asics",
                        typeId: "",
                        typeName: "专柜",
                        bossId: "",
                        bossName: "Dive",
                        bossWxId: "WxDive",
                        bossPhoneNum: "18800000004",
                        createTime: "2019/04/01"
                      },
                      {
                        id: "01010102",
                        name: "Adidas",
                        typeId: "",
                        typeName: "专柜",
                        bossId: "",
                        bossName: "Eva",
                        bossWxId: "WxEva",
                        bossPhoneNum: "18800000005",
                        createTime: "2019/04/02"
                      },
                      {
                        id: "01010103",
                        name: "Nike",
                        typeId: "",
                        typeName: "专柜",
                        bossId: "",
                        bossName: "Fox",
                        bossWxId: "WxFox",
                        bossPhoneNum: "18800000006",
                        createTime: "2019/04/03"
                      }
                    ]
                  },
                  {
                    id: "01010200",
                    name: "精品女装",
                    typeId: "",
                    typeName: "柜组",
                    bossId: "",
                    bossName: "Gome",
                    bossWxId: "WxGome",
                    bossPhoneNum: "18800000007",
                    createTime: "2019/03/02",
                    children: []
                  },
                  {
                    id: "01010300",
                    name: "皮鞋柜组",
                    typeId: "",
                    typeName: "柜组",
                    bossId: "",
                    bossName: "Hola",
                    bossWxId: "WxHola",
                    bossPhoneNum: "18800000008",
                    createTime: "2019/03/03",
                    children: []
                  },
                  {
                    id: "01010400",
                    name: "护肤美颜",
                    typeId: "",
                    typeName: "柜组",
                    bossId: "",
                    bossName: "Ink",
                    bossWxId: "WxInk",
                    bossPhoneNum: "18800000009",
                    createTime: "2019/03/04",
                    children: []
                  }
                ]
              }
            ]
          }
        ]
      }
    };
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    orgMainAdd() {},
    orgMainDels() {},
    orgMainSearch() {},
    orgMainPageChange() {},
    orgMainSee(inData) {
      this.zcache.status.dialog.new = true;
    },
    orgMainEdit() {},
    orgMainDel() {},

    orgNewClose() {
      this.zcache.status.dialog.new = false;
      this.zdata.new.post = JSON.parse(JSON.stringify(this.zdata.new.default));
    },
    orgNewFromPick() {},
    orgNewCancel() {
      this.zcache.status.dialog.new = false;
      this.zdata.new.post = JSON.parse(JSON.stringify(this.zdata.new.default));
    },
    orgNewSubmit() {
      this.zcache.status.dialog.new = false;
      this.zdata.new.post = JSON.parse(JSON.stringify(this.zdata.new.default));
    }
  }
};
</script>
<style lang="scss" scoped>
.btn {
  font-size: 14px;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
}
.main {
  position: relative;
  background-color: #fff;
  box-sizing: border-box;
  height: 100%;
  padding: 0px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  box-shadow: 0px 2px 4px 0px #ddd;
}

.buttons {
  width: 266px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.buttonlight {
  background-color: #e8e9fe;
  color: #4e59c7;
  border: 1px solid #4e59c7;
  box-sizing: border-box;
}
.buttondark {
  width: 88px;
  height: 32px;
  background-color: #4e59c7;
  color: #ffffff;
  border: 1px solid #4e59c7;
  box-sizing: border-box;
}
.searchzone {
  height: 40px;
  width: auto;
  min-width: 654px;
  text-align: right;
}
.lists {
  height: auto;
  min-height: 70%;
  width: 100%;
  margin-top: 20px;
}
.listButtonRed {
  color: #d0021b;
  font-weight: bold;
}
.pages {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.title {
  height: 48px;
  line-height: 48px;
  color: rgba(56, 56, 56, 1);
  border-bottom: 1px solid #f8f8f8;
  margin-bottom: 16px;
}
</style>
