<!-- 物联网卡列表 -->
<template>
  <div class="page-full">
    <el-card shadow="never" class="page-full-part">
      <el-form :model="params" inline ref="queryRef">
        <el-form-item prop="deptName" class="mr10">
          <el-input @keyup.enter.native="getList" style="width: 240px;" v-model="params.keyWord" :placeholder="$t('message.iotCard.index.search.placeholder')" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">
            <el-icon>
              <ele-Search />
            </el-icon>
            {{ $t('message.iotCard.index.search.query') }}
          </el-button>
          <el-button v-auth="'reset'" @click="resetQuery()">
            <el-icon>
              <ele-Refresh />
            </el-icon>
            {{ $t('message.iotCard.index.search.reset') }}
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" max-height="calc(100vh - 210px)" v-loading="loading" style="width: 100%">
        <el-table-column v-col="'accNumber'" fixed="left" min-width="130" :label="$t('message.iotCard.index.table.columns.cardNumber')" prop="accNumber" align="center" />
        <el-table-column v-col="'ICCID'" min-width="180" :label="$t('message.iotCard.index.table.columns.iccid')" prop="iccid" align="center" />
        <el-table-column v-col="'bindDeviceName'" width="120" :label="$t('message.iotCard.index.table.columns.bindDevice')" prop="bindDeviceName" align="center" />
        <el-table-column v-col="'platName'" width="120" :label="$t('message.iotCard.index.table.columns.platform')" prop="platName" align="center" />
        <el-table-column v-col="'types'" width="120" :label="$t('message.iotCard.index.table.columns.operator')" prop="types" align="center">
          <template #default="scope">{{ formatOperator(scope.row.types) }}</template>
        </el-table-column>
        <el-table-column v-col="'simTypes'" width="120" :label="$t('message.iotCard.index.table.columns.type')" prop="simTypes" align="center">
          <template #default="scope">{{ formatType(scope.row.simTypes) }}</template>
        </el-table-column>
        <el-table-column v-col="'totalFlow'" width="120" :label="$t('message.iotCard.index.table.columns.totalFlow')" prop="totalFlow" align="center" />
        <el-table-column v-col="'usedFlow'" width="120" :label="$t('message.iotCard.index.table.columns.usedFlow')" prop="usedFlow" align="center" />
        <el-table-column v-col="'leaveFlow'" width="120" :label="$t('message.iotCard.index.table.columns.remainFlow')" prop="leaveFlow" align="center" />
        <el-table-column v-col="'activationTime'" width="140" :label="$t('message.iotCard.index.table.columns.activationDate')" prop="activationTime" align="center" />
        <el-table-column v-col="'updatedAt'" width="120" :label="$t('message.iotCard.index.table.columns.updateTime')" prop="updatedAt" align="center" />
        <el-table-column v-col="'simStatus'" width="120" :label="$t('message.iotCard.index.table.columns.status')" prop="simStatus" align="center">
          <template #default="scope">{{ formatStatus(scope.row.simStatus) }}</template>
        </el-table-column>
        <el-table-column v-col="'handle'" width="110" :label="$t('message.iotCard.index.table.columns.actions')" fixed="right" prop="handle" align="center">
          <template #default="scope">
            <el-button size="small" text type="primary" @click="onOpenDetail(scope.row)" v-auth="'detail'">{{ $t('message.iotCard.index.table.actions.detail') }}</el-button>
            <el-button size="small" text type="warning" @click="onDel(scope.row)" v-auth="'del'">{{ $t('message.iotCard.index.table.actions.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import api from '/@/api/modules/iotCard';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useSearch } from "/@/hooks/useCommon"
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const { params, tableData, getList, loading } = useSearch<any[]>(
  api.simCard.getList,
  "Data"
)

getList();

const router = useRouter();

/** 重置按钮操作 */
const resetQuery = () => {
  params.keyWord = ""
  getList();
};

/**
 * 单一删除
 */
const onDel = (row: any) => {
  ElMessageBox.confirm(t('message.iotCard.index.messages.deleteConfirm', { cardNumber: row.accNumber }), t('message.iotCard.index.messages.tip'), {
    confirmButtonText: t('message.iotCard.index.messages.confirm'),
    cancelButtonText: t('message.iotCard.index.messages.cancel'),
    type: 'warning',
  }).then(async () => {
    await api.simCard.deleteItem({ ids: [row.id] });
    ElMessage.success(t('message.iotCard.index.messages.deleteSuccess'));
    getList();
  });
};

const formatOperator = (val: any) => {
  // 1：电信 2：联通 3：移动
  const operators = ['', t('message.iotCard.index.operators.telecom'), t('message.iotCard.index.operators.unicom'), t('message.iotCard.index.operators.mobile')];
  return operators[val];
}

const formatType = (val: any) => {
  // 1：月卡 2：季卡 3：年卡 4：其他
  const types = ['', t('message.iotCard.index.types.monthly'), t('message.iotCard.index.types.quarterly'), t('message.iotCard.index.types.yearly'), t('message.iotCard.index.types.other')];
  return types[val];
}

const formatStatus = (val: any) => {
  // 1：可激活 2：测试激活 3：测试去激活 4：在用 5：停机 6：运营商管理状态
  const statuses = ['', t('message.iotCard.index.status.activatable'), t('message.iotCard.index.status.testActivated'), t('message.iotCard.index.status.testDeactivated'), t('message.iotCard.index.status.inUse'), t('message.iotCard.index.status.suspended'), t('message.iotCard.index.status.operatorManaged')];
  return statuses[val];
}

const onOpenDetail = (item: any) => {
  router.push('/iotmanager/iotCard/index/detail/' + item.id);
}
</script>
