<template>
  <div class="app-container">
    <el-card>
      <el-form
        style="width:50%"
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="首页图片" prop="pic">
          <multi-upload v-model="selectProductPics" :maxCount="1"></multi-upload>
          <span style="color:#999">● 建议上传614*345分辨率的照片</span>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input
          placeholder="请输入标题"
          maxlength="27"
          show-word-limit
          v-model="ruleForm.title">
        </el-input>
        </el-form-item>
        <el-form-item label="内容" prop="textWord">
          <el-input
            type="textarea"
            maxlength="210"
            show-word-limit
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="ruleForm.textWord">
          </el-input>
        </el-form-item>
        <el-form-item label="更多" prop="evenMore">
          <editor v-model="ruleForm.evenMore" :min-height="192" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { getOne,aboutUsAdd } from '@/api/about';
import MultiUpload from '@/components/Upload/multiUpload';
import Editor from '@/components/Editor';
export default {
   components: {
    MultiUpload,
    Editor
  },
  data() {
    return {
      ruleForm: {
        pic: '',
        title: '',
        textWord: '',
        evenMore: '',
      },
      rules: {
        pic: [{ required: true, message: '请上传首页图片', trigger: 'blur' }],
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        textWord: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        evenMore: [{ required: true, message: '请输入更多详情', trigger: 'blur' }],
      }
    };
  },
  computed: {
    //主图和画册图片
    selectProductPics: {
      get: function() {
        let pics = [];
        if (
          this.ruleForm.pic === undefined ||
          this.ruleForm.pic == null ||
          this.ruleForm.pic === ''
        ) {
          return pics;
        }
        pics.push(this.ruleForm.pic);
        if (
          this.ruleForm.albumPics === undefined ||
          this.ruleForm.albumPics == null ||
          this.ruleForm.albumPics === ''
        ) {
          return pics;
        }
        let albumPics = this.ruleForm.albumPics.split(',');
        for (let i = 0; i < albumPics.length; i++) {
          pics.push(albumPics[i]);
        }
        return pics;
      },
      set: function(newValue) {
        if (newValue == null || newValue.length === 0) {
          this.ruleForm.pic = null;
          this.ruleForm.albumPics = null;
        } else {
          this.ruleForm.pic = newValue[0];
          // this.ruleForm.picList = newValue;
          this.ruleForm.albumPics = '';
          if (newValue.length > 1) {
            for (let i = 1; i < newValue.length; i++) {
              this.ruleForm.albumPics += newValue[i];
              if (i !== newValue.length - 1) {
                this.ruleForm.albumPics += ',';
              }
            }
          }
        }
      }
    }
  },
  methods: {
    getData() {getOne
      getOne().then(res=>{
        this.ruleForm = res.data
      })
    },
    submitForm(formName){
      this.$refs[formName].validate(valid=>{
        if(valid){
          aboutUsAdd(this.ruleForm).then(res=>{
            this.msgSuccess(res.message)
          })
        }
      })
    },
  },
  created() {
    this.getData();
  }
};
</script>
