<template>
  <BaseDialog v-bind="$attrs" v-on="listeners" @submit="onSubmit" :loading="loading">
    <el-form class="form" ref="form" v-bind="{ labelWidth: '9em', size: 'small' }" :model="formData">
      <el-form-item
        v-for="{ name, label, type, required = false, rules, options, on, ...rest } of formItems"
        :key="name"
        :required="required"
        :label="label"
        :rules="rules"
        :prop="name"
      >
        <el-switch v-if="type === 'switch'" v-model="formData[name]" v-bind="rest" />
        <el-select
          v-else-if="type === 'select'"
          v-model="formData[name]"
          v-bind="rest"
          v-on="on"
          :placeholder="`请选择${label}`"
        >
          <el-option v-for="dict of options" :key="dict.id" :value="dict.id" :label="dict.targetName" />
        </el-select>
        <el-input
          v-else
          v-model="formData[name]"
          :placeholder="`请输入${label}`"
          :type="type || 'text'"
          v-bind="rest"
          clearable
        />
      </el-form-item>
    </el-form>
  </BaseDialog>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import BaseDialog from '@/components/BaseDialog/index.vue'
import { ElForm } from 'element-ui/types/form'
import { IDeviceTypeParamDictionary, IDeviceTypeParam } from '../api/common'

const getDefaultData = () => ({ isshow: 1 })

@Component({ name: 'ParamForm', components: { BaseDialog } })
export default class ParamForm extends Vue {
  @Prop({ type: Object, default: () => ({}) }) data!: object
  @Prop({ type: Boolean, default: false }) loading!: boolean
  @Prop({ type: Array, default: () => [] }) dictionary!: IDeviceTypeParamDictionary[]

  $refs!: { form: ElForm }
  formData: Partial<IDeviceTypeParam> = getDefaultData()

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

  get formItems() {
    return [
      {
        label: '设备指标',
        name: 'dictionaryId',
        type: 'select',
        rules: [{ required: true, message: '请选择设备指标' }],
        required: true,
        options: this.dictionary,
        on: {
          change: this.onTypeChange
        }
      },
      { label: '指标名称', name: 'targetName', disabled: true },
      {
        label: '指标别名(缩写)',
        name: 'targetAlias',
        required: true,
        rules: [
          { required: true, message: '指标别名(缩写)不能为空！', trigger: 'blur' },
          { max: 40, message: '指标别名(缩写)不超过40个字符' }
        ],
        maxlength: 40
      },
      { label: '指标字段名', name: 'targetCode', disabled: true },
      { label: '指标单位', name: 'targetUnit', disabled: true },
      {
        label: '是否显示',
        name: 'isshow',
        type: 'switch',
        rules: [{ required: true, message: '请选择是否显示', trigger: 'blur' }],
        activeValue: 1,
        inactiveValue: 0
      },
      {
        label: '备注',
        name: 'remark',
        rules: [{ required: false, max: 255, message: '备注不能超过255个字符' }],
        type: 'textarea',
        rows: 4
      }
    ]
  }

  onTypeChange(id) {
    const { targetName, targetCode, targetUnit } = this.dictionary.find((item) => item.id === id) || {}
    this.formData = { ...this.formData, targetName, targetCode, targetUnit, targetAlias: targetName }
  }

  onSubmit() {
    this.$refs.form.validate((valid) => valid && this.$emit('submit', { ...this.formData }))
  }

  @Watch('data', { immediate: true })
  setDefaultData(val) {
    this.formData = val.id ? { ...val } : getDefaultData()
  }
}
</script>
