<template>
  <tf-dialog v-bind="$attrs" v-on="listeners" @submit="onSubmit" width="676px" top="7vh" v-if="$attrs.visible">
    <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, ...rest } of formItems"
            :style="{ width: '50%', float: 'left' }"
            :key="name"
            :required="required"
            :label="label"
            :prop="name"
            :class="{ fullWidth: name == 'dataSources' || name == 'linkedData' || name == 'explan' }"
          >
            <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: 100%"
            >
              <el-option v-for="item in options" :key="item.id" :label="item.notes" :value="item.codeValue" />
            </el-select>
            <template v-else-if="type === 'switch'">
              <el-radio v-model="formData[name]" label="是">是</el-radio>
              <el-radio v-model="formData[name]" label="否">否</el-radio>
            </template>
            <el-input
              v-else
              v-model="formData[name]"
              :type="type || 'text'"
              :rows="2"
              :disabled="disabled"
              :placeholder="name === 'no' ? '系统自动添加' : `请输入${label}`"
              size="medium"
              clearable
              v-bind="rest"
            />
          </el-form-item>
        </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 { IFWIndex, IKeyCode } from '../../commonAPI/common'
import { getByKeys } from '../../commonAPI/request'

const getDefaultValue = (): Partial<IFWIndex> => ({
  warningMethod: undefined,
  warningType: undefined,
  warningGroup: undefined,
  warningIndexCode: undefined,
  warningIndexName: undefined,
  warningIndexShortName: undefined,
  dataSources: undefined,
  linkedData: undefined,
  explan: undefined,
  isEnable: undefined
})

@Component({ name: 'EditForm' })
export default class EditForm extends Vue {
  @Prop({ type: Object, default: () => ({}) }) data!: object
  $refs!: { form: ElForm }
  formData: Partial<IFWIndex> = {
    ...getDefaultValue()
  }
  methods: IKeyCode[] = []

  types: IKeyCode[] = []

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

  get formItems() {
    return [
      { label: '预警方式', name: 'warningMethod', type: 'select', required: true, options: this.methods },
      { label: '预警类型', name: 'warningType', type: 'select', required: true, options: this.types },
      { label: '预警分组', name: 'warningGroup', required: true },
      { label: '预警指标代码', name: 'warningIndexCode', required: true },
      { label: '预警指标名称', name: 'warningIndexName', required: true },
      { label: '预警指标简称', name: 'warningIndexShortName', required: true },
      { label: '数据来源', name: 'dataSources' },
      { label: '关联数据', name: 'linkedData' },
      { label: '说明', name: 'explan', type: 'textarea' },
      { label: '是否启用', name: 'isEnable', type: 'switch', required: true }
    ]
  }

  rules = {
    warningMethod: [{ required: true, message: '请选择预警方式' }],
    warningType: [{ required: true, message: '请选择预警类型' }],
    warningGroup: [{ required: true, message: '请输入预警分组' }],
    warningIndexCode: [{ required: true, message: '请输入预警指标代码' }],
    warningIndexName: [{ required: true, message: '请输入预警指标名称' }],
    warningIndexShortName: [{ required: true, message: '请输入预警指标简称' }],
    isEnable: [{ required: true, message: '请选择是否启用' }]
  }

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

  @Watch('data', { immediate: true })
  setDefaultData(val: IFWIndex) {
    for (const key in val) {
      if (val[key] == '/') {
        val[key] = ''
      }
    }
    this.formData = val.id ? { ...val } : { ...getDefaultValue() }
  }

  async getDictionaryValue() {
    let pM = await getByKeys({ keys: 'WARNING_METHOD' })
    let pT = await getByKeys({ keys: 'WARNING_TYPE' })
    this.methods = pM.result.WARNING_METHOD
    this.types = pT.result.WARNING_TYPE
  }
}
</script>
<style lang="scss" scoped>
.fullWidth {
  width: 100% !important;
}
</style>
