<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">
              <div class="flex" v-if="nowedit == 1">
                <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="color_text" :class="{'txt':xmjd == '待添加'}">
                {{xmjd}}
                <i class="el-icon-caret-bottom"></i>
              </span>
              <el-select 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>
              <el-input placeholder="待添加" v-model="tipsvalue"></el-input>
              <div class="addbtn" @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">
              <div class="flex" v-if="nowedit == 2">
                <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">
              <div class="flex" v-if="nowedit == 3">
                <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>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="con">
            <span>主管单位负责人 ：</span>
            <div class="inputxt">
              <div class="flex" v-if="nowedit == 4">
                <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">
              <div class="flex" v-if="nowedit == 5">
                <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">
              <div class="flex" v-if="nowedit == 6">
                <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">
              <div class="flex" v-if="nowedit == 7">
                <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:{
      datas:'',
      detailId: { //从企业详情跳转过来ID
        type: Number,
        default: 0
      }
    },
    data(){
      return{
        nowedit:-1,//当前正在编辑的文本
        tipslit:[],//项目标签
        tipsvalue:"",//标签填写内容
        xmjd:'待添加',
        projectStage:[],//项目阶段
        id: this.detailId ? this.detailId : this.$route.query.id,
        xmsldata:this.datas,
      }
    },
    created(){
      //项目阶段
      getDictType('project_stage_type').then(result=>{
        this.projectStage = result.code == 200 ? result.data:[]
      })
      this.getXMSL()
    },
    methods:{
      editXMSL(param){
        let params = param
        params.id = this.id
        editXMNR(JSON.stringify(params)).then(res=>{
          if (res.code == 200){
            this.$message.success('修改成功！')
          }else{
            this.$message.error(res.msg)
            this.getXMSL()
          }
        })
        this.nowedit = -1
      },
      //验证电话号码
      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
        })
      },
    }
  }
</script>

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