<!--
  @description: 反馈管理---反馈人---查看详情
  @Modifier: zcy/张慢慢
  @routerPath: complaintsSuggestions/complaintsSuggestions-detail
  @date: 2021-11-18 15:02
-->
<template>
  <div class="p0-16">
    <section class="title title_border">
      <i class="iconfont icon-fanhui pointer" @click="back()" />
      查看反馈
    </section>
    <!-- 反馈信息 -->
    <complaintsSuggestionsCom :id="$route.params.id" @successInfo="successInfo" />
    <!-- isShowSubmitButton false不显示 true显示 点击了追加提问按钮显示此内容 -->
    <el-form v-if="isShowSubmitButton" ref="formData" :model="formData" :rules="rules" :inline-message="true">
      <table class="from_table">
        <tr class="singleRow">
          <td>
            <el-form-item label="反馈主要内容" prop="replyContents" />
          </td>
          <td>
            <el-form-item>
              <el-input v-model="formData.replyContents" type="textarea" />
            </el-form-item>
          </td>
        </tr>
        <tr class="singleRow">
          <td>
            <el-form-item label="相关证明材料" prop="file" />
          </td>
          <td>
            <upload
              ref="upload"
              :on-change="replyFile"
              :data="fileData"
              :auto-delete="true"
              :auto-upload="true"
              :file-size="200"
              title=""
              accept=".pdf"
              tip-text="上传附件格式（.pdf）单个文件不得超过200M"
              file-ref="fileRef"
            />
          </td>
        </tr>
      </table>
    </el-form>
    <div class="but_footer">
      <div class="but_footer-h" />
      <div class="but_footer-but">
        <!--
          complaintsState 01表示已回复 可以继续追加提问
          isShowSubmitButton false表示可以追加提问按钮 true表示已点击追加提问，显示提交按钮
        -->
        <el-button v-if="$route.params.complaintsState === '01' && !isShowSubmitButton" :loading="confirmLoading" type="primary" @click="handleAdd()">
          追加提问
        </el-button>
        <el-button v-if="isShowSubmitButton" :loading="confirmLoading" type="primary" @click="submitForm('formData')">
          提交
        </el-button>
        <el-button :loading="confirmLoading" @click="back">
          返回
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
/* api */
import { addComplaintsReply } from '@/api/procurement/procurementProject' // 追加反馈
/* 组件 */
import upload from '@comp/common/updownload/upload' // 附件上传组件
import complaintsSuggestionsCom from './complaintsSuggestionsCom.vue' // 反馈内容信息
/* 公用方法*/
import { randomData } from '@/assets/js/utils' // 常用方法
import { characters1_auto } from '@/assets/js/validate'
import { compaintsSuggestionsGroupMixins } from '../mixins/complaintsSuggestionsGroupMixins' // 公共字典
export default {
  components: {
    upload,
    complaintsSuggestionsCom // 反馈内容信息
  },
  mixins: [compaintsSuggestionsGroupMixins],
  data() {
    return {
      confirmLoading: false,
      formData: {
        replyId: '', // 创建的新的id，保存时需前端传
        complaintsState: '00', // 回复状态 00未回复 01已回复 02草稿 (默认00)
        isReply: '00', // 00:追加 01:回复
        replyContents: '', // 提出投诉的基本事实
        replyUserName: '', // 反馈方名称
        replyPhone: '', // 电话
        file: '', // 反馈回复附件
        mainId: ''
      },
      rules: {
        replyContents: [{ required: true, validator: characters1_auto }], // 提出投诉的基本事实
        file: [{ required: true, message: '请上传', trigger: 'change' }] // 反馈回复附件
      },
      isShowSubmitButton: false // 是否展示提交按钮 默认不展示 当点了追加提问后展示提交按钮
    }
  },
  mounted() {
    // 判断id是否存在
    if (this.$route.params.id) {
      this.init() // 初始化信息
    }
  },
  methods: {
    // 初始化信息
    init() {
      this.formData.replyId = randomData() // 随机生成id
      this.fileData.bizId = this.formData.replyId // 赋值附件bizid
    },
    // 追加提问按钮
    handleAdd() {
      this.isShowSubmitButton = true // 显示提交按钮
    },
    // 提交反馈
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('确认提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          }).then(() => {
            addComplaintsReply(this.formData).then((res) => {
              this.$message.success(`操作成功`)
              this.back() // 返回列表
            })
          })
        }
      })
    },
    // 上传
    replyFile(file, fileList) {
      if (fileList.length > 0) {
        this.$set(this.formData, 'file', 'true')// 上传了
      } else {
        this.$set(this.formData, 'file', '')// 未上传
      }
    },
    // 子组件问题反馈信息
    successInfo(data) {
      this.formData.replyUserName = data.replyUserName // 反馈人名称
      this.formData.replyPhone = data.replyPhone // 反馈人电话
      this.formData.mainId = data.mainId // 主表id
    },
    // 返回上一级
    back() {
      this.$router.push('/complaintsSuggestions/complaintsSuggestions-list')
    }
  }
}
</script>
