<template>
  <el-dialog
    class="popups"
    width="534px"
      :visible.sync="isshow"
    :close-on-click-modal="false"
    @close="resetForm('ruleForm')"
  >
    <div  @click = 'handleALL'>
    <div class="poptitle">
      <img src="@/assets/images/economies/icon.png">
      <span>新建商机</span>
    </div>
    <el-form class="popform j" :model="queryParam" :rules="rules" ref="ruleForm" label-width="130px">
      <el-form-item label="项目名称：" class="row"  prop="projectName">
        <el-input type="text" placeholder="请输入" v-model="queryParam.projectName" @input="getProject(1)" :οnkeyup="queryParam.projectName=queryParam.projectName.replace(/^\s+|\s+$/g,'')"></el-input>
        <div class="resultlist infinite-list" v-infinite-scroll="load1" v-if="proList.length>0" id="box1" style="overflow:auto">
          <div class="infinite-list-item" v-for="(item,index) in proList" @click="selProject(item)"><span  v-html="item.projectName" :key="projectpage"></span></div>
        </div>
      </el-form-item>
      <el-form-item label="招采单位：" class="row"  prop="ownerCompany">
        <el-input type="text" placeholder="请输入" v-model="queryParam.ownerCompany" @input="getCompany(1)" :οnkeyup="queryParam.ownerCompany=queryParam.ownerCompany.replace(/^\s+|\s+$/g,'')"></el-input>
        <div class="resultlist infinite-list" v-if="showlist" v-infinite-scroll="load" id="box" style="overflow:auto">
          <div class="infinite-list-item" v-for="(item,index) in companData" @click="selCompany(item)"><span  v-html="item.name" :key="companypage"></span></div>
        </div>
      </el-form-item>
      <el-form-item label="项目阶段：" class="row">
        <el-select  placeholder="请选择" v-model="queryParam.projectStage">
          <el-option v-for="(item,index) in projectStage" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目类型：" class="row">
        <el-select  placeholder="请选择" v-model="queryParam.projectType">
          <el-option v-for="(item,index) in projectType" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目类别：" class="row">
        <el-select  placeholder="请选择" v-model="queryParam.projectCategory">
          <el-option v-for="(item,index) in projectCategory" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投资估算（万元）：" class="row">
        <el-input type="text" placeholder="请输入金额" @input="number" v-model="queryParam.investmentAmount"></el-input>
      </el-form-item>
      <el-form-item label="可见范围：" class="row">
        <el-select  placeholder="请选择" v-model="queryParam.isPrivate">
          <el-option v-for="(item,index) in Privatelist" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <div class="popbot">
        <div class="wordprimary" @click="toradar">前往商机雷达寻找项目线索></div>
        <div class="btn btn_cancel h32" @click="resetForm('ruleForm')">返回</div>
        <div class="btn btn_primary h32" @click="submitForm('ruleForm')">新建商机</div>
      </div>
    </el-form>
    </div>
  </el-dialog>
</template>

<script>
  import {getEnterprise,getDictType,} from '@/api/main'
  import {addProject} from '@/api/project/project'
  import {queryProject} from '@/api/detail/party-a/cooperate'
  export default {
    name: 'addProject',
    data(){
      return{
        Privatelist:[
          {
          value:0,
          label:'仅自己可见'
        },{
          value:1,
            label:'他人可见'
          }
        ],//可见范围
        isshow:true,
        queryParam:{
          userId:'',//用户id
          projectName:'',//	项目名称
          companyId:'',//企业id
          ownerCompany:'',//招采单位
          projectStage:null,//项目阶段
          projectType:null,//项目类型
          projectCategory:null,//项目类别
          investmentAmount:null,//投资估算
          isPrivate:0,//可见范围(0 仅自己可见，1 他人可见)
        },
        rules:{
          projectName:[{ required: true, message: '请输入非空格字符！', trigger: 'blur' },],
          ownerCompany:[{ required: true, message: '请输入非空格字符！', trigger: 'blur' },],
        },
        showlist:false,
        companData:[],//联想企业列表
        projectStage:[],//项目阶段
        projectType:[],//项目类型
        projectCategory:[],//项目类别
        proList:[],//项目列表
        companypage:1,
        projectpage:1,
        isscroll:false,
      }
    },
    mounted(){
    },
    created(){
      //项目阶段
      getDictType('project_stage_type').then(result=>{
        this.projectStage = result.code == 200 ? result.data:[]
      })
      //项目类型
      getDictType('project_type').then(result=>{
        this.projectType = result.code == 200 ? result.data:[]
      })
      //项目类别
      getDictType('project_category').then(result=>{
        this.projectCategory = result.code == 200 ? result.data:[]
      })
    },
    methods:{
      toradar(){
        this.resetForm()
        this.$router.push({path:'/radar'})
      },
      handleALL(event){
        var one = document.getElementById("box");
        if(one){
          if(!one.contains(event.target)){
            this.showlist = false
          }
        }
        var two = document.getElementById("box1");
        if(two){
          if(!two.contains(event.target)){
            this.proList = []
          }
        }
      },
      //获取建设库客户
      getCompany(value){
        this.queryParam.companyId = null
        if(value == 1){
          this.companData = []
          this.companypage = 1
        }
        if (this.queryParam.ownerCompany.length>=2){
          let param = {
            keyword:this.queryParam.ownerCompany,
            page:{
              limit:20,
              page:this.companypage
            }
          }
          getEnterprise(JSON.stringify(param)).then(result=>{
            if(result.code != 200){
              return false
            }
            if(result.data.list != null && result.data.list.length>0){
              this.isscroll = true
              if (this.companData.length===0) {
                this.companData = result.data.list
              } else {
                let arr2 = result.data.list
                arr2.unshift(2, 0);
                Array.prototype.splice.apply(this.companData, arr2);
              }
              if(this.companData.length===0) {
                this.showlist = false
              }else{
                this.showlist = true
              }
              this.companypage += 1
            }else{
              this.isscroll = false
            }
          })
        }
      },
      //获取项目名称
      getProject(value){
        this.queryParam.projectStage = null
        this.queryParam.investmentAmount = null
        this.queryParam.projectType = null
        this.queryParam.projectCategory = null
        this.queryParam.status = 0
        this.queryParam.ownerCompany = ''
        if(value == 1){
          this.proList = []
          this.projectpage = 1
        }
        if (this.queryParam.projectName.length>=2){
          let param = {
            projectName:this.queryParam.projectName,
            pageSize:20,
            pageNum:this.projectpage
          }
          queryProject(JSON.stringify(param)).then(result=>{
            if(result.code != 200){
              return false
            }
            if(result.data != null && result.data.length>0){
              this.isscroll = true
              if (this.proList.length===0) {
                this.proList = result.data
              } else {
                let arr2 = result.data
                // arr2.unshift(2, 0);
                // Array.prototype.splice.apply(this.proList, arr2);
                this.proList = [...this.proList,...arr2]
              }
              this.projectpage += 1
            }else{
              this.isscroll = false
            }
          })
        }
      },
      load(){
        if(this.isscroll){
          this.getCompany(2)
        }
      },
      load1(){
        if(this.isscroll){
          this.getProject(2)
        }
      },
      selCompany(item){
        this.queryParam.companyId = item.jskEid
        this.queryParam.ownerCompany = item.name.replace(/<[^>]+>/g, '')
        this.showlist = false
      },
      selProject(item){
        this.queryParam.projectStage = item.projectStage
        this.queryParam.investmentAmount = item.investmentAmount
        this.queryParam.projectType = item.projectType
        this.queryParam.projectCategory = item.projectCategory
        this.queryParam.status = item.status
        this.queryParam.ownerCompany = item.companyName == null?'':item.companyName
        this.queryParam.projectName = item.projectName.replace(/<[^>]+>/g, '')
        this.proList = []
      },
      //添加客户
      submitForm(formName) {
        this.queryParam.userId = this.$store.state.user.userId
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let param = JSON.parse(JSON.stringify(this.queryParam))
            if(param.investmentAmount!="")
              param.investmentAmount = parseFloat(param.investmentAmount)
            addProject(param).then(result=>{
              if(result.code == 200){
                this.$message.success('添加成功！')
                this.resetForm('ruleForm')
                this.$emit('addproject')
              }else{
                this.$message.error(result.msg)
              }
            })
          } else {
          }
        });
      },
      resetForm(formName) {
        this.queryParam = {
          projectName:'',//	项目名称
          companyId:'',//企业id
          ownerCompany:'',//招采单位
          projectStage:null,//项目阶段
          projectType:null,//项目类型
          projectCategory:null,//项目类别
          investmentAmount:null,//投资估算
          isPrivate:0,//可见范围(0 仅自己可见，1 他人可见)
        },
        this.showlist = false
        this.$emit("cancel",false)
      },

      //输入数字
      number(value){
        this.queryParam.investmentAmount = value.replace(/^\D*(\d*(?:\.\d{0,6})?).*$/g, '$1')//输入6位小数
      }
    }
  }
</script>

<style scoped>

  .wordprimary{
    display: inline;
    padding-right: 26px;
  }
.btn_primary{
  padding: 0;
}
</style>
