<template>
  <el-dialog
    title="选择检查员"
    :visible.sync="openSelectUser"
    width="700px"
    append-to-body
    style="padding: 0 0 0 0"
    @close="cancel"
  >
    <div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="用户名称" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入用户名称"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input
            v-model="queryParams.phonenumber"
            placeholder="请输入手机号码"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >搜索
          </el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置
          </el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="userList"
        size="small"
        highlight-current-row
        @current-change="handleCurrentChange"
        @selection-change="select"
        @select-all="selectAll"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="用户编号" align="center" prop="userId"/>
        <el-table-column label="用户名称" align="center" prop="userName"/>
        <el-table-column
          label="部门"
          align="center"
          key="deptName"
          prop="dept.deptName"
        />
        <el-table-column
          label="手机号码"
          align="center"
          prop="phonenumber"
          width="120"
        />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <div style="text-align: center; padding: 15px 0 0 0">
        <el-button
          type="primary"
          @click="confirm"
          size="small"
          style="margin: 0 20px 0 0"
        >确 定
        </el-button>
        <el-button @click="cancel" size="small" style="margin: 0 0 0 20px">取 消
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { listUser } from "@/api/system/user";

export default {
  name: "selectUser",
  created() {
    this.getList();
  },
  data() {
    return {
      // 选择检查员对话框
      openSelectUser: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,

        phonenumber: undefined,
      },
      // 表单参数
      form: {},
      // 子组件传递给父组件数据
      options: {}
    };
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.queryParams).then((response) => {
        this.userList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 遍历得到用户id
    // getOptions(form) {
    //   this.getList();
    //   this.userList.forEach((item) => {
    //     if (form.userId == item.userId) {
    //       this.$parent.getUserName(item.userName);
    //     }
    //   });
    // },

    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        userName: undefined,
        phonenumber: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //
    open() {
      this.openSelectUser = true;
    },
    // 多选
    select(selection) {
      if (selection.length > 1) {
        let del_row = selection.shift(); //删除上一个选项
        this.$refs.multipleTable.toggleRowSelection(del_row, false);
        // this.userName = selection[0].userName;
        // this.userId = selection[0].id;
      }
      const { userId, userName } = selection[0];
      this.options = { userId, userName };
    },
    //
    selectAll(selection) {
      this.$refs.multipleTable.clearSelection();
    },
    //单选
    handleCurrentChange(selection) {
      // const { userId, userName } = selection;
      // this.options = { userId, userName };
      // this.userName = userName;
      // this.userId = userId;
      this.$refs.multipleTable.toggleRowSelection(selection, true);
    },
    confirm() {
      this.openSelectUser = false;
      this.$parent.confirmUser(this.options);
      //   this.$parent.handleAdd()
    },
    cancel() {
      this.openSelectUser = false;
      //   this.$parent.handleAdd()
    },
  },
};
</script>
