<template>

  <div>
    <el-card class="box-card noborder">
      <div class="cardtitles">基本信息</div>
      <div class="baseinfo">
        <div class="row">
          <div class="con">
            <span>项目级别 ：</span>
            <div class="inputxt" id="inputxt1">
              <div class="flex" v-if="nowedit == 1 && isDisabled == false" >
                <el-input placeholder="待添加" v-model="xmsldata.projectLevel"></el-input>
                <div class="flex">
                  <div class="btnsmall btn_primary h28" style="width: 56px" @click="editXMSL({projectLevel:xmsldata.projectLevel})">确定</div>
                  <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                </div>
              </div>
              <span :class="{txt:!xmsldata.projectLevel}" v-else @click="nowedit = 1">{{xmsldata.projectLevel||'待添加'}}</span>
            </div>
          </div>
          <div class="con i">
            <span>项目阶段 ：</span>

            <div class="select-popper " >
              <span :class="{'txt':xmjd == '待添加'}">
                {{xmjd}}
                <i class="el-icon-caret-bottom"></i>
              </span>
              <el-select v-if="isDisabled==false" v-model="xmjd" class="select-multiple" placeholder="请选择" @change="editXMSL({projectStage:xmjd})">
                <el-option v-for="(item,index) in projectStage" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="con i" style="width: 100%;">
            <span style="float: left;margin-top: 2px">项目标签 ：</span>
            <div class="flex tipinput">
              <div class="tips" v-for="(item,index) in tipslit">{{item}}<img @click="deltip(item)" src="@/assets/images/project/del.png"></div>
              <div style="position: relative">
              <el-input placeholder="待添加" :disabled="isDisabled" v-model="tipsvalue" @input="getValue" :style="spanWidth"></el-input><span class="spanText">{{ tipsvalue }}</span>
              </div>
              <div class="addbtn" v-if="isDisabled == false" @click="addtips"></div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card noborder">
      <div class="cardtitles">关键企业</div>
      <div class="baseinfo" style="padding-bottom: 8px">
        <div class="row">
          <div class="con">
            <span>主管单位 ：</span>
            <div class="inputxt" id="inputxt2">
              <div class="flex" v-if="nowedit == 2 && isDisabled == false">
                <el-input placeholder="待添加" v-model="xmsldata.supervisorUnit"></el-input>
                <div class="flex">
                  <div class="btnsmall btn_primary h28" style="width: 56px" @click="editXMSL({supervisorUnit:xmsldata.supervisorUnit})">确定</div>
                  <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                </div>
              </div>
              <span :class="{txt:!xmsldata.supervisorUnit}" v-else @click="nowedit = 2">{{xmsldata.supervisorUnit||'待添加'}}</span>
            </div>
          </div>
          <div class="con i">
            <span>建设单位 ：</span>
            <div class="inputxt" id="inputxt3" :style="{width:rig1}">
              <div class="flex" v-if="nowedit == 3 && isDisabled == false">
                <el-input placeholder="待添加" v-model="xmsldata.constructionUnit"></el-input>
                <div class="flex">
                  <div class="btnsmall btn_primary h28" style="width: 56px" @click="editXMSL({constructionUnit:xmsldata.constructionUnit})">确定</div>
                  <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                </div>
              </div>
              <span :class="{txt:!xmsldata.constructionUnit}" v-else @click="nowedit = 3">{{xmsldata.constructionUnit||'待添加'}}</span>
              <span class="rig rig1">{{xmsldata.constructionUnit}}</span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="con">
            <span>主管单位负责人 ：</span>
            <div class="inputxt" id="inputxt4">
              <div class="flex" v-if="nowedit == 4 && isDisabled == false">
                <el-input placeholder="待添加" v-model="xmsldata.supervisorPrincipal"></el-input>
                <div class="flex">
                  <div class="btnsmall btn_primary h28" style="width: 56px" @click="editXMSL({supervisorPrincipal:xmsldata.supervisorPrincipal})">确定</div>
                  <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                </div>
              </div>
              <span :class="{txt:!xmsldata.supervisorPrincipal}" v-else @click="nowedit = 4">{{xmsldata.supervisorPrincipal||'待添加'}}</span>
            </div>
          </div>
          <div class="con i">
            <span>建设单位负责人 ：</span>
            <div class="inputxt" id="inputxt5">
              <div class="flex" v-if="nowedit == 5 && isDisabled == false">
                <el-input placeholder="待添加" v-model="xmsldata.constructionPrincipal"></el-input>
                <div class="flex">
                  <div class="btnsmall btn_primary h28" style="width: 56px" @click="editXMSL({constructionPrincipal:xmsldata.constructionPrincipal})">确定</div>
                  <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                </div>
              </div>
              <span :class="{txt:!xmsldata.constructionPrincipal}" v-else @click="nowedit = 5">{{xmsldata.constructionPrincipal||'待添加'}}</span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="con">
            <span>主管单位联系电话 ：</span>
            <div class="inputxt" id="inputxt6">
              <div class="flex" v-if="nowedit == 6 && isDisabled == false">
                <el-input placeholder="待添加" v-model="xmsldata.supervisorPhone"></el-input>
                <div class="flex">
                  <div class="btnsmall btn_primary h28" @click="isphone(1,xmsldata.supervisorPhone)" style="width: 56px">确定</div>
                  <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                </div>
              </div>
              <span :class="{txt:!xmsldata.supervisorPhone}" v-else @click="nowedit = 6">{{xmsldata.supervisorPhone||'待添加'}}</span>
            </div>
          </div>
          <div class="con i">
            <span>建设单位联系电话 ：</span>
            <div class="inputxt" id="inputxt7">
              <div class="flex" v-if="nowedit == 7 && isDisabled == false">
                <el-input placeholder="待添加" v-model="xmsldata.constructionPhone"></el-input>
                <div class="flex">
                  <div class="btnsmall btn_primary h28" @click="isphone(2,xmsldata.constructionPhone)" style="width: 56px">确定</div>
                  <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                </div>
              </div>
              <span :class="{txt:!xmsldata.constructionPhone}" v-else @click="nowedit = 7">{{xmsldata.constructionPhone||'待添加'}}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card noborder">
      <div class="cardtitles">相关数据</div>
      <div class="otherdata">
        <div class="det">
          <img src="@/assets/images/project/xgsj_1.png">
          <div class="i">{{xmsldata.contactsCount}}  个</div>
          <div class="j">联系人</div>
        </div>
        <div class="det">
          <img src="@/assets/images/project/xgsj_2.png">
          <div class="i">{{xmsldata.followRecordCount}}  条</div>
          <div class="j">跟进记录</div>
        </div>
        <div class="det">
          <img src="@/assets/images/project/xgsj_3.png">
          <div class="i">{{xmsldata.backlogCount}}  条</div>
          <div class="j">工作待办</div>
        </div>
        <div class="det">
          <img src="@/assets/images/project/xgsj_4.png">
          <div class="i">{{xmsldata.fileCount}}  个</div>
          <div class="j">资料文档</div>
        </div>
        <div class="det">
          <img src="@/assets/images/project/xgsj_5.png">
          <div class="i">{{xmsldata.relateCompanyCount}}  家</div>
          <div class="j">相关企业</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import '@/assets/styles/project.scss'
  import { getDictType } from '@/api/main'
  import { getXMSL,editXMNR ,addLabel,removeLabel} from '@/api/project/project'

  export default {
    name: 'xmsl',
    props:{
      detailId: { //从企业详情跳转过来ID
        type: Number,
        default: 0
      }
    },
    data(){
      return{
        nowedit:-1,//当前正在编辑的文本
        tipslit:[],//项目标签
        tipsvalue:"",//标签填写内容
        xmjd:'待添加',
        projectStage:[],//项目阶段
        id: this.detailId ? this.detailId : this.$route.query.id,
        xmsldata:[],
        spanWidth:'width: 70px',
        rig1:'184px',
        isDisabled:false,
      }
    },
    created(){
      //项目阶段
      getDictType('project_stage_type').then(result=>{
        this.projectStage = result.code == 200 ? result.data:[]
      })
      this.getXMSL()
    },
    mounted(){
      document.addEventListener('mouseup',(e) => {
        if(this.isDisabled == true)
          return false
        let j = 0
        for(var i=1;i<=7;i++){
          let isSelf = document.getElementById('inputxt'+i).contains(event.target)  // 这个是自己的区域
          if(isSelf) {
            this.nowedit = i
          }else {
            j++;
          }
        }
        if(j == 7){
          if(this.nowedit != -1){
            let param = {}
            switch (this.nowedit) {
              case 1:
                param = {'projectLevel':this.xmsldata.projectLevel}
                break;
              case 2 :
                param = {'supervisorUnit':this.xmsldata.supervisorUnit}
                break;
              case 3 :
                param = {'constructionUnit':this.xmsldata.constructionUnit}
                break;
              case 4 :
                param = {'supervisorPrincipal':this.xmsldata.supervisorPrincipal}
                break;
              case 5 :
                param = {'constructionPrincipal':this.xmsldata.constructionPrincipal}
                break;
              case 6 :
                param = {'supervisorPhone':this.xmsldata.supervisorPhone}
                break;
              case 7 :
                param = {'constructionPhone':this.xmsldata.constructionPhone}
                break;
            }
            this.editXMSL(param)
          }
          this.nowedit = -1
        }
      })
    },
    methods:{

      getValue(){
        const spanStyle = document.querySelector(".spanText");
        this.$nextTick(() => {    // 如果不用$nextTick的话页面并不会更新，它是在下次dom更新后再渲染到页面上
         let wid =
            spanStyle.offsetWidth <= 70
              ? "70px"
              : spanStyle.offsetWidth + 28 + "px";
          this.spanWidth = 'width:'+wid
        });
      },
      editXMSL(param){
        this.nowedit = -1
        if(this.isDisabled == true)
          return false
        if(param.projectStage){//修改项目阶段
          this.$emit('Refreshs',param)
          this.xmjd = param.projectStage
        }else{
          let params = param
          params.id = this.id
          editXMNR(JSON.stringify(params)).then(res=>{
            if (res.code == 200){
              if(!param.projectStage){
                this.$message.success('修改成功！')
              }
            }else{
              this.$message.error(res.msg)
              this.getXMSL()
            }
          })
        }
      },
      //验证电话号码
      isphone(type,value){
        var regPartton = /1[3-9]+\d{9}/;
        var regPartton1 = /^(0[0-9]{2,3}[\-]?[2-9][0-9]{6,7}[\-]?[0-9]?)$/;
        if (!regPartton.test(value) && !regPartton1.test(value)) {
          this.$message.error("请输入正确的电话");
        } else {
          if (type == 1) {
            this.editXMSL({ supervisorPhone: value })
          }
          if (type == 2) {
            this.editXMSL({ constructionPhone: value })
          }
        }
      },
      //标签添加、删除
      addtips(){
        if(this.tipsvalue == "")
          return false
        if(this.tipslit!=null&&this.tipslit.length>=30){
          this.$message.error("最多能只能添加30个标签")
          return false
        }
        let param={
          businessId:this.id,
          label:this.tipsvalue
        }
        addLabel(JSON.stringify(param)).then(res=>{
          if (res.code == 200){
            this.$message.success('修改成功！')
            this.tipsvalue = ""
            this.getXMSL()
          }else{
            this.$message.error(res.msg)
          }
        })
        // this.tipslit.push(this.tipsvalue)
      },
      deltip(value){
        let param={
          businessId:this.id,
          label:value
        }
        removeLabel(JSON.stringify(param)).then(res=>{
          if (res.code == 200){
            this.$message.success('修改成功！')
            this.getXMSL()
          }else{
            this.$message.error(res.msg)
          }
        })
      },

      getXMSL(){
        getXMSL(this.id).then(result=> {
          this.xmjd = result.data.projectStage
          this.tipslit = result.data.labelList
          this.xmsldata = result.data
          this.isDisabled = result.data.isFounder == 1 ? false:true
          const spanStyle = document.querySelector(".rig1");
          this.$nextTick(() => {    // 如果不用$nextTick的话页面并不会更新，它是在下次dom更新后再渲染到页面上
            this.rig1 =
              spanStyle.offsetWidth <= 184
                ? "184px"
                : spanStyle.offsetWidth + "px";
          });
        })
      },
    }
  }
</script>

<style scoped lang="scss">
.select-popper{
  top: 3px;
}
  .inputxt .flex{
    background: #fff;
  }
</style>
