<template>
  <div class="d-flex flex-wrap pb-3">
    <!-- 添加 -->
    <a-modal :closable="false" :maskClosable="false" 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
            @change="changeIpt($event, 'serviceName')"
            class="ml-3"
            placeholder="服务名称"
            v-decorator="[
              'serviceName',
              {
                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-textarea
            @change="changeIpt($event, 'intro')"
            class="ml-3"
            placeholder="服务简介"
            v-decorator="[
              'intro',
              {
                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-textarea
            @change="changeIpt($event, 'content')"
            class="ml-3"
            placeholder="服务内容"
            v-decorator="[
              'content',
              {
                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-number class="ml-3" v-model="orders" />
        </a-form-item>
        <!-- 图片 -->
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片">
          <a-upload :action="upload" :before-upload="beforeUpload" @change="handleChange" class="ml-3" list-type="picture" name="files">
            <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-select @change="getUse($event, 'recStatus')" class="ml-3" default-value="正常" style="width: 100%">
            <a-select-option :key="index" :value="index" v-for="(item, index) in recStatusList">{{ item }}</a-select-option>
          </a-select>
        </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, saveService } from 'config/api';

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

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

export default {
  name: 'RDMemberAdd',
  props: { visible: { type: Boolean, default: false } },
  data() {
    return {
      formItemLayout,
      tailItemLayout,
      form: this.$form.createForm(this, { name: 'r-d-member-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;
      },
      recStatusList: ['正常', '禁用'],
      serviceTypeList: ['创新平台', '孵化平台', '产业平台'],
      serviceName: '',
      content: '',
      intro: '',
      orders: '',
      picId: '',
      recStatus: 0,
      serviceType: 0,
    };
  },

  methods: {
    // 上传图片事件
    handleChange(info) {
      // this.fileList = fileList;
      console.log(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;
      }
    },
    changeIpt(e, str) {
      this[str] = e.target.value;
    },
    getUse(e, str) {
      this[str] = e;
    },
    // 提交表单
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          if (this.fileList.length > 0) {
            try {
              this.picId = this.fileList[0];
              const params = {
                param: {
                  name: this.serviceName,
                  content: this.content,
                  intro: this.intro,
                  orders: this.orders,
                  picId: this.picId,
                  recStatus: this.recStatus,
                  serviceType: 1,
                },
              };
              const res = await saveService(params);
              const { data, msg, code } = res.data;
              if (code === 200) {
                this.$emit('handleTableChange');
                this.$emit('closeModal');
                this.$message.success('添加成功');
              } else {
                throw msg;
              }
            } catch (error) {
              this.$message.error(error || '添加失败');
            }
          } else {
            this.$message.error('请上传图片');
          }
        }
      });
    },
  },
};
</script>

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