<template>
  <div class="accountInfo">
    <div class="header">
      <el-input placeholder="单位名称" class="search" />
      <el-input placeholder="账户名称" class="search" />
      <el-select v-model="page.usestate" 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-select v-model="page.chargingMethod" class="select">
        <el-option v-for="item in chargingMethodList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <div class="submit">
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button type="primary" @click="$router.back()">返回上一页</el-button>
      </div>
    </div>
    <div class="body">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="unitName" label="单位名称" />
        <el-table-column prop="apiName" label="账号名称" />
        <el-table-column prop="account" label="短信账号" />
        <el-table-column label="接口类型">
          <template>
            内部WEB
          </template>
        </el-table-column>
        <el-table-column label="联系人" />
        <el-table-column label="手机号码" />
        <el-table-column label="付费模式" prop="cashtype">
          <template #default="scope">
            {{ scope.row.cashtype === 1 ? '预付费' : '后付费' }}
          </template>
        </el-table-column>
        <el-table-column prop="chargingMethod" label="计费方式">
          <template #default="scope">
            {{ scope.row.chargingMethod === 1 ? '成功计费' : '后提交付费' }}
          </template>
        </el-table-column>
        <el-table-column prop="usestate" label="状态">
          <template #default="scope">
            {{ scope.row.usestate === 1 ? '启用' : '停用' }}
            <div v-if="scope.row.usestate === 2">作废</div>
          </template>
        </el-table-column>
        <el-table-column label="余额" prop="balance">
          <template #default="scope">
            {{ scope.row.balance ? scope.row.balance : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="发送总量" prop="sendTotalNum">
          <template #default="scope">
            {{ scope.row.sendTotalNum ? scope.row.sendTotalNum : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="充值总额" prop="rechargeTotalNum">
          <template #default="scope">
            {{ scope.row.rechargeTotalNum ? scope.row.rechargeTotalNum : 0 }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { custCustApiList1API, institutionsListAPI } from '@/api/Account/AccountInformation'

export default {
  name: 'AccountInformation',

  data() {
    return {
      tableData: [],
      page: {
        limit: 10,
        offset: 0,
        parentId: '',
        chargingMethod: '',
        usestate: '',
        cashtype: ''
      },

      statusList: [
        {
          id: 1,
          value: 1,
          label: '启用'
        },
        {
          id: 2,
          value: 0,
          label: '停用'
        },
        {
          id: 3,
          value: 2,
          label: '作废'
        }
      ],
      cashTypeList: [
        {
          id: 1,
          value: 1,
          label: '预付费'
        },
        {
          id: 2,
          value: 0,
          label: '后付费'
        }
      ],
      chargingMethodList: [
        {
          id: 1,
          value: 1,
          label: '成功计费'
        },
        {
          id: 2,
          value: 0,
          label: '后付费提交'
        }
      ]
    }
  },

  async created() {
    const res = await custCustApiList1API({ parentId: this.$route.query.id })
    this.tableData = res.rows
  },

  methods: {
    async search() {
      const res = await institutionsListAPI(this.page)
      console.log(res)
    }
  }
}
</script>

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

  .header {

    .search {
      margin-right: 20px;
      width: 220px;
    }
    .select {
      margin-right: 20px;
    }

    .submit {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
    }
  }

  .body {
    margin-top: 20px;
  }
}
</style>
