<script setup lang="ts" name="bind-device">
import type { MjFormProps, MjGridProps } from '#/components/mj/mj-table'

import { OpenEmojiRight, OpenEmojiWrong } from '@vben/icons'

import { bindDeviceService } from '#/api/service/user/bind-device'
import { deviceControlService } from '#/api/service/user/device-control'
import MjTable, { mj_form_select } from '#/components/mj/mj-table'
import hud from '#/utils/hud'
import obj from '#/utils/obj'

import BindChildDevice from '../common/bind-child-device/index.vue'

function loginUser(info: any) {
  let str = ''
  if (info?.name) {
    str += `【${info?.name}】`
  }
  if (info?.nickname) {
    str += `【${info?.nickname}】`
  }
  if (info?.account) {
    str += `【${info?.account}】`
  }
  return str
}

// 搜索表单
const searchForm = {
  items: obj.joinObjs({
    title: '解锁',
    field: 'lockFlag',
    span: 6,
    itemRender: {
      name: mj_form_select,
      options: [
        {
          label: '已解锁',
          value: 0,
        },
        {
          label: '已锁定',
          value: 1,
        },
      ],
    },
  }),
} as MjFormProps

// 表格
const gridRef = ref()
const grid = {
  columns: [
    { type: 'seq' },
    {
      field: 'simSerialNumber',
      title: '设备',
    },
    {
      title: '解锁',
      slots: { default: 'lockFlag' },
    },
    {
      field: 'lastLoginSimInfo',
      title: '最近登录用户',
      formatter({ cellValue }) {
        return loginUser(cellValue)
      },
    },
    {
      title: '最近登录头像',
      slots: { default: 'lastLoginAvatar' },
    },
    {
      field: 'lastLoginSimInfo.time',
      title: '最近登录时间',
    },
    {
      title: '最近锁定',
      field: 'lastLockTime',
    },
    {
      title: '最近解锁',
      field: 'lastUnlockTime',
    },
    {
      field: 'firstLoginSimInfo',
      title: '首次登录用户',
      formatter({ cellValue }) {
        return loginUser(cellValue)
      },
    },
    {
      title: '首次登录头像',
      slots: { default: 'firstLoginAvatar' },
    },
    {
      field: 'firstLoginSimInfo.time',
      title: '首次登录时间',
    },
    { fixed: 'right', title: '操作', slots: { default: 'operation' } },
  ],
} as MjGridProps

async function updateLock(row: any) {
  const option = row.lockFlag === 1 ? '解锁' : '锁定'
  hud.confirmLoad(`确定${option}【${row.simSerialNumber}】吗？`, {
    task: async () => {
      await deviceControlService.updateLock(row.simSerialNumber)
      gridRef.value?.reload()
    },
    hideError: true,
    option,
    hideSuccess: false,
  })
}

// 解绑所有
function unbindAll(row: any) {
  hud.confirmLoad(`确定清除【${row.simSerialNumber}】的所有绑定吗？`, {
    task: async () => {
      await bindDeviceService.unbindAll(row.simSerialNumber)
      gridRef.value?.reload()
    },
    hideError: true,
    option: '解绑',
    hideSuccess: false,
  })
}

// 绑定
const showBind = ref(false)
const selectDevice = ref({} as any)
function bind(row: any) {
  selectDevice.value = row
  showBind.value = true
}
</script>

<template>
  <div class="device-control g-container">
    <MjTable
      ref="gridRef"
      :grid="grid"
      :search-form="searchForm"
      :service="deviceControlService"
      hide-remove
      hide-toolbar
    >
      <template #firstLoginAvatar="{ row }">
        <div class="avatar">
          <img
            v-if="row.firstLoginSimInfo?.avatar"
            :src="row.firstLoginSimInfo?.avatar"
          />
        </div>
      </template>
      <template #lastLoginAvatar="{ row }">
        <div class="avatar">
          <img
            v-if="row.lastLoginSimInfo?.avatar"
            :src="row.lastLoginSimInfo?.avatar"
          />
        </div>
      </template>
      <template #operation="{ row }">
        <el-button
          :type="row.lockFlag === 1 ? 'success' : 'danger'"
          @click="updateLock(row)"
        >
          {{ row.lockFlag === 1 ? '解锁' : '锁定' }}
        </el-button>
        <el-button type="danger" @click="unbindAll(row)"> 解绑所有 </el-button>
        <el-button type="primary" @click="bind(row)"> 绑定 </el-button>
      </template>

      <template #lockFlag="{ row }">
        <div class="flex justify-center">
          <OpenEmojiWrong v-if="row.lockFlag === 1" width="36" />
          <OpenEmojiRight v-else width="36" />
        </div>
      </template>
    </MjTable>
    <BindChildDevice
      v-model="showBind"
      :sim-serial-number="selectDevice.simSerialNumber"
    />
  </div>
</template>

<style lang="scss" scoped>
.device-control {
  height: 100% !important;

  .avatar {
    display: flex;
    justify-content: center;

    img {
      width: 40px;
      height: 40px;
    }
  }
}
</style>
