<template>
  <div class="accountInfo">
    <div class="header">
      <el-input v-model="page.name" placeholder="单位名称" class="search" />
      <el-input v-model="page.username" placeholder="用户名称" class="search" />
      <el-select v-model="page.status" class="select">
        <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="page.cashType" class="select">
        <el-option v-for="item in cashTypeList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button type="primary" @click="search()">查询</el-button>
      <el-button type="primary">导出</el-button>
    </div>
    <!-- <div class="body">
      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="name" label="单位名称" />
        <el-table-column prop="username" label="登录用户名" />
        <el-table-column prop="linkman" label="联系人" />
        <el-table-column prop="mobile" label="手机号码" />
        <el-table-column label="付费模式">
          <template #default="scope">
            {{ scope.row.cashType === 1 ? '预支付' : '后支付' }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-button v-if="scope.row.status === 1" type="success" size="mini">正常</el-button>
            <el-button v-else type="info" size="mini">禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column label="余额">
          <template #default="scope">
            {{ scope.row.balance ? scope.row.balance : 0 }}
          </template>
        </el-table-column>
        <el-table-column prop="sendTotalNum" label="发送总量" />
        <el-table-column prop="rechargeTotalNum" label="充值总额">
          <template #default="scope">
            {{ scope.row.rechargeTotalNum ? scope.row.rechargeTotalNum : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="medium " type="text" @click="$router.push(`subaccount?id=${scope.row.userId}`)">查看子账户</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div> -->
    <Table v-if="tableData && flag" :data="tableData" :list="tableList" :total="total" :judgment="true" :loading="loading" :display="display" @sizeChange="onSizeChange">
      <template #type="data">
        <!-- 付费模式 -->
        <div v-show="data.item === 'cashType'">
          {{ data.scope.cashType === 1 ? '预支付' : '后支付' }}
        </div>
        <!-- 状态 -->
        <div v-show="data.item === 'status'">
          <el-button v-if="data.scope.status === 1" type="success" size="mini">正常</el-button>
          <el-button v-else type="info" size="mini">禁用</el-button>
        </div>
        <!-- 余额 -->
        <div v-show="data.item === 'balance'">
          {{ data.scope.balance ? data.scope.balance : 0 }}
        </div>
        <!-- 发送总量 -->
        <div v-show="data.item === 'sendTotalNum'">
          {{ data.scope.rechargeTotalNum ? data.scope.rechargeTotalNum : 0 }}
        </div>
        <!-- 充值总额 -->
        <div v-show="data.item === 'rechargeTotalNum'">
          {{ data.scope.rechargeTotalNum ? data.scope.rechargeTotalNum : 0 }}
        </div>
        <!-- 操作 -->
        <div v-show="data.item === 'operation'">
          <el-button size="medium " type="text" @click="$router.push(`subaccount?id=${data.scope.userId}`)">查看子账户</el-button>
        </div>
      </template>
    </Table>
  </div>
</template>

<script>
import { institutionsListAPI } from '@/api/Account/AccountInformation'
import Table from '@/components/Table/index.vue'

export default {
  name: 'AccountInformation',

  components: {
    Table
  },

  data() {
    return {
      tableData: [],
      tableList: [
        {
          uid: '1',
          label: '序号',
          prop: 'uid',
          flag: false
        },
        {
          uid: '2',
          label: '单位名称',
          prop: 'name',
          flag: false
        },
        {
          uid: '3',
          label: '登录用户名',
          prop: 'username',
          flag: false
        },
        {
          uid: '4',
          label: '联系人',
          prop: 'linkman',
          flag: false
        },
        {
          uid: '5',
          label: '手机号码',
          prop: 'mobile',
          flag: false
        },
        {
          uid: '6',
          label: '付费模式',
          prop: 'cashType',
          flag: true
        },
        {
          uid: '7',
          label: '状态',
          prop: 'status',
          flag: true
        },
        {
          uid: '8',
          label: '余额',
          prop: 'balance',
          flag: true
        },
        {
          uid: '9',
          label: '发送总量',
          prop: 'sendTotalNum',
          flag: true
        },
        {
          uid: '10',
          label: '充值总额',
          prop: 'rechargeTotalNum',
          flag: true
        },
        {
          uid: '11',
          label: '操作',
          prop: 'operation',
          flag: true
        }
      ],
      flag: false,
      display: true,

      page: {
        limit: 10,
        offset: 0,
        name: '',
        status: '',
        username: '',
        cashType: ''
      },
      total: 0,

      statusList: [
        {
          id: 1,
          value: '',
          label: '全部账号状态'
        },
        {
          id: 2,
          value: 1,
          label: '正常'
        },
        {
          id: 3,
          value: 0,
          label: '禁用'
        }
      ],
      cashTypeList: [
        {
          id: 1,
          value: '',
          label: '全部账号状态'
        },
        {
          id: 2,
          value: 1,
          label: '预付费'
        },
        {
          id: 3,
          value: 0,
          label: '后付费'
        }
      ],

      loading: false
    }
  },

  async created() {
    await this.getInstitutionsListAPI(this.page)
    this.flag = true
  },

  methods: {
    async getInstitutionsListAPI() {
      this.loading = true
      const res = await institutionsListAPI(this.page)
      this.tableData = res.rows.map((item, index) => {
        return { ...item, uid: index + 1 }
      })
      this.total = res.total
      this.loading = false
    },

    async search() {
      await this.getInstitutionsListAPI(this.page)
    },

    async onSizeChange(value) {
      this.page.limit = value
      await this.getInstitutionsListAPI(this.page)
    }
  }
}
</script>

<style scoped lang="scss">
  .accountInfo {

    .header {

      .search {
        margin-right: 20px;
        width: 220px;
      }
      .select {
        margin-right: 20px;
      }
    }
  }
</style>
