<!--
  @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>
    <div>
      <!-- 反馈信息 -->
      <complaintsSuggestionsCom :id="$route.params.id" @successInfo="successInfo" />
      <!-- complaintsState 00表示待受理展示 01表示已受理不显示 -->
      <div v-if="$route.params.complaintsState === '00'">
        <p class="page-title">
          2.反馈受理
        </p>
        <el-form ref="suggestionsData" :model="suggestionsData" :rules="rules" :inline-message="true">
          <table class="from_table">
            <tr class="singleRow">
              <td>
                <el-form-item label="反馈回复标题" prop="replyTitle" />
              </td>
              <td>
                <gx-input
                  v-model.trim="suggestionsData.replyTitle"
                />
              </td>
            </tr>
            <tr class="singleRow">
              <td>
                <el-form-item label="反馈回复内容" prop="replyContents" />
              </td>
              <td colspan="3">
                <gx-input
                  v-model.trim="suggestionsData.replyContents"
                  type="textarea"
                />
              </td>
            </tr>
            <tr class="singleRow">
              <td>
                <el-form-item label="反馈回复附件" prop="file" />
              </td>
              <td colspan="3">
                <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">
            <el-button :loading="confirmLoading" type="primary" @click="submitForm('suggestionsData')">
              提交
            </el-button>
            <el-button :loading="confirmLoading" @click="back()">
              取消
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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