<template>
  <div class="admin-department" style="height:calc(100vh - 230px)">
    <el-container>
      <el-header>
        <el-form :inline="true">
          <el-form-item label="人员名称">
            <el-input
              v-model="queryParams.name"
              size="small"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="" size="small" @click="getList">查询</el-button>
            <el-button type="primary" size="small" @click="submit"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
		<div class="height_100">
			<el-table
          :data="tableData"
          v-loading="loading"
          style="width: 100%"
          v-if="showTable"
        >
          <el-table-column width="55" align="center">
            <template slot-scope="scope">
              <div>
                <!-- (personIds.indexOf(scope.row.id) != -1 || personIds.indexOf(scope.row.id+'')!=-1) -->
                <el-checkbox
                  :checked="personIds.filter(item=>{return item==scope.row.id}).length>0"
                  @change="getCheck(scope.row)"
                  v-if="showCheck"
                ></el-checkbox>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="人员名称"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="Email"
            prop="email"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号码"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="personnelDescription"
            label="描述"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
		</div>
        
      </el-main>
      <el-footer class="pagination">
			<el-pagination
				:current-page.sync="queryParams.current"
				:page-size="queryParams.size"
				:total="total"
				@current-change="handleCurrentChange"
				layout="total, prev, pager, next, jumper"
				background
			></el-pagination>
	  </el-footer>
    </el-container>

    
  </div>
</template>

<script>
export default {
  props: {
    personIds: {
      type:Array,
      default: [],
    },
    persons: {
      type:Array,
      default: [],
    },
  },
  data() {
    name: "ClientTable";
    return {
      visible: false,
      loading: false,
      total: 0,
      tableData: [],
      queryParams: {
        tenantId: this.tenantId,
        tenantName: "",
        size: 10,
        current: 1,
        projectId: this.projectId,
      },

      showTable: true,
      showCheck: true,
    };
  },
  mounted() {
    this.getList();
  },
  watch: {
    personIds(val) {
      this.updateCheck()
    },
  },
  computed: {},

  methods: {
	//跟新选择框
	updateCheck(){
		this.showCheck = false;
		this.$nextTick(() => {
			this.showCheck = true;
		});
	},
    getList() {
      this.loading = true;
      this.$api
        .getPersonList(this.queryParams)
        .then((response) => {
          this.tableData = response.data;
          this.total = response.pageColumn.total;
          this.loading = false;
		 
        })
        .catch((error) => {
          this.loading = false;
        });
    },
    close() {
      this.visible = false;
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    //保存
    submit() {
      this.$emit("getPersonIds", {
        personIds: this.personIds,
        persons: this.persons,
      });
    },
    //选择
    getCheck(row) {
      var index = this.personIds.findIndex(item=>{
		return item == row.id
	  })
      if (index == -1) {
        this.personIds.push(row.id);
        this.persons.push(row);
      } else {
        this.personIds.splice(index, 1);
        this.persons.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.admin-department {
  border: 1px solid #eee;
//   padding: 20px;
  // border-radius: 8px;
}
</style>