<template>
  <div id="volumeInfo" class="marginTop">
    <div class="left">
      <div class="system-icon controller-img"></div>
      <p class="infoTitle">{{ $t('STORE_VOLUME_INFO') }}</p>
      <el-button
        v-if="hasBaseConfigPrivil"
        :id="'settingBtn'"
        :disabled="systemLocked || startCollectingLogs || onTask"
        class="settingBtn"
        size="small"
        @click="show()"
      >
        {{ $t('HOME_FDM_ALARM_SETTING') }}
      </el-button>
    </div>
    <div id="volumeContent">
      <template v-for="item in volume.data" :key="item">
        <div v-if="item && item[1] && !isString(item)" class="row">
          <p class="rowLeft">{{ $t(item[0]) }}</p>
          <p class="rowRight">{{ getI18n(item[1]) }}</p>
        </div>
      </template>
    </div>
  </div>
  <Dialog ref="dialog" :config="diaginfo" @close="dialogClose">
    <template #other>
      <VolumnEdit :volume-node="vNode.data" @change="change"></VolumnEdit>
    </template>
  </Dialog>
  <Dialog ref="secondDialogRef" :config="secondDialogConfig" @close="closeModal" />
</template>

<script lang="ts" setup>
import { factory } from './volumes.service';
import { StorageTree, Volume, VolumeNode, VolumeEditModel } from '../../models';
import { onMounted } from '@vue/runtime-core';
import useStore from '@/stores';
import { computed, inject, reactive, ref, watch } from 'vue';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import { traduction } from '@/utils/language';
import Dialog from '@/components/Dialog/Dialog.vue';
import VolumnEdit from './volumn-edit/VolumnEdit.vue';
import { VolumeEditService } from './volumn-edit/volume-edit.service';
import { loading, showFailedMessage, showSuccessMessage } from '@/utils/composition';
const store = useStore();
let systemLocked = computed(() => {
  return store.state.glob.systemLocked;
});
const diaginfo = reactive({
  id: 'volumnEdit',
  type: 'warning',
  content: '',
  title: traduction('HOME_FDM_ALARM_SETTING'),
  okButton: { id: 'volumn_edit_ok_button' },
  cancelButton: { id: 'volumn_edit_cancel_button' },
});
const dialog = ref();
const secondDialogConfig = reactive({
  id: 'secondDialog',
  title: traduction('COMMON_CONFIRM'),
  content: traduction('COMMON_ASK_OK'),
});
const secondDialogRef = ref();
const hasBaseConfigPrivil = checkPrivil(UserPrivil.baseConfig);
let volumeNode: VolumeNode;
const volume = reactive({ data: {} });
const isCache = ref(false);
const volumeEditService = new VolumeEditService();
const props = defineProps({
  data: {
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  },
  node: {
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  },
  collectList: {
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  },
  onTask: {
    type: Boolean,
    default: false,
  },
});
const collectList = reactive(props.collectList);
const raidId = ref('');
const startCollectingLogs = ref(false);
watch(props.collectList, newVal => {
  startCollectingLogs.value = props.collectList[raidId.value] || false;
});
let editPamers: any;
let editUrl: string;
let raidType: string;
const vNode = reactive(inject('clickNode') as any);

function factoryFun(node?: any) {
  factory(node ? node : volumeNode).then((nodeV: Volume) => {
    volume.data = nodeV;
    volume.data['getRaidIndex'] = node?.getRaidIndex || 0;
    editUrl = nodeV.getURL;
    raidType = node?.getRaidType;
    vNode.data.setVolume = nodeV;
  });
}
function show() {
  loading(true);
  dialog.value.show();
  dialog.value.disable();
}
function dialogClose(val: boolean) {
  if (val) {
    secondDialogRef.value.show();
  } else {
    dialog.value.hide();
  }
}
function closeModal(reason: boolean) {
  if (reason) {
    loading(true);
    volumeEditService
      .updateEditData(editUrl)
      .then(() => {
        factoryFun({ getUrl: editUrl, getRaidType: raidType });
        showSuccessMessage();
      })
      .catch(err => {
        const errCode = err.data.error[0].code;
        if (errCode === 'VolumeSetSuccessfully') {
          showSuccessMessage(traduction('SYSTEM_LOG_PCIE_TIP'));
        } else {
          showFailedMessage();
        }
      })
      .finally(() => {
        loading(false);
        dialog.value.hide();
      });
  } else {
    // 取消或者右上角关闭时保持设置弹窗按钮状态
    dialog.value.enable();
  }
  secondDialogRef.value.hide();
}
onMounted(() => {
  factoryFun(props.node);
  const { labelId, id } = vNode.data;  
  raidId.value = labelId?.replace('_' + id, '');
  startCollectingLogs.value = collectList[raidId.value] || false;
});
function getI18n(str?: any) {
  if (Object.prototype.toString.call(str) === '[object Object]') {
    if (str.label) {
      return traduction(str.label);
    } else {
      return '--';
    }
  }
  return str;
}
defineExpose({
  factoryFun,
});
function change(pamers: boolean) {
  if (!pamers) {
    dialog.value.enable();
  } else {
    dialog.value.disable();
  }
}
function isString(arr: any) {
  return Object.prototype.toString.call(arr) === '[object String]';
}
</script>

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

  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 72px;
    border-right: 1px solid var(--o-border-color-light);
    width: 183px;
  }
  #volumeContent {
    flex: 1;
  }
}
.row {
  width: 50%;
  float: left;
  padding: 8px 0;
  .rowLeft {
    width: 35%;
    display: inline-block;
    font-size: 12px;
    color: var(--o-text-color-secondary);
  }
  .rowRight {
    width: 65%;
    display: inline-block;
    font-size: 12px;
    color: var(--o-text-color-secondary);
  }
}
.controller-img {
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  background: url(@/assets/assets-bmc/default/storage_control.svg) 50% 50%;
}
#settingBtn {
  margin-top: 8px;
}
</style>
