<template>
  <div class="d-flex flex-wrap pb-3">
    <!-- 添加 -->
    <a-modal
      :maskClosable="false"
      @cancel="$emit('closeModal')"
      destroyOnClose
      footer
      title="添加仪器"
      v-model="visible"
      width="700px"
    >
      <a-form :form="form" @submit="handleSubmit">
        <!-- 仪器中文名 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="仪器中文名"
        >
          <a-input
            placeholder="仪器中文名"
            v-decorator="[
                      'name',
                      {
                        rules: [
                          { required: true, message: '仪器中文名不能为空' },
                          { whitespace: true, message: '仪器中文名不能为空' },
                          { max: 140, massage: '仪器中文名最多140个字符' },
                        ],
                      },
                    ]"
          />
        </a-form-item>
        <!-- 仪器英文名 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="仪器英文名"
        >
          <a-input
            placeholder="仪器英文名"
            v-decorator="[
                      'englishname'
                    ]"
          />
        </a-form-item>
        <!-- 国别 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="国别"
        >
          <a-input
            placeholder="国别"
            v-decorator="[
                      'countries'
                    ]"
          />
        </a-form-item>
        <!-- 设备所属 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="设备所属"
        >
          <a-input
            placeholder="设备所属"
            v-decorator="[
                      'belonging'
                    ]"
          />
        </a-form-item>
        <!-- 编号 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="编号"
        >
          <a-input
            placeholder="编号"
            v-decorator="[
                      'identifier'
                    ]"
          />
        </a-form-item>
        <!-- 制造商 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="制造商"
        >
          <a-input
            placeholder="制造商"
            v-decorator="[
                      'manufactor'
                    ]"
          />
        </a-form-item>
        <!-- 型号 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="型号"
        >
          <a-input
            placeholder="型号"
            v-decorator="[
                      'model'
                    ]"
          />
        </a-form-item>
        <!-- 类型 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="类型"
        >
          <a-checkbox-group
            v-decorator="[
                      'modelIds',
                      {
                        rules: [
                          { required: true, message: '类型不能为空' },
                        ],
                      },
                    ]"
          >
            <a-checkbox :key="item.id" :value="item.id" v-for="item in typeLists">{{ item.name }}</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <!-- 价格 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="价格（万元）"
        >
          <a-input
            placeholder="价格（万元）"
            v-decorator="[
                      'money'
                    ]"
          />
        </a-form-item>
        <!-- 性能指标 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="性能指标"
        >
          <a-input
            placeholder="性能指标"
            v-decorator="[
                      'performance'
                    ]"
          />
        </a-form-item>
        <!-- 图片 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="图片"
        >
          <a-upload
            :action="upload"
            :before-upload="beforeUpload"
            @change="handleChange"
            list-type="picture"
            name="files"
            v-decorator="[
                      'picId',
                      {
                        rules: [
                          { required: true, message: '图片不能为空' },
                        ],
                      },
                    ]"
          >
            <a-button v-show="fileList.length - 0 === 0">
              <a-icon type="upload" />选择图片
            </a-button>
          </a-upload>
        </a-form-item>
        <!-- 规格 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="规格"
        >
          <a-input
            placeholder="规格"
            v-decorator="[
                      'specifications'
                    ]"
          />
        </a-form-item>
        <!-- 所属单位 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="所属单位"
        >
          <a-select
            placeholder="所属单位"
            style="width:100%"
            v-decorator="[
                      'research'
                    ]"
          >
            <a-select-option
              :key="index"
              :value="type.id"
              v-for="(type, index) in types"
            >{{ type.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 用途 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="用途"
        >
          <a-textarea
            placeholder="用途"
            v-decorator="['purpose',{
                        rules: [
                          { required: true, message: '用途不能为空' },
                        ],
                      },]"
          />
        </a-form-item>

        <a-form-item class="d-flex flex-row-reverse">
          <a-button @click="$emit('closeModal')" class="mr-3">取消</a-button>
          <a-button class="white--text" html-type="submit" type="primary">保存</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { upload, selInstrumentAdd } from 'config/api';
import { mapActions } from 'vuex';

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } };

export default {
  name: 'TransferAdd',
  props: { visible: { type: Boolean, default: false }, typeLists: { type: Array, default: () => [] } },
  data() {
    return {
      formItemLayout,
      tailItemLayout,
      form: this.$form.createForm(this, { name: 'transfer-add' }),
      upload: upload,
      fileList: [],
      //限制文件上传的格式和大小
      beforeUpload: file => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          this.$message.error('仅支持 JPG/PNG 格式的图片!');
        }
        return isJpgOrPng;
      },
      types: [],
    };
  },

  async created() {
    const params = {
      param: {
        pageNum: 1,
        pageSize: 10,
        model: 2,
      },
    };
    this.types = await this.getSelModelSearch(params);
  },

  methods: {
    ...mapActions(['getSelModelSearch']),

    // 上传图片
    handleChange(info) {
      if (info.file.status === 'done') {
        this.fileList.push(info.file.response.data[0].id);
      } else if (info.file.status === 'removed') {
        this.fileList = info.fileList;
      }
    },

    // 提交表单
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          try {
            const { fileList } = this;
            const params = { param: values };
            params.param.picId = fileList[0];
            const res = await selInstrumentAdd(params);
            const { data, msg, code } = res.data;
            // 清除新建项目标志数据
            if (code === 200) {
              this.$message.success('添加成功');
              this.$emit('handleTableChange');
            } else {
              throw msg;
            }
            this.$emit('closeModal');
          } catch (error) {
            this.$emit('closeModal');
            this.$message.error(error || '添加仪器失败');
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="stylus"></style>
