<template>
  <div class="defaultReply">
    <el-row :gutter="24" style="margin-bottom: 100px">
      <el-form ref="elForm" :model="formData" :rules="rules" label-width="100px">
        <el-form-item style="margin-left: 30%;margin-top: 50px"  label="详细内容">
          <el-input v-model="formData.picTextDetailContent" placeholder="请输入详细内容"
                    :style="{width: '50%'}"
                    type="textarea"
                    maxlength="200"
                    :rows="10"
                    show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item style="text-align: center; margin-left: -54px;margin-top:10px;">
          <el-button type="primary" @click="submitForm" style="margin-left: 30%">提交</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import {
  getReplyByType,
  getReply,
  addReply,
  updateReply
} from '@/api/wxManage/wxreply'
export default {
  created() {
    this.getInfo()
  },
  data() {
    return {
      contentTextFlag:true,
      contentImageFlag:true,
      flag:false,
      dialogLoading: true,
      loadingText: '查询中',
      formData: {
        replyId: null,
        keyWords: null,
        keyWordsType: null,
        isUseKeyWords: null,
        title: null,
        author: null,
        synopsis: null,
        pictureUrl: null,
        picTextDetailContent: null,
        picTextUrl: null,
        replyType: '10710',
        contentType: '10620',
        lookNumber: null,
        createById: null,
        remark: null
      },
      rules: {
        replyType: [
          { required: true, message: "回复类型不能为空", trigger: "blur" },
        ],
        keyWords: [
          { required: true, message: "关键字不能为空", trigger: "blur" },
          { min: 1, max: 10, message: '用户名称长度必须介于 1 和 10 之间', trigger: 'blur' }
        ],
        keyWordsType: [
          { required: true, message: "关键字类型不能为空", trigger: "blur" },
        ],
        picTextDetailContent: [
          { required: true, message: "详细内容不能为空", trigger: "blur" },
        ],
        contentType: [
          { required: true, message: "内容类型不能为空", trigger: "change" },
        ]
      },
      pictureUrlAction: `${process.env.VUE_APP_BASE_API}` + '/common/uploadOSS',
      pictureUrlFileList: []
    }
  },

  methods:{
    getInfo() {
      this.loading = true;
      getReplyByType(this.formData.replyType).then(response => {
        if (response.data){
          this.formData = response.data;
        }
      });
    },
    handleDate(){
      if(this.formData.replyType === '10710' || this.formData.replyType === '10720'){
        this.formData.contentType = '10620'
        this.contentImageFlag = false

      }
      if(this.formData.replyType === '10730') {
        this.formData.contentType = ''
        this.contentImageFlag = true
      }
    },
    pictureUrlBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    pictureUrlUploadSuccess(response, file, fileList) {
      this.pictureUrlFileList = fileList
      if (this.pictureUrlFileList.length > 1) {
        this.pictureUrlFileList.splice(0, 1)
      }
      this.pictureUrlFileList[0].url = this.pictureUrlFileList[0].response.data.src
    },
    pictureUrlOnRemove(file, fileList) {
      this.pictureUrlFileList = fileList
    },
    //提交
    submitForm(){
      this.$refs['elForm'].validate(valid => {
        if (!valid) {
          return
        }
        if (this.pictureUrlFileList && this.pictureUrlFileList.length > 0) {
          this.formData.pictureUrl = this.pictureUrlFileList[0].url
        } else {
          this.formData.pictureUrl = ''
        }
        this.formData.isUseKeyWords = '0'
        this.dialogLoading = true
        this.loadingText = '保存中'
        if (this.formData.replyId !== undefined && this.formData.replyId !== null){
          updateReply(this.formData).then(res => {
            this.$message('保存成功')
            this.dialogLoading = false
            this.$emit('closeDialog')
            this.$emit('refresh')
            this.$root.$emit('refreshList');
          }).catch(e => {
            this.dialogLoading = false
            this.$message.error(e.data.msg)
          })
        }else {
          addReply(this.formData).then(res => {
            this.$message('添加成功')
            this.dialogLoading = false
            this.$emit('closeDialog')
            this.$emit('refresh')
            this.$root.$emit('refreshList');
          }).catch(e => {
            this.dialogLoading = false
            this.$message.error(e.data.msg)
          })
        }
      })
    },
    checkClose(done){
      this.$confirm('是否关闭表单，关闭后数据将丢失？').then(function() {
        done()
      }).then(() => {
      }).catch(() => {});
    },
    closeDialog() {
      var ctx = this
      this.$confirm('是否关闭表单，关闭后数据将丢失？').then(function() {
        ctx.$emit('closeDialog')
      }).then(() => {
      }).catch(() => {});
    }
  }
}

</script>

