<template>
  <div>
    <div class="content-head">
      <dataBreadcrumb :breads="breads"></dataBreadcrumb>
      <h3>回复澄清问题</h3>
      <h5>投标方回复招标方澄清问题</h5>
    </div>
    <div class="content">
      <div class="describe">澄清问题</div>
      <div class="clear-message">
        <div class="flex clear-item">
          <div>澄清问题标题：</div>
          <div>{{ detail.title }}</div>
        </div>
        <div class="flex clear-item">
          <div>澄清问题内容：</div>
          <div v-html="detail.content"></div>
        </div>
        <div class="flex">
          <div>澄清问题附件：</div>
          <ul>
            <li>
              <span>{{detail.fileName}}</span>
              <el-button size="mini" @click="down(detail.fileUrl)">下载</el-button>
            </li>
          </ul>
        </div>
      </div>
      <h3 class="title">澄清问题回复</h3>
      <div class="form">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
          <el-form-item label="回复内容" prop="replyContent">
            <el-input 
			   v-model="ruleForm.replyContent"
              :rows="2" 
              style="width: 500px;" 
              placeholder="请输入"
              type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="回复文件" prop="file">
            <singleUpload :limit="1" tip="上传一份,不超过10M" @input="getfile"></singleUpload>
          </el-form-item>
        
        </el-form>
        <div class="button">
          <el-button @click="cancle">取消</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  question,evaluateReply
} from '@api/supply/bid'

import dataBreadcrumb from '@components/dataBreadcrumb.vue'
import singleUpload from '@components/Upload/Upload.vue'

export default {
  components: {
    dataBreadcrumb,
    singleUpload
  },
  data() {
    return {
      id: '',
      accessoryPOList: [],
      detail: '',
      editorOption: {},
      breads: ['投标管理 ', '我参加的项目', '工作台'],
      ruleForm: {
        replyContent: '',
      },
      rules: {
         replyContent: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
      }
    }
  },
  created() {
    this.questionId = this.$route.query.questionId
    this.getquestion()
  },
  methods: {
	  down(url){
		window.open(url)  
	  },
    getfile(val) {
      this.ruleForm.filePOList=val
    },
    cancle() {
      this.$router.go(-1)
    },
    async getquestion() {
      try {
        const {
          code,
          data
        } = await question(this.questionId)
        if (code === 200) {
          this.detail = data
        }
      } catch (err) {
        console.log(err)
      }
    },
    //提交表单
    async submit() {
      try {
        const valid = await this.$refs['ruleForm'].validate()
        if (valid) {
			let ruleForm=this.ruleForm;
			ruleForm.questionId=this.questionId
          const {
            code,
            msg
          } = await evaluateReply(this.ruleForm)
          if (code === 200) {
            this.$message({
              message: msg,
              type: 'success'
            })
            this.$router.go(-1)
          }
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>


<style scoped>
	.content {
		padding: 0;
		padding-bottom: 100px;
	}

	.button {
		width: 200px;
		margin: 150px auto 0
	}

	.clear-message {
		margin-left: 70px;
	}

	.clear-message>div>span {
		color: #FF0000;
		margin-right: 5px;
	}

	.title {
		font-weight: 600;
		margin: 20px 0 20px 20px
	}

	.clear-item>div:last-child {
		width: 100px
	}
    .clear-item>div:first-child {
    	margin-right: 20px;
    }
	.clear-message>div {
		margin-bottom: 50px;
	}

	.clear-message ul>li>span {
		margin-right: 10px;
	}
</style>

