<template>
  <tf-dialog v-bind="$attrs" v-on="listeners" @submit="onSubmit" width="773px" top="7vh">
    <el-row :gutter="15">
      <el-col>
        <el-form
          class="form"
          ref="form"
          v-bind="{ labelWidth: 'auto', size: 'medium' }"
          :model="formData"
          :rules="rules"
        >
          <el-form-item
            v-for="{ name, label, type, required, options, disabled, placeholder, ...rest } of formItems"
            :style="{ width: !fwList.includes(label) ? '50%' : '100%', float: 'left' }"
            :key="name"
            :required="required"
            :label="label + '：'"
            :prop="name"
          >
            <el-date-picker
              v-if="type === 'date'"
              v-model="formData[name]"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd"
              :disabled="disabled"
              :placeholder="`请选择${label}`"
              clearable
              size="medium"
              v-bind="rest"
            />
            <el-select
              v-else-if="type === 'select'"
              v-model="formData[name]"
              filterable
              :placeholder="`请选择${label}`"
              size="medium"
              clearable
              v-bind="rest"
              :style="{ width: !fwList.includes(label) ? '100%' : '44%' }"
            >
              <el-option v-for="item in options" :key="item.id" :label="item.notes" :value="item.codeValue" />
            </el-select>
            <template v-else-if="type === 'dateRange'">
              <el-date-picker
                v-model="formData['statisticalPeriodStartDate']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd"
                :disabled="disabled"
                :placeholder="`统计周期开始时间`"
                clearable
                size="medium"
                v-bind="rest"
              />&nbsp;&nbsp;至&nbsp;&nbsp;
              <el-date-picker
                v-model="formData['statisticalPeriodEndDate']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd"
                :disabled="disabled"
                :placeholder="`统计周期结束时间`"
                clearable
                size="medium"
                v-bind="rest"
              />
            </template>
            <el-upload
              v-else-if="type === 'upload'"
              class="upload-demo"
              action="''"
              multiple
              :on-change="handleChange"
              :file-list="fileList"
              :auto-upload="false"
            >
              <el-button size="small" type="primary">添加文件</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
            </el-upload>
            <el-input
              v-else
              v-model="formData[name]"
              :type="type || 'text'"
              :disabled="disabled"
              :placeholder="name === 'no' ? '系统自动添加' : placeholder ? placeholder : `请输入${label}`"
              size="medium"
              clearable
              v-bind="rest"
            />
          </el-form-item>
          <el-row style="display: inline-block; width: 100%"> </el-row>
        </el-form>
      </el-col>
    </el-row>
  </tf-dialog>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { ElForm } from 'element-ui/types/form'
import { IPhoto } from '../commonAPI/common'
import { getByKeys } from '../commonAPI/request'

const getDefaultValue = (): Partial<IPhoto> => ({
  imgType: undefined,
  groupName: undefined,
  groupCode: undefined,
  files: undefined
})

@Component({ name: 'IndexForm' })
export default class IndexForm extends Vue {
  @Prop({ type: Object, default: () => ({}) }) data!: object
  $refs!: { form: ElForm }
  formData = {
    ...getDefaultValue()
  }

  get listeners() {
    const { submit, ...rest } = this.$listeners
    return rest
  }

  fwList = ['图片类型']

  types = []

  fileList = []

  get formItems() {
    return [
      { label: '图片类型', name: 'imgType', required: true, type: 'select', options: this.types },
      { label: '分组名称', name: 'groupName', placeholder: '请输入项目或者公司名称，如：宜昌两网' },
      { label: '分组代码', name: 'groupCode', placeholder: '输入项目或者公司代码，如：HB01' },
      { label: '附件', name: 'files', type: 'upload' }
    ]
  }

  rules = {
    imgType: [{ required: true, message: '请选择图片类型' }]
  }

  created() {
    this.getDictionaryValue()
  }

  onSubmit() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        let fd = new FormData()
        for (let i = 0; i < this.fileList.length; i++) {
          fd.append('files', this.fileList[i].raw)
        }
        fd.append('imgType', this.formData.imgType)
        fd.append('groupName', this.formData.groupName)
        fd.append('groupCode', this.formData.groupCode)
        this.$emit('submit', fd)
      }
    })
  }

  @Watch('data', { immediate: true })
  setDefaultData(val: IPhoto) {
    this.formData = { ...getDefaultValue() }
  }

  async getDictionaryValue() {
    let pType = await getByKeys({ keys: 'IMG_TYPE' })
    this.types = pType.result.IMG_TYPE
  }

  handleChange(file, fileList) {
    this.fileList = fileList
  }
}
</script>
<style lang="scss" scoped>
</style>
