<template>
  <el-dialog :visible.sync="dialogFormVisible" title="设置联系人" width="500px" append-to-body>
    <el-scrollbar wrap-class="list" class="scrollbar">
      <el-table v-loading="loading" :data="list" class="table" border stripe>
        <el-table-column label="选择" width="70" header-align="center" align="center">
          <template slot-scope="scope">
            <el-radio v-model="radio" :label="scope.$index" class="radio">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row[column.value] }}
          </template>
        </el-table-column>
      </el-table>
    </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 { getUserList } from '@/api/user'

export default {
  name: 'EditResponsibleUser',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      radio: '',
      listQuery: {
        keywords: '',
        beginTime: '',
        endTime: '',
        deptid: '',
        page: 1,
        limit: 10000,
        sort: 'id'
      },
      form: { // 表单
        deptid: '',
        user: ''
      },
      columns: [
        {
          text: '账户',
          value: 'account'
        },
        {
          text: '真实姓名',
          value: 'name',
          width: 50
        },
        {
          text: '手机号',
          value: 'phone'
        }
      ],
      list: [], // 用户列表数据
      loading: false // 加载动态效果
    }
  },
  computed: {
    titleText: function() {
      return this.roleName + ''
    }
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogFormVisible, row) {
      this.loading = true
      this.listQuery.deptid = row.id
      this.form.deptid = row.id
      this.form.user = row.user
      this.dialogFormVisible = dialogFormVisible
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getUserList(this.listQuery).then(response => {
        this.list = response.data.rows
        this.loading = false
        // 根据选中情况将选择radio置为显示
        for (const index in this.list) {
          const user = this.list[index]
          if (user.id === this.form.user) {
            this.radio = index
          }
        }
      })
    },
    saveData() {
      const row = this.list[this.radio]
      const form = {
        deptid: this.form.deptid,
        user: row.id
      }
      console.log(form)
    }
  }
}
</script>

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

  .el-dialog{
    min-width:350px !important;
  }
  .scrollbar{
    max-height: 400px;
  }
  .el-tree{
  }
  .el-select{
    width: 100%;
    overflow-x: hidden;
    .el-scrollbar__wrap{
      overflow-x: hidden;
    }
  }
  .list{
    max-height:300px;
  }
</style>