<template>
  <div id="jsnr" class="project-detail-list">
    <div class="project-detail-list-inner">
      <div class="miantitle">
        <template v-if="!detailId">
          <span>项目管理</span>
          <span class="on" @click="tolist"> / 商机列表</span>
        </template>
        <span class="on" v-else @click="cooperateList">合作情况</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="protypes"
                :class="{'i1':ProjectData.status == 0,'i2':ProjectData.status == 1,'i3':ProjectData.status == 2,'i4':ProjectData.status == 3}"
                v-if="isDisabled == false">
                <span v-for="(item,index) in projectStatus"><i v-if="ProjectData.status == item.dictValue">{{item.dictLabel}}</i></span>
                <el-select class="sels" v-model="ProjectData.status" @change="editXMSL({status:ProjectData.status})">
                  <el-option v-for="(item,index) in projectStatus" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
              </div>
              <div class="locks" v-if="ProjectData.isFounder == 1">
                <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" readonly>
              <div class="det-con">
                <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="item.dictCode" :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="{'txt':xmlb == '请选择'}">
                      {{xmlb}}
                      <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-select v-if="isDisabled==false" 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}" :key="keys2" id="inputxt">
                  <div class="flex" v-if="nowedit == 3 && isDisabled == false">
                    <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>
                    {{addresstxt}}
                    <i class="el-icon-caret-bottom"></i>
                  </span>
                  <el-cascader separator="-" :disabled="isDisabled" 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" @click="choose(item.dictValue)" :class="{'on':item.dictValue == thisindex}">
              <div class="left"></div>
              <span>{{item.dictLabel}}</span>
              <div class="right"></div>
            </div>

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

        <el-card class="box-card noborder top12 project-detail-tablist" style="margin-bottom: 12px">
          <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'" :key="keys" @Refreshs="getsl" :detailId="detailId"></xmsl>
        <!--建设内容-->
        <jsnr v-if="thistag == 'jsnr'" :key="keys1" :isDisabled='isDisabled' @Refrehmoney="getXMSL" :detailId="detailId"></jsnr>
        <!--联系人-->
        <lxr v-if="thistag == 'lxr'" :isDisabled='isDisabled' :detailId="detailId" listtype="project"></lxr>
        <!-- 开标记录 -->
        <bid-opening-record v-if="thistag == 'bidOpeningRecord'"></bid-opening-record>
        <!--跟进记录-->
        <gjjl v-if="thistag == 'gjjl'" :isDisabled='isDisabled' types="gjjl" :detailId="detailId"></gjjl>
        <!--工作待办-->
        <gzdb v-if="thistag == 'gzdb'" :isDisabled='isDisabled' :detailId="detailId"></gzdb>
        <!--资料文档-->
        <zlwd v-if="thistag == 'zlwd'" :isDisabled='isDisabled' :detailId="detailId"></zlwd>
        <!--相关企业-->
        <xgqy v-if="thistag == 'xgqy'" :isDisabled='isDisabled' :detailId="detailId"></xgqy>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/styles/project.scss";
import "@/assets/styles/public.scss";
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 BidOpeningRecord from "./component/BidOpeningRecord.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, BidOpeningRecord },
  props: {
    detailId: { //从企业详情跳转过来ID
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      lastindex: 0,//上一个点击步骤
      thisindex: 1,//当前点击步骤
      tabslist: [//项目信息展示板块
        { tag: 'xmsl', name: '项目速览' },
        { tag: 'jsnr', name: '建设内容' },
        { tag: 'lxr', name: '联系人' },
        { tag: 'bidOpeningRecord', name: '开标记录' },
        { tag: 'gjjl', name: '跟进记录' },
        { tag: 'gzdb', name: '工作待办' },
        { tag: 'zlwd', name: '资料文档' },
        { tag: 'xgqy', name: '相关企业' },
      ],
      thistag: 'xmsl',
      xmlx: '请选择',//项目类型
      xmlb: '请选择',//项目类别
      xmjd: "请选择",//项目阶段
      islock: false,
      projectStage: [],//项目阶段
      projectType: [],//项目类型
      projectCategory: [],//项目类别
      projectStatus: [],//项目状态
      nowedit: -1,
      address: [],
      addresstxt: '待添加',
      //项目地区
      addressList: [],
      domicile: [],
      props: { checkStrictly: true, expandTrigger: 'hover' },
      id: '',
      ProjectData: {},
      isDisabled: false,
      keys: 1,
      keys1: 2,
      keys2: 20,
    };
  },
  created() {
    this.thistag = this.$route.query.tag ? this.$route.query.tag : this.thistag;
    this.prvinceTree();
    this.id = this.detailId ? this.detailId : 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 : [];
    });
    //项目状态
    getDictType('project_status_type').then(result => {
      this.projectStatus = result.code == 200 ? result.data : [];
    });
    //获取基本信息
    this.getXMSL();
  },
  mounted() {
    document.getElementById('jsnr').addEventListener('mouseup', (e) => {
      if (this.isDisabled == true)
        return false;
      var one = document.getElementById("inputxt");
      if (one) {
        if (!one.contains(event.target)) {
          if (this.nowedit != -1) {
            this.editXMSL({ investmentAmount: this.ProjectData.investmentAmount });
          }
          this.nowedit = -1;
        } else {
          this.nowedit = 3;
        }
      }
    });
  },
  methods: {
    getsl(data) {
      this.choose(data.projectStage);
    },
    handleALL(event) {
      if (this.isDisabled == true)
        return false;

    },
    getXMSL() {
      getXMSL(this.id).then(result => {
        this.ProjectData = result.code == 200 ? result.data : {};
        this.$route.query.projectname = result.data.projectName;
        this.isDisabled = result.data.isFounder == 1 ? false : true;
        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.xmjd = result.data.projectStage == "" || result.data.projectStage == null ? "请选择" : result.data.projectStage;
        this.thisindex = result.data.projectStage;
        this.ProjectData.status = result.data.status.toString();
        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;
        this.keys2++;
      });
    },
    locks(isPrivate) {
      isPrivate = isPrivate == 0 ? 1 : 0;
      this.editXMSL({ isPrivate: isPrivate });
      this.islock = false;
      this.ProjectData.isPrivate = isPrivate;
    },
    editXMSL(param) {
      if (this.isDisabled == true)
        return false;
      let params = param;
      params.id = this.id;
      if (param.status) {
        param.status = parseInt(param.status);
      }
      editXMNR(JSON.stringify(params)).then(res => {
        if (res.code == 200) {
          // this.$message.success('修改成功！')
          if (this.nowedit == 1) {
            let _this = this;
            setTimeout(function () {
              _this.keys1++;
            }, 1000);
          }
        } 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) {
      if (this.isDisabled == true)
        return false;
      this.thisindex = value;
      this.editXMSL({ projectStage: value });
      let _this = this;
      setTimeout(function () {
        _this.keys++;
      }, 1000);
    },
    //内容组件切换
    getCom(tag) {
      this.thistag = tag;
    },
    //输入数字
    number(value) {
      this.ProjectData.investmentAmount = value == "" ? "" : 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);
    },

    // 跳转到企业详情合作情况
    cooperateList() {
      this.$emit('close-detail');
    },
    tolist() {
      this.$router.push({ path: '/project/projectList' });
    },
  }
}
</script>

<style lang="scss" scoped>
.project-detail-list {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;

  .project-detail-list-inner {
    width: 100%;
    height: 100%;

    .miantitle {
      margin: 0px;
      padding: 12px 24px;
    }

    .app-container {
      padding-top: 0px;
    }
  }

  .project-detail-tablist {
    position: sticky;
    top: 0px;
    z-index: 10;
  }
}
.select-popper {
  top: 0;
}
.head {
  .titles {
    line-height: 31px;
    .protypes {
      min-width: 96px;
      padding: 0 18px;
      height: 24px;
      border-radius: 20px;
      margin-left: 16px;
      display: inline-block;
      cursor: pointer;
      font-size: 12px;
      line-height: 24px;
      text-align: center;

      position: relative;
      &.i1 {
        background: #fcf3df;
        color: #b5760b;
        &:hover {
          background: #f3e2bb;
        }
      }
      &.i2 {
        background: #e5f6e4;
        color: #09a442;
        &:hover {
          background: #b8ebb7;
        }
      }
      &.i3 {
        background: #e5f2ff;
        color: #0081ff;
        &:hover {
          background: #cbe5ff;
        }
      }
      &.i4 {
        background: #F3F4F5;
        color: #999999;
        &:hover {
          background: #D9D9D9;
        }
      }
      > span {
        width: 100%;
      }
      .sels {
        opacity: 0;
      }
      .el-select {
        position: absolute;
        top: 0;
        width: 100%;
        left: 0;
        height: 24px;
        ::v-deep.el-input,
        ::v-deep.el-input__inner {
          height: 24px;
        }
      }
    }
    .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 {
    width: 100%;
    .child {
      cursor: pointer;
      margin-right: 4px;
      color: rgba(35, 35, 35, 0.8);
      position: relative;
      min-width: 137px;
      padding: 0 20px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: #f3f4f5;
      margin-bottom: 8px;
      display: inline-block;
      .left {
        width: 10px;
        height: 32px;
        background: url("../../../assets/images/project/icol1.png") no-repeat
          top center #fff;
        background-size: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
      .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 32px;
        background: url("../../../assets/images/project/icor1.png") no-repeat
          top center #fff;
        background-size: 100%;
      }
      &:hover {
        background: #e3e6ea;
        .left {
          background: url("../../../assets/images/project/icol2.png") no-repeat
            top center #fff;
          background-size: 100%;
        }
        .right {
          background: url("../../../assets/images/project/icor2.png") no-repeat
            top center #fff;
          background-size: 100%;
        }
      }

      &.on {
        background: #0081ff;
        color: #fff;
        .left {
          background: url("../../../assets/images/project/icol3.png") no-repeat
            top center #fff;
          background-size: 100%;
        }
        .right {
          background: url("../../../assets/images/project/icor3.png") no-repeat
            top center #fff;
          background-size: 100%;
        }
      }
    }
  }
  .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>
