<script setup lang="ts">
import { computed, reactive, ref, toRefs } from 'vue';
import { imgSort, screenArray } from '../util/video.util';
import { IconHelpCircle, IconAlertCircle } from '@computing/opendesign-icons';
import { setOnOffVal } from '@/services/video-service';
import useStore from '@/stores';
import { traduction } from '@/utils/language';
import { showFailedMessage } from '@/utils/composition';


const store = useStore();

const props = defineProps({
  enabled: {
    type: Boolean,
    required: true,
    default: false,
  },
  data: {
    type: Object,
    required: true,
    default: () => {
      return {};
    },
  },
});
const { enabled, data } = toRefs(props);
let originEnabled = enabled.value;
const screenEnabled = ref(enabled.value);
const screenGroup = ref(screenArray);
const isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});
const dialogConfig = reactive({
  id: 'lastCaptureEnableId',
  content: traduction('COMMON_ASK_OK'),
  title: traduction('ALARM_OK'),
});
const dialogRef = ref();

initData(data.value);
function initData(iData: any) {
  if (iData && JSON.stringify(iData) !== '{}') {
    const count = 3;
    const arrNew = [];
    for (let i = 0; i < count; i++) {
      arrNew.push(iData[`Time${i}`]);
    }
    const videoImgSort = imgSort(Array.from(arrNew));
    for (let i = 0; i < videoImgSort.length; i++) {
      if (videoImgSort[i].value !== '' && videoImgSort[i].value !== null) {
        screenGroup.value[i].img = `/tmp/web/img${videoImgSort[i].key}.jpeg`;
        screenGroup.value[i].date = videoImgSort[i].value;
        screenGroup.value[i].status = true;
      }
    }
  }
}

function changeSwitch() {
  dialogRef.value.show();
}

function dialogClose(reason: boolean) {
  dialogRef.value.hide();
  if (reason) {
    if (originEnabled !== screenEnabled.value) {
      const param = { ScreenshotEnabled: screenEnabled.value };
      setOnOffVal(param).then(
        (res: any) => {
          store.state.event.setEventState({
            type: 'alertMessage',
            value: { type: 'success', message: traduction('COMMON_SUCCESS') },
          });
          originEnabled = screenEnabled.value;

          if (res.data && res.data !== '') {
            screenEnabled.value = res.data.ScreenshotEnabled;
            originEnabled = res.data.ScreenshotEnabled;
            initData(res.data.ScreenshotCreateTime);
          }
        },
        error => {
          const errorCode = error?.data?.error?.[0]?.code;
          if (errorCode) {
            store.state.event.setEventState({
              type: 'alertMessage',
              value: {
                type: 'error',
                message: traduction(errorCode + '.errorMessage') || traduction('COMMON_FAILED'),
              }
            });
          } else {
            showFailedMessage();
          }
        },
      );
    }
  } else {
    screenEnabled.value = originEnabled;
  }
}
</script>

<template>
  <div id="lastCaptureId" class="content-content">
    <div class="content-title">{{ $t('LAST_SCREEN') }}</div>
    <!--显示截屏信息  -->
    <div class="captureInfoArea">
      <div class="last-capture-switch">
        <span v-t="'VIDEO_RECORDING_LAST_FUNC'" class="capture-title"></span>
        <el-tooltip effect="light" :content="$t('VIDEO_LAST_SCRREN_TIP')" placement="top" trigger-keys>
          <el-icon :size="16" class="tip"><IconHelpCircle /></el-icon>
        </el-tooltip>
        <el-switch
          id="picId"
          v-model="screenEnabled"
          :disabled="isSystemLock"
          @change="changeSwitch"
        ></el-switch>
      </div>
      <div>
        <div v-for="(item, index) in screenGroup" :key="item.id" class="capture-info">
          <div :id="'captureInfoImgId' + index" class="capture-info-img">
            <el-image
              v-if="item.status"
              :id="'img' + index"
              class="small-img"
              :src="item.img"
              :preview-src-list="[item.img]"
              :hide-on-click-modal="true"
              fit="cover"
            >
              <template #error>
                <div class="image-slot">
                  <div class="center">
                    <el-icon :size="16"><IconAlertCircle /></el-icon>
                    <p>{{ traduction('LOAD_FAILED') }}</p>
                  </div>
                </div>
              </template>
            </el-image>
          </div>
          <span :id="'captureDate' + index" class="capture-info-date">
            {{ item.status ? item.date : '--' }}
          </span>
        </div>
      </div>
    </div>
  </div>
  <Dialog ref="dialogRef" :config="dialogConfig" @close="dialogClose" />
</template>

<style lang="scss" scoped>
#lastCaptureId {
  margin-top: 16px;
  padding: 24px;
  background: var(--o-bg-color-base);
  border-radius: 4px;
  flex: 1;

  .content-title {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
    font-weight: 600;
  }

  .last-capture-switch {
    height: 16px;
    display: flex;
  }
  .capture-title {
    color: var(--o-text-color-secondary);
  }
  .tip {
    color: var(--o-text-color-tertiary);
    margin-left: 4px;
    margin-right: 24px;

    &:hover {
      color: var(--o-color-primary-secondary);
    }
  }
  .capture-info {
    background: var(--o-bg-color-light);
    border-radius: 4px;
    margin-top: 10px;
    padding: 10px 16px;
    display: flex;
    &:first-child {
      margin-top: 24px;
    }
  }

  .capture-info-img {
    width: 118px;
    height: 90px;
    background: var(--o-border-color-base);
    border-radius: 1px;
  }

  .small-img {
    width: 100%;
    height: 100%;
  }

  .capture-info-date {
    margin-left: 24px;
    padding: 37px 0;
    color: var(--o-text-color-secondary);
  }

  .image-slot {
    background: var(--o-border-color-base);
    border-radius: 1px;
    height: 100%;
    text-align: center;
    .el-icon {
      color: var(--o-color-placeholder);
      margin-top: calc(50% - 32px);
    }
    p {
      color: var(--o-text-color-tertiary);
    }
  }
}
</style>
