<template>
  <div>
    <div class="miantitle">
      <span>项目管理</span>
      <span> / 商机列表</span>
      <span> / 项目详情</span>
    </div>
    <div class="app-container" v-if="ProjectData">
      <el-card class="box-card noborder pad16 overflows">
        <div class="head baseinfo">
          <div class="titles">
            <img src="@/assets/images/project/headimg.png" class="headimg">
            <strong class="text">{{ProjectData.projectName}}</strong>
            <div class="locks">
              <div @click="islock=true">
              <img v-if="ProjectData.isPrivate == 0" src="@/assets/images/project/lock.png">
              <img v-else src="@/assets/images/project/lockopen.png">
              {{ProjectData.isPrivate == 0?"仅自己可见":"他人可见"}}
              </div>
              <div class="delform" v-if="islock">
                <div class="words">{{ProjectData.isPrivate == 0?"是否将项目权限修改为他人可见?":"是否将项目权限修改为仅自己可见?"}}</div>
                <div>
                  <div class="btnsmall btn_primary h28" @click="locks(ProjectData.isPrivate)">确定</div>
                  <div class="btnsmall btn_cancel h28" @click="islock=false">取消</div>
                </div>
              </div>
            </div>
          </div>
          <div class="contets row">
            <div class="det-con">
              <span>项目类型：</span>
              <div class="select-popper" >
                <span class="color_text" :class="{'txt':xmlx == '请选择'}">
                  {{xmlx}}
                  <i class="el-icon-caret-bottom"></i>
                </span>
                <el-select v-model="xmlx" class="select-multiple" placeholder="请选择" @change="editXMSL({projectType:xmlx})">
                  <el-option v-for="(item,index) in projectType" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
              </div>
            </div>
            <div class="det-con">
              <span>项目类别：</span>
              <span>
              <div class="select-popper" >
                <span class="color_text" :class="{'txt':xmlb == '请选择'}">
                  {{xmlb}}
                  <i class="el-icon-caret-bottom"></i>
                </span>
                <el-select v-model="xmlb" class="select-multiple" placeholder="请选择" @change="editXMSL({projectCategory:xmlb})">
                  <el-option v-for="(item,index) in projectCategory" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
              </div>
                </span>
            </div>
            <div class="det-con con" >
              <span>投资估算（万元）：</span>
              <div class="inputxt i" :class="{'nomar':nowedit != 3}">
                <div class="flex" v-if="nowedit == 3">
                  <el-input v-model="ProjectData.investmentAmount" placeholder="待添加" @input="number"></el-input>
                  <div class="flex">
                    <div class="btnsmall btn_primary h28" style="width: 56px" @click="editXMSL({investmentAmount:ProjectData.investmentAmount})">确定</div>
                    <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                  </div>
                </div>
                <span :class="{txt:ProjectData.investmentAmoun==''}" v-else @click="nowedit = 3">{{ProjectData.investmentAmount||'待添加'}}</span>
              </div>
            </div>
            <div class="det-con">
              <span>建设地点：</span>

              <div class="select-popper">
                <span :class="{ color_text:addresstxt != '待添加'}">
                  {{addresstxt}}
                  <i class="el-icon-caret-bottom"></i>
                </span>
                <el-cascader class="cascader-region select-location" v-model="ProjectData.address"
                             ref="myCascader" :props="props"
                             :options="addressList"
                             @change="handleChange"></el-cascader>
              </div>
            </div>
            <div class="det-con">
              <span>商务团队：</span>
              <span>{{ProjectData.team}}</span>
            </div>
          </div>
          <div class="schedule">
            <div class="child" v-for="(item,index) in projectStage" @mouseover="hover(item.dictValue)" @mouseleave="hover(-1)" @click="choose(item.dictValue)">
              <img v-if="item.dictValue == lastindex" src="@/assets/images/project/pro_2.png">
              <img v-else-if="item.dictValue == thisindex" src="@/assets/images/project/pro_3.png">
              <img v-else src="@/assets/images/project/pro_1.png">
              <span :class="{'now':item.dictValue == thisindex}">{{item.dictLabel}}</span>
            </div>

          </div>
        </div>
      </el-card>

      <el-card class="box-card noborder">
        <div class="tabslist">
          <div class="tab" v-for="(item,index) in tabslist" :class="{'on':thistag == item.tag}" @click="getCom(item.tag)">
            <span>{{item.name}}</span>
          </div>
        </div>
      </el-card>
      <!--项目概览-->
      <xmsl v-if="thistag == 'xmsl'" :datas="ProjectData"></xmsl>
      <!--建设内容-->
      <jsnr v-if="thistag == 'jsnr'"></jsnr>
      <!--联系人-->
      <lxr v-if="thistag == 'lxr'"></lxr>
      <!--跟进记录-->
      <gjjl v-if="thistag == 'gjjl'" types="gjjl"></gjjl>
      <!--工作待办-->
      <gzdb v-if="thistag == 'gzdb'"></gzdb>
      <!--资料文档-->
      <zlwd v-if="thistag == 'zlwd'"></zlwd>
      <!--相关企业-->
      <xgqy v-if="thistag == 'xgqy'"></xgqy>
    </div>
  </div>
</template>

<script>
  import "@/assets/styles/project.scss"
  import "@/assets/styles/public.css"
  import {getDictType,} from '@/api/main'
  import xmsl from './component/xmsl.vue'
  import jsnr from './component/jsnr.vue'
  import lxr from './component/lxr.vue'
  import gjjl from './component/gjjl.vue'
  import gzdb from './component/gzdb.vue'
  import zlwd from './component/zlwd.vue'
  import xgqy from './component/xgqy.vue'
  import prvinceTree from '@/assets/json/provinceTree'
  import {getXMSL,editXMNR} from '@/api/project/project'
  export default {
    name: 'detail',
    components: {xmsl,jsnr,lxr,gjjl,gzdb,zlwd,xgqy},
    data(){
      return {
        lastindex: 0,//上一个点击步骤
        thisindex: 1,//当前点击步骤
        tabslist:[//项目信息展示板块
          {tag:'xmsl',name:'项目速览'},
          {tag:'jsnr',name:'建设内容'},
          {tag:'lxr',name:'联系人'},
          {tag:'gjjl',name:'跟进记录'},
          {tag:'gzdb',name:'工作待办'},
          {tag:'zlwd',name:'资料文档'},
          {tag:'xgqy',name:'相关企业'},
          ],
        thistag:'xmsl',
        xmlx:'请选择',//项目类型
        xmlb:'请选择',//项目类别
        islock:false,
        projectStage:[],//项目阶段
        projectType:[],//项目类型
        projectCategory:[],//项目类别
        nowedit:-1,
        address:[],
        addresstxt:'待添加',
        //项目地区
        addressList:[],
        domicile:[],
        props:{ checkStrictly: true, expandTrigger: 'hover' },
        id:'',
        ProjectData:{},
      }
    },
    created(){
      this.prvinceTree()
      this.id = this.$route.query.id
      //项目阶段
      getDictType('project_stage_type').then(result=>{
        this.projectStage = result.code == 200 ? result.data:[]
      })
      //项目类型
      getDictType('project_type').then(result=>{
        this.projectType = result.code == 200 ? result.data:[]
      })
      //项目类别
      getDictType('project_category').then(result=>{
        this.projectCategory = result.code == 200 ? result.data:[]
      })
      //获取基本信息
      this.getXMSL()
    },
    methods: {
      getXMSL(){
        getXMSL(this.id).then(result=>{
          this.ProjectData = result.code==200?result.data:{}
          this.$route.query.projectname = result.data.projectName
          this.xmlx = result.data.projectType==""||result.data.projectType==null?"请选择":result.data.projectType
          this.xmlb = result.data.projectCategory==""||result.data.projectCategory==null?"请选择":result.data.projectCategory
          this.thisindex = result.data.projectStage
          let list = []
          let txt = ''
          if(result.data.provinceId != ""){
            list.push(result.data.provinceId)
          }
          if(result.data.cityId){
            list.push(result.data.cityId)
          }
          if(result.data.districtId){
            list.push(result.data.districtId)
          }
          if(result.data.provinceName){
            txt += result.data.provinceName
          }
          if(result.data.cityName){
            txt += '/'+result.data.cityName
          }
          if(result.data.districtName){
            txt += '/'+result.data.districtName
          }
          this.address = list.length>0?list:"待添加"
          this.addresstxt = txt == "" ? "待添加":txt
        })

      },
      locks(isPrivate){
        isPrivate = isPrivate==0?1:0
        this.editXMSL({isPrivate:isPrivate})
        this.lock = false
      },
      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
      },
      //地区
      async prvinceTree() {
        // await axios.post("https://files.jiansheku.com/file/json/common/provinceTree.json", {}, {
        //   headers: {
        //     'Content-Type': 'application/json'
        //   }
        // }).then(res => {
        //   if (res.data.code == 200) {
        //     console.log(res.data.data)
        //   }
        // })
        // console.log(prvinceTree)
        this.addressList = prvinceTree;
        this.getadd(this.addressList)
      },
      //处理项目地区
      getadd(row) {
        this.addrcallback(row,this.getadd)
      },
      addrcallback(row,callback){
        if(row){
          row.forEach(item => {
            item.value = item.id
            callback &&  callback(item.children)
          })
        }
      },

      //进度条悬浮、点击事件
      hover(value){
        this.lastindex = value
      },
      choose(value){
        this.thisindex = value
        this.editXMSL({projectStage:value})
      },
      //内容组件切换
      getCom(tag){
        this.thistag = tag
      },
      //输入数字
      number(value){
        this.queryParam.registerCapital = value.replace(/^\D*(\d*(?:\.\d{0,6})?).*$/g, '$1')//输入6位小数
      },

      handleChange(value) {
        var labelString = this.$refs.myCascader.getCheckedNodes()[0].pathLabels;
        let param = {
          provinceId:null,
          provinceName:null,
          cityId:null,
          cityName:null,
          districtId:null,
          districtName:null,
        }
        let txt = ''
        labelString.forEach((item,index)=>{
          let str = ''
          if(index >0){
            str = '/'
          }
          txt += str + item
          if(index == 0){
            param.provinceName = item
          }
          if(index == 1){
            param.cityName = item
          }
          if(index == 2){
            param.districtName = item
          }
        })
        this.addresstxt = txt
        value.forEach((item,index)=>{
          if(index == 0){
            param.provinceId = parseInt(item)
          }
          if(index == 1){
            param.cityId = parseInt(item)
          }
          if(index == 2){
            param.districtId = parseInt(item)
          }
        })
        this.editXMSL(param)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .head{
    .titles{
      line-height: 31px;
      .headimg{
        float: left;
        margin-right: 16px;
      }
      .text{
        font-size: 16px;
        line-height: 31px;

        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      }
      .locks{
        display: inline-block;
        margin-left: 16px;
        height: 24px;
        background: #F3F4F5;
        border-radius: 12px;
        padding: 0 8px;
        font-size: 12px;
        color: #4f4f4f;
        line-height: 24px;
        cursor: pointer;
        font-weight: 400;
        position: relative;
        &:hover{
          background-color: #DFE0E2;
        }
        >img{
          float: left;
          width: 16px;
          margin-top: 3px;
          margin-right: 2px;
        }
      }
    }
    .contets{
      padding: 15px 0 20px;
      .det-con{
        font-size: 14px;
        display: inline-block;
        padding-right: 43px;
        &:last-child{
          padding-right: 0;
        }
        >span:nth-child(2n-1){
          color: #a7a7a7;
        }
      }
    }
    .schedule{
      display: flex;
      padding-bottom: 8px;
      .child{
        cursor: pointer;
        margin-right: 4px;
        color: #4f4f4f;
        /*color: rgb(79,79,79);*/
        position: relative;
        width: 137px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        >img{
          left: 0;
          top: 0;
          position: absolute;
          width: 100%;
          z-index: 0;
        }
        >span{
          position: relative;
          z-index: 1;
          &.now{
            color: #fff;
          }
        }
      }
    }
    .delform{
      right: -79px;
      top: 33px;
      width: 252px;
    }
  }
  .tabslist{
    padding: 0 24px;
    display: flex;
    height: 48px;
    .tab{
      font-size: 16px;
      line-height: 46px;
      margin-right: 32px;
      cursor: pointer;
      &:hover{
        color: #0081FF;
      }
      &.on{
        color: #0081FF;
        font-weight: 700;
        border-bottom: 2px solid #0081FF;
      }
    }
  }
  .det-con.con{
    width: auto;
    margin-top: -4px;
    .inputxt{
      width: 100px;
      margin-right: 70px;
      &.nomar{
        margin: 0;
      }
    }
  }
</style>
