<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="dialogVisible"
    :title="title"
  >
    <el-table
    v-loading="loading" :data="list" style="width: 100%">
      <el-table-column prop="avatarLink" label="头像" width="80">
        <template slot-scope="scope">
          <img :src="getAvatar(scope.row)" class="avatar" style="width: 40px; height: 40px; border-radius: 50%"/>
        </template>
      </el-table-column>
      <el-table-column prop="nickName" label="姓名" width="180"></el-table-column>
      <el-table-column prop="phone" label="电话" min-width="180"></el-table-column>
      <!-- <el-table-column prop="address" label="地址"></el-table-column> -->
    </el-table>
    <pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="goChangeUser" >经纪人转移</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <BrokerChange ref="brokerChange" :oldBroker="queryParams.brokerId"  @changeUser="changeUser"></BrokerChange>
  </el-dialog>

</template>

<script>
import { pageListClueVisitsNum } from "@/api/biz/clue";
import BrokerChange from "./BrokerChange";


export default {
  name: 'ClientList',
  components: { BrokerChange },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      title: '经纪人客户',
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        hasOrder: '1',
				dataType: '0',
        brokerId: '',
      },
      list: [],
      currentRow: {},
    }
  },
  methods: {
    show(row) {
      this.currentRow = row || {};
      this.list = [];
      this.queryParams.brokerId = this.currentRow.userId;
      this.dialogVisible = true;
      this.getList();
    },
    cancel() {
      this.dialogVisible = false
    },
    getAvatar(row) {
      if (!row.avatarLink) {
        return require("@/assets/images/profile.jpg");
      }
      if (row.avatarLink.indexOf('http') === 0) {
        return row.avatarLink;
      }
      return process.env.VUE_APP_BASE_API + row.avatarLink;
    },
    getList() {
      this.loading = true;
      pageListClueVisitsNum(this.queryParams).then(response => {
        this.list = response.rows || [];
        this.total = response.total;
        this.loading = false;
      }).catch(e => {
        this.loading = false;
      });
    },
    goChangeUser() {
      this.$refs.brokerChange.show();
    },
    changeUser() {
      this.getList();
    }
  }
}
</script>

<style>

</style>
