<template>
  <div>
    <el-dialog
      width="960px"
      :visible.sync="open"
      :title="title"
    >
      <el-form :model="queryForm" inline size="small">
        <el-form-item label="用户姓名" porp="userName">
          <el-input v-model="queryForm.userName" @keyup.enter.native="handleQuery" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="queryForm.phonenumber" @keyup.enter.native="handleQuery" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="handleQuery"
          >搜索
          </el-button>
          <el-button
            plain
            size="small"
            icon="el-icon-refresh"
            @click="resetQuery"
          >重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="assignorList"
        stripe
        width="100%"
        v-loading="loading"
        :data="assignorList"
        @selection-change="handleSelectChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column label="用户姓名" prop="userName" align="center"></el-table-column>
        <el-table-column label="手机号" prop="phonenumber" align="center"></el-table-column>
      </el-table>

      <ExPagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @paginaiton="getList"
      ></ExPagination>

      <div slot="footer">
        <el-button :disabled="!isSimple" type="primary" size="small" @click="handleSelect">确 认</el-button>
        <el-button plain size="small" @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "HandleEntrust",
  props: {
    title: {
      type: String,
      default: '选择委托人'
    },
    entrustOpen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      assignorList: [],
      loading: false,
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        userName: '',
        phonenumber: ''
      },
      total: 0,
      isSimple: false
    }
  },
  computed: {
    open: {
      get() {
        return this.entrustOpen
      },
      set(value) {
        this.$emit('update:entrustOpen', value);
      }
    }
  },

  created() {
    this.getList();
  },
  methods: {
    /** 获取列表信息 */
    getList() {
      this.loading = true;
      this.$emit("getAssignorList", this.queryForm, (rows, total) => {
        this.assignorList = rows;
        this.total = total;
        this.loading = false;
      })
    },

    /** 查询 */
    handleQuery() {
      this.throttle(() => {
        this.getList();
      })
    },

    /** 重置表单 */
    resetQuery() {
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        userName: '',
        phonenumber: ''
      };
      this.handleQuery();
    },

    /** 选中行数据变化 */
    handleSelectChange(selection) {
      this.selectItem = selection[0];
      this.isSimple = selection.length === 1;
    },
    /** 点击行 */
    handleRowClick(row) {
      this.$refs.assignorList.clearSelection();
      this.$refs.assignorList.toggleRowSelection(row, true);
    },

    /** 确定 */
    handleSelect() {
      this.$emit('selectUser', this.selectItem);
      this.handleClose();
    },

    /** 取消 */
    handleClose() {
      this.open = false;
    }
  }
}
</script>

<style scoped>

</style>
