<template>
  <el-dialog :visible.sync="dialogFormVisible" :title="titleText" width="330px" append-to-body>
    <el-scrollbar>
      <el-tree
        v-loading="loading"
        ref="tree"
        :props="defaultProps"
        :data="dataList"
        :default-expanded-keys="defaultExpanded"
        :default-checked-keys="defaultChecked"
        :default-expand-all="defaultExpandAll"
        show-checkbox
        check-strictly
        node-key="id"
        @check-change="handleCheckChange"/>
    </el-scrollbar>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveData">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { toTreeList, getShowItem } from '@/utils/structure'
import { getUserSimpleList } from '@/api/system/user'
import { bindSeats } from '@/api/phone'

export default {
  name: 'BindSeats',
  data() {
    return {
      extensionPhoneId: '', // 分机id
      extensionPhoneName: '', // 分机名称
      ids: [], // 选中项id
      dialogFormVisible: false, // 对话框是否显示
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      dataList: null, // 列表数据
      defaultExpanded: [], // 默认展开的项
      defaultChecked: [], // 默认选中的树
      loading: false, // 加载动态效果
      defaultExpandAll: true // 是否展开树
    }
  },
  computed: {
    titleText: function() {
      return '绑定座席'
    }
  },
  created: function() {
    // this.fetchUserList()
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogFormVisible, row) {
      this.loading = true
      this.extensionPhoneId = row.id
      this.extensionPhoneName = row.phonenumber
      let checked = []
      if (row.seatsIds) {
        checked = row.seatsIds.split(',')
      }
      this.defaultChecked = checked
      this.dialogFormVisible = dialogFormVisible
      this.fetchUserList()
    },
    // 获取座席员列表
    fetchUserList() {
      const params = {
        roleTips: 'receiver,monitor'
      }
      getUserSimpleList(params).then(response => {
        if (response.code === 200) {
          this.dataList = response.data
          this.loading = false
        }
      })
    },
    saveData: function() {
      this.ids = this.$refs.tree.getCheckedKeys()
      bindSeats(this.extensionPhoneId, this.ids).then(response => {
        if (response.code === 200) {
          this.$message.success('坐席绑定成功')
          this.dialogFormVisible = false
          this.$emit('refresh')
        }
      })
    },
    handleCheckChange() {
      console.log('handleCheckChange')
    },
    // 点击取消
    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('refresh')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .el-dialog{
    min-width:350px !important;
  }
  .el-tree{
    max-height:300px;
  }
  .el-select{
    width: 100%;
  }
</style>