<template>
  <div class="ele-body">
    <el-card shadow="never">
      <el-row class="ele-text-center" v-if="showTeam">
        <el-radio-group v-model="tabPosition" @change="handleOptionChange">
          <el-radio-button label="1">我的收入</el-radio-button>
          <el-radio-button label="2">团队收入</el-radio-button>
        </el-radio-group>
      </el-row>
      <el-row class="ele-text-center" style="font-size: 30px; padding: 20px">
        <div class="ele-text-danger">
          <span>¥{{ money }}</span>
        </div>
        <div>
          <span>我的收入（元）</span>
        </div>
      </el-row>
      <!-- 搜索表单 -->
      <user-search @search="reload" />
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="userCmmssn"
      >
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
  import UserSearch from './components/user-search.vue';
  import { pageCmmssn } from '@/api/user/cmmssn';

  export default {
    name: 'SystemUser',
    components: {
      UserSearch
    },
    data() {
      return {
        // 表格列配置
        columns: [
          {
            prop: 'cluesCid',
            label: '线索编号',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            prop: 'brandSeries',
            label: '来源车型',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'typeCn',
            label: '类型',
            showOverflowTooltip: true,
            minWidth: 80,
            align: 'center'
          },
          {
            prop: 'money',
            label: '金额',
            showOverflowTooltip: true,
            minWidth: 80,
            align: 'center'
          },
          {
            prop: 'cluesTime',
            label: '线索时间',
            align: 'center',
            minWidth: 100,
            resizable: false,
            showOverflowTooltip: true
          }
        ],
        tabPosition: '1',
        money: 0,
        showTeam: 0
      };
    },
    methods: {
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        where.type = this.tabPosition;
        const result = await pageCmmssn({ ...where, ...order, page, limit });
        this.money = result.money;
        this.showTeam = result.showTeam;
        return result;
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      handleOptionChange() {
        console.log(this.tabPosition);
        this.reload();
      }
    }
  };
</script>
