<template>

  <div>
    <el-card class="box-card noborder">
      <div class="cardtitles">相关企业</div>
      <div class="searchbtns">
        <el-select class="select"  placeholder="企业类型" clearable v-model="searchParam.companyType" @change="handleCurrentChange(1)">
          <el-option v-for="(item,index) in companytype" :label="item.dictLabel" :value="item.dictValue"></el-option>
        </el-select>
        <div class="searchInput">
          <el-input type="text" placeholder="输入关键词查询" clearable  v-model="searchParam.companyName"></el-input>
          <div class="btn" @click="handleCurrentChange(1)">搜索</div>
        </div>
        <div class="btn btn_primary h32 b3" @click="opennew" v-if="isDisabled == false"><div class="img img1"></div>添加相关企业</div>
      </div>
      <div class="document tables">
        <el-table
          :data="tableData.rows"
          style="width: 100%"
          :default-sort = "{prop: 'depth', order: 'ascending'}"
        >
          <template slot="empty">
            <div class="empty">
              <img src="@/assets/images/project/empty.png">
              <div class="p1">抱歉，没找到相关数据</div>
              <div class="p2">建议调整关键词或添加相关企业，重新搜索</div>
              <div class="btn btn_primary h36 w102" @click="opennew" v-if="isDisabled==false">新增相关企业</div>
            </div>
          </template>
          <el-table-column
            prop="companyName"
            label="企业名称"
            >
            <template slot-scope="scope">
              <div class="wordprimary">{{scope.row.companyName}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="depth"
            sortable
            label="对接深度/竞争力度"
            >
          </el-table-column>
          <el-table-column
            prop="companyRole"
            label="企业角色"
            width="">
          </el-table-column>
          <el-table-column
            prop="responsiblePerson"
            label="负责人"
            width="">
          </el-table-column>
          <el-table-column v-if="isDisabled == false"
            prop="name"
            label=""
            align="right"
            width="">
            <template slot-scope="scope">
              <div class="hoverbtn">
                <div class="sc" @click="ondel = scope.row.id">删除</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
          <div class="delform" v-if="ondel != -1">
            <div class="words">是否将企业删除</div>
            <div>
              <div class="btnsmall btn_primary h28" @click="delQY()">确定</div>
              <div class="btnsmall btn_cancel h28" @click="ondel = -1">取消</div>
            </div>
          </div>
        <div class="tables" v-if="tableData.total > searchParam.pageSize">
        <div class="bottems" v-if="ondel != -1">
          <el-pagination
            background
            :page-size="searchParam.pageSize"
            :current-page="searchParam.pageNum"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="tableData.total">
          </el-pagination>
        </div>
        </div>
      </div>
      <el-dialog
        class="popups"
        :visible.sync="dialogVisible"
        width="464px">
        <div @click = 'handleALL'>
          <div class="poptitle">
            <img src="@/assets/images/economies/icon.png">
            <span>新建相关企业</span>
          </div>
          <div class="types">
            <div v-for="(item,index) in companytype" :class="{'on':types==item.dictValue}" @click="totype(item.dictValue)"><i></i>{{item.dictLabel}}</div>
          </div>
          <div class="popform">
          <div class="popbot" style="padding-right: 0">
            <div class="btn btn_cancel h32" @click="cancel(0)">返回</div>
            <div class="btn btn_primary h32" @click="gettype">下一步</div>
          </div>
        </div>
        </div>
      </el-dialog>
      <el-dialog
        class="popups"
        :visible.sync="hzhbVisible"
        width="464px">
        <div class="poptitle">
          <img src="@/assets/images/economies/icon.png">
          <span>新建相关企业-{{types}}</span>
        </div>
        <el-form class="popform i":model="queryParam" label-width="85px" :rules="rules" ref="ruleForm" >
          <el-form-item label="企业名称：" prop="companyName" class="row">
            <el-input type="text" v-model="queryParam.companyName" @input="getCompany" placeholder="请输入"></el-input>
            <div class="resultlist" v-if="showlist" id="box">
              <div v-for="(item,index) in companData" @click="selCompany(item)"><span  v-html="item.name"></span></div>
            </div>
          </el-form-item>
          <el-form-item :label="typename" class="row">
            <el-input type="text" v-model="queryParam.depth" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item  label="企业角色：" class="row">
            <el-select  placeholder="请选择" v-model="queryParam.companyRole">
              <el-option v-for="(item,index) in companyrole" :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" v-model="queryParam.responsiblePerson" placeholder="请输入"></el-input>
          </el-form-item>
          <div class="popbot">
            <div class="btn btn_cancel h32" @click="cancel(1)">返回</div>
            <div class="btn btn_primary h32" @click="addqy">添加</div>
          </div>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import "@/assets/styles/project.scss"
  import {getXGQY,addXGQY,delXGQY} from '@/api/project/project'
  import {getDictType,getEnterprise} from '@/api/main'
  export default {
    name: 'xgqy',
    props: {
      detailId: { //从企业详情跳转过来ID
        type: Number,
        default: 0
      },
      isDisabled:false,
    },
    data(){
      return{
        types:1,
        dialogVisible:false,
        hzhbVisible:false,
        textarea:"",
        nowedit:-1,//当前正在编辑的文本
        tipslit:[],//项目标签
        tipsvalue:"",//标签填写内容
        tableData: [],
        typelist:['对接深度：','合作阶段：','竞争力度：'],
        typename:"",
        rules:{
          companyName:[{ required: true, message: '请输入非空格字符！', trigger: 'blur' },],
        },
        companytype:[],
        companyrole:[],
        queryParam:{
          businessId:this.detailId ? this.detailId : this.$route.query.id,
          companyId:'',
          companyName:'',
          companyRole:'',
          companyType:'',
          responsiblePerson:'',
          depth:'',
        },
        searchParam:{
          pageSize:20,
          pageNum:1,
          businessId:this.detailId ? this.detailId : this.$route.query.id,
          companyType:"",
          companyName:'',
        },
        ondel:-1,
        isDisabled:this.isDisabled,
        showlist:false,
        companData:[],
      }
    },
    created(){
      //企业类型
      getDictType('company_type').then(result=>{
        this.companytype = result.code == 200 ? result.data:[]
        this.types =  this.companytype[0].dictValue
      })
      //企业角色
      getDictType('company_role').then(result=>{
        this.companyrole = result.code == 200 ? result.data:[]
      })
      this.getlist()
    },
    mounted(){
    },
    methods:{
      //获取建设库客户
      getCompany(value){
        this.queryParam.companyId = ''
        if (value.length>=2){
          let param = {
            keyword:value,
            page:{
              limit:20,
              page:1
            }
          }
          getEnterprise(JSON.stringify(param)).then(result=>{
            if(result.code != 200)
              return
            this.showlist = true
            this.companData = result.data.list
          })
        }
      },
      selCompany(item){
        this.queryParam.companyId = item.jskEid
        this.queryParam.companyName = item.name.replace(/<[^>]+>/g, '')
        this.showlist = false
      },
      handleALL(event){
        var one = document.getElementById("box");
        if(one){
          if(!one.contains(event.target)){
            this.showlist = false
          }
        }
      },
      delQY(){
        let id = this.ondel
        delXGQY(id).then(res=>{
          if(res.code == 200){
            this.$message.success('删除成功')
            this.ondel = -1
            this.handleCurrentChange(1)
          }
        })
      },
      addqy(){
        addXGQY(this.queryParam).then(res=>{
          this.hzhbVisible=false
          this.dialogVisible=false
          if(res.code == 200){
            this.$message.success('添加成功！')
            this.getlist()
          }else {
            this.$message.error(res.msg)
          }
        })
      },
      getlist(){
        getXGQY(this.searchParam).then(result=>{
          console.log(result)
          this.tableData = result
        })
      },
      //翻页
      handleCurrentChange(val) {
        this.searchParam.pageNum = val
        this.getlist()
      },
      cancel(type){
        if(type == 0)
          this.dialogVisible = false
        else{
          this.dialogVisible = true
          this.hzhbVisible =  false
        }
      },
      totype(value){
        this.types = value
      },
      gettype(){
        this.queryParam.companyType = this.types
        this.companytype.forEach((item,index)=>{
          if(item.dictValue == this.types){
            this.typename = this.typelist[index]
          }
        })
        this.hzhbVisible = true
        this.dialogVisible = false
      },
      //打开新建窗口
      opennew(){
        this.dialogVisible = true
        this.queryParam={
          businessId:this.detailId ? this.detailId : this.$route.query.id,
          companyId:'',
          companyName:'',
          companyRole:'',
          companyType:'',
          responsiblePerson:'',
          depth:'',
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .searchInput .el-input{
    width: 68%;
  }
  .w102{
    width: 102px;
  }

  .img.img1{
    margin-right: 4px;
    background: url('../../../../../src/assets/images/project/add_2.png')no-repeat center center;
    background-size: 100%;
  }
  .img.img2{
    margin-right: 4px;
    background: url('../../../../../src/assets/images/upload.png')no-repeat center center;
    background-size: 100%;
  }
  .box-card{
    position: relative;
  }

  .delform{
    position: fixed; left:50%; top:50%; transform:translate(-50%,-50%)
  }
</style>
