<template>

  <div>
    <el-card class="box-card noborder" >
      <div class="cardtitles">相关企业</div>
      <div class="searchbtns">
        <el-select class="select"  placeholder="企业类型" clearable v-model="searchParam.companyRole" @change="handleCurrentChange(1)">
          <el-option v-for="(item,index) in companytype" :label="item.dictLabel" :value="item.dictValue"></el-option>
        </el-select>
        <div class="searchInput small">
          <div class="normal-search-container" @click="showSearchBox = true" v-if="!showSearchBox">
            <img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
            <span>输入关键词查询</span>
          </div>
          <!--&lt;!&ndash; 输入框展开后样式 &ndash;&gt;-->
          <transition @enter="onEnter" appear mode="out-in">
            <div class="cooperate-name enterprise-search-container" id="focus1" v-if="showSearchBox">
              <el-input clearable @clear="handleCurrentChange(1)" @focus="clickFocus('focus1')" @blur="clickFocus('focus1')" v-model="searchParam.companyName"
                        placeholder="输入关键词查询"></el-input>
              <span @click="handleCurrentChange(1)">搜索</span>
            </div>
          </transition>
        </div>
        <div class="btn btn_primary h32 b3" @click="opennew" v-if="isDisableds == false"><div class="img img1"></div>添加相关企业</div>
      </div>
      <div class="document tables">
        <skeleton v-if="isSkeleton" style="padding-top: 16px"></skeleton>
        <div class="empty" v-if="tableData.total == 0">
          <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="isDisableds==false">新增相关企业</div>
        </div>
        <el-table  v-else-if="!isSkeleton" class="fixed-table" max-height="640"
          :data="tableData.rows"
          style="width: 100%"
          :default-sort = "{prop: 'depth', order: 'descending'}"
        >
          <el-table-column
            prop="companyName"
            label="企业名称"
            >
            <template slot-scope="scope">
              <div>{{scope.row.companyName}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="depth"
            sortable
            label="对接深度/竞争力度"
            >
            <template slot-scope="scope">
              {{scope.row.depth || '--'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="companyRole"
            label="企业角色"
            width="">
            <template slot-scope="scope">
              {{scope.row.companyRole || '--'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="responsiblePerson"
            label="负责人"
            width="">
            <template slot-scope="scope">
              {{scope.row.responsiblePerson || '--'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="phone"
            label="负责人联系方式"
            width="">
            <template slot-scope="scope">
              {{scope.row.phone || '--'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="responsiblePerson"
            label="备注"
            width="">
            <template slot-scope="scope">
              <div  v-if="scope.row.remark">
                <el-tooltip class="item" effect="dark" :content="scope.row.remark" placement="top"><span>{{scope.row.remark}}</span></el-tooltip>
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column v-if="isDisableds == false"
            prop="name"
            label=""
            align="right"
            width="">
            <template slot-scope="scope">
              <div class="hoverbtn">
                <div class="xg" @click="getDetail(scope.row)">修改</div>
                <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>新建相关企业</span>
        </div>
        <el-form class="popform i":model="queryParam" label-width="85px" :rules="rules" ref="ruleForm" >
          <el-form-item  label="企业角色：" prop="companyRole" class="row">
            <el-select  placeholder="请选择" v-model="queryParam.companyRole">
              <el-option v-for="(item,index) in companytype" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
          <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 i">
            <el-input type="text" v-model="queryParam.depth" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="负责人：" class="row">
            <el-input type="text" v-model="queryParam.responsiblePerson" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="联系方式：" class="row">
            <el-input type="text" oninput="value=value.replace(/[^\d]/g,'')" v-model="queryParam.phone" maxlength="11" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="备注说明：" class="row">
            <el-input
              type="textarea"
              placeholder="请输入"
              v-model="queryParam.remark"
              maxlength="200"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <div class="popbot">
            <div class="btn btn_cancel h32" @click="cancel()">返回</div>
            <div class="btn btn_primary h32" v-if="isedit" @click="saveqy">保存</div>
            <div class="btn btn_primary h32" v-else @click="addqy">添加</div>
          </div>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import '@/assets/styles/project.scss'
  import { addXGQY, delXGQY, getXGQY, saveXGQY } from '@/api/project/project'
  import { getDictType, getEnterprise } from '@/api/main'
  import skeleton from './skeleton'
  import gsap from "gsap";

  export default {
    components:{skeleton},
    name: 'xgqy',
    props: {
      detailId: { //从企业详情跳转过来ID
        type: Number,
        default: 0
      },
      isDisabled:false,
    },
    data(){
      return{
        hzhbVisible:false,
        textarea:"",
        nowedit:-1,//当前正在编辑的文本
        tipslit:[],//项目标签
        tipsvalue:"",//标签填写内容
        tableData: [],
        typename:"对接深度/竞争力度",
        rules:{
          companyRole:[{ required: true, message: '请输入非空格字符！', trigger: 'blur' },],
          companyName:[{ required: true, message: '请输入非空格字符！', trigger: 'blur' },],
          phone: [
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ]
        },
        companytype:[],
        queryParam:{
          businessId:this.detailId ? this.detailId : this.$route.query.id,
          companyId:'',
          companyName:'',
          companyRole:'',
          responsiblePerson:'',
          depth:'',
          remark:'',
        },
        searchParam:{
          pageSize:20,
          pageNum:1,
          businessId:this.detailId ? this.detailId : this.$route.query.id,
          companyRole:"",
          companyName:'',
        },
        ondel:-1,
        isedit:false,
        isDisableds:this.isDisabled,
        showlist:false,
        companData:[],
        isSkeleton:true,
        showSearchBox:false,
      }
    },
    created(){
      //企业类型
      getDictType('company_type').then(result=>{
        this.companytype = result.code == 200 ? result.data:[]
      })
      this.getlist()
    },
    mounted(){
    },
    methods:{

      clickFocus(e) {
        document.getElementById(e).classList.toggle('span-ba');
      },
      getDetail(row){
        this.isedit = true
        this.hzhbVisible = true
        this.queryParam = JSON.parse(JSON.stringify(row))
      },
      //获取建设库客户
      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(){
        if(this.queryParam.companyName === ''){
          return this.$message.warning('企业名称需填写完整！')
        }
        if(this.queryParam.companyRole === ''){
          return this.$message.warning('企业角色称需填写完整！')
        }
        addXGQY(this.queryParam).then(res=>{
          this.hzhbVisible=false
          if(res.code == 200){
            this.$message.success('添加成功！')
            this.getlist()
          }else {
            this.$message.error(res.msg)
          }
        })

      },
      saveqy(){
        saveXGQY(this.queryParam).then(res=>{
          this.hzhbVisible=false
          if(res.code == 200){
            this.$message.success('修改成功！')
            this.getlist()
          }else {
            this.$message.error(res.msg)
          }
        })
      },
      getlist(){
        this.isSkeleton = true
        getXGQY(this.searchParam).then(result=>{
          this.isSkeleton = false
          this.tableData = result
        })
      },
      //翻页
      handleCurrentChange(val) {
        this.searchParam.pageNum = val
        this.getlist()
      },
      cancel(){
        this.hzhbVisible =  false
      },
      //打开新建窗口
      opennew(){
        this.isedit = false
        this.hzhbVisible = true
        this.queryParam={
          businessId:this.detailId ? this.detailId : this.$route.query.id,
          companyId:'',
          companyName:'',
          companyRole:'',
          responsiblePerson:'',
          depth:'',
          remark:'',
        }
      },
      onEnter(el, done) {
        gsap.from(el, {
          opacity: 0,
          width: 0,
        });
        gsap.to(el, {
          opacity: 1,
          width: 242,
          onComplete() {
            //  完成动画聚焦输入框
            el.querySelector("input").focus();
            done();
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .showremark{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
    cursor: pointer;
    &:hover{
      color: #0081FF;
    }
  }
  .searchInput .el-input{
    width: 68%;
  }
  .searchInput.small{
    width: 257px;
  }
.searchInput{
.normal-search-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 34px;
    &:hover {
      & > span {
        color: #0081ff;
      }
    }

    & > img {
      width: 16px;
      height: 16px;
      margin-left: 12px;
    }

    & > span {
      color: #232323;
      color: rgba(35, 35, 35, 0.4);
      font-weight: 400;
      margin-left: 8px;
      line-height: 22px;
      font-size: 14px;
    }
  }
  .cooperate-name {
    display: flex;
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    line-height: 30px;
    height: 30px;
    float: left;
    width: 100%;
    span {
      width: 60px;
      height: 28px;
      line-height: 28px;
      font-size: 14px;
      background: #f5f5f5;
      text-align: center;
      color: #0081ff;
      border: 1px solid #efefef;
      border-left: 0;
      cursor: pointer;
    }
    &.span-ba {
      border: 1px solid #0081ff;
      span {
        color: #ffffff;
        background: #0081ff;
        border: 1px solid #0081ff;
      }
    }
    ::v-deep .el-input {
      flex: 1;
    }
    ::v-deep .el-input__inner {
      border: 0;
      line-height: 28px;
      height: 28px;
      position: absolute;
      top: 1px;
      padding-right: 28px;
      font-size: 12px;
      padding-left: 8px;
    }
  }
}
  .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>
