<template>
  <base-model :config="setting_model">
    <template slot="dialog-body">
      <el-form
        ref="templateSettingForm"
        :rules="rules"
        :model="form"
        class="demo-ruleForm"
        label-width="100px"
        size="small"
      >
        <el-form-item label="Item: " prop="Name">
          <el-input v-model="form.Name" />
        </el-form-item>
        <el-form-item label="Modality: " prop="ModalityIdList">
          <el-select v-model="form.ModalityIdList" multiple 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 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="setting_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 { addOrUpdateQATemplateItem } from '@/api/dictionary'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
import { setting_model } from '../template'
import BaseModel from '@/components/BaseModel'
export default {
  name: 'TemplateSettingForm',
  components: { BaseModel },
  props: {
    data: {
      type: Object,
      default() { return {} }
    }
  },
  data() {
    return {
      setting_model,
      form: {
        Name: '', ModalityIdList: [], Description: ''
      },
      rules: { Name: [{ required: true, message: 'Please specify', trigger: 'blur' }, { max: 50, message: 'The maximum length is 50' }],
        ModalityIdList: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        Description: [{ max: 500, message: 'The maximum length is 500' }]
      },
      readingType: {},
      btnLoading: false
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    handleSave() {
      this.$refs.templateSettingForm.validate(valid => {
        if (!valid) return
        this.btnLoading = true
        this.setting_model.showClose = false
        addOrUpdateQATemplateItem(this.form).then(res => {
          this.$message.success('Saved successfully!')
          this.btnLoading = false
          this.$refs['templateSettingForm'].resetFields()
          this.$emit('close')
          this.setting_model.showClose = true
        }).catch(() => {
          this.btnLoading = false
          this.setting_model.showClose = true
        })
      })
    },
    async initForm() {
      await this.getDicData()
      if (Object.keys(this.data).length && this.data.Id) {
        this.form = { ...this.data }
      }
    },
    getDicData() {
      getBasicDataSelects(['ReadingType']).then(res => {
        const { ReadingType } = { ...res.Result }
        this.readingType = ReadingType || {}
      }).catch(() => {})
    }
  }
}
</script>
