<template>
  <div class="dialog-container">
    <ElDialog
      v-el-drag-dialog
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      :width="width"
      @close="onCancel"
      @closed="$emit('closed')"
    >
      <el-card
        v-for="(item, index) in list"
        :key="index"
      >
        <div
          slot="header"
          class="clearfix"
        >
          {{ item.name }}
        </div>
        <ElForm
          ref="form"
          v-loading="formLoading"
          :model="formData"
          :label-width="labelWidth"
        >
          <ElFormItem
            v-for="field in formSchema.slice(item.startIndex, item.endIndex)"
            :key="field.key"
            :label="field.label"
          >
            <Component
              :is="field.component"
              v-if="field.component"
              v-bind="field.props"
              :value="field.value"
              clearable
            />
            <ElImage
              v-else-if="field.type === 'image'"
              style="width: 100px; height: 100px"
              :src="field.value"
              fit="cover"
            />
            <span
              v-else-if="field.type === 'date'"
            >
              {{ dayjs(field.value).format('YYYY-MM-DD HH:mm:ss') }}
            </span>
            <span
              v-else
              class="text"
            >
              {{ field.value ? field.dict ? $dict(field.dictType).get(field.value) : field.value : '--' }}
            </span>
          </ElFormItem>
        </ElForm>
      </el-card>
    </ElDialog>
  </div>
</template>

<script>
import ElDragDialog from '@/directives/el-drag-dialog'
import dayjs from 'dayjs'

export default {
  directives: {
    ElDragDialog
  },
  props: {
    list: {
      type: Array,
      required: true
    },
    title: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: null
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    schema: {
      type: Array,
      required: true
    },
    data: {
      type: Object,
      default: () => {
      }
    },
    fetchData: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      visible: false,
      formData: {},
      formSchema: [],
      formLoading: false
    }
  },
  created() {
    this.formData = this.data
    this.init()
  },
  methods: {
    dayjs,
    init() {
      this.formLoading = true
      this.fetchData().then(data => {
        this.formSchema = this.schema.map(field => {
          return {
            ...field,
            value: data[field.key]
          }
        })
        console.log('formSchema', this.formSchema)
      }).finally(() => {
        this.formLoading = false
      })
    },
    onCancel() {
      this.$emit('cancel')
      this.close()
    },
    show() {
      this.visible = true
    },
    close() {
      this.visible = false
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .el-card {
    margin-bottom: 3px;
  }

  .el-card__header {
    padding: 10px !important;
    font-size: 18px;
    font-weight: bold;
  }

  .el-card__body {
    padding: 10px 5px 5px;
    min-height: 50px;
  }

  .el-form-item {
    margin-bottom: 8px !important;
  }
}

.text {
  display: inline-block;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 10px;
}

@media (max-width: 1400px) {
  ::v-deep {
    .el-dialog {
      width: 80% !important;
    }
  }
}

@media (max-width: 1500px) {
  ::v-deep {
    .el-dialog {
      width: 70% !important;
    }
  }
}
</style>
