<script setup lang="ts">
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import { IconError } from '@computing/opendesign-icons';
import { getStoreData } from '@/utils/composition';
import { computed } from 'vue';
import useStore from '@/stores';
import { parseValue } from '../../utils/system.util';
import { DEFAULT_DATA } from '@/model/base-enum';

defineProps({
  data: {
    type: Object,
    required: true,
    default: () => {
      return {};
    },
  },
});
const store = useStore();
const productLabel = getStoreData('loct', 'sn');
const smsName = getStoreData('loct', 'smsName');
// 获取locked锁定值
let systemLockDownEnabled = computed(() => {
  return store.state.glob.systemLocked;
});
const hasBasicConfig = checkPrivil(UserPrivil.baseConfig);
</script>
<template>
  <div :id="data.id" class="system-product-info">
    <div class="system-title">
      <div class="system-title-content">
        <div class="system-icon" :class="data?.backgroundClassName" />
        <span v-t="data?.title" />
      </div>
    </div>
    <el-divider direction="vertical" />
    <div :id="data.id + 'Form'" class="system-detail">
      <div v-if="data.data?.length > 0" class="system-content">
        <div v-if="data.id === 'electronicPolicy'" class="disclaimer">
          {{ $t('INFO_WARRANTY_DISCLAIMER') }}
        </div>
        <template v-for="(item, index) in data?.data" :key="index">
          <div
            v-if="item.hide !== true"
            :id="item.id"
            class="system-product"
            :class="{
              'start-point':
                ((item.id === 'startPoint' || item.id === 'lifespan') && item.inputShow) ||
                (data?.data[index + 1]?.id === 'startPoint' && data?.data[index + 1]?.inputShow)
            }"
          >
            <div class="system-name">
              <span :title="$t(item.label, { softwareName: productLabel, smsName: smsName })">
                {{ $t(item.label, { softwareName: productLabel, smsName: smsName }) }}
              </span>
            </div>
            <div class="info-detail">
              <div v-if="!item.inputShow" :title="item.content">
                {{ item.id === 'assetTag' || item.id === 'position' ? parseValue(item.content) !== '' ? parseValue(item.content).replace(/\n/g, '') : DEFAULT_DATA.noDataStr : item.content || DEFAULT_DATA.noDataStr }}
                <el-tooltip
                  v-if="item.isEditable && !item.inputShow && hasBasicConfig"
                  effect="light"
                  :content="$t('COMMON_EDIT')"
                  placement="top"
                  trigger-keys
                >
                  <span
                    id="editorIcon"
                    class="icon-editor editor-icon"
                    :class="{ 'locking-edit-icon': systemLockDownEnabled }"
                    @click="item.editInfo(item)"
                  />
                </el-tooltip>
              </div>

              <div
                v-if="item.isEditable && item.inputShow && hasBasicConfig"
                :class="['input', { 'date-pick': item.id === 'startPoint' }]"
              >
                <el-date-picker
                  v-if="item.id === 'startPoint'"
                  v-model="item.editContent"
                  clearable="true"
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :placeholder="item.placeholderText"
                  @change="((val:any)=>{item.change(val, item)})"
                />
                <el-tooltip
                  v-else-if="item.id === 'lifespan'"
                  :visible="item.inputError"
                  class="tip"
                  manual="true"
                  placement="top"
                  trigger-keys
                >
                  <template #content>
                    <el-icon :size="16" class="error-icon">
                      <IconError v-if="item.inputError" />
                    </el-icon>
                    <span v-t="item.errorTip" class="error-text" />
                  </template>
                  <el-input
                    v-model="item.editContent"
                    :placeholder="item.placeholderText"
                    :class="{ 'error-input': item.inputError }"
                    @input="((val:any)=>{item.change(val, item)})"
                  />
                </el-tooltip>
                <el-tooltip
                  v-else
                  effect="light"
                  :content="item.toolTipText"
                  placement="top"
                  trigger="click"
                  trigger-keys
                >
                  <el-input
                    v-model="item.editContent"
                    type="textarea"
                    :maxlength="item.maxSize"
                    :placeholder="item.placeholderText"
                    show-word-limit="true"
                    validate-event="true"
                    :class="{ 'error-input': item.inputError }"
                    @input="((val:any)=>{item.change(val, item)})"
                  />
                </el-tooltip>
                <p
                  v-if="item.inputError && item.id !== 'lifespan' && item.id !== 'startPoint'"
                  v-t="'COMMON_FORMAT_ERROR'"
                  class="error"
                />
                <span
                  id="saveButton"
                  v-t="'COMMON_SAVE'"
                  :class="[
                    'text-button',
                    {
                      disable: item.inputError,
                      'button-padding': item.id === 'lifespan' || item.id === 'startPoint'
                    }
                  ]"
                  @click="item.confirm(item)"
                />
                <span
                  id="cancelButton"
                  v-t="'COMMON_CANCEL'"
                  class="text-button"
                  @click="item.cancel(item)"
                />
              </div>
            </div>
          </div>
        </template>
      </div>
      <div v-else>
        <div class="no-data">
          <img class="no-data-img" src="@/assets/common/image/no-data.svg" />
          <p class="no-data-text">
            {{ $t('INFO_INQUIRY_SYS_INFO', { smsName }) }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.system-product-info {
  display: flex;
  background: var(--o-bg-color-base);
  border-radius: 4px;
  margin-right: 24px;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 16px;
  &:not(:last-child) {
    margin-bottom: 8px;
  }
  .system-title {
    width: 16%;
    text-align: center;
  }
  .system-detail {
    float: left;
    width: 84%;
    display: grid;
    margin-left: 72px;
  }
  .system-content {
    padding-top: 8px;
    padding-bottom: 24px;
    height: 100%;
  }

  .system-product {
    display: flex;
    width: 50%;
    float: left;
    margin-top: 16px;
  }

  .product-img {
    background: url(@/assets/assets-bmc/default/product_information.svg) no-repeat;
  }
  .mainboard-img {
    background: url(@/assets/assets-bmc/default/main_information.svg) no-repeat;
  }
  .os-img {
    background: url(@/assets/assets-bmc/default/system_software.svg) no-repeat;
  }
  .insurance-img {
    background: url(@/assets/assets-bmc/default/insurance-policy.svg) no-repeat;
  }

  .info-detail {
    display: flex;
    padding-right: 16px;
    width: 80%;
    white-space: break-spaces;
    word-break: break-all;
  }

  .input {
    width: 80%;
  }

  .editor-icon {
    margin-left: 4px;
    cursor: pointer;
  }
  .icon-editor:hover:before {
    color: var(--o-color-primary-secondary);
  }

  .text-button {
    display: inline-block;
    color: var(--o-color-primary);
    text-align: right;
    margin-top: 8px;
    cursor: pointer;
    &:last-child {
      margin-left: 8px;
    }
  }

  .button-padding {
    margin-left: 8px;
  }

  .system-title-content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
  }

  .system-icon {
    width: 32px;
    height: 32px;
    background-size: contain;
    margin: 0 auto;
    margin-bottom: 12px;
  }

  .system-name {
    margin-right: 24px;
    flex: none;
    color: var(--o-text-color-secondary);
  }

  .text-class {
    font-size: 12px !important;
    line-height: 16px;
  }

  .el-divider--vertical {
    margin-top: 26px;
    margin-bottom: 22px;
    height: auto;
  }

  .no-data {
    text-align: center;
    margin-top: 32px;
    margin-bottom: 32px;
  }
  .no-data-img {
    margin-bottom: 8px;
  }

  .no-data-text {
    font-size: 12px;
    color: var(--o-text-color-tertiary);
    text-align: center;
    line-height: 16px;
    white-space: pre-wrap;
  }

  .error {
    color: var(--o-color-danger);
    margin-top: 4px;
  }

  .disable {
    color: #a8b4c9;
    cursor: not-allowed;
  }

  .start-point {
    margin-top: 24px;
  }

  #lifespan {
    .input {
      margin-top: -8px;
      display: flex;
      width: fit-content;
    }
    .text-button {
      width: -webkit-fill-available;
    }
  }
  .locking-edit-icon {
    cursor: not-allowed;
    pointer-events: none !important;
  }
}

.error-icon {
  top: 3px;
}

.error-text {
  margin-left: 8px;
}
:deep(.el-picker__popper) {
  margin-top: 8px !important;
}

.disclaimer {
  color: #8d98aa;
  line-height: 16px;
  margin-top: 16px;
}
</style>
<style lang="scss">
.system-product-info {
  .error-input {
    .el-textarea__inner,
    .el-input__inner {
      background: var(--o-color-danger-secondary);
      box-shadow: 0 0 0 1px inset var(--o-color-danger);
    }

    .el-input__inner:focus {
      background: var(--o-color-danger-secondary);
    }
  }

  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: $FONT-COLOR-PLACEHOLDER !important;
    font-size: $FONT-12 !important;
  }

  input::-moz-placeholder,
  textarea::-moz-placeholder {
    color: $FONT-COLOR-PLACEHOLDER !important;
    font-size: $FONT-12 !important;
  }

  .date-pick {
    margin-top: -8px !important;
    .el-icon {
      font-size: 16px;
    }
    .el-input__suffix-inner {
      .el-icon {
        top: 0px !important;
      }
    }
  }
}

.el-picker__popper {
  margin-top: 8px !important;
}

.el-message__content {
  top: 400px !important;
}

#lifespan .el-input__inner {
  width: 56px;
}
</style>
