<template>
  <div style="padding:10px 20px">
    <el-form :inline="true">
      <el-form-item label="姓名">
        <el-input
          v-model="queryParams.personName"
          size="small"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="" size="small" @click="getList2">查询</el-button>
        <el-button
          type="primary"
          size="small"
          @click="handleAdd()"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border>
        <el-table-column label="#" align="center" width="50px">
            <template slot-scope="scope">
                <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="姓名"  align="center" prop="name">
            <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
            </template>
        </el-table-column>
        <el-table-column label="账号"  align="center" prop="username">
            <template slot-scope="scope">
                <span>{{scope.row.username}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作"  align="center">
            <template slot-scope="scope">
                <el-link type="primary" class="color-red" @click="remove(scope.row)">移除</el-link>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog title="人员列表" :visible.sync="personInformation" width="1000px" append-to-body>
		<Personnel-List @checked="getCheck"></Personnel-List>
	</el-dialog>
  </div>
</template>
<script>
import PersonnelList from '../personnelList.vue';
export default {
    components:{
        PersonnelList
    },
    props:['reportId'],
  data() {
    return {
      personInformation:false,
      queryParams: {
        reportId:this.reportId,
        personName: "",
        size: 10,
        current: 1,
      },
      tableData:[],
      total:0,
      checkList:[]
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    //查询报告分享人
    getList(){
        this.$api.showShare(this.queryParams).then(response=>{
            if(response.code == 200){
                this.tableData = response.data.records
                this.total = response.data.total
            }
        }).catch(error=>{
            this.tableData = []
        })
    },
    getList2(){
        this.queryParams.current = 1
        this.getList()
    },
    //打开人员列表弹窗
    handleAdd(){
        this.personInformation = true
    },
    //获取人员信息
    getCheck(val){
        var params = {
            reportId:this.reportId,
            personIds:val.map(item=>{return item.id})
        }
        this.$api.addShare(params).then(response=>{
            if(response.code == 200){
                this.$message.success('添加成功')
                this.getList()
                this.personInformation = false
            }
        }).catch(error=>{
            this.$message.success('添加失败')
        })
        
    },
    //获取需要移除的报告分享人
    remove(row){
        if(row){
            var personIds = [row.id]
        }else{
            var personIds = this.checkList
        }
        this.removePerson(personIds)
    },
    //移除报告分享人
    removePerson(personIds){
        var params = {
            reportId:this.reportId,
            personIds:personIds
        }
        this.$api.removeShare(params).then(response=>{
            if(response.code == 200){
                this.$message.success('移除成功')
                this.getList2()
            }
        }).catch(error=>{
            this.$message.error('移除失败')
        })
    },
  },
};
</script>