<template>
  <div class="details">
    <div class="flex-between t1">
      <div class="flex">
        <div>项目名称：</div>
        <div>{{formdata.itemTitle}}</div>
      </div>
      <div class="flex">
        <div>项目编号：</div>
        <div>{{formdata.itemCode}}</div>
      </div>
      <div class="flex">
        <div>日期：</div>
        <div>{{formdata.itemTime}}</div>
      </div>
    </div>

    <div class="ueditor" v-show="isshow">
      <div>
        <div class="home">
          <!-- <breadCrumb :breads="breads"></breadCrumb> -->
          <h1>{{formdata.itemTitle}}</h1>
          <div class="flex-center">
            <h6 style="margin-right:60px;margin-top:30px">询价所在地:{{formdata.area}}</h6>
            <h6 style="margin-buttom:60px;margin-top:30px">日期:{{formdata.itemTime}}</h6>
          </div>
          <div class="form">
            <h3 style="margin-buttom:30px">基本信息</h3>
            <table border="0" width="100%" height="120px">
              <tr>
                <td>询价单编号</td>
                <td>{{formdata.itemCode}}</td>
                <td>采购记录</td>
                <td>{{formdata.record}}</td>
                <td>项目优先级</td>
                <td>{{formdata.priority}}</td>
              </tr>
              <tr>
                <td>报价开始时间</td>
                <td>{{formdata.startTime}}</td>
                <td >报价截止时间</td>
                <td :time = "endtime" @change="gettimer">{{formdata.endTime}}</td>
                <td>采购单位</td>
                <td>{{formdata.Purchasing}}</td>
              </tr>
              <tr>
                <td>采购单位联系人</td>
                <td>{{formdata.purchasingpPerson}}</td>
                <td>联系方式</td>
                <td>{{formdata.phone}}</td>
                <td>传真号码</td>
                <td>{{formdata.faxphone}}</td>
              </tr>
            </table>
            <div class="appendix">
              <div>预算金额(元)</div>
              <div>{{formdata.price}}</div>
            </div>
            <div class="appendix">
              <div>成交规则及确认方式</div>
              <div>{{formdata.style}}</div>
            </div>
            <h3>供应商要求</h3>
            <div class="appendix">
              <div>供应商规模要求</div>
              <div>{{formdata.Grequirements}}</div>
            </div>
            <div class="appendix">
              <div>供应商资格要求</div>
              <div>{{formdata.Zrequirements}}</div>
            </div>
            <div class="appendix">
              <div>供应商区域范围要求</div>
              <div>{{formdata.arearequirements}}</div>
            </div>
            <h3>询价商品清单</h3>
            <dataTable :table-data="tabledata" :columns="columns"></dataTable>
            <div class="appendix list pos">
              <div>附件</div>
              <div>IMG_0208.jpg</div>
              <!-- 此处放文件 -->
            </div>
            <h3>商务要求</h3>
            <div class="appendix bus-require pos">
              <div class="flex-center">
                <p>商务要求</p>
              </div>
              <div>{{formdata.content}}</div>
            </div>
            <div class="notice flex">
              <h4>招标公告</h4>
              <p>只有报价后才能参与投标报名</p>
            </div>
            <div class="Tips">图使馆招标公告(2020-07-30)</div>
            <div class="button">
              <el-button type="primary" @click="dialogFormVisible = true" v-show="isshowbutton">我要报价</el-button>
            </div>
          </div>
        </div>
        <el-dialog :visible.sync="dialogFormVisible" title="报价">
          <dataTable :table-data="tabledata" :columns="columns">
            <el-table-column slot="operate" label="操作" align="center" fixed="right" width="200">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="see(scope.row)">查看中标公告</el-button>
              </template>
            </el-table-column>
          </dataTable>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false" >提交报价</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import dataTable from "@/components/dataTable.vue";
import breadCrumb from "@/components/dataBreadcrumb.vue";
import {getenquirydetails} from '@/common/list.js'
export default {
  components: {
    dataTable,
    breadCrumb,
  },
  data() {
    return {
      formdata:{
        itemTitle:'苍南县公安局关于督查视频服务器5台在线询价公告',
        itemCode:'I1301000075017553011',
        itemTime:'2020-10-01',
        area:'苍南县',
        record:'无',
        priority:'非紧急',
        startTime:'2020-10-02 19:02',
        endTime:'2020-10-02 19:02',
        Purchasing:'苍南县公安局',
        purchasingpPerson:'王荔荣',
        phone:'13543466767',
        faxphone:'0571-88287963',
        price:'10000',
        style:'自动成交',
        Grequirements:'阿里巴巴',
        Zrequirements:'阿里巴巴',
        arearequirements:'浙江省',
        content:'1、 本次招标内容为开平碉楼与村落保护规划服务（具体详见技术要求）。投标人不得将本项目中的内容拆散来投标。 2、 投标人资格要求： （1）投标人应当是具有文物保护工程勘探设计甲级资质的法人，其中其业务范围必须包含文物保护规划编制； （2）投标人应当具有世界文化遗产保护规划设计的工作经验。 3、 投标人应当在投标文件中详细列出并提供相关证明文件证明本项目的管理负责人和技术负责人的学历、职称、从事相关工作的时间，承担过类似项目名称、责任内容、完成日期以及其它业绩证明材料。 4、 投标人应当具有完整的质量保证体系。 5、 投标人应当在投标文件中提供具有文物保护工程勘探设计资格证明等文件。',
        
      },
      endtime:'',
      isshow: true,
      isshowbutton:true,
      dialogFormVisible: false,
      breads: ["投标管理","在线报名","询价公告"],
      tabledata: [
        {
          name: "大白菜",
          acount: "100",
          unit: "斤",
          brand: "天然",
          size: "周杰伦",
          price: "100",
          remarks: "无",
          quote: "100.00",
        },
      ],
      columns: [
        {
          label: "标的名称",
          prop: "name",
        },
        {
          label: "数量",
          prop: "acount",
        },
        {
          label: "计量单位",
          prop: "unit",
        },
        {
          label: "品牌",
          prop: "brand",
        },
        {
          label: "规格型号",
          prop: "size",
        },
        {
          label: "标杆价",
          prop: "price",
        },
        {
          label: "备注",
          prop: "remarks",
        },
        {
          label: "我的报价(元)",
          prop: "quote",
        },
      ],
    };
  },
  created(){
    let id=this.$route.query.id;
    console.log(id)
    this.getenquirydetails(id)
  },
  methods: {
    Prev() {
      this.$router.push("/supply/web_sell/Join_items/work_place/all_content");
    },
    async getenquirydetails(id){
      const {data} = await getenquirydetails(id);
    },
    //截止时间到,隐藏我要报价按钮
    gettimer(){
      let d = new Date()
      if(this.endtime.getTime() < d.getTime()){
        this.isshowbutton = false
      }
    }
  },
};
</script>
<style>
.details {
  width: 9.3rem;
}
.details > div text {
  color: #979899;
}
.Tips {
  color: #409eff;
}
.notice > h4 {
  font-size: 16px;
  font-weight: bold;
  margin-right: 30px;
}
.notice {
  margin: 20px 0;
  border-bottom: 1px solid #ccc;
}
h2 {
  /* margin-top:; */
  margin-bottom: 10px;
}
h6 {
  margin-bottom: 10px;
}
.home {
  padding: 0px;
  background: #fff;
  box-sizing: border-box;
  /* margin-left:20px; */
}
h1 {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.form {
  padding: 20px;
  box-sizing: border-box;
}
.form h3 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: bold;
}
/* table>tr{
  text-align: center;
} */

table {
  border-collapse: collapse;
}
table > tr > td {
  font-size: 16px;
  border: 1px solid #ccc;
  padding-left: 10px;
}
table > tr > td:nth-child(odd) {
  background: #f0f0f0;
}
.right-s {
  padding-right: 200px;
}
.appendix {
  display: flex;
  border: 1px solid #ccc;
}
.appendix > div:first-child {
  width: 159px;

  border-right: 1px solid #ccc;
  box-sizing: border-box;
  padding-left: 10px;
}
.appendix > div:last-child {
  padding-left: 10px;
}
.appendix > div:nth-child(odd) {
  background: #f0f0f0;
}
.appendix > div {
  font-size: 16px;
  line-height: 40px;
}
.list > :first-child {
  height: 120px;
  line-height: 120px;
}
.list {
  margin-top: 20px;
}
.bus-require > div:first-child {
  width: 400px;
}
.bus-require > div:last-child {
  font-size: 10px;
}
.pos > div:first-child {
  display: flex;
  justify-content: center;
}

.last-pos {
  margin-left: 40px;
  margin-top: 20px;
}
.last-pos > div:first-child {
  width: 65px;
}
input {
  width: 100%;
  height: 70px;
}
.button {
  width: 100px;
  margin: 50px auto;
}
</style>
