<template>
  <tf-dialog v-bind="$attrs" v-on="listeners" @submit="onSubmit" :loading="loading" width="768px">
    <el-form class="form" ref="form" v-bind="{ labelWidth: 'auto', size: 'small' }" :model="formData" :rules="rules">
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="排水类型" prop="type">
            <el-select v-model="formData.type" style="wdith: 100%">
              <el-option v-for="item of types" :key="item.codeValue" :label="item.notes" :value="item.notes" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缺陷名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入缺陷名称" maxlength="51" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="缺陷描述" prop="description">
        <el-input
          v-model="formData.description"
          type="textarea"
          placeholder="请输入缺陷描述"
          clearable
          rows="3"
          maxlength="1001"
        />
      </el-form-item>
      <el-form-item label="分析依据" prop="according">
        <el-input
          v-model="formData.according"
          type="textarea"
          placeholder="请输入分析依据"
          clearable
          rows="3"
          maxlength="1001"
        />
      </el-form-item>
      <el-form-item label="接口名称" prop="interfaceName">
        <el-input v-model="formData.interfaceName" placeholder="请输入接口名称" />
      </el-form-item>
      <el-form-item label="接口说明" prop="interfaceDescription">
        <el-input
          v-model="formData.interfaceDescription"
          type="textarea"
          placeholder="请输入接口说明"
          clearable
          rows="3"
          maxlength="1001"
        />
      </el-form-item>
      <el-form-item label="算法说明" prop="algorithmNote">
        <el-input
          v-model="formData.algorithmNote"
          type="textarea"
          placeholder="请输入算法说明"
          clearable
          rows="3"
          maxlength="1001"
        />
      </el-form-item>
      <el-form-item label="备注" prop="note">
        <el-input
          v-model="formData.note"
          type="textarea"
          placeholder="请输入备注"
          clearable
          rows="3"
          maxlength="1001"
        />
      </el-form-item>
    </el-form>
  </tf-dialog>
</template>

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

  @Component({ name: 'TeamForm', components: {} })
  export default class TeamForm extends Vue {
    @Prop({ type: Object, default: () => ({}) }) data!: object
    @Prop({ type: Boolean, default: false }) loading!: boolean
    @Prop({ type: Array, default: () => [] }) types!: IDictionary[]
    $refs!: { form: ElForm }

    formData: Partial<IFlaw> = {
      according: '',
      algorithmNote: '',
      description: '',
      id: undefined,
      interfaceDescription: '',
      interfaceName: '',
      name: '',
      note: '',
      type: ''
    }

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

    rules = {
      type: [{ required: true, message: '请选择排水类型', trigger: 'blur' }],
      name: [
        { required: true, message: '请输入缺陷名称', trigger: 'blur' },
        { max: 50, message: '缺陷名称不能超过50个字符', trigger: 'blur' }
      ],
      description: [
        { required: true, message: '请输入缺陷描述', trigger: 'blur' },
        { max: 1000, message: '缺陷描述不能超过1000字符', trigger: 'blur' }
      ],
      according: [
        { required: true, message: '请输入分析依据', trigger: 'blur' },
        { max: 1000, message: '分析依据不能超过1000字符', trigger: 'blur' }
      ],
      interfaceName: [{ required: false, max: 1000, message: '接口名称不能超过1000字符', trigger: 'blur' }],
      interfaceDescription: [{ required: false, max: 1000, message: '接口说明不能超过1000字符', trigger: 'blur' }],
      algorithmNote: [{ required: false, max: 1000, message: '算法说明不能超过1000字符', trigger: 'blur' }],
      note: [{ required: false, max: 1000, message: '备注不能超过1000字符', trigger: 'blur' }]
    }

    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.formData)
        }
      })
    }
    @Watch('data', { immediate: true })
    setDefaultData(val) {
      this.formData = val.id ? { ...val } : {}
    }
  }
</script>
