<template>
  <div class="associated-device-timeline">
    <el-timeline :reverse="true">
      <el-timeline-item
        v-for="(item, index) in associatedDevices"
        :key="index"
        :timestamp="item.latestDevice.createTime | dateFormat"
        placement="top"
      >
        <el-card>
          <user-table-exhibit
            :user-profile="item.userProfile"
            :query-details="true"
          />
          <div class="associated-device-info block-info">
            <div class="text-item">
              <el-row>
                <el-col
                  :span="12"
                >{{ $t('pages.userBaseInfo.labels.language') }}：{{ item.latestDevice.language }}</el-col>
                <el-col :span="12">{{ $t('pages.userBaseInfo.labels.timezone') }}：{{ item.latestDevice.zoneId }}</el-col>
              </el-row>
            </div>
            <div class="text-item">
              <el-row>
                <el-col :span="12">{{ $t('pages.userBaseInfo.words.activeIp') }}：{{ item.latestDevice.ip }}</el-col>
                <el-col
                  :span="12"
                >{{ $t('pages.userBaseInfo.labels.client') }}：{{ item.latestDevice.requestClient }}</el-col>
              </el-row>
            </div>
            <div class="text-item">
              <el-row>
                <el-col
                  :span="12"
                  class="nowrap-ellipsis"
                >{{ $t('pages.userBaseInfo.labels.deviceModel') }}：<a :title="item.latestDevice.phoneModel">{{
                  item.latestDevice.phoneModel
                }}</a></el-col>
                <el-col
                  :span="12"
                >{{ $t('pages.userBaseInfo.labels.deviceSystem') }}：{{ item.latestDevice.phoneSysVersion }}</el-col>
              </el-row>
            </div>

            <div class="text-item">
              <el-row>
                <el-col
                  :span="12"
                >{{ $t('pages.userBaseInfo.labels.buildVersion') }}：{{ item.latestDevice.buildVersion }}</el-col>
                <el-col
                  :span="12"
                >{{ $t('pages.userBaseInfo.labels.appVersion') }}：{{ item.latestDevice.appVersion }}</el-col>
              </el-row>
            </div>

            <div class="text-item">
              <el-row>
                <el-col
                  :span="12"
                >{{ $t('pages.userBaseInfo.labels.pushPlatform') }}：{{ item.latestDevice.deviceType }}</el-col>
                <el-col
                  :span="12"
                >{{ $t('pages.userBaseInfo.labels.registerPlatformShort') }}：{{ item.latestDevice.sysOrigin }}</el-col>
              </el-row>
            </div>

            <div class="text-item">
              <el-row>
                <el-col
                  :span="24"
                  class="nowrap-ellipsis"
                >{{ $t('pages.userBaseInfo.labels.pushDevice') }}：<a :title="item.latestDevice.deviceId">{{
                  item.latestDevice.deviceId
                }}</a></el-col>
              </el-row>
            </div>
            <div class="text-item">
              <el-row>
                <el-col
                  :span="24"
                  class="nowrap-ellipsis"
                >{{ $t('pages.userBaseInfo.labels.imei') }}：<a :title="item.latestDevice.imei">{{
                  item.latestDevice.imei
                }}</a></el-col>
              </el-row>
            </div>
            <div class="text-item">
              <el-row>
                <el-col
                  :span="24"
                  class="nowrap-ellipsis"
                >{{ $t('pages.userBaseInfo.labels.registerTime') }}：<a
                  :title="item.userProfile.createTime | dateFormat"
                >{{ item.userProfile.createTime | dateFormat }}</a></el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
export default {
  props: {
    associatedDevices: {
      type: Array,
      require: true,
      default: () => []
    }
  },
  data() {
    return {}
  }
}
</script>
<style scoped lang="scss">
.associated-device-timeline {
  .block-info {
    position: relative;
    .text-item {
      height: 36px;
      line-height: 36px;
    }
  }
}
</style>
