/* eslint-disable no-undef */
<template>
  <div>
    <div class="heior_box">
      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        v-href="'/user/addmanager'"
      >添加子管理员</el-button>
      <el-button size="small" @click="autoSetUser()" type="primary">一键分配用户</el-button>
      <div class="search-box">
        <el-input v-model="manageData.KeyWord" placeholder="用户名/姓名/联系方式" clearable size="small">
          <el-button slot="append" icon="el-icon-search" @click="getmanagerlist(1)"></el-button>
        </el-input>
      </div>
    </div>

        <el-table :data="manegeList" size="medium" :height="$getHeight(100)" row-key="Id" border>
      <el-table-column prop="LoginCode" label="账号"></el-table-column>
      <el-table-column prop="RealName" label="姓名"></el-table-column>
      <el-table-column prop="Phone" label="联系方式"></el-table-column>
      <el-table-column prop="CreateTime" label="添加时间"></el-table-column>
      <el-table-column prop="CreateTime" label="是否客户经理">
        <template slot-scope="scope">
          {{scope.row.roleid==100?"是":"否"}}
        </template>
        </el-table-column>
      <el-table-column label="操作" width="140px">
        <template slot-scope="scope">
           <span class="handel cursor edit"  @click="setUser(scope.row)">分配用户</span>
              <span class="handel cursor edit"  @click="routerGo(scope.row)">编辑</span>
               <span class="handel cursor del"  @click="delmanagerData.ID=scope.row.Id;delmanager()">删除</span>
            </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        v-if="manegeList.length>0"
        @current-change="getmanagerlist"
        :page-size="50"
        :current-page.sync="manageData.PageIndex"
        layout="total,prev, pager, next"
        :total="manegeTotal"
      ></el-pagination>
    </div>
     <el-dialog :close-on-click-modal="false" title="选中用户" :visible.sync="showUserDialog" width="770px" v-loading="userLoading">

      <el-dialog
        width="30%"
        :title="fenpei_title"
        :visible.sync="innerVisible"
        :close-on-click-modal="false"
        append-to-body>

        <el-card class="box-card">
          <el-table
          :data="manager_user_list"
          stripe
          style="width: 100%">
          <el-table-column
            prop="ManagerName"
            label="管理员"
            width="180">
          </el-table-column>
          <el-table-column
            prop="count_num"
            label="总用户数"
            width="180">
          </el-table-column>
          <el-table-column
            prop="screen_num"
            label="筛选结果">
          </el-table-column>
        </el-table>
      </el-card>

      <el-card class="box-card">
        <el-row :gutter="10">
          <el-col :span="6">
          <el-input
            size="medium"
            placeholder="起始金额"
            type="number"
            v-model="waifen_screen.money1">
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-input
            size="medium"
            placeholder="截至金额"
            type="number"
            v-model="waifen_screen.money2">
          </el-input>
        </el-col>
          <el-col :span="8">
            <el-select v-model="waifen_screen.follow_status" size="medium" placeholder="请选择跟进状态">
              <el-option
                v-for="item in follow_all_status"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        <el-col :span="4">
          <el-button size="medium" @click="screen" type="primary">筛选</el-button>
        </el-col>
        </el-row>
        <el-row style="margin-top:5px">
          <el-col :span="6">
            <p style="line-height:250%">输入外分人数：</p>
          </el-col>
          <el-col :span="12">
            <el-input-number size="medium" v-model="distribute_num" :min="1" ></el-input-number>
          </el-col>
        </el-row>
         <el-row style="margin-top:5px">
          <el-col :span="6">
            <p style="line-height:250%">选择接收管理员：</p>
          </el-col>
          <el-col :span="12">
            <el-select v-model="waifen_screen.jingli_id" size="medium" placeholder="请选择接收管理员">
              <el-option
                v-for="item in manager_jingli_list"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-button @click="waifen" size="medium" type="primary">外分</el-button>
      </el-card>

      </el-dialog>

      <div class="search-box" style="padding-bottom:5px;">
        <el-button size="small" type="primary" @click="doSetUser()">向外分配用户</el-button>
        <el-input placeholder="输入关键字进行过滤" size="small" v-model="searchUserModel.keyWord">
          <el-button slot="append" icon="el-icon-search" @click="getUser"></el-button>
        </el-input>
      </div>
    <el-table :data="userRet.Data"  row-key="Id" border size="medium" height="650px"
    @selection-change="handleSelectionChange">
      <el-table-column prop="LoginCode" label="账号" ></el-table-column>
      <el-table-column prop="CreateTime" label="注册时间"> </el-table-column>
      <el-table-column prop="cost" label="近一月消费"></el-table-column>
       <el-table-column prop="ManagerName" label="客户经理"></el-table-column>
    </el-table>
        <div class="block">
      <el-pagination
        v-if="userRet.Data.length>0"
        @current-change="getUser"
        :page-size="50"
        :current-page.sync="searchUserModel.PageIndex"
        layout="total,prev, pager, next"
        :total="userRet.TotalCount"
      ></el-pagination>
    </div>
     </el-dialog>

    <el-dialog
      title="为用户分配客户经理"
      :visible.sync="dialogSetManaget"
      width="30%">
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="select_manege_list" >
        <el-checkbox v-for="manager in manager_list" :label="manager.id" :key="manager.id">{{manager.RealName}}</el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogSetManaget = false">取 消</el-button>
        <el-button type="primary" @click="autoSetUserRequest()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      userLoading: false,
      showUserDialog: false,
      allowAdd: true,
      loading: false,
      userdata: {}, // 当前登录人信息
      manegeList: [],
      manageData: {
        PageIndex: 1,
        PageSize: 50,
        TenantId: 0,
        KeyWord: '',
        RoleId: 0,
        CurrentRoleId: 0,
        IsRoot: 0
      },
      manegeTotal: 0,
      checkEstate: false, // 当前是否查看项目
      delroleData: {
        // 删除角色
        ID: '',
        OwnerID: 1001,
        OperaterID: 1,
        ProjectCode: ''
      },
      delmanagerData: {
        // 删除管理员
        ID: '',
        OwnerID: 1001,
        OperaterID: 1,
        ProjectCode: ''
      },
      stateData: {
        // 更新关联项目
        Managerid: 1,
        Projectcodes: []
      },
      bindwx: false,
      estateSelected: {
        SelectedCodes: [],
        SelectedNames: []
      },
      searchUserModel: {
        PageIndex: 1,
        keyWord: '',
        PageSize: 500,
        all: 0
      },
      userRet: {
        TotalCount: 0,
        Data: []
      },
      currentManager: null,
      multipleSelection: null,
      dialogSetManaget: false,
      manager_list: [],
      checkAll: false,
      isIndeterminate: true,
      select_manege_list: [],
      innerVisible: false,
      manager_user_list: [],
      distribute_num: 1,
      follow_all_status: [],
      manager_jingli_list: [],
      waifen_screen: {
        money1: null,
        money2: null,
        jingli_id: null,
        follow_status: 1
      },
      fenpei_title: ''
    }
  },
  watch: {
    bindwx: function () {
      if (!this.bindwx) {
        clearInterval(this.timer)
      }
    }
  },
  created () {
    this.$store.commit('setCurrentNav', '会员管理>>管理员')
    this.userdata = JSON.parse(
      window.localStorage.getItem('etorcurrentuser')
    ).Manager
    this.getmanagerlist()
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(val)
    },
    setUser (manage) {
      this.showUserDialog = true
      this.currentManager = manage
      this.getUser()
    },
    getUser () {
      this.$api.get(this.$api.phpURL + 'manager/SetUser/getManagerUser', {manager_id: this.currentManager.Id, page: this.searchUserModel.PageIndex, search_info: this.searchUserModel.keyWord}).then(res => {
        this.userRet.Data = res.data.list
        this.userRet.TotalCount = parseInt(res.data.count)
      })
    },
    doSetUser () {
      this.fenpei_title = '向外分配用户-' + this.currentManager.RealName
      this.innerVisible = true
      this.$api.get(this.$api.phpURL + 'manager/SetUser/getAllManagerUserCount', {}).then(res => {
        this.manager_user_list = res.data.list
        this.follow_all_status = res.data.follow_status
        this.manager_jingli_list = res.data.manager_jingli_list
      })
      // var data = {
      //   ManagerId: this.currentManager.Id,
      //   ManagerName: this.currentManager.RealName,
      //   UserIds: this.multipleSelection.map(m => m.Id)
      // }
      // this.$api.post('baseinfo/v1/user/SetManager', data).then(res => {
      //   this.getUser()
      //   this.showUserDialog = false
      // })
    },
    geturl (data) {
      var that = this
      var id = data.Id
      var uuid = that.getguid()
      var url =
        this.$api.baseURL +
        'Manager/ManageBindWx?data.Id=' +
        id +
        '&data.uuid=' +
        uuid
      this.bindwx = true
      this.makeqrcode(url)
      that.timer = setInterval(function () {
        that.time(uuid, that.timer)
      }, 1000)
    },
    // 获取uuid
    getguid () {
      return 'xxxx-xxxx-4xxx-yxxx-xxxx'.replace(/[xy]/g, function (c) {
        // eslint-disable-next-line one-var
        var r = (Math.random() * 16) | 0,
          // eslint-disable-next-line eqeqeq
          v = c == 'x' ? r : (r & 0x3) | 0x8
        return v.toString(16)
      })
    },
    time (data, time) {
      this.$api
        .getscanbindwxstate(data)
        .then(res => {
          console.log(res)
          // eslint-disable-next-line eqeqeq
          if (res.Data.State == 0) {
            clearInterval(time)
            this.getmanagerlist(this.manageData.PageIndex)
            this.bindwx = false
          }
        })
        .catch(res => {
          clearInterval(time)
        })
    },
    makeqrcode (url) {
      document.getElementById('qrcode').innerHTML = ''
      // eslint-disable-next-line no-new
      new QRCode(document.getElementById('qrcode'), {
        text: url,
        width: 127,
        height: 127,
        colorDark: '#000000',
        colorLight: '#ffffff',
        // eslint-disable-next-line no-undef
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    getmanagerlist (val) {
      // 获取管理员列表
      // eslint-disable-next-line no-unused-vars
      var that = this
      this.loading = true
      typeof val === 'number' && (this.manageData.PageIndex = val)
      var roleid = this.userdata.Roleid
      this.manageData.CurrentRoleId = roleid
      this.manageData.IsRoot = 1
      this.$api
        .get('manage/v1/Manager/Get', this.manageData)
        .then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.Code == 10000) {
            this.manegeTotal = res.TotalCount
            this.manegeList = res.Data
            console.log(this.manegeList)
          } else {
            this.$message({
              type: 'error',
              message: res.Message
            })
          }
          this.loading = false
        })
        .catch(res => {
          // console.log(res);
        })
    },
    putManagerdatadomain (e) {
      // 更改某管理员关联项目列表
      this.stateData.Projectcodes = e.SelectedCodes
      // console.log(e);
      this.$api
        .putManagerdatadomain(this.stateData)
        .then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.Code == 10000) {
            this.$message({
              type: 'success',
              message: '修改关联项目成功!'
            })
            this.getmanagerlist()
          } else {
            this.$message({
              type: 'error',
              message: res.Message
            })
          }
        })
        .catch(res => {
          // console.log(res);
        })
    },
    getManagerdatadomain (id) {
      // 获取管理员管理的楼宇编码
      if (this.checkEstate) {
        this.checkEstate = !this.checkEstate
      }
      this.$api
        .getManagerdatadomain({ ID: id })
        .then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.Code == 10000) {
            this.stateData.Managerid = res.Data.Managerid
            this.estateSelected.SelectedCodes = res.Data.Projectcodes
            this.checkEstate = true
          } else {
            this.$message({
              type: 'error',
              message: res.Message
            })
          }
        })
        .catch(res => {
          // console.log(res);
        })
    },

    delmanager () {
      // 删除管理员
      this.$confirm('确认删除该管理员吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$api
            .delmanager(this.delmanagerData)
            .then(res => {
              // eslint-disable-next-line eqeqeq
              if (res.Code == 10000) {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                })
                this.getmanagerlist(1)
              } else {
                this.$message({
                  type: 'error',
                  message: res.Message
                })
              }
            })
            .catch(res => {
              // console.log(res);
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    routerGo (item) {
      this.$router.push({
        name: 'addmanager',
        query: {
          ID: item.Id
        }
      })
    },
    autoSetUser () {
      this.dialogSetManaget = true
      this.$api.post(this.$api.phpURL + 'manager/SetUser/getManagerList', {}).then(res => {
        this.manager_list = res.data
      })
    },
    autoSetUserRequest () {
      this.dialogSetManaget = false
      this.$api.post(this.$api.phpURL + 'manager/SetUser/autoSet', {manager_list: this.select_manege_list}).then(res => {

      })
    },
    screen () {
      this.$api.get(this.$api.phpURL + 'manager/SetUser/getAllManagerUserCount', {screen: this.waifen_screen}).then(res => {
        this.manager_user_list = res.data.list
      })
    },
    waifen () {
      if (!this.waifen_screen.money1 || !this.waifen_screen.money2 || !this.waifen_screen.jingli_id) {
        this.$message({
          message: '消费范围与接收管理员必须不为空',
          type: 'warning'
        })
        return
      }
      this.$api.get(this.$api.phpURL + 'manager/SetUser/waifen', {screen: this.waifen_screen, num: this.distribute_num, manager_id: this.currentManager.Id}).then(res => {
        this.screen()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.basicsetting {
  height: 100%;
  .el-dialog {
    .manager {
      height: 210px;
      p {
        width: 165px;
      }
      .do img {
        width: 150px;
        height: 150px;
        float: none;
        margin-left: 50%;
        transform: translateX(-50%);
      }
    }
    /deep/ .el-dialog__footer {
      height: 57px;
      line-height: 57px;
      p {
        color: #2e2f33;
        line-height: 57px;
        text-align: left;
        text-indent: 20px;
      }
    }
  }
  .blackList {
    color: red;
    border: 1px solid red;
  }
}
#qrcode {
  margin-left: calc(~"50% - 63.5px");
}

.dialog_box {
  width: 440px;
  height: 210px;
}

.dialog_content {
  height: auto;
  padding-bottom: 20px;
  min-height: 95px;
}

.look {
  color: #4c82ff;
}

.textm {
  padding-left: 26px;
  font-size: 14px;
  color: #8f8f8f;
}
</style>
