<template>

  <div>
    <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="inputxt1">
              <div class="flex" v-if="nowedit == 1 && isDisabled == false">
                <el-input placeholder="待添加" v-model="investmentAmount" @input="number"></el-input>
                <div class="flex">
                  <div class="btnsmall btn_primary h28" style="width: 56px" @click="changes({'investmentAmount':investmentAmount})">确定</div>
                  <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                </div>
              </div>
              <span :class="{'txt':!investmentAmount}" v-else @click="nowedit = 1">{{investmentAmount||'待添加'}}</span>
            </div>
          </div>
          <div class="con i">
            <span>资金来源 ：</span>
            <div class="inputxt" id="inputxt2">
              <div class="flex" v-if="nowedit == 2 && isDisabled == false">
                <el-input placeholder="待添加" v-model="amountSource"></el-input>
                <div class="flex">
                  <div class="btnsmall btn_primary h28" @click="changes({'amountSource':amountSource})" style="width: 56px">确定</div>
                  <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                </div>
              </div>
              <span :class="{'txt':!amountSource}" v-else @click="nowedit = 2">{{amountSource||'待添加'}}</span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="con">
            <span>建设性质 ：</span>
            <div class="inputxt" id="inputxt3">
              <div class="flex" v-if="nowedit == 3 && isDisabled == false">
                <el-input placeholder="待添加" v-model="buildProperty"></el-input>
                <div class="flex">
                  <div class="btnsmall btn_primary h28" @click="changes({'buildProperty':buildProperty})" style="width: 56px">确定</div>
                  <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                </div>
              </div>
              <span :class="{'txt':!buildProperty}" v-else @click="nowedit = 3">{{buildProperty||'待添加'}}</span>
            </div>
          </div>
          <div class="con i">
            <span>计划招标 ：</span>
            <div class="inputime">
              <div class="flex" style="">
                <el-date-picker class="timeinput" v-if="isDisabled == false"
                                v-model="planBidTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="待添加" @change="changes({'planBidTime':planBidTime})">
                </el-date-picker>
              </div>
              <span :class="{'txt':!planBidTime}">{{planBidTime||"待添加"}}<i class="el-icon-caret-bottom"></i></span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="con">
            <span>计划开工 ：</span>
            <div class="inputime">
              <div class="flex" style="opacity: 0;height: 0">
                <el-date-picker class="timeinput" v-if="isDisabled == false"
                                v-model="planStartTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="待添加" @change="changes({'planStartTime':planStartTime})">
                </el-date-picker>
              </div>
              <span :class="{'txt':!planStartTime}">{{planStartTime||"待添加"}}<i class="el-icon-caret-bottom"></i></span>
            </div>
          </div>
          <div class="con i">
            <span>计划竣工 ：</span>
            <div class="inputime">
              <div class="flex" style="opacity: 0;height: 0">
                <el-date-picker class="timeinput" v-if="isDisabled == false"
                  v-model="planCompleteTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="待添加" @change="changes({'planCompleteTime':planCompleteTime})">
                </el-date-picker>
              </div>
              <span :class="{'txt':!planCompleteTime}">{{planCompleteTime||"待添加"}}<i class="el-icon-caret-bottom"></i></span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card noborder">
      <div class="cardtitles">项目概况与建设规模</div>
      <div class="baseinfo" >
        <el-input id="inputxt9" :disabled="isDisabled" v-model="projectDetails" @focus="nowedit = 9" class="textarea" type="textarea" placeholder="请输入项目概况与建设规模详细信息"  maxlength="500" :show-word-limit="true" ></el-input>
        <div class="flex btns" v-if="nowedit == 9">
          <div class="flex">
            <div class="btnsmall btn_primary h28" @click="changes({'projectDetails':projectDetails})" style="width: 56px">确定</div>
            <div class="cancels h28" @click="nowedit = -1" style="">取消</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="inputxt4">
              <div class="flex" v-if="nowedit == 4 && isDisabled == false">
                <el-input placeholder="待添加" v-model="evaluationBidWay"></el-input>
                <div class="flex">
                  <div class="btnsmall btn_primary h28" @click="changes({'evaluationBidWay':evaluationBidWay})" style="width: 56px">确定</div>
                  <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                </div>
              </div>
              <span :class="{'txt':!evaluationBidWay}" v-else @click="nowedit = 4">{{evaluationBidWay||'待添加'}}</span>
            </div>
          </div>
          <div class="con i">
            <span>开标时间 ：</span>
            <div class="inputime">
              <div class="flex" style="opacity: 0;height: 0">
                <el-date-picker class="timeinput" v-if="isDisabled == false"
                                v-model="bidOpenTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="待添加" @change="changes({'bidOpenTime':bidOpenTime})">
                </el-date-picker>
              </div>
              <span :class="{'txt':!bidOpenTime}">{{bidOpenTime||"待添加"}}<i class="el-icon-caret-bottom"></i></span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="con">
            <span>保证金缴纳 ：</span>
            <div class="inputxt" id="inputxt5">
              <div class="flex" v-if="nowedit == 5 && isDisabled == false">
                <el-input placeholder="待添加" v-model="earnestMoneyPay"></el-input>
                <div class="flex">
                  <div class="btnsmall btn_primary h28" @click="changes({'earnestMoneyPay':earnestMoneyPay})" style="width: 56px">确定</div>
                  <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                </div>
              </div>
              <span :class="{'txt':!earnestMoneyPay}" v-else @click="nowedit = 5">{{earnestMoneyPay||'待添加'}}</span>
            </div>
          </div>
          <div class="con i">
            <span>保证金金额（万元） ：</span>
            <div class="inputxt" id="inputxt6">
              <div class="flex" v-if="nowedit == 6 && isDisabled == false">
                <el-input placeholder="待添加" v-model="earnestMoney"></el-input>
                <div class="flex">
                  <div class="btnsmall btn_primary h28" @click="changes({'earnestMoney':earnestMoney})" style="width: 56px">确定</div>
                  <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                </div>
              </div>
              <span :class="{'txt':!earnestMoney}" v-else @click="nowedit = 6">{{earnestMoney||'待添加'}}</span>
            </div>
          </div>
        </div>
        <div class="row">
        <div class="con">
          <span>开标地点 ：</span>
          <div class="inputxt" id="inputxt7">
            <div class="flex" v-if="nowedit == 7 && isDisabled == false">
              <el-input placeholder="待添加" v-model="bidOpenPlace"></el-input>
              <div class="flex">
                <div class="btnsmall btn_primary h28" @click="changes({'bidOpenPlace':bidOpenPlace})" style="width: 56px">确定</div>
                <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
              </div>
            </div>
            <span :class="{'txt':!bidOpenPlace}" v-else @click="nowedit = 7">{{bidOpenPlace||'待添加'}}</span>
          </div>
        </div>
        <div class="con i">
          <span>评标委员会 ：</span>
          <div class="inputxt" id="inputxt8">
            <div class="flex" v-if="nowedit == 8 && isDisabled == false">
              <el-input placeholder="待添加" v-model="evaluationBidCouncil"></el-input>
              <div class="flex">
                <div class="btnsmall btn_primary h28" @click="changes({'evaluationBidCouncil':evaluationBidCouncil})" style="width: 56px">确定</div>
                <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
              </div>
            </div>
            <span :class="{'txt':!evaluationBidCouncil}" v-else @click="nowedit = 8">{{evaluationBidCouncil||'待添加'}}</span>
          </div>
        </div>
      </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import "@/assets/styles/project.scss"
  import {getJSNR,editXMNR} from '@/api/project/project'
  export default {
    name: 'jsnr',
    props: {
      detailId: { //从企业详情跳转过来ID
        type: Number,
        default: 0
      },
      isDisabled:false,
    },
    data(){
      return{
        nowedit:-1,//当前正在编辑的文本
        id:this.detailId ? this.detailId : parseInt(this.$route.query.id),
        investmentAmount: '',//总投资额
        amountSource: '',//资金来源
        buildProperty: '',//建设性质
        planBidTime: '',//计划招标
        planStartTime: '',//计划开工
        planCompleteTime: '',//计划竣工
        projectDetails: '',//项目概况与建设规模
        evaluationBidWay: '',//评标办法
        bidOpenTime: '',//开标时间
        bidOpenPlace: '',//开标地点
        earnestMoney: '',//保证金金额
        earnestMoneyPay: '',//保证金缴纳
        evaluationBidCouncil: '',//评标委员会
        isDisabled:this.isDisabled,
      }
    },
    watch:{
    },
    mounted(){
      document.addEventListener('mouseup',(e) => {
        if(this.isDisabled == true)
          return false
        let j = 0
        for(var i=1;i<=9;i++){
          let isSelf = document.getElementById('inputxt'+i).contains(event.target)  // 这个是自己的区域
          if(isSelf) {
            this.nowedit = i
          }else {
            j++;
          }
        }
        if(j == 9){
          if(this.nowedit !=-1){
            let param = {}
            switch (this.nowedit) {
              case 1:
                param = {'investmentAmount':this.investmentAmount}
                break;
              case 2 :
                param = {'amountSource':this.amountSource}
                break;
              case 3 :
                param = {'buildProperty':this.buildProperty}
                break;
              case 4 :
                param = {'evaluationBidWay':this.evaluationBidWay}
                break;
              case 5 :
                param = {'earnestMoneyPay':this.earnestMoneyPay}
                break;
              case 6 :
                param = {'earnestMoney':this.earnestMoney}
                break;
              case 7 :
                param = {'bidOpenPlace':this.bidOpenPlace}
                break;
              case 8 :
                param = {'evaluationBidCouncil':this.evaluationBidCouncil}
                break;
              case 9 :
                param = {'projectDetails':this.projectDetails}
                break;
            }
            this.changes(param)
          }
          this.nowedit = -1
        }
      })
    },
    created(){
      this.getJSNR()
    },
    methods:{
      getJSNR(){
        getJSNR(this.id).then(result=>{
          this.investmentAmount = result.data.investmentAmount//总投资额
          this.amountSource = result.data.amountSource//资金来源
          this.buildProperty = result.data.buildProperty//建设性质
          this.planBidTime = result.data.planBidTime//计划招标
          this.planStartTime = result.data.planStartTime//计划开工
          this.planCompleteTime = result.data.planCompleteTime//计划竣工
          this.projectDetails = result.data.projectDetails//项目概况与建设规模
          this.evaluationBidWay = result.data.evaluationBidWay//评标办法
          this.bidOpenTime = result.data.bidOpenTime//开标时间
          this.bidOpenPlace = result.data.bidOpenPlace//开标地点
          this.earnestMoney = result.data.earnestMoney//保证金金额
          this.earnestMoneyPay = result.data.earnestMoneyPay//保证金缴纳
          this.evaluationBidCouncil = result.data.evaluationBidCouncil//评标委员会
        })
      },
      changes(str){
        this.nowedit = -1
        let param = str
        param.id = this.id
        if(this.isDisabled == true)
          return false
        editXMNR(param).then(result=>{
          if(result.code == 200)
            this.$message.success('修改成功!')
          else{
            this.$message.error(res.msg)
            this.getJSNR()
          }
        })
      },
      //输入数字
      number(value){
        this.investmentAmount = value.replace(/^\D*(\d*(?:\.\d{0,6})?).*$/g, '$1')//输入6位小数
      },
    }
  }
</script>

<style scoped>

</style>
