<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-item clear-item">
          <div>澄清问题标题：</div>
          <div>{{ question.title }}</div>
        </div>
        <div class="flex-item clear-item">
          <div>澄清问题内容：</div>
          <div v-html="question.content"></div>
        </div>
        <div v-if="question.accessoryList" class="flex-item">
          <div>澄清问题附件：</div>
          <ul>
            <li v-for="(item,index) in question.accessoryList" :key="index">
              <span>{{ item.fileName }}</span>
              <el-button @click="download(item.accessoryUrl)">下载</el-button>
            </li>
          </ul>
        </div>
      </div>
      <h3 class="title">澄清内容</h3>
      <div class="form">
        <div class="clear-message">
          <div class="flex-item clear-item">
            <div>回复标题：</div>
            <div>{{ clarifies.title }}</div>
          </div>
          <div class="flex-item clear-item">
            <div>公告发布媒体：</div>
            <div>捷安采官网招投标专区</div>
          </div>
          <div v-if="clarifies.accessoryList" class="flex-item">
            <div>澄清问题附件：</div>
            <ul>
              <li v-for="(item,index) in clarifies.accessoryList" :key="index">
                <span>{{ item.fileName }}</span>
                <el-button @click="download(item.accessoryUrl)">下载</el-button>
              </li>
            </ul>
          </div>
          <div class="clear-item flex-item">
            <div>回复内容：</div>
            <div  v-html="clarifies.content"></div>
          </div>
        </div>
      </div>
      <h3 class="title">投标方列表</h3>
      <div class="table">
        <dataTable :table-data="tableData" :columns="columns">
          <el-table-column slot="operate" label="操作" align="center" fixed="right" width="200">
            <template slot-scope="scope">
              <el-button v-if="scope.row.confirmId" type="text" size="small" @click="handlesee(scope.row)">查看澄清确认回执</el-button>
            </template>
          </el-table-column>
        </dataTable>
      </div>
      <div class="button">
        <el-button @click="cancle">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  clarifiesDetail,
  questionDetail,
  bidClarifies
} from '@api/purchaser/bid'
import dataBreadcrumb from '@components/dataBreadcrumb.vue'
import multiUpload from '@components/Upload/multiUpload.vue'
import dataTable from '@components/nopageTable.vue'
import {
  quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    dataBreadcrumb,
    multiUpload,
    quillEditor,
    dataTable
  },
  data() {
    return {
		clarifiesId:"",
      question: '',
      clarifies: '',
      questionId: 1,
      tableData: [],
      columns: [{
        label: '单位名称',
        prop: 'companyName'
      },
      {
        label: '状态',
        prop: 'operationStatus'
      },
      {
        label: '确认时间',
        prop: 'updateTime'
      },
      {
        slot: 'operate'
      }
      ],
      editorOption: {},
      breads: ['招标管理', '招标项目管理', '工作台'],
      ruleForm: {
        title: '',
        release: '捷安采官网招标投专区'
      },
      rules: {
        title: [{
          required: true,
          message: '请输入',
          trigger: 'blue'
        }],
        release: [{
          required: true,
          message: '请输入',
          trigger: 'blue'
        }],
        file: [{
          required: true,
          message: '请输入',
          trigger: 'blue'
        }],
        content: [{
          required: true,
          message: '请输入',
          trigger: 'blue'
        }]
      }
    }
  },
  created() {
	 this.questionId=this.$route.query.questionId
	 this.clarifiesId=this.$route.query.noticeId
    this.getquestionDetail()
    this.getclarifiesDetail()
    this.getbidClarifies()
  },
  methods: {
    cancle() {
      this.$router.go(-1)
    },
    handlesee(row) {
      this.$router.push(`/purchaser/bid/bidStage/clearManagement/confirm?confirmId=${row.confirmId}`)
    },
    download(url) {
      window.open(url)
    },
    // 查看澄清
    async getclarifiesDetail() {
      try {
        const {
          code,
          data
        } = await clarifiesDetail(this.clarifiesId)
        if (code === 200) {
          this.clarifies = data
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 查看问题
    async getquestionDetail() {
      try {
        const {
          code,
          data
        } = await questionDetail(this.questionId)
        if (code === 200) {
          this.question = data
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 查看投标方列表
    async getbidClarifies() {
      try {
        let params = {}
        params.projectId = localStorage.getItem("projectId")
        params.noticeId = this.clarifiesId
        const {
          code,
          data
        } = await bidClarifies(params)
        if (code === 200) {
          for (let item of data) {
            if (!item.updateTime) {
              item.updateTime = '空'
            }
          }
          this.tableData = data
        }
      } catch (err) {
        console.log(err)
      }
    }
  }

}
</script>


<style scoped>
	.table {
		padding: 30px
	}

	.content {
		padding: 0;
		padding-bottom: 100px;
	}

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

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

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

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

	.clear-item>div:last-child {


	}

	.clear-item>div:first-child {
		margin-right: 30px;
	}

	.clear-message>div {
		margin-bottom: 50px;
	}

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