<template>
  <el-dialog :visible.sync="dialogFormVisible" :title="titleText" width="330px" append-to-body>
    <el-scrollbar>
      <el-tree
        v-loading="loading"
        :props="defaultProps"
        :data="userTreeList"
        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="dialogFormVisible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { toTreeList } from '@/utils/structure'
// import { getRoleTreeListByUser } from '@/api/role'
import { getDeptTreeList } from '@/api/dept'

export default {
  name: 'ResponseAssign',
  data() {
    return {
      userName: '', // 用户名称
      dialogFormVisible: false, // 对话框是否显示
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      userTreeList: [
        {
          'id': '0',
          'name': 'A公司',
          'type': 'dept',
          'open': 'true',
          'children': [
            {
              'id': '0',
              'name': '张三',
              'type': 'staff',
              'open': 'true'
            },
            {
              'id': '0',
              'name': '李四',
              'type': 'staff',
              'open': 'true'
            },
            {
              'id': '0',
              'name': '一组',
              'open': 'true',
              'type': 'dept',
              'children': [
                {
                  'id': '0',
                  'name': '张三',
                  'type': 'staff',
                  'open': 'true'
                },
                {
                  'id': '0',
                  'name': '李四',
                  'open': 'true'
                },
                {
                  'id': '0',
                  'name': '王五',
                  'open': 'true'
                }
              ]
            }
          ]
        },
        {
          'id': '0',
          'name': 'B公司',
          'open': 'true',
          'children': [
            {
              'id': '0',
              'name': '张三',
              'open': 'true'
            },
            {
              'id': '0',
              'name': '李四',
              'open': 'true'
            },
            {
              'id': '0',
              'name': '王五',
              'open': 'true'
            },
            {
              'id': '0',
              'name': '一组',
              'open': 'true',
              'children': [
                {
                  'id': '0',
                  'name': '张三',
                  'open': 'true'
                },
                {
                  'id': '0',
                  'name': '李四',
                  'open': 'true'
                },
                {
                  'id': '0',
                  'name': '王五',
                  'open': 'true'
                }
              ]
            }
          ]
        }
      ], // 权属单位树列表数据
      defaultExpanded: [], // 默认展开的项
      defaultChecked: [], // 默认选中的树
      loading: false // 加载动态效果
    }
  },
  computed: {
    titleText: function() {
      return this.userName + ''
    }
  },
  mounted: function() {
    // this.fetchResourceData()
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogFormVisible, deptid) {
      this.loading = true
      this.dialogFormVisible = dialogFormVisible
      this.loading = false
      // this.fetchDeptTree()
    },
    // 获取权属单位列表
    fetchDeptTree: function(deptid) {
      getDeptTreeList(deptid).then(response => {
        if (response.data.list) {
          if (response.data.list.length > 0) {
            this.userTreeList = toTreeList(response.data.list)
            this.loading = false
          } else {
            this.$message.warning('请先选择井权属单位')
          }
        }
      })
    },
    // 保存数据
    saveData: function() {
      console.log('授权成功')
      this.$emit('watchChild')
    },
    handleCheckChange() {
      console.log('handleCheckChange')
    }
  }
}
</script>

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

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