<template>
  <Dialog
    :is-dialog-exist="isClientNum"
    :title="checkDialogTitle"
    :dialog-style="checkDialogStyle"
    @close-dialog="handleClose"
  >
    <el-container>
      <el-main>
        <!-- 操作按钮 -->
        <ActionButton :open-add="false" :open-delete="false" :open-search="false" @handle-refresh="refreshData" />
        <!-- 表格数据 -->
        <div class="table-container">
          <el-table :data="tableData" border fit>
            <el-table-column
              label="序号"
              type="index"
              width="55"
              align="center">
            </el-table-column>
            <el-table-column label="站长ID"
                             align="center"
                             prop="uid"></el-table-column>
            <el-table-column label="姓名"
                             align="center"
                             prop="name"></el-table-column>
            <el-table-column label="手机号"
                             align="center"
                             prop="phone"></el-table-column>
            <el-table-column label="微信号"
                             align="center"
                             prop="accWxId"></el-table-column>
            <el-table-column label="等级"
                             align="center"
                             prop="levelName"></el-table-column>
            <el-table-column label="成长值"
                             align="center"
                             prop="integral"></el-table-column>
            <el-table-column label="优惠码"
                             align="center"
                             prop="inviteCode"></el-table-column>
            <el-table-column label="是否实名"
                             align="center"
                             prop="idVerifiedText"></el-table-column>
            <el-table-column label="是否企业认证"
                             align="center"
                             prop="companyVerifyText"></el-table-column>
            <el-table-column label="状态" align="center" prop="sendState">
              <template slot-scope="scope">
                <span :style="{color: scope.row.stateText === '正常' ? ' #0DB903' : '#FF494A'}">{{ scope.row.stateText }}</span>
              </template>
            </el-table-column>
            <el-table-column label="加入时间"
                             align="center"
                             prop="regTime"></el-table-column>
          </el-table>
        </div>
        <!-- 底部分页组件 -->
        <div class="pagination-container">
          <el-pagination :current-page="currentPage"
                         :page-sizes="[10, 20, 30, 40]"
                         :page-size="limit"
                         layout="total,  prev, pager, next, sizes,jumper"
                         :total="total"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </Dialog>
</template>

<script>
/**
 * 客户经理管理-客户数跳转
 */
import Dialog from '@/components/Dialog/index'
import ActionButton from '@/components/ActionButton/index'
import { idMasterList } from '/src/api/master-info-manage/account-manager-management'
export default {
  components: { ActionButton, Dialog },
  props: {
    // 每行选中的数据
    itemChoseData: {
      type: Object,
      require: true,
      default: () => {}
    },
    isClientNum: {
      type: Boolean,
      default: () => {}
    }
  },
  data() {
    return {
      // 弹窗
      checkDialogTitle: '明细',
      checkDialogStyle: {
        '--dialog-width': '1400px',
        '--dialog-height': '809px',
        '--title-height': '51px'
      },
      // 表格数据
      tableData: [],
      // 当前显示页数
      currentPage: 1,
      // 每页页数
      limit: 10,
      // 总页数
      total: 20
    }
  },
  watch: {
    isClientNum(val) {
      if (val) {
        console.log(JSON.stringify(this.itemChoseData), '选中的数据(客户数)')
        this._baseRequest()
      }
    }
  },
  created() {
    // this._baseRequest()
  },
  methods: {
    // 更新操作
    refreshData() {
      this._baseRequest(true)
    },
    // 基础请求
    _baseRequest(refres = false) {
      if (refres) {
        this.$message.success('刷新成功~')
      }
      const params = {
        customerId: this.itemChoseData.id,
        p: this.currentPage,
        limit: this.limit
      }
      idMasterList(params).then(resp => {
        if (parseInt(resp.code) === 0) {
          console.log(resp.data)
          this.tableData = resp.data.userList
          this.total = resp.data.total
        }
      })
    },
    // 指定添加套餐弹窗
    handleClose() {
      this.$emit('handle-close')
    },
    // 每页数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.limit = val
      this._baseRequest()
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this._baseRequest()
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-container{
    width: 100%;
    height: 100%;
    margin-top: 1.6%;
    /*background: red;*/
    .el-main{
      width: 100%;
      height: 100%;
      /*padding: 5%;*/
      .pagination-container{
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .table-container{
      }
    }
  }
</style>

