<template>
  <div>
    <div class="miantitle">
      <span>项目管理</span>
      <span> / 商机列表</span>
      <span> / 项目详情</span>
    </div>
    <div class="app-container">
      <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">重庆市轨道交通3号线二期工程4标段施工总承包</strong>
            <div class="locks">
              <img v-if="islock == true" src="@/assets/images/project/lock.png">
              <img v-else src="@/assets/images/project/lockopen.png">
              仅自己可见
              <!--<div class="delform">-->
                <!--<div class="words">{{islock==true?"是否将项目权限修改为他人可见?":"是否将项目权限修改为仅自己可见?"}}</div>-->
                <!--<div>-->
                  <!--<div class="btnsmall btn_primary h28">确定</div>-->
                  <!--<div class="btnsmall btn_cancel h28">取消</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="请选择">
                  <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="请选择">
                  <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 placeholder="待添加" @input="number"></el-input>
                  <div class="flex">
                    <div class="btnsmall btn_primary h28" style="width: 56px">确定</div>
                    <div class="cancels h28" @click="nowedit = -1" style="">取消</div>
                  </div>
                </div>
                <span class="txt" v-else @click="nowedit = 3">待添加</span>
              </div>
            </div>
            <div class="det-con">
              <span>建设地点：</span>

              <div class="select-popper">
                <span :class="{ color_text:address != 'address'}">
                  {{address}}
                  <i class="el-icon-caret-bottom"></i>
                </span>
                <el-cascader class="cascader-region select-location"
                             ref="myCascader" :props="props"
                             :options="addressList"
                             @change="handleChange"></el-cascader>
              </div>
            </div>
            <div class="det-con">
              <span>商务团队：</span>
              <span>李力</span>
            </div>
          </div>
          <div class="schedule">
            <div class="child" v-for="(item,index) in projectStage" @mouseover="hover(index)" @mouseleave="hover(-1)" @click="choose(index,item.dictValue)">
              <img v-if="index == lastindex" src="@/assets/images/project/pro_2.png">
              <img v-else-if="index == thisindex" src="@/assets/images/project/pro_3.png">
              <img v-else src="@/assets/images/project/pro_1.png">
              <span :class="{'now':index == 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'"></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'
  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:true,//仅自己可见
        projectStage:[],//项目阶段
        projectType:[],//项目类型
        projectCategory:[],//项目类别
        nowedit:-1,
        address:'待添加',
        //项目地区
        addressList:[],
        domicile:[],
        props:{ checkStrictly: true, expandTrigger: 'hover' },
      }
    },
    created(){
      this.prvinceTree()
      //项目阶段
      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:[]
      })
    },
    methods: {
      //地区
      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(index){
        this.lastindex = index
      },
      choose(index,value){
        this.thisindex = index
        console.log(value)
      },
      //内容组件切换
      getCom(tag){
        console.log(tag)
        this.thistag = tag
      },
      //输入数字
      number(value){
        this.queryParam.registerCapital = value.replace(/^\D*(\d*(?:\.\d{0,6})?).*$/g, '$1')//输入6位小数
      },

      handleChange(value) {
        // console.log(value);
        let str = ''
        var labelString = this.$refs.myCascader.getCheckedNodes()[0].pathLabels;
        labelString.forEach((item,index)=>{
          if(index == 0)
            str += item
          else
            str += '-'+item
        })
        this.address = str
        let arr = this.$refs.myCascader.getCheckedNodes();
        // console.log(arr)
        let province = [],
          city = [],
          area = [];
        this.domicile = [];
        for (var i in arr) {
          if (arr[i].parent) {
            if (!arr[i].parent.checked) {
              arr[i].hasChildren && city.push(arr[i].value);
              arr[i].hasChildren && this.domicile.push(arr[i].label);
              !arr[i].hasChildren && area.push(arr[i].value);
              !arr[i].hasChildren && this.domicile.push(arr[i].label);
            }
          } else {
            province.push(arr[i].value);
            this.domicile.push(arr[i].label);
          }
        }
        // var obj = JSON.parse(JSON.stringify(this.searchParam));
        // obj.province = province;
        // obj.city = city;
        // obj.area = area;
        // this.searchParam = obj;
      },
    }
  }
</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>
