<template>
  <div class="townsman-container">
    <!-- <div class="pb16 bb1 mb16 f20" style="color:#ff4400">我的团队</div> -->
    <a-breadcrumb class="newBreadcrumb mt0 mb16">
      <a-breadcrumb-item href>
        <router-link :to="{name:'merchantBack'}">
          <a-icon type="home" />
        </router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>团队成员</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="contentbody bodyContainer">
      <div class="leftContainer pb24">
        <div class="searchbox pb12 ml12 mr12">
          <div class="searchinput">
            <a-input-search placeholder="搜索成员" v-model.trim="pagination.keys" allowClear @search="onSearch" @keyup.enter="onSearch" @input="resetsearch">
              <a-icon slot="prefix" type="search" class="cccc" />
              <a-button slot="enterButton" class="cblue">搜索</a-button>
            </a-input-search>
          </div>
          <!-- <i class="iconfont icon-fangda ml12 c6 curp" @click="[addGroupShow = true,isEdit = false]" style="line-height:32px"></i> -->
        </div>

        <a-radio-group v-model="menuType" class="pl12 pr12 tac" style="width:100%" :style="{ marginBottom: '8px' }">
          <a-radio-button value="group" class="changeGroup" style="width:50%">按部门</a-radio-button>
          <a-radio-button value="role" class="changeGroup" style="width:50%">按角色</a-radio-button>
        </a-radio-group>
        <div v-if="menuType == 'role'">
          <a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
            <a-menu-item key="all" class="fsa showdot bb_after" @click="selectGroup('all')">全部角色</a-menu-item>
          </a-menu>
          <div class="bb1 ml12 mr12 mt4 mb4" style="wdith:calc(100% - 24px)"></div>
          <div class="f12 c9 ml24 mb8">默认角色（11人）</div>
          <a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
            <template v-for="(item, index) in ['创建人(1人)','管理员(3人)','成员(12人)']">
              <a-menu-item :key="item" class="fsa showdot" @click="selectGroup(item)">
                {{item}}
              
              </a-menu-item>
            </template>
          </a-menu>
          <div class="bb1 ml12 mr12 mt4 mb4" style="wdith:calc(100% - 24px)"></div>
          <div class="f12 c9 ml24 mb8">自定义角色（8人）</div>
          <a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
            <!-- <template v-for="(item, index) in groupList"> -->
            <a-menu-item key="角色1" class="fsa showdot" @click="selectGroup('角色1')">
              {{'角色1'}}
              <a-dropdown overlayClassName="groupdropdown" :trigger="['click']" placement="bottomRight">
                <i class="iconfont icon-gengduo3 thedot f12" @click.stop></i>
                <div class="groupdropdownbox backTable" slot="overlay">
                  <div>修改名称</div>
                  <div>删除</div>
                  <div>上移</div>
                  <div>下移</div>
                </div>
              </a-dropdown>
            </a-menu-item>
            <a-menu-item key="角色2" class="fsa showdot" @click="selectGroup('角色2')">
              {{'角色2'}}
              <a-dropdown overlayClassName="groupdropdown" :trigger="['click']" placement="bottomRight">
                <i class="iconfont icon-gengduo3 thedot f12" @click.stop></i>
                <div class="groupdropdownbox backTable" slot="overlay">
                  <div>修改名称</div>
                  <div>删除</div>
                  <div>上移</div>
                  <div>下移</div>
                </div>
              </a-dropdown>
            </a-menu-item>
            <!-- </template> -->
          </a-menu>
        </div>
        <div v-else>
          <a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
            <a-menu-item key="all" class="fsa showdot bb_after" @click="selectGroup('all')">全部部门</a-menu-item>
          </a-menu>
          <div class="bb1 ml12 mr12 mt4 mb4" style="wdith:calc(100% - 24px)"></div>
          <a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
            <template v-for="(item, index) in groupList">
              <a-menu-item :key="item.teamName" class="fsa showdot" @click="selectGroup(item)">
                {{item.teamName}}
                <a-dropdown overlayClassName="groupdropdown" :trigger="['click']" placement="bottomRight">
                  <i class="iconfont icon-gengduo3 thedot f12" @click.stop></i>
                  <div class="groupdropdownbox backTable" slot="overlay">
                    <div @click="[addGroupShow = true,isEdit = true,recordId = item.id,groupName=item.teamName]">修改名称</div>
                    <div @click="delGroup(item)">删除</div>
                    <div>上移</div>
                    <div>下移</div>
                  </div>
                </a-dropdown>
              </a-menu-item>
            </template>
          </a-menu>
          <div class="pt12 ml12 mr12 mt4 bt1">
            <a-button type="dashed" class="setMiddle" icon="plus" @click="[addGroupShow = true,isEdit = false]">
              <!-- <i class="iconfont icon-fangda c6 f12 mr8" style="line-height:32px"></i> -->
              添加部门
            </a-button>
          </div>
        </div>
      </div>
      <div class="rightContainer mb24">
        <div class="fsa pb14 bb1 mb24">
          <div class="f16 fw500">{{modalTitle ? modalTitle : selectedKeys[0] == 'all' ? '全部成员':selectedKeys[0] }}</div>
          <!-- <button class="addGroup" @click="addGroupShow = true">添加部门</button> -->
          <a-button class="addmemeber f14" v-if="modalTitle == ''" @click="showDetail('add')">
            <i class="iconfont icon-fangda"></i> 添加成员
          </a-button>
          <!-- <button @click="changepage(1)">下一页</button> -->
        </div>
        <!-- :expanded-row-keys.sync="expandedRowKeys" -->
        <!-- v-if="modalTitle == ''" -->
        <div class>
          <a-table :columns="columns" :data-source="memberList" :pagination="false" @change="onChange" :loading="{spinning: isspinning,tip: '加载中',wrapperClassName: 'spinstyle'}" :rowKey="(record) => record.id" :locale="tablenodata">
            <!-- <a slot="index" slot-scope="record, text, index">{{ index + 1 }}</a> -->
            <span slot="nickName" slot-scope="text, record">
              <!-- <svg class="svg_icon" v-if="record.agencyRole == 3" aria-hidden="true" style="width:32px">
                <use xlink:href="#icon-chengyuan" />
              </svg>
              <svg class="svg_icon" v-if="record.agencyRole == 2" aria-hidden="true" style="width:32px">
                <use xlink:href="#icon-guanliyuan" />
              </svg>
              <svg class="svg_icon" v-if="record.agencyRole == 1" aria-hidden="true" style="width:32px">
                <use xlink:href="#icon-chuangjianren" />
              </svg>-->
              {{ record.aliasName || record.userName }}
            </span>
            <div slot="join">
              <a-switch default-checked @change="onChange" />
            </div>
            <div slot="bigScreen">
              <a-switch default-checked @change="onChange" />
            </div>
            <div slot="setting" v-if="!record.children" class="setting" slot-scope="text, record" style="color: #1890FF">
              <!-- <a @click="showDetail('detail', record)">详情</a> -->
              <a v-if="loginUserInfo.agencyRole != 3" class="delete" @click="showDetail('edit', record)">编辑</a>
              <a v-if="loginUserInfo.agencyRole != 3" @click="deleteMemeber(record)">删除</a>
            </div>
          </a-table>
          <div class="pagecontainer mt16">
            <a-pagination :current="+pagination.pageNum" :default-current="1" :defaultPageSize="20" :total="pagination.total" @change="onChange" />
            <div class="ant-pagination-options-quick-jumper f14 ml12">
              <span>共{{ pagination.total }}条，</span>跳至
              <input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" />页
            </div>
          </div>
        </div>
        <!-- <div v-else-if="modalTitle == '添加成员' || modalTitle == '编辑成员'">
          <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <div class="fw500 mb16 f16">成员基础信息</div>
            <a-form-item class="addItem" label="备注名">
              <a-input placeholder="请输入备注名" v-decorator="[ 'aliasName', { rules: [{ required: true, message: '请输入备注名' }] }, ]" />
            </a-form-item>
            <a-form-item class="addItem" label="手机号">
              <a-input placeholder="请输入手机号" v-decorator="['tel', {rules: [{ required: true, message: '请输入手机号' },{ type: 'regexp', validator: validateServiceName, message: '请输入正确的手机号',  }, ], validateTrigger: 'submit',validateFirst:true }, ]" :max-length="11" />
            </a-form-item>
            <a-divider />
            <div class="fw500 mb16 f16">
              <div class="por" style="width:404px">
                角色
                <div class="addRole">
                  <i class="iconfont icon-fangda ml12 c6 curp"></i>添加角色
                </div>
              </div>
            </div>

            <a-form-item class="addItem">
              <a-radio-group v-decorator="[
                'agencyRole',
                { rules: [{ required: true, message: '请选择角色' }] },
              ]" :options="options" @change="groupChange" />
            </a-form-item>
            <a-divider />
            <div class="fw500 mb16 f16">成员部门</div>
            <a-form-item>
              <a-radio-group v-decorator="['agencyTeamId',{ rules: [{ required: false, message: '请选择部门' }] },]">
                <a-radio :value="item.id" v-for="item in groupList" @change="onGroupChange(item)" :key="item.id">{{item.teamName}}</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-divider />

            <a-row>
              <div class="fw500 mb16 f16">权限</div>
              <a-checkbox @change="onChange">参与统计</a-checkbox>
              <a-checkbox @change="onChange">大屏显示</a-checkbox>
            </a-row>
            <a-divider />
            <a-button key="back" @click="modalCancel">取消</a-button>
            <a-button key="submit" class="ml16 mr16" type="primary" :loading="loading" @click="handleSubmit">保存</a-button>
          </a-form>
        </div>
        <div v-else-if="modalTitle == '成员详情'">
          <div class="fw500 mb16 f16">成员基础信息</div>
          <div style="margin-bottom:24px" class="f14 fss">
            <div class="c6">备注名：</div>
            <div>{{ currentMember.aliasName || currentMember.userName }}</div>
          </div>
          <div style="margin-bottom:24px" class="f14 fss">
            <div class="c6">手机号：</div>
            <div>{{ currentMember.tel }}</div>
          </div>
          <a-divider />
          <div class="fw500 mb16 f16">角色</div>
          <div style="margin-bottom:24px" class="f14">
            <div>{{ currentMember.role }}</div>
          </div>
          <a-divider />
          <div class="fw500 mb16 f16">成员部门</div>
          <div style="margin-bottom:24px" class="f14">
            <div>{{ currentMember.agencyTeamName }}</div>
          </div>
          <a-divider />
          <div class="fw500 mb16 f16">权限</div>
          <div style="margin-bottom:24px" class="f14">
            <div>{{ currentMember.permission }}</div>
          </div>
          <a-divider />
        </div>-->
      </div>
    </div>
    <a-modal :title="modalTitle" v-model="visible" centered id="demo" @cancel="modalCancel" width="640px" destroyOnClose class="detailWindow">
      <template slot="footer" v-if="this.modalTitle != '成员详情'">
        <a-button key="back" @click="modalCancel">取消</a-button>
        <a-button key="submit" class="ml16 mr16" type="primary" :loading="loading" @click="handleSubmit">确定</a-button>
      </template>
      <template slot="footer" v-else>
        <span></span>
      </template>
      <template v-if="modalTitle == '成员详情'">
        <a-row style="margin-bottom:24px">
          <a-col :span="4">手机号：</a-col>
          <a-col :span="18">{{ currentMember.tel }}</a-col>
        </a-row>
        <a-row style="margin-bottom:24px">
          <a-col :span="4">备注名：</a-col>
          <a-col :span="18">{{ currentMember.aliasName || currentMember.userName }}</a-col>
        </a-row>
        <a-row style="margin-bottom:24px">
          <a-col :span="4">部门：</a-col>
          <a-col :span="18">{{ currentMember.agencyTeamName }}</a-col>
        </a-row>
        <a-row style="margin-bottom:24px">
          <a-col :span="4">角色：</a-col>
          <a-col :span="18">{{ currentMember.role }}</a-col>
        </a-row>
        <a-row style="margin-bottom:24px">
          <a-col :span="4">权限：</a-col>
          <a-col :span="18">{{ currentMember.permission }}</a-col>
        </a-row>
      </template>
      <template v-else>
        <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
          <a-form-item label="备注名">
            <a-input placeholder="请输入备注名" v-decorator="[ 'aliasName', { rules: [{ required: true, message: '请输入备注名' }] }, ]" />
          </a-form-item>
          <a-form-item label="手机号">
            <a-input placeholder="请输入手机号" v-decorator="['tel', {rules: [{ required: true, message: '请输入手机号' },{ type: 'regexp', validator: validateServiceName, message: '请输入正确的手机号',  }, ], validateTrigger: 'submit', }, ]" :max-length="11" />
          </a-form-item>
          <a-form-item label="部门选择">
            <a-select default-value="lucy" placeholder="请选择部门" v-decorator="['agencyTeamId',{ rules: [{ required: false, message: '请选择部门' }] },]" dropdownClassName="groupSelectDrop">
              <div slot="dropdownRender" slot-scope="menu">
                <div v-for="(item,index) in groupList" @click="choiceGroup(item)" class="groupSelectSub fsa" :key="index">
                  <div>{{item.teamName}}</div>
                  <div>
                    <span @click="[addGroupShow = true,isEdit = true,recordId = item.id]">修改</span>
                    <span @click.stop="delGroup(item)">删除</span>
                  </div>
                </div>
                <div class="bt1" style="padding: 9px 16px; cursor: pointer;" @mousedown="e => e.preventDefault()" @click="[addGroupShow = true,isEdit = false]">添加新部门</div>
              </div>
            </a-select>
          </a-form-item>
          <a-form-item label="角色">
            <a-select default-value="lucy" placeholder="请选择角色" v-decorator="['agencyTeamId',{ rules: [{ required: true, message: '请选择角色' }] },]" dropdownClassName="groupSelectDrop">
              <div slot="dropdownRender" slot-scope="menu">
                <div v-for="(item,index) in groupList" @click="choiceGroup(item)" class="groupSelectSub fsa" :key="index">
                  <div>{{item.teamName}}</div>
                  <div>
                    <span @click="[addGroupShow = true,isEdit = true,recordId = item.id]">修改</span>
                    <span @click.stop="delGroup(item)">删除</span>
                  </div>
                </div>
                <div class="bt1" style="padding: 9px 16px; cursor: pointer;" @mousedown="e => e.preventDefault()" @click="[addGroupShow = true,isEdit = false]">添加新部门</div>
              </div>
            </a-select>
          </a-form-item>
          <a-form-item label="角色" class="dn">
            <a-radio-group v-decorator="[
                'agencyRole',
                { rules: [{ required: true, message: '请选择角色' }] },
              ]" :options="options" @change="groupChange" />
          </a-form-item>
          <a-form-item label="参与统计">
            <a-switch default-checked @change="onChange" />
          </a-form-item>
          <a-form-item label="大屏显示">
            <a-switch default-checked @change="onChange" />
          </a-form-item>
          <!-- <a-row>
            <a-col :span="4">权限：</a-col>
            <a-col :span="16">{{ permissionName }}</a-col>
          </a-row>-->
        </a-form>
      </template>
    </a-modal>
    <a-modal :title="isEdit?'编辑部门':'添加部门'" v-model="addGroupShow" centered id="demo" @cancel="addGroupShow = false" @ok="addMemberGroup" width="640px" :destroyOnClose="true" class="addGroupModal">
      <div class="fsc setMiddle mt20" style="width:420px">
        <div class="mr12 c6">
          <span class="mr4" style="color:#f5222d">*</span>部门名称:
        </div>
        <a-input placeholder="请输入部门名" v-model="groupName" class="flex1"></a-input>
      </div>
      <template slot="footer">
        <a-button key="back" @click="[addGroupShow = false,groupName = '']">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="addMemberGroup">确定</a-button>
      </template>
    </a-modal>
    <a-modal title="删除部门" v-model="delGroupShow" centered id="demo" @cancel="delGroupShow = false" width="400px" destroyOnClose class="addGroupModal">
      <div>确定要删除该部门吗？</div>
      <template slot="footer">
        <a-button key="back" @click="delGroupShow = false">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="delMemberGroup">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { getMemberListApi, deleteMemberApi, addMemberApi, getMemberGroupApi, addMemberGroupApi, updateMemberGroupApi, delMemberGroupApi, updateMemberApi } from '../../api/userinfo'
import { formatDateYMD, getUserApplyOrderStatusById, getAgencyRoleTypeById, getAgencyPermissionNameById, getAgencyPermissionsByRole } from '../../utils/commonUtil'

export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      tablenodata: {
        // 空状态文本内容
        emptyText: () => (
          <div>
            <div>
              <img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" style="width:105px;height:90px;marginTop:20px" />
            </div>
            <div style="marginBottom:20px">暂无数据</div>
          </div>
        ),
      },
      form: this.$form.createForm(this),
      pagination: {
        pageNum: 1,
        pageSize: 20,
        total: null, //分页配置
        status: 0,
        keys: null,
        // searchTag: 1,
      },
      isspinning: false,
      sortedInfo: null,
      statusNum: {
        num0: 0,
        num1: 0,
        num2: 0,
        num3: 0,
      },
      loginUserInfo: null,
      memberList: [],
      visible: false,
      currentMember: {},
      modalTitle: '',
      options: [
        // { label: "创建人", value: "1" },
        { label: '管理员', value: '2' },
        { label: '成员', value: '3' },
      ],
      permissionName: '查看职位，报名，查看报名，查看老乡，修改密码，修改手机号',
      permission: 'job:list,apply:add,apply:list,apply:user,user:pwd,user:tel',
      expandedRowKeys: [],
      groupList: [],
      showGroup: false,
      addGroupShow: false,
      delGroupShow: false,
      groupName: '', // 部门名称
      loading: false,
      isEdit: false, // 编辑部门名称的判断
      selectedKeys: ['all'],
      menuType: 'group',
    }
  },
  // 计算属性
  computed: {
    columns() {
      const columns = [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, row, index) => {
            if (row.children) {
              return ''
            } else {
              return index + 1
            }
          },
          // ellipsis: true,
          width: 60,
        },
        {
          title: '姓名',
          dataIndex: 'nickName',
          key: 'nickName',
          scopedSlots: { customRender: 'nickName' },
          ellipsis: true,
          // width: 120,
        },
        {
          title: '角色',
          dataIndex: 'role',
          key: 'role',
          width: 120,
          ellipsis: true,
        },

        // {
        //   title: '权限',
        //   dataIndex: 'permission',
        //   key: 'permission',
        //   ellipsis: true,
        // },
        {
          title: '部门',
          dataIndex: 'agencyTeamId',
          key: 'agencyTeamId',
          // width: 100,
          // filters: this.groupList,
          customRender: (text, row, index) => {
            let text1
            this.groupList.forEach((item) => {
              if (item.id == text) {
                text1 = item.teamName
              }
            })
            return text1
          },
          ellipsis: true,
          width: 120,
        },
        {
          title: '手机号',
          dataIndex: 'tel',
          key: 'tel',
          ellipsis: true,
          width: 120,
        },
        {
          title: '参与统计',
          dataIndex: 'join',
          key: 'join',
          scopedSlots: { customRender: 'join' },
          ellipsis: true,
          width: 80,
        },
        {
          title: '大屏显示',
          dataIndex: 'bigScreen',
          key: 'bigScreen',
          scopedSlots: { customRender: 'bigScreen' },
          ellipsis: true,
          width: 80,
        },
        {
          title: '操作',
          dataIndex: 'setting',
          key: 'setting',
          // sorter: (a, b) => a.userApplyOrder.localeCompare(b.userApplyOrder),
          scopedSlots: { customRender: 'setting' },
          ellipsis: true,

          // sortOrder: sortedInfo.columnKey == "userApplyOrder" && sortedInfo.order,
          // ellipsis: true,
          width: 90,
        },
      ]
      return columns
    },
  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    // this.getMemberList();
    if (localStorage.getItem('LOGIN_DATA')) {
      this.loginUserInfo = JSON.parse(localStorage.getItem('LOGIN_DATA'))
    }
    this.$emit('setTitle', '团队成员')
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    this.getMemberList()
    this.getMemberGroup()
    window.modalCancel = this.modalCancel
  },
  // 组件方法
  methods: {
    onChange(e, e1, e2) {
      console.log(e)
      console.log(e1)
      console.log(e2)
      if (typeof e == 'number') {
        this.pagination.pageNum = e
        this.getMemberList()
      }
    },
    /**
     * 添加成员部门选择切换
     */
    onGroupChange(e) {
      console.log(e)
      this.form.setFieldsValue({
        agencyTeamId: e.teamName,
      })
      this.agencyTeamId = e.id
    },
    /**
     * 部门列表选择
     *
     *
     */
    getGroup(e) {
      console.log(e)
    },
    inputpageChange(e) {
      const pagenumcount = this.pagination.total / this.pagination.pageSize
      console.log(pagenumcount)
      if (e.target.value) {
        if (e.target.value > pagenumcount) {
          this.pagination.pageNum = Math.ceil(pagenumcount)
        } else {
          this.pagination.pageNum = e.target.value
        }
      } else {
        this.pagination.pageNum = 1
      }
      // this.getJobList();
      this.getMemberList()
      console.log(e)
    },
    async getMemberList() {
      // let jobinfo = {...this.pagination , searchTag:1}
      try {
        this.isspinning = true
        console.log(this.pagination)
        getMemberListApi(this.pagination).then(({ data }) => {
          if (data.status === 200) {
            this.memberList = data.data.recordList
            this.memberList.forEach((item, index) => {
              // item.group = '部门' + ((index % 5) + 1)
              // item1.children.forEach((item) => {
              console.log(item)
              item.role = getAgencyRoleTypeById(item.agencyRole)
              item.permission = getAgencyPermissionNameById(item.agencyPermissions)
              // })
            })
            this.memberList.sort((a, b) => {
              return a.agencyRole - b.agencyRole
            })
            this.pagination.total = data.data.recordCount
          }
        })
      } catch (error) {
        console.log(error)
      }
      this.isspinning = false
    },
    getMemberGroup() {
      getMemberGroupApi().then(({ data }) => {
        if (data.status == 200) {
          console.log(data)
          this.groupList = data.data.list
          this.groupList.forEach((item, index) => {
            console.log(item)
            if (index > 0) {
              item.checked = false
            } else {
              item.checked = true
            }
            console.log(item)
          })
        }
      })
    },
    addMemberGroup() {
      let that = this
      this.loading = true
      if (that.groupName.trim == '') {
        return
      } else {
        if (this.isEdit) {
          updateMemberGroupApi({ teamName: this.groupName, recordId: this.recordId }).then(({ data }) => {
            console.log(data)
            if (data.status == 200) {
              that.$message.success('修改成功')
              that.groupName = ''
              that.addGroupShow = false
            } else {
              that.$message.warning(data.msg)
            }
            that.getMemberGroup()
            that.loading = false
          })
        } else {
          addMemberGroupApi({ teamName: this.groupName }).then(({ data }) => {
            console.log(data)
            if (data.status == 200) {
              that.$message.success('添加成功')
              that.groupName = ''
              that.addGroupShow = false
            } else {
              that.$message.warning(data.msg)
            }
            that.getMemberGroup()
            that.loading = false
          })
        }
      }
    },
    // async updateMemberGroup() {
    //   let { data } = await console.log(data)
    // },
    delMemberGroup() {
      this.loading = true
      delMemberGroupApi(this.recordId).then(({ data }) => {
        if (data.status == 200) {
          this.$message.success('删除成功')
          this.delGroupShow = false
        } else {
          this.$message.warning(data.msg)
        }
        this.getMemberGroup()
        this.loading = false
      })
    },

    delGroup(item) {
      let that = this
      this.recordId = item.id
      this.$confirm({
        title: '删除',
        content: '确定要删除该部门吗？',
        centered: true,
        onOk(e1, e2) {
          console.log(e1)
          console.log(e2)
          return new Promise((res) => {
            that.delMemberGroup()
            setTimeout(() => {
              res()
            }, 2000)
          })
        },
        onCancel() {},
      })
      // this.delGroupShow = true
    },
    getPopupContainer(el, dialogContext) {
      console.log(el)
      console.log(dialogContext)
      if (dialogContext) {
        return dialogContext.getDialogWrap()
      } else {
        return document.body
      }
    },
    resetpag() {
      // this.pagination = {
      // 	//分页配置
      // 	pageNum: 1,
      // 	pageSize: 8,
      // 	total: null,
      // 	status: this.pagination.status,
      // 	keys: null,
      // };
    },
    resetsearch(e) {
      console.log(e)
      if (e.target.value.length === 0) {
        this.pagination.keys = ''

        this.getMemberList()
      }
    },
    onSearch() {
      if (this.pagination.keys != null && this.pagination.keys.length != 0) {
        this.getMemberList()
      }
    },
    showDetail(type, e) {
      console.log(type)
      console.log(e)
      let that = this
      if (type == 'edit') {
        this.currentMember = e
        this.modalTitle = '编辑成员'
        this.visible = true
        setTimeout(() => {
          console.log(this.currentMember)
          that.form.setFieldsValue({
            agencyRole: this.currentMember.agencyRole + '',
            aliasName: this.currentMember.aliasName,
            tel: this.currentMember.tel,
            group: this.currentMember.group,
            agencyTeamId: this.currentMember.teamName,
          })
        }, 200)
      } else if (type == 'detail') {
        this.currentMember = e
        this.modalTitle = '成员详情'
        this.visible = true
      } else {
        this.modalTitle = '添加成员'
        this.visible = true
        this.$nextTick(() => {
          console.log(123)
          that.form.setFieldsValue({
            agencyRole: '2',
          })
        })
      }
    },
    deleteMemeber(e) {
      this.$confirm({
        title: '确定删除',
        content: '是否确定删除该成员',
        onOk: async () => {
          console.log('ok')
          let { data } = await deleteMemberApi({ id: e.id })
          console.log(data)
          if (data.status == 200) {
            this.getMemberList()
          } else {
            console.log(data.msg)
            this.$message.warning(data.msg)
          }
        },
        onCancel: () => {
          console.log('cancel')
        },
      })
    },
    selectGroup(item) {
      console.log(item)
      this.selectedKeys = [item.teamName || item]
      if (typeof item != 'object') {
        this.pagination.agencyTeamIds = ''
      } else {
        this.pagination.agencyTeamIds = item.id + ''
      }
      this.getMemberList()
    },
    modalCancel() {
      // console.log(this);
      this.modalTitle = ''
      this.visible = false
      // this.permission = getAgencyPermissionsByRole()
      // this.permissionName = getAgencyPermissionNameById(this.permission)
    },
    handleSubmit() {
      console.log('issubmit')
      console.log(this.currentMember)
      this.form.validateFields(async (err) => {
        console.log(err)
        if (err == null) {
          if (this.modalTitle == '编辑成员') {
            try {
              let { data } = await updateMemberApi({
                ...this.form.getFieldsValue(),
                agencyPermissions: this.permission,
                agencyTeamId: this.agencyTeamId,
                id: this.currentMember.id,
              })
              console.log(data)
              if (data.status == 200) {
                this.$message.success('修改成功')
                this.visible = false
                this.permission = getAgencyPermissionsByRole()
                this.permissionName = getAgencyPermissionNameById(this.permission)
                this.modalTitle = ''
                this.getMemberList()
              } else {
                this.$message.warning(data.msg)
                this.visible = false
              }
            } catch (error) {
              console.log(error)
            }
          } else {
            try {
              let { data } = await addMemberApi({
                ...this.form.getFieldsValue(),
                agencyPermissions: this.permission,
                agencyTeamId: this.agencyTeamId,
              })
              console.log(data)
              if (data.status == 200) {
                this.$message.success('新建成功')
                this.visible = false
                this.permission = getAgencyPermissionsByRole(1)
                this.permissionName = getAgencyPermissionNameById(this.permission)
                this.modalTitle = ''
                this.getMemberList()
              } else {
                this.$message.warning(data.msg)
                this.visible = false
              }
            } catch (error) {
              console.log(error)
            }
          }
        }
      })
    },
    changeGroup(e) {
      console.log(e)
      this.groupList.forEach((item) => {
        item.checked = false
        if (item.text == e) {
          item.checked = true
        }
      })
    },
    choiceGroup(e) {
      console.log(e)
      this.form.setFieldsValue({
        agencyTeamId: e.teamName,
      })
      this.agencyTeamId = e.id
      console.log(this.agencyTeamId)
    },
    groupChange(e) {
      console.log(e)
      this.form.setFieldsValue({
        agencyRole: e.target.value,
      })
      this.permission
      if (this.form.getFieldValue('agencyRole') == 1) {
        this.permission = getAgencyPermissionsByRole(1)
      } else {
        this.permission = getAgencyPermissionsByRole(2)
      }
      console.log(this.permission)
      this.permissionName = getAgencyPermissionNameById(this.permission)
    },
    validateServiceName(rule, value, callback) {
      console.log(rule)
      console.log(value)
      console.log(callback)
      let reg = /^1[3|4|5|7|8|9][0-9]{9}$/
      // if(value.length == 11){
      if (!reg.test(value)) {
        callback(new Error())
      } else {
        callback()
      }
      // }
    },
  },
}
</script>

<style scoped lang="less">
.townsman-container {
  // margin-top: 16px;
  // min-height: calc(100vh - 200px);
  height: 100%;
  padding: 0px;
  // background-color: #fff;
  border: 1px solid #0000;
}
.contenttitle {
  display: flex;
  padding-bottom: 0px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(77, 87, 94, 0.1);
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 16px;

  ul {
    display: flex;
    height: 40px;
    .townsmanactive {
      // border-color: #;
      // width: 128px;
      color: #ff4400;
      z-index: 999;
      border-bottom: 2px solid #ff6600;
      > span {
        font-size: 16px;
        color: #ff6600;
      }
    }
    li {
      position: relative;
      width: 118px;
      font-size: 16px;
      // height: 40px;
      padding-bottom: 16px;
      color: #666;
      // line-height: 40px;
      text-align: center;
      transition: width 0.2s;
      cursor: pointer;
      > span {
        margin-left: 12px;
        font-size: 16px;
        color: #ff6600;
      }
      &::after {
        content: '';
        position: absolute;
        display: block;
        width: 1px;
        height: 16px;
        right: 0;
        top: 5px;
        // transform: translateY(-50%);
        background-color: #eeeeee;
      }
      &:last-child::after {
        display: none;
      }
    }
    button {
      width: 100px;
      height: 28px;
      position: relative;
      font-size: 14px;
      border: 1px solid #cccccc;
      background-color: #fff;
      margin-right: -1px;
      cursor: pointer;
      &:hover {
        color: #ff4400;
      }
    }
    button:first-child {
      // border-radius: 4px 0px 0px 4px;
    }
    button:last-child {
      // border-radius: 0px 4px 4px 0px;
    }
  }
}
.contentbody {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  padding-bottom: 0px;
  // overflow: hidden;
  // min-height: calc(100vh - 105px);
  // height: calc(100vh - 105px);
  .leftContainer {
    width: 260px;
    min-width: 220px;
    height: 100%;
    overflow: hidden;
    /deep/ .searchbox {
      display: flex;
      justify-content: space-between;
      // padding-bottom: 14px;
    }
    .leftMenu {
      max-width: calc(100% - 1px);
      margin-right: 1px;
      border-right-color: transparent;
      &::-webkit-scrollbar {
        width: 0;
      }
    }
    .thedot {
      display: none;
    }
    .showdot:hover .thedot {
      display: block;
    }
  }
  .rightContainer {
    flex: 1;
    padding-left: 16px;
    overflow: hidden;
    position: relative;
    min-width: 1020px;
    &::before {
      position: absolute;
      content: '';
      width: 1px;
      height: calc(100% - 16px);
      left: 0;
      top: 0;
      background: #eee;
    }
    .addmemeber {
      border: 0;
      padding: 0 12px;
      height: 32px;
      line-height: 32px;
      color: #fff;
      background: #1890ff;
      border-radius: 4px;
      i {
        font-size: 12px;
      }
    }
    .addRole {
      position: absolute;
      right: 0;
      top: 50%;

      transform: translateY(-50%);
      color: #1890ff;
      i {
        // transform: translateY(4px);
        margin-right: 4px;
        font-weight: 400;
        color: #1890ff;
      }
    }
    .addItem {
      width: 404px;
    }
  }

  /deep/ .ant-table-placeholder {
    min-height: 300px;
    > div {
      position: relative;
      height: 131px;
      top: 30px;
      // transform: translateY(-50%);
    }
  }
  /deep/.ant-table {
    .ant-table-content {
      .ant-table-body {
        .ant-table-thead {
          th {
            padding: 12px 0;
            div {
              padding: 0px 8px;
            }
            &:not(:first-child) {
              > span {
                //  line-height: 22px;
                > div {
                  //  line-height: 1;
                  border-left: 1px solid #ddd;
                  padding-left: 12px;
                }
              }
            }
          }
          .ant-table-row-cell-break-word {
            font-size: 14px !important;
            font-weight: bold;
          }
          .ant-table-row-cell-ellipsis {
            font-size: 14px !important;
            font-weight: bold;
          }
        }
        .ant-table-tbody {
          .ant-table-row-cell-ellipsis {
            font-size: 14px !important;
            padding: 12px 14px;
          }
          .ant-table-row-expand-icon {
            // color: #000;
            padding: 0;
          }
          .ant-table-row-indent {
            display: none !important;
          }
        }
      }
    }
  }
}
/deep/ .ant-table-column-sorter-inner {
  height: 16px !important;
}
.setting {
  a:nth-child(2) {
  }
  // a:last-child {
  // }
  .delete {
    // border-left: 1px solid #979797;
    border-right: 1px solid #979797;
    padding: 0 6px 0 0;
    margin: 0 6px 0 0;
  }
}
// /deep/ .ant-table-row-cell-break-word {
//   padding: 12px 8px !important;
// }
// .addGroupModal {
/deep/ .ant-modal {
  .ant-modal-header {
    // text-align: center;
    // border-bottom: none;
    height: 40px;
    line-height: 40px;
    padding: 10px 16px;
    .ant-modal-title {
      font-weight: bold;
    }
  }
  .ant-modal-body {
    min-height: 170px;
  }
  .ant-modal-close-x {
    height: 40px;
    width: 50px;
    line-height: 40px;
  }
  .ant-modal-footer {
    // border-top: none;
  }
  // .ant-btn:not(.ant-btn-primary):hover,
  // .ant-btn:not(.ant-btn-primary):focus {
  //   color: #ff4400;
  //   background-color: #fff;
  //   border-color: #ff4400;
  // }
  // .ant-btn-primary {
  //   background-color: #ff4400;
  //   border-color: #ff4400;
  //   &:hover {
  //     opacity: 0.8;
  //   }
  // }
}
// }
.detailWindow {
  /deep/ .ant-modal {
    .ant-modal-close-x {
      height: 40px;
      width: 50px;
      line-height: 40px;
    }
    .ant-modal-header {
      // padding: 12px;
      text-align: left;
      // background-color: #f5f5f5;
    }
    .ant-modal-body {
      padding-left: 100px;
      min-height: 318px;
      .ant-form-item {
        margin-bottom: 12px;
        //   .ant-form-item-control-wrapper{
        //     margin-bottom: 16px;
        //   }
      }
      .ant-form-item-control {
        line-height: 40px;
      }
      .ant-row {
        line-height: 30px;

        .ant-col:first-child {
          text-align: right;
        }
      }
    }
  }
}
.groupSelectDrop {
  .groupSelectSub {
    cursor: pointer;
    padding: 9px 16px;
    &:hover {
      > div {
        color: #ff4400 !important;
      }
    }
  }
}
/deep/.spinstyle {
  .ant-spin-dot-item {
    background-color: #1890ff !important;
  }
  .ant-spin-text {
    color: #1890ff !important;
  }
}
.pagecontainer {
  // position: absolute;
  // bottom: 0;
  // left: 50%;
  width: 100%;
  // transform: translateX(-50%);
  display: flex;
  // justify-content: center;
}
.groupdropdown {
  .groupdropdownbox {
    width: 102px;
    // height: 114px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 4px;
    text-align: left;
    box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.4);
    padding: 8px 0;
    > div {
      height: 32px;
      padding: 0 12px;
      line-height: 32px;
      cursor: pointer;
      &:hover {
        background: #e7f3ff;
        color: #1890ff;
      }
    }
  }
}
</style>
