<template>
  <div>
    <div class="content-head">
      <dataBreadcrumb :breads="breads"></dataBreadcrumb>
      <h3>发布询价公告</h3>
      <h5>发布询价公告</h5>
    </div>
    <div class="othercontent">
      <!-- 基本信息 -->
      <div>
        <div class="describe">基本信息</div>
        <div class="form">
          <div class="flex-between" style="width:100%;margin-bottom: 20px;">
            <div>项目编号:{{projectCode}}</div>
            <div>项目名称:{{projectName}}</div>
          </div>
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
            <el-form-item label="询价公告名称" prop="title">
              <el-input v-model.trim="ruleForm.title" placeholder="请输入" style="width: 50%;" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="询价所在地" prop="address">
              <citySelect @sendprovinceId="getprovinceId" @sendcityId="getcityId" @senddistrictId="getdistrictId"></citySelect>
			</el-form-item>
			<el-form-item label="项目优先级" prop="priority" >
			  <el-radio-group v-model="ruleForm.priority">     
			    <el-radio :label="0">普通</el-radio>
			    <el-radio :label="1">紧急</el-radio>
			  </el-radio-group>
			</el-form-item>
            <div class="flex-between" style="width:60%">
              <el-form-item label="询价单编号" prop="inquiryCode">
                <el-input v-model.trim="ruleForm.inquiryCode" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入" maxlength="30" style="width: 250px;"></el-input>
              </el-form-item>
              <el-form-item label="采购目录" prop="purchaseCategory">
                <el-input v-model.trim="ruleForm.purchaseCategory" placeholder="请输入" maxlength="30" style="width: 250px;"></el-input>
              </el-form-item>
            </div>
            <div class="flex-between" style="width:60%">
              <el-form-item label="报价开始时间" prop="startTime">
                <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="选择日期时间" disabled style="width: 250px;">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="报价结束时间" prop="endTime">
                <el-date-picker v-model="ruleForm.endTime" type="datetime" placeholder="选择日期时间" disabled style="width: 250px;"> 
                </el-date-picker>
              </el-form-item>
              <el-form-item label="采购单位" prop="purchaseAgent">
                <el-input v-model.trim="ruleForm.purchaseAgent" disabled style="width: 250px;"></el-input>
              </el-form-item>   
            </div>
            <div class="flex-between" style="width:60%">
              <el-form-item label="采购单位联系人" prop="contact">
                <el-input v-model.trim="ruleForm.contact" disabled style="width: 250px;"></el-input>
              </el-form-item>  
              <el-form-item label="联系方式" prop="contactPhone">
                <el-input v-model.trim="ruleForm.contactPhone" disabled style="width: 250px;"></el-input>
              </el-form-item>
              <el-form-item label="传真号码" >
                <el-input v-model.trim="ruleForm.facsimile" placeholder="请输入" maxlength="30" style="width: 250px;"></el-input>
              </el-form-item>
            </div>
            <el-form-item label="预算总额(元)" prop="budget" style="width: 20%;">
				<el-input-number v-model="ruleForm.budget" :min="0" :controls="false" :precision="2" placeholder="请输入"></el-input-number>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 供应商要求 -->
      <div>
        <div class="describe">基本信息</div>
        <div class="form">
          <div class="flex-between" style="width:100%;margin-bottom: 20px;">
            <div>项目编号:{{projectCode}}</div>
            <div>项目名称:{{projectName}}</div>
          </div>
          <el-form ref="ruleForm1" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm">
            <el-form-item label="供应商规格要求" prop="supplierScale">
              <el-input v-model.trim="ruleForm.supplierScale" placeholder="请输入" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="供应商资格要求" prop="supplierQualification">
              <el-input v-model.trim="ruleForm.supplierQualification" placeholder="请输入" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="供应商区域范围要求" prop="supplierRegion">
              <el-input v-model.trim="ruleForm.supplierRegion" placeholder="请输入" maxlength="30"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 询价商品清单 -->
      <div>
        <div class="describe">询价商品清单</div>
        <div class="form">
          <dataTable :table-data="tableData" :columns="columns" :is-pageobj="false"></dataTable>
          <div class="flex" style="margin-top: 20px;">
            <div class="adjustment">上传文件</div>
            <singleUpload :limit="1" tip="支持扩展名：.rar .zip .doc .docx .pdf .jpg..." @input="getfile"></singleUpload>
          </div>
        </div>
      </div>
      <!-- 商务要求 -->
      <div>
        <div class="describe">商务要求</div>
        <div class="form">
          <el-form ref="ruleForm2" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商务要求" prop="commercialRequirements">
              <el-input v-model.trim="ruleForm.commercialRequirements" :rows="4" style="width: 60%;" placeholder="请输入" type="textarea" maxlength="300"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="bottomButton">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">提交审核</el-button>
      </div>
    </div>
  </div>
</template>

<script>
	import {  generateNumber} from '@/api/common/list'
import dataTable from '@components/nopageTable.vue'
import dataBreadcrumb from '@components/dataBreadcrumb.vue'
import citySelect from '@components/citySelect/citySelect.vue'
import singleUpload from '@components/Upload/Upload.vue'
import {
  createEnquiry
} from '@api/purchaser/bid'
import {
  getTime
} from '@utils/time'
import {
 commoditylist,inqueryinfo
} from '@api/common/list'

export default {
  components: {
    dataTable,
    dataBreadcrumb,
    citySelect,
    singleUpload
  },
  data() {
	   // 测试省份
    let islocal = (rule, value, callback) => {
      if (!this.ruleForm.provinceId) {
        callback(new Error('请选择省份'))
      } else if (!this.ruleForm.cityId) {
        callback(new Error('请选择市'))
      } else if (!this.ruleForm.districtId) {
        callback(new Error('请选择区'))
      } else {
        callback()
      }
    }
	  let checkfacsimile = async (rule, value, callback) => {
	      const reg = /^(?:\d{3,4}-)?\d{7,8}(?:-\d{1,6})?$/
	      if (reg.test(value)) {
	        callback();
	      } else {
	        return callback(new Error('请输入正确的传真号'));
	      }
	  };
    return {
		projectName:"",
		projectCode:"",
      breads: ['招标管理', ' 招标项目管理', '工作台'],
      tableData: [],
	  columns: [
	  	{
	  		label: '标的名称',
	  		prop: 'bidName'
	  	},
	  	{
	  		label: '数量',
	  		prop: 'quantity'
	  	},
	  	{
	  		label: '计量单位',
	  		prop: 'unit'
	  	},
	  	{
	  		label: '品牌',
	  		prop: 'brand'
	  	},
	  	{
	  		label: '规格型号',
	  		prop: 'specification'
	  	},
	  	{
	  		label: '标杆价(元)',
	  		prop: 'price'
	  	},
	  	{
	  		label: '备注',
	  		prop: 'remark'
	  	},
	  ], 
      ruleForm: {
        title: '',
        projectId: '',
        cityId: '',
        districtId: '',
        inquiryCode: '',
        priority: '',
        startTime: '',
        endTime: '',
        purchaseAgent: '1',
        contact: '1',
        contactPhone: '1',
        facsimile: '',
        budget: undefined,
        supplierScale: '',
        supplierQualification: '',
        supplierRegion: '',
        commercialRequirements: '',
		accessoryPOList:[],
		purchaseCategory:""
      },

      rules: {
        address: [{
          required: true,
          validator: islocal,
          trigger: 'change'
        }],
        budget: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        title: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        inquiryCode: [{
          required: true,
          message: '请输入请输入',
          trigger: 'blur'
        }],
        contact: [{
          required: true,
          message: '请输入请输入',
          trigger: 'blur'
        }],
        contactPhone: [{
          required: true,
          message: '请输入请输入',
          trigger: 'blur'
        }],
        startTime: [{
          required: true,
          message: '请输入',
          trigger: 'change'
        }],
        endTime: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        purchaseAgent: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        facsimile: [{
          required: true,
           validator: checkfacsimile,
          trigger: 'blur'
        }],
        supplierScale: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        supplierQualification: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        supplierRegion: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        commercialRequirements: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
	  let userInfo=JSON.parse(localStorage.getItem("userInfo"))
	  this.ruleForm.purchaseAgent=userInfo.companyName
	  this.ruleForm.contact=userInfo.name
	  this.ruleForm.contactPhone=userInfo.phone
  	let data=getTime();
	this.ruleForm.startTime=data;
	this.projectCode=localStorage.getItem("projectCode")
	this.projectName=localStorage.getItem("projectName")
	this.getcommoditylist()
	this.getinqueryinfo()
	this.getGenerateNumber()
  },
  methods: {
    // 获取上传文件
    getfile(val) {
   
    },
	getfile(val) {
	  for (let item of val) {
	    item.accessoryUrl = item.fileUrl
	  }
	    this.ruleForm.accessoryPOList = val
	},
	// 获取编号
	async getGenerateNumber() {
	  const {data} = await generateNumber(3)
	  this.ruleForm.inquiryCode = data
	},
    // 获取市ID
    getprovinceId(val) {
      this.ruleForm.provinceId = val
    },
    // 获取省ID
    getcityId(val) {
      this.ruleForm.cityId = val
    },
    // 获取城ID
    getdistrictId(val) {
      this.ruleForm.districtId = val
    },
    cancel() {
      this.$router.go(-1)
    },
    //提交表单
    async submit() {
      try {
        const valid = await this.$refs['ruleForm'].validate()
		const valid1 =await  this.$refs['ruleForm1'].validate()
		const valid2 =await  this.$refs['ruleForm2'].validate()
        console.log(valid)
        if (valid&&valid1&&valid2) {
			let ruleForm=this.ruleForm;
			ruleForm.projectId=localStorage.getItem("projectId")
			console.log("通过")
          const {
            code,
            msg
          } = await createEnquiry(ruleForm)
          if (code == 200) {
            this.$message({
              message: msg,
              type: 'success',
              duration:1500
            })
            setTimeout(()=>{
            	 this.$router.go(-1)
            },1500)
          }else{
			  this.$message.error(msg)
		  }
        }
      } catch (err) {
        console.log(err)
      }
    },
	// 获取列表
	async getcommoditylist() {
		let projectId=localStorage.getItem("projectId")
	      const {
	        data,
	        code
	      } = await commoditylist(projectId)
	     this.tableData=data
	  },
	  // 获取招标截止时间
	  async getinqueryinfo() {
	  	let projectId=localStorage.getItem("projectId")
	        const {
	          data,
	          code
	        } = await  inqueryinfo(projectId)
	     this.ruleForm.endTime=data.endTime;
	    },
  }

}
</script>

<style scoped>
	.othercontent>div {
		background: #FFFFFF;
		margin-bottom: 20px;
	}

	.form {
		padding: 10px 20px 20px 20px
	}

	.adjustment {
		margin-top: 5px;
		margin-right: 10px;
	}
</style>
