<template>
  <a-card>

    <a-row  align="middle" justify="space-between" style="width: 100%; height: 68px" class="title">
      <a-col :span="12" >
        <a-space :size="50" >
          <span  style="font-size: 14px;font-weight: 500;" >OTA包名称：    {{state.otaDetail.otaPkgLabel}}   </span>
          <span  style="font-size: 14px;font-weight: 500;" >OTA包版本号：  {{state.otaDetail.otaPkgVersion}} </span>
        </a-space>
      </a-col>
      <a-col :span="4" >
        <a-button type="primary" @click="openModal" >下发OTA程序包</a-button>
      </a-col>
    </a-row>

    <a-row style="margin-top: 20px;">
      <a-col style="font-size: 20px;font-weight: 600;" >设备升级历史</a-col>
    </a-row>

    <a-table
      style="margin-top: 20px;"
      :columns="columns"
      :data-source="state.dataSource"
      :loading="state.loading"
      :pagination="queryState"
      @change="changePage"
    >
      <template #bodyCell="{column, record}">
        <template v-if="column.key === 'status'" >
          <a-tag :color="DeviceContriller.otaStatusMap.get(record.status)?.color">
            {{DeviceContriller.otaStatusMap.get(record.status)?.label}}
          </a-tag>
        </template>
      </template>
    </a-table>

  </a-card>

  <modal-pro
    label="下发OTA程序包"
    :open="state.visible"
    @cancel="state.visible = false"
    @ok="ok"
  >
    <a-form  :labelCol="{span: 6}" :wrapperCol="{span: 14}" >
      <a-form-item label="所属产品" v-bind="validateInfos.deviceId" >
        <!-- 这个写法丑陋的一批 -->
        <select-tsx
          v-model:value="otaState.deviceId"
          :request="async () => {
            const { data } = await DeviceContriller.list()
            return data.filter(_ => _.deviceStatus === 'CONNECT').map(item => ({name: item.deviceLabel, value: item.id, key: item.id}))
          }"
        />
        </a-form-item>
        <a-form-item label="所属OTA包" v-bind="validateInfos.otaPkgId" >
          <select-tsx
            v-model:value="otaState.otaPkgId"
            :request="async () => {
              const { data } = await OtaController.list()
              return data.map(item => ({name: item.label, value: item.id, key: item.id}))
            }"
          />
        </a-form-item>
    </a-form>
  </modal-pro>
</template>

<script setup lang="ts" >
import { DeviceContriller, OtaController } from '@/controller'
import { onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { Form } from 'ant-design-vue'
import { SelectTsx } from '@/components/MicroComponents/index'

const route = useRoute()

const deviceId = route.query.id as string

const columns = [
  {
    title: 'OTA名称',
    dataIndex: 'otaPkgLabel'
  },
  {
    title: 'OTA版本',
    dataIndex: 'otaPkgVersion'
  },
  {
    title: 'OTA升级时间',
    dataIndex: 'otaTime'
  },
  {
    title: '升级状态',
    dataIndex: 'status',
    key: 'status'
  }
]

const queryState = reactive<IOT.API.DEVICE.OtaQueryParams & {total: number}>({
  page: 1,
  pageSize: 10,
  deviceId: deviceId,
  otaLabel: '',
  otaStatus: '',
  otaVersion: '',
  total: 0
})

const state = reactive<{
  loading: boolean,
  visible: boolean
  dataSource: IOT.API.DEVICE.Ota[]
  otaDetail: Partial<IOT.API.DEVICE.Ota>
}>({
  loading: false,
  visible: false,
  dataSource: [],
  otaDetail: {}
})

const otaState = reactive({
  deviceId: '',
  otaPkgId: ''
})

const useForm = Form.useForm

const { resetFields, validate, validateInfos } = useForm(otaState, {
  deviceId: [{ required: true, message: '请选择设备' }],
  otaPkgId: [{ required: true, message: '请选择OTA程序包' }]
})

const openModal = () => {
  state.visible = true
  resetFields({})
}

const ok = () => {
  validate().then(async () => {
    await DeviceContriller.upgradationOtaByDeviceId(otaState)
    state.visible = false
    getOtaPkgByDeviceId()
    getOtaUpgradationRecordByDeviceId()
  })
}

const changePage = ({ current }) => {
  queryState.page = current
  getOtaUpgradationRecordByDeviceId()
}

const getOtaUpgradationRecordByDeviceId = async () => {
  state.loading = true
  const { data, sum } = await DeviceContriller.OtaUpgradationRecordByDeviceId(queryState)
  state.loading = false
  state.dataSource = data
  queryState.total = sum
}

const getOtaPkgByDeviceId = async () => {
  const { data } = await DeviceContriller.OtaByDeviceId(queryState.deviceId)
  state.otaDetail = data
}

onMounted(() => {
  getOtaPkgByDeviceId()
  getOtaUpgradationRecordByDeviceId()
})
</script>

<style lang="less" scoped >
@import '~@/styles/theme.less';

.title {
  background-color: @bg-color-1;
  padding-left: 40px;
}
</style>
