<template>
  <div class="flow-form-box">
    <template v-for="formItem in formItems" >
      <div class="form-item" :key="formItem.id" v-if="editable">
        <div class="label">{{ formItem.title }}</div>
        <div class="value">
          <a-input
            v-if="['TextInput', 'TextareaInput', 'SelectInput'].includes(formItem.name)"
            v-model="localFormData[formItem.id]"
          />
          <a-input-number
            v-else-if="formItem.name === 'NumberInput'"
            v-model="localFormData[formItem.id]"
          />
          <a-input
            v-else-if="formItem.name === 'AmountInput'"
            v-model="localFormData[formItem.id]"
          />
          <a-select
            v-else-if="formItem.name === 'MultipleSelect'"
            v-model="localFormData[formItem.id]"
            :options="formItem.props.options || []"
            mode="multiple"
          />
          <span v-else>{{ localFormData[formItem.id] }}</span>
        </div>
      </div>

      <!-- 非编辑模式 -->
      <div class="form-item" v-else-if="[
        'TextInput','NumberInput','TextareaInput','AmountInput','SelectInput','MultipleSelect',
        'DateTime','DateTimeRange','ImageUpload','FileUpload'
      ].includes(formItem.name)">
        <div class="label">{{ formItem.title }}</div>
        <div class="value" v-if="formItem.name === 'MultipleSelect'">
          {{ (formData[formItem.id] || []).join(', ') || '--' }}
        </div>
        <div class="value" v-else-if="formItem.name === 'DateTime'">
          {{ formData[formItem.id] ? formatDate(formData[formItem.id], formItem.props.format) : '--' }}
        </div>
        <div class="value" v-else-if="formItem.name === 'DateTimeRange'">
          <template v-if="formData[formItem.id] && formData[formItem.id].length === 2">
            {{ formatDate(formData[formItem.id][0], formItem.props.format) }} 至
            {{ formatDate(formData[formItem.id][1], formItem.props.format) }}
          </template>
          <span v-else>--</span>
        </div>
        <div class="value img-preview" v-else-if="formItem.name === 'ImageUpload'">
          <img
            v-for="id in formData[formItem.id] || []"
            :key="id"
            :src="`${baseURL}/api/oss/file/${id}`"
            style="width: 56px; height: 56px; cursor: pointer;"
          />
        </div>
        <div class="value" v-else-if="formItem.name === 'FileUpload'">
          <div class="attachment-box">
            <div
              v-for="attachmentId in formData[formItem.id] || []"
              :key="attachmentId"
              class="attachment-item"
              @click="onAttachmentDownload({ id: attachmentId }, $event)"
            >
              <div class="link">
                <FlowFileName :file-id="attachmentId" />
              </div>
              <div class="action">
                <i class="x-icon-download x-iconfont"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="value" v-else>
          {{ formData[formItem.id] || '--' }}
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import FlowFileName from './flowFileName.vue';
import { createServiceConfig } from '@/utils/util'

export default {
  name: 'FlowForm',
  components: { FlowFileName },
  props: {
    formItems: {
      type: Array,
      required: true
    },
    formData: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      localFormData: { ...this.formData },
      baseURL: createServiceConfig(process.env).baseURL
    };
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler(val) {
        this.localFormData = { ...val };
      }
    },
    localFormData: {
      deep: true,
      handler(val) {
        if (this.editable) {
          this.$emit('update:formData', val);
        }
      }
    }
  },
  methods: {
    formatDate(value, formatStr) {
      if (!value) return '--';
      const date = new Date(value);
      const pad = (n) => (n < 10 ? '0' + n : n);
      if (formatStr === 'yyyy-MM-dd') {
        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
      }
      if (formatStr === 'yyyy-MM-dd HH:mm') {
        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
      }
      return date.toLocaleString();
    },
    onAttachmentDownload(attachment, evt) {
      console.log("*****************attachment",attachment)
      evt.stopPropagation();
      window.open(`${this.baseURL}/api/oss/file/${attachment.id}?download=true`, '_blank');
    }
  }
};
</script>

<style lang="less" scoped>
@import '../variables.module.less';

@FormLabelWidth: 84px;

.flow-form-box {
  padding: 10px 0;

  .form-item {
    font-size: 14px;
    display: flex;

    + .form-item {
      margin-top: 12px;
    }

    .label {
      color: #9ba5b3;
      width: @FormLabelWidth;
      white-space: nowrap;
      overflow: hidden;
      text-align: right;
      margin-right: 16px;
      flex-shrink: 0;
    }

    .value {
      color: #1d2129;
      display: flex;
      align-items: flex-start;
      width: calc(100% - @FormLabelWidth - 16px);
      word-wrap: anywhere;
      word-break: break-all;
    }
  }

  .img-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .attachment-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .attachment-item {
      background-color: #f7f8fa;
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 13px;
    }
  }
}
</style>
