<template>
  <el-container>
    <el-main>
      <!-- 操作按钮 -->
      <ActionButton add-btn-text="添加客户经理" add-btn-type="warning" :open-delete="false" :open-search="false"
                    @handle-add="openEditDialog(null)" @handle-refresh="refreshData" @handle-search="isSearchVisible = !isSearchVisible" />

      <!-- 表格数据 -->
      <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="id"></el-table-column>
          <el-table-column label="昵称"
                           align="center"
                           prop="name"></el-table-column>
          <el-table-column label="权限分组"
                           align="center"
                           prop="roleName"></el-table-column>
          <el-table-column label="手机号"
                           align="center"
                           prop="phone"></el-table-column>
          <el-table-column label="微信号"
                           align="center"
                           prop="wechatNum"></el-table-column>
          <el-table-column label="客户数" align="center" prop="title">
            <template slot-scope="scope">
              <span style="color: #3CA1FE;cursor:pointer;" @click="openClientNumDialog(scope.row)">{{ scope.row.userCount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200px">
            <template slot-scope="scope">
              <CustomButton tip-text="分配站长" is-svg icon="user-tag" type="warning" @onClick="openAllotMasterDialog(scope.row)" />
              <CustomButton tip-text="编辑" is-svg icon="edit" @onClick="openEditDialog(scope.row)" />
              <CustomButton tip-text="明细" is-svg icon="detail" @onClick="openDetailDialog(scope.row)" />
              <CustomButton tip-text="删除" is-svg icon="delete" type="danger" @onClick="openDeleteDialog(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部分页组件 -->
      <div class="pagination-container">
        <el-pagination :current-page="formData.currentPage"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="formData.limit"
                       layout="total,  prev, pager, next, sizes,jumper"
                       :total="formData.total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-main>
    <!--      客户数弹窗-->
    <ClientNumDialog :is-client-num="isClientNum"
                     :item-chose-data="itemChoseData"
                     @handle-close="closeDialog"></ClientNumDialog>
    <!--    站长分配弹窗-->
    <AllotMasterDialog :is-allot-master="isAllotMaster"
                       :item-chose-data="itemChoseData"
                       @handle-success="_baseRequest"
                       @handle-close="closeDialog"></AllotMasterDialog>
    <!--    客户编辑弹窗-->
    <EditClientDialog :is-edit="isEdit"
                      :edit-dialog-title="EditDialogTitle"
                      :role-data="roleData"
                      :item-chose-data="itemChoseData"
                      @handle-success="_baseRequest"
                      @handle-close="closeDialog"></EditClientDialog>
    <!--    客户明细弹窗-->
    <DetailClientDialog :is-detail="isDetail"
                        :item-chose-data="itemChoseData"
                        @handle-close="closeDialog"></DetailClientDialog>
    <!--    删除客户弹窗-->
    <DeleteClientDialog :is-delete="isDelete"
                        :item-chose-data="itemChoseData"
                        @handle-success="_baseRequest"
                        @handle-close="closeDialog"></DeleteClientDialog>
  </el-container>
</template>

<script>
/**
 * 系统功能定价管理页面
 */
import CustomButton from '@/components/CustomButton'
import ActionButton from '@/components/ActionButton/index'
import ClientNumDialog from './components/client-number-dialog'
import AllotMasterDialog from './components/allot-master-dialog'
import EditClientDialog from './components/client-edit-dialog'
import DetailClientDialog from './components/client-detail-dialog'
import DeleteClientDialog from './components/client-delete-dialog'
import { getClientList } from '/src/api/master-info-manage/account-manager-management'
export default {
  components: { ActionButton, CustomButton, ClientNumDialog, AllotMasterDialog, EditClientDialog, DetailClientDialog, DeleteClientDialog },
  data() {
    return {
      // 编辑 or 添加 弹窗开关
      isEdit: false,
      // 编辑 or 添加 标题
      EditDialogTitle: '',
      // 明细弹窗开关
      isDetail: false,
      // 删除弹窗开关
      isDelete: false,
      // 分配站长开关
      isAllotMaster: false,
      // 客户数弹窗开关
      isClientNum: false,
      // UI控制参数
      isSearchVisible: true,
      // 表格数据
      tableData: [
        { title: 1 }
      ],
      // 权限分组数据
      roleData: [],
      // 每行选中的数据
      itemChoseData: {},
      // 表单参数
      formData: {
        // 当前显示页数
        currentPage: 1,
        // 每页页数
        limit: 10,
        // 总页数
        total: 10
      }
    }
  },
  created() {
    this._baseRequest()
  },
  methods: {
    // 更新操作
    refreshData() {
      this._baseRequest(true)
    },
    // 基础请求
    _baseRequest(refres = false) {
      if (refres) {
        this.$message.success('刷新成功~')
      }
      const params = {
        p: this.formData.currentPage,
        limit: this.formData.limit
      }
      getClientList(params).then(resp => {
        if (parseInt(resp.code) === 0) {
          console.log(resp.data)
          this.tableData = resp.data.list
          // 权限分组
          this.roleData = resp.data.roleData
          this.formData.total = resp.data.total
        }
      })
    },
    // 指定添加套餐弹窗
    openDetailDialog(val) {
      this.isDetail = true
      this.itemChoseData = val
    },
    // 打开编辑 or 添加 弹窗
    openEditDialog(val) {
      this.isEdit = true
      if (val !== null) {
        this.EditDialogTitle = '编辑'
        this.itemChoseData = val
      } else {
        this.EditDialogTitle = '添加客户经理'
        this.itemChoseData = val
      }
    },
    // 打开站长分配弹窗
    openAllotMasterDialog(val) {
      this.isAllotMaster = true
      this.itemChoseData = val
    },
    // 打开客户数弹窗
    openClientNumDialog(val) {
      this.isClientNum = true
      this.itemChoseData = val
    },
    // 打开删除弹窗
    openDeleteDialog(val) {
      this.isDelete = true
      this.itemChoseData = val
    },
    // 关闭弹窗操作
    closeDialog() {
      this.isClientNum = false
      this.isAllotMaster = false
      this.isEdit = false
      this.isDetail = false
      this.isDelete = false
      this._baseRequest()
    },
    // 提交操作
    onSubmit() {},
    // 表单重置
    resetForm(val) {
      this.$refs[val].resetFields()
    },
    // 每页数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formData.limit = val
      this._baseRequest()
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formData.currentPage = val
      this._baseRequest()
    }
  }
}
</script>

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

