<script setup lang="ts">
import { computed, PropType, reactive, ref, toRefs } from 'vue';
import { IParam, ITimeArea, IZreo } from '../models/ntp.datatype';
import {
  changeArea,
  getAreaList,
  getInitTime,
  getTimeList,
  getTimeSelect,
} from '../util/time-area.util';
import useStore from '@/stores';
import { IconCaretDown } from '@computing/opendesign-icons';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';

const props = defineProps({
  data: {
    type: Object as PropType<ITimeArea>,
    required: true,
    default: () => {
      return {};
    },
  },
});
const { data } = toRefs(props);
const timeAreaData = reactive(data.value);
let ibmcTime = undefined as any;
let originTimeSelect = {} as IZreo;

// 获取当前语言
const store = useStore();
const locale = store.state.loct.locale;

const emit = defineEmits(['change']);
const disabled = ref(!timeAreaData.timeZoneConfigurable);
const area = ref('');
const time = ref('');
const areaList = ref([] as IZreo[]);
const timeList = ref([] as IZreo[]);
let paramList: IParam[] = [];
const isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});
const hasBasicConfig = checkPrivil(UserPrivil.baseConfig);

/*
 * 时区选中项模型设置方法
 * 1、存在时区偏移量 ibmcTime
 * 2、UTC时区不添加偏移量
 * 3、已经添加偏移量的时区选中项不重复添加
 */
function addIbmcTime(timeSelect: IZreo) {
  if (ibmcTime && timeSelect.label.indexOf('UTC') < 0 && timeSelect.label.indexOf('GMT') < 0) {
    timeList.value.forEach(t => {
      if (t.key === timeSelect.key) {
        t.label = timeSelect.label + ibmcTime;
      }
    });
  }
}
function areaChange(areaSelect: string) {
  const changeData = changeArea(areaSelect, locale, originTimeSelect.key);
  paramList = changeData.paramList;
  timeList.value = changeData.timeList;
  timeChange(changeData.timeSelect.key);
}

function timeChange(timeSelect: string) {
  setDateTimeLocalOffset(timeSelect);
  time.value = timeSelect;
}

/*
 *回传时区信息给父界面
 */
function setDateTimeLocalOffset(timeSelect: string) {
  let newData = paramList.filter((obj: any) => obj.content === timeSelect)[0].value;
  if (timeAreaData.dateTimeLocalOffset !== newData) {
    let param = { DateTimeLocalOffset: newData };
    emit('change', param);
  } else {
    emit('change', {});
    addIbmcTime(originTimeSelect);
  }
}

function init() {
  const postData = getInitTime(timeAreaData);
  const areaData = getAreaList(locale);
  areaList.value = areaData;
  area.value = postData.time[1] ? postData.time[1] : areaData[0].key;
  const timeArr = getTimeList(area.value, locale);
  timeList.value = timeArr;
  const timeSelect = getTimeSelect(timeArr, area.value, postData.time[0]);
  originTimeSelect.key = timeSelect.time.key;
  originTimeSelect.label = timeSelect.time.label;
  time.value = timeSelect.time.key;
  ibmcTime = postData.ibmcTime;
  addIbmcTime(timeSelect.time);
  paramList = timeSelect.paramList;
}
init();
</script>

<template>
  <div id="timeArea">
    <div>
      <p v-t="'NTP_TIME'" class="form-title"></p>
    </div>
    <el-form ref="timeFormRef" label-width="auto" label-position="left">
      <el-form-item :label="$t('NTP_AREAS')">
        <el-select
          v-model="area"
          v-addId.select="'areaSelect'"
          :teleported="false"
          :disabled="disabled || isSystemLock || !hasBasicConfig"
          :suffix-icon="IconCaretDown"
          @change="areaChange(area)"
        >
          <el-option
            v-for="item in areaList"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('NTP_TIME')">
        <el-select
          v-model="time"
          v-addId.select="'timeSelect'"
          :teleported="false"
          :disabled="disabled || isSystemLock || !hasBasicConfig"
          :suffix-icon="IconCaretDown"
          @change="timeChange(time)"
        >
          <el-option
            v-for="item in timeList"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
