<template>
  <base-model :config="template_model">
    <template slot="dialog-body">
      <el-form
        ref="templateForm"
        v-loading="loading"
        :rules="rules"
        :model="form"
        class="demo-ruleForm"
        label-width="100px"
        size="small"
      >
        <el-form-item label="Name: " prop="Name">
          <el-input :maxLength="$inputMax" v-model="form.Name" />
        </el-form-item>
        <el-form-item label="Modality: " prop="ModalityId">
          <el-select v-model="form.ModalityId" style="width:100%">
            <el-option
              v-for="(key,value) of readingType"
              :key="key"
              :label="key"
              :value="value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Description: " prop="Description">
          <el-input :maxLength="$inputMax" v-model="form.Description" type="textarea" :rows="5" />
        </el-form-item>
      </el-form>
    </template>
    <template slot="dialog-footer">
      <el-button :disabled="btnLoading" size="small" type="primary" @click="template_model.visible = false">Cancel</el-button>
      <el-button size="small" type="primary" :loading="btnLoading" @click="handleSave">Save</el-button>
    </template>
  </base-model>

</template>
<script>
import { addOrUpdateQATemplate } from '@/api/dictionary'
import { template_model } from '../template'
import BaseModel from '@/components/BaseModel'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
export default {
  name: 'TemplateForm',
  components: { BaseModel },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      readingType: {},
      template_model,
      form: { Name: '', ModalityId: [], Description: '' },
      rules: {
        Name: [{ required: true, message: '请注明', trigger: 'blur' }, { max: 50, message: '最大长度为 50' }],
        ModalityId: [{ required: true, message: '请注明', trigger: 'blur' }],
        Description: [{ max: 500, message: '最大长度为 500' }]
      },
      btnLoading: false,
      loading: false,
      dictionaryList: {}
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    handleSave() {
      this.$refs.templateForm.validate(valid => {
        if (!valid) return
        this.btnLoading = true
        this.template_model.showClose = false
        addOrUpdateQATemplate(this.form).then(res => {
          this.$message.success(this.$t('common:message:savedSuccessfully'))
          this.btnLoading = false
          this.$refs['templateForm'].resetFields()
          this.$emit('close')
          this.template_model.showClose = true
        }).catch(() => {
          this.btnLoading = false
          this.template_model.showClose = true
        })
      })
    },
    async initForm() {
      await this.getDicData()
      if (Object.keys(this.data).length && this.data.Id) {
        this.form = { ...this.data }
      }
    },
    getDicData() {
      this.loading = true
      getBasicDataSelects(['ReadingType']).then(res => {
        const { ReadingType } = { ...res.Result }
        this.readingType = ReadingType || {}
        this.loading = false
      }).catch(() => { this.loading = false })
    }
  }
}
</script>
