<template>
  <div class="app-container">
    <el-row :gutter="40">
      <el-col :span="8">
        <el-card>
          <div slot="header">
            <span>事业部</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="addBD()">添加事业部</el-button>
          </div>
          <el-menu @select="changeMenu">
            <el-menu-item v-for="(item,index) in bdList" :key="index" :index="index">
              <span slot="title">{{ item.Name }}</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <div slot="header">
            <span>相关销售人员</span>
            <el-button style="float: right; padding: 3px 0;margin-right:10px" type="text" @click="changeBD">  <i class="el-icon-edit" />修改事业部名称</el-button>
            <el-button style="float: right; padding: 3px 0;margin-right:10px" type="text" @click="addItem">  <i class="el-icon-user" />添加销售人员</el-button>
          </div>
          <el-table :data="userList">
            <el-table-column label="" prop="NickName">
              <template slot="header" slot-scope="scope">
                <i class="el-icon-user" />昵称</template>
            </el-table-column>
            <el-table-column label="电话" prop="Phone">
              <template slot="header" slot-scope="scope">
                <i class="el-icon-phone" />电话</template>
            </el-table-column>
            <el-table-column label="操作">
              <temp slot-scope="r">
                <el-button size="mini" @click="move(r.row)">更换事业部</el-button>
              </temp>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      title="更换事业部"
      :visible.sync="showMove"
    >
      <el-form>
        <el-form-item label="所属事业部">
          <el-select v-model="moveItem.BusinessDivisionId" filterable>
            <el-option
              v-for="(item,index) in bdList"
              :key="index"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="postMove">
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="添加销售员" :visible.sync="showAddItem">
      <el-form>
        <el-form-item label="销售员">
          <el-select v-model="selectUser" filterable>
            <el-option
              v-for="(item,index) in users"
              :key="index"
              :label="item.Name"
              :value="item.Id"
            /></el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="postAddItem">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>
<script>
import { _getAllBD, _getBDUsers, _join, _move, _addBD, _changeBDName } from '@/api/bd'
import { _getAllUsers } from '@/api/baseInfo'
export default {
  name: 'BDManage',
  data() {
    return {
      bdList: [],
      userList: [],
      showMove: false,
      moveItem: {},
      selectIndex: '',
      users: [],
      selectUser: '',
      showAddItem: false
    }
  },
  mounted() {
    this.getBDList()
    var that = this
    _getAllUsers().then(r => {
      that.users = r
    })
  },
  methods: {
    getBDList() {
      _getAllBD().then(r => {
        this.bdList = r
      })
    },
    changeMenu(index) {
      this.selectIndex = this.bdList[index].Id
      this.getUsetList()
    },
    getUsetList() {
      _getBDUsers(this.selectIndex).then(r => {
        this.userList = r
      })
    },
    join(data) {
      _join(data).then(r => {
        _getBDUsers(data.BusinessDivisionId)
      })
    },
    move(data) {
      this.showMove = true
      this.moveItem = data
    },
    postMove() {
      _move(this.moveItem).then(r => {
        this.showMove = false
        this.getUsetList()
      })
    },
    addItem() {
      debugger
      if (this.selectIndex === '') {
        this.$alert('必须选择一个事业部')
      } else {
        this.showAddItem = true
      }
    },
    postAddItem() {
      _join({ id: this.selectUser, BusinessDivisionId: this.selectIndex }).then(r => {
        this.getUsetList()
        this.showAddItem = false
      }
      )
    },
    addBD() {
      this.$prompt('事业部名称', '添加事业部').then(r => {
        _addBD({ Name: r.value, IsEnable: true }).then(x => {
          this.getBDList()
        })
      })
    },
    changeBD() {
      this.$prompt('事业部名称', '修改事业部名称').then(r => {
        _changeBDName({ Name: r.value, IsEnable: true, Id: this.selectIndex }).then(x => {
          this.getBDList()
        })
      })
    }
  }
}
</script>
