<template>
  <div class="othercontent">
    <div class="message1">
      <div>
        <div class="describe">基本信息</div>
        <div class="message-form">
          <el-form ref="ruleForm" :model="ruleForm" :rules="formrules" label-width="200px" class="demo-ruleForm">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model.trim="ruleForm.projectName" placeholder="请输入" maxlength="30"></el-input>
            </el-form-item>
            <div class="flex-between">
              <el-form-item label="项目编号：" prop="projectCode">
                <el-input v-model.trim="ruleForm.projectCode" placeholder="请输入" maxlength="30"></el-input>
              </el-form-item>
              <el-form-item label="项目分类：" prop="classify">
                <el-select v-model="ruleForm.classify" placeholder="请选择">
                  <el-option v-for="item in projectTypes" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="flex-between">
              <el-form-item label="采购单位：" prop="purchaseAgent">
                <el-input v-model.trim="ruleForm.purchaseAgent" placeholder="请输入" maxlength="30" disabled></el-input>
              </el-form-item>
              <el-form-item label="项目归属行业：" prop="industry">
                <el-select v-model="ruleForm.industry" placeholder="请选择">
                  <el-option v-for="item in belongTypes" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="flex-between">
              <el-form-item label="项目归属地区：" prop="region">
                <citySelect @sendprovinceId="getprovinceId" @sendcityId="getcityId" @senddistrictId="getdistrictId"></citySelect>
              </el-form-item>
              <el-form-item label="最小投标单位数：" prop="minTender">
                <el-input v-model.trim="ruleForm.minTender" placeholder="请输入" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="30" :min="3" :max="20" ></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="项目经理：" prop="projectManager"> 
                <el-select v-model="ruleForm.projectManager" placeholder="请选择">
                  <el-option v-for="item in managers" :key="item.id" :label="item.userName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="flex-between">
              <el-form-item label="招标联系人：" prop="contacts">
                <el-input v-model.trim="ruleForm.contacts" placeholder="请输入" maxlength="30"></el-input>
              </el-form-item>
              <el-form-item label="联系方式：" prop="contactsWay">
                <el-input v-model.trim="ruleForm.contactsWay" placeholder="请输入" maxlength="30"></el-input>
              </el-form-item>
            </div>
          </el-form>  
        </div>
      </div>
      <div>
        <div class="describe">标书费用信息</div>
        <div class="message-form">
          <el-form ref="bidBookInfoPO" :model="bidBookInfoPO" :rules="formrules" label-width="200px" class="demo-ruleForm">
            <div class="flex-between">
              <el-form-item label="标书费结算账号：" prop="account">
                <el-input v-model.trim="bidBookInfoPO.account" placeholder="请输入" maxlength="30"></el-input>
              </el-form-item>
              <el-form-item label="标书费结算开户行：" prop="bank">
                <el-input v-model.trim="bidBookInfoPO.bank" placeholder="请输入" maxlength="30"></el-input>
              </el-form-item>
            </div>
            <div class="flex-between">
              <el-form-item label="标书费结算账户名：" prop="accountName">
                <el-input v-model.trim="bidBookInfoPO.accountName" placeholder="请输入" maxlength="30"></el-input>
              </el-form-item>
              <el-form-item label="标书费结算联系电话：" prop="phone">
                <el-input v-model.trim="bidBookInfoPO.phone" placeholder="请输入" maxlength="30"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <div>
        <div class="describe">保证金费用信息</div>
        <div class="message-form">
          <el-form ref="earnestInfoPO" :model="earnestInfoPO" :rules="formrules" label-width="200px" class="demo-ruleForm">
            <div>
              <el-form-item label="是否需要投标保证金：" prop="isNeedEarnest">
                <el-radio-group v-model="ruleForm.isNeedEarnest">
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div v-show="ruleForm.isNeedEarnest">
              <div>
                <el-form-item label="投标保证金金额：" prop="money">
					<el-input-number v-model="earnestInfoPO.money" :min="0" :controls="false" :precision="2" placeholder="请输入"></el-input-number>
                </el-form-item>
              </div>
              <div class="flex-between">
                <el-form-item label="保证金结算账号：" prop="account">
                  <el-input v-model.trim="earnestInfoPO.account" placeholder="请输入" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="保证金结算开户行：" prop="bank">
                  <el-input v-model.trim="earnestInfoPO.bank" placeholder="请输入" maxlength="30"></el-input>
                </el-form-item>
              </div>
              <div class="flex-between">
                <el-form-item label="保证金结算账户名：" prop="userName">
                  <el-input v-model.trim="earnestInfoPO.userName" placeholder="请输入" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="保证金结算联系电话：" prop="phone">
                  <el-input v-model.trim="earnestInfoPO.phone" placeholder="请输入" maxlength="30"></el-input>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
      </div>
      <div>
        <div class="describe">招标方式</div>
        <div class="message-form">
          <el-form ref="bidTypeForm" :model="ruleForm" :rules="formrules" label-width="130px" class="demo-ruleForm">
            <el-form-item label="招标方式：" prop="bidType">
              <el-radio-group v-model="ruleForm.bidType">
                <el-radio :label="0">公开</el-radio>
                <el-radio :label="1">邀请</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div v-show="ruleForm.bidType==1">
            <div style="margin-bottom: 20px;">
              <el-button type="primary" @click="dialogFormVisible=true">添加</el-button>
              <el-button @click="delAllSelection">删除</el-button>
            </div>
            <dataTable :table-data="ruleForm.companyVOList" :columns="columns" :page-obj="pageObj" :margin-top="10" :margin-bottom="0" @sendSelection="getSelection">
              <el-table-column slot="operate" label="操作" align="center" fixed="right" width="100">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </dataTable>
          </div>
        </div>
      </div>
      <div>
        <div class="describe">流程设置</div>
        <div class="message-form flex-item">
          <div class="bid">执行策略：线上招标</div>
          <div>
            <el-form ref="isPubForm" :model="ruleForm" :rules="formrules" label-width="200px" class="demo-ruleForm">
              <el-form-item label="是否发布询价公告：" prop="isPublishAd">
                <el-radio-group v-model="ruleForm.isPublishAd">
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div>
        <div class="describe">项目内容</div>
        <div class="message-form">
          <el-form ref="contentForm" :model="ruleForm" :rules="formrules" label-width="200px" class="demo-ruleForm">
            <el-form-item label="项目内容：" prop="content">
              <el-input :rows="5" v-model.trim="ruleForm.content" type="textarea" prop="content" placeholder="请输入内容" maxlength="300">
              </el-input>
            </el-form-item>
            <el-form-item label="附件：" prop="file">
              <upload :tip="tip" :limit="20" :max="25" accept=".PDF,.JPG,.JPEG,.ZIP,.RAR" @input="getfile"></upload>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="button">
      <el-button @click="upper">取消</el-button>
      <el-button type="primary" @click="next()">下一步</el-button>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" title="选择邀请招标供应商">
      <dataTableList
        :columns="supplyColumns" 
        :page-obj="pageObj" 
        :margin-top="10" 
        :margin-bottom="0"
        :checklist="checklist"
		 url="/company/bidder/list">
        <el-table-column slot="operate" label="操作" align="center" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="choice(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </dataTableList>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  userList,
  industryList,
  projectClassifyList,
  generateNumber
} from '@/api/common/list'

import dataForm from '@components/dataForm.vue'
import dataTable from '@components/nopageTable.vue'
import dataTableList from '@components/dataTable.vue'
import upload from '@components/Upload/Upload.vue'
import changeNav from '@components/changeNav.vue'
import citySelect from '@components/citySelect/citySelect.vue'

// const bidMethods = [{
//   value: '公开',
//   label: '公开'
// }, {
//   value: '邀请',
//   label: '邀请' 
// }]


export default {
  components: {
    dataForm,
    dataTable,
    upload,
    changeNav,
    citySelect,
	dataTableList
  },
  data() {
	  let checkPhone = async (rule, value, callback) => {
	    if (!value) {
	      return callback(new Error('手机号不能为空'));
	    } else {
	      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
	      if (reg.test(value)) {
	        callback();
	      } else {
	        return callback(new Error('请输入正确的手机号'));
	      }
	    }
	  };
	  let isMin = (rule, value, callback) => {
	    if (!value) {
	      callback(new Error('请输入'))
	    } else if (value<3) {
	      callback(new Error('最小值为3'))
	    } else if (value>20) {
	      callback(new Error('最大值为20'))
	    } else {
	      callback()
	    }
	  }
    // 测试省份
    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()
      }
    }
    return {
      checklist: [{
        title: '单位名称',
        type: 'input',
        model: 'companyName'
      }],
      nav: ['供应商'],
      dialogFormVisible: false,
      tip: '请上传于招标项目相关的文件,如委托单,技术附件,招标方案,项目真是材料等(文件格式PDF,JPG,JPEG,ZIP,RAR,数量不超过20个,单个文件大小不超过25M)',
      managers: [],
      belongTypes: [],
      projectTypes: [],
      textarea: '',
      tableData: [],
      columns: [{
        selection: true
      },
      {
        label: '单位名称',
        prop: 'companyName'
      },
      {
        label: '联系人',
        prop: 'legalPersonName'
      },
      {
        label: '手机号',
        prop: 'legalPersonPhone'
      },

      {
        label: '邮件',
        prop: 'legalPersonEmail'
      },
      {
        slot: 'operate'
      }
      ],
      supplyColumns: [{
        label: '单位名称',
        prop: 'companyName'
      },
      {
        label: '联系人',
        prop: 'userName'
      },
      {
        label: '手机号',
        prop: 'phonenumber'
      },

      {
        label: '邮件',
        prop: 'email'
      },
      {
        slot: 'operate'
      }
      ],
      pageObj: {
        size: 10,
        currentPage: 1,
        func: (currentPage) => {
          this.pageTurning(currentPage)
        }
      },
      // 表单验证
      formrules: {
        content: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        account: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        bank: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        phone: [{
          required: true,  
         validator: checkPhone,
          trigger: 'blur'
        }],
        money: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        accountName: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
		userName: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        projectCode: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        projectName: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        classify: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        purchaseAgent: [{
          required: true,
          message: '请选择',
          trigger: 'blur'
        }],
        industry: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        region: [{
          required: true,
          validator: islocal,
          trigger: 'change'
        }],
        minTender: [{
          required: true,
         validator: isMin,
          trigger: 'blur'
        }],
        projectManager: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        contacts: [{
          required: true,
          message: '请选择',
          trigger: 'blur'
        }],
        contactsWay: [{
          required: true,
         validator: checkPhone,
          trigger: 'blur'
        }]
      },
      isNeedEarnest: false,
      bidBookInfoPO:{
        account: '',
        bank: '',
        accountName: '',
        phone: ''
      },
      earnestInfoPO: {
        money: undefined,
        account: '',
        bank: '',
        userName: '',
        phone: ''
      },
      ruleForm: {
		projectManager:"",
        projectName: '',
        projectCode: '',
        classify: 1,
        purchaseAgent: '',
        industry: 2,
        region: '',
        minTender: 3,
        contacts: '',
        contactsWay: '',
        // 招标方式
        bidType: 0,
        isPublishAd: false,
        content: '',
        // 标的需求
        isNeedEarnest: false,
        provinceId: '',
        cityId: '',
        districtId: '',
		multipleSelection:[],
		accessoryDOList:[],
		companyVOList:[]
      }
    }
  },
  computed: {
  },
  created() {
	 this.ruleForm.purchaseAgent=JSON.parse(localStorage.getItem("userInfo")).companyName
	 let phone=JSON.parse(localStorage.getItem("userInfo")).phone
	  this.ruleForm.contactsWay=phone
	  this.bidBookInfoPO.phone=phone
	 this.pageObj.companyId=localStorage.getItem("companyId")
    this.userList()
    this.industryList()
    this.projectClassifyList()
	this.getGenerateNumber()
  },
  methods: {
	 // 删除操作
	 handleDelete(row, index) {
	   // 二次确认删除
	   this.$confirm('确定要删除吗？', '提示', {
	     type: 'warning'
	   })
	     .then(() => {
	       this.$message.success('删除成功')
	       this.ruleForm.companyVOList.splice(index, 1)
	     })
	     .catch(() => {})
	 },
    // 接受上传文件
    getfile(val) {
	for(let item of val){
		item.accessoryUrl=item.fileUrll
	}
      this.ruleForm.accessoryDOList=val
    },
	// 获取邀请的供应商列表
	getSelection(val) {
		console.log(val)
	  this.multipleSelection = val
	},
	// 删除操作
	delAllSelection() {
	   let val = this.multipleSelection
	   if(val.length>0){
		   val.forEach((va, index) => {
		   	this.ruleForm.companyVOList.forEach((v, i) => {
		   		if (va.id === v.id) {
		   			this.ruleForm.companyVOList.splice(i, 1)
		   		}
		   	})
		   })
		   this.$message.success("删除成功");
		   this.multipleSelection = [];
	   }else{
		    this.$message.error("没有选择删除的项");
	   }
	},
    // 到下一步
    async next() {
      const valid = await this.$refs['ruleForm'].validate()
      const valid1 = await this.$refs['bidBookInfoPO'].validate()
	  let valid2=""
      if (this.ruleForm.isNeedEarnest) {
        valid2 = await this.$refs['earnestInfoPO'].validate()
		console.log(valid2)
      }
      const valid3 = await this.$refs['contentForm'].validate()
      let isNext = ''
      if (this.ruleForm.isNeedEarnest) {
		  console.log(valid2)
        isNext = valid && valid1 && valid2 && valid3
      } else {
        isNext = valid && valid1 && valid3
      }
      if (isNext) {
        let ruleForm = this.ruleForm
        let bidBookInfoPO = this.bidBookInfoPO
        let earnestInfoPO = this.earnestInfoPO
		console.log(bidBookInfoPO, earnestInfoPO)
        ruleForm.bidBookInfoPO = bidBookInfoPO
        ruleForm.earnestInfoPO = earnestInfoPO
        this.$emit('getruleForm', ruleForm)
        this.$parent.next()
      }
    },
    //  上一步
    upper() {
      this.$router.go(-1)
    },
    // 邀请状态下选择供应商
    choice(row) {
      let indexof = false
      if (this.ruleForm.companyVOList.length > 0) {
        for (let item of this.ruleForm.companyVOList) {
          if (row.id === item.id) {
            indexof = true
          }
        }
        if (!indexof) {
			this.ruleForm.companyVOList.push(row)
          // this.tableData..push(row)
        }
      } else {
		 this.ruleForm.companyVOList.push(row)
        // this.tableData.push(row)
      }
    },
    // NeedEarnest(val) {
    //   if (val === 0) {
    //     this.isNeedEarnest = false
    //   } else {
    //     this.isNeedEarnest = true
    //   }
    // },
    // 获取市ID
    getprovinceId(val) {
      this.ruleForm.provinceId = val
    },
    // 获取省ID
    getcityId(val) {
      this.ruleForm.cityId = val
    },
    // 获取城ID
    getdistrictId(val) {
      this.ruleForm.districtId = val
    },
   
    // 获取项目经理
    async userList() {
	let id=localStorage.getItem("companyId")
      const {
        code,
        data
      } = await userList(id)
      if (code === 200) {
        this.managers = data
      }
    },
    // 获取所属行业
    async industryList() {
      const res = await industryList()
      this.belongTypes = res
    },
    // 获取项目分类
    async projectClassifyList() {
      const res = await projectClassifyList()
      this.projectTypes = res
    },
	// 获取编号
	async getGenerateNumber() {
	  const {data} = await generateNumber(1)
	  this.ruleForm.projectCode = data
	},
  }

}
</script>

<style scoped>
	.message1>div {
		background: #fff;
		margin-bottom: 30px;
	}

	.message-form {
		width: 80%;
		margin: 0 auto
	}

	.message1 {
		background: #F0F2F5;
	}

	.button {
		display: flex;
		justify-content: flex-end;
		padding-bottom: 20px;
		margin-right: 20px;
	}

	.bid {
		margin-bottom: 20px;
	}
</style>
