<template>
  <div class="details-of-cooperation">

    <template v-if="!isDetailId">
      <div class="cooperate">
        <template v-if="ifEmpty">
          <head-form
            :form-data="formData"
            :query-params="queryParams"
            :total="tableDataTotal"
            :isExcel="true"
            :slots="true"
            @handle-search="handleSearch"
          >
            <template slot="slot">
              <div class="flex-box query-add">
                <el-button type="primary" icon="el-icon-plus" @click="drawer = true">添加合作情况</el-button>
              </div>
            </template>
          </head-form>

          <tables
            :tableLoading="tableLoading"
            :tableData="tableData"
            :forData="forData"
            :tableDataTotal="tableDataTotal"
            :queryParams="queryParams"
            @handle-current-change="handleCurrentChange"
          >
            <template slot="projectName" slot-scope="scope">
              <span class="link-type" @click="clickDetail(scope.row.id)" >
                {{ scope.row.projectName }}
              </span>
            </template>
            <template slot="investmentAmount" slot-scope="scope">
                {{ scope.row.investmentAmount ? numbers(scope.row.investmentAmount) : '--' }}
            </template>
            <template slot="status" slot-scope="scope">
                {{ scope.row.status || scope.row.status == 0 ? handleStatus(scope.row.status) : '--' }}
            </template>
          </tables>

        </template>
        <template v-else>
          <div class="cooperate_empty">
            <img src="@/assets/images/project/empty.png"/>
            <div class="empty-t">暂无合作情况数据</div>
            <div class="empty-d">抱歉，你还未合作情况数据，快去添加吧</div>
            <el-button type="primary" class="empty-b" @click="drawer = true">添加合作情况</el-button>
          </div>
        </template>
        <!-- 弹窗关联项目 -->
        <el-dialog
          class="cooperate_addhzqk"
          :visible.sync="drawer"
          :before-close="handleClose"
          width="604px">
          <div class="poptitle">
            <img src="@/assets/images/economies/icon.png">
            <span>{{ companyInfo && companyInfo.companyName || customerInfo.companyName }}</span>
          </div>
          <div class="addhzqk_from">
            <el-form :model="addParam" :rules="rules" ref="addParam"  size="small" label-width="70px">
              <el-form-item label="项目名称：" prop="projectName" label-width="120px">
                <el-input v-model="addParam.projectName" placeholder="请输入项目名称" @input="resetProjectSearch();getCompany1()"></el-input>
                <div class="resultlist" v-infinite-scroll="load" v-if="showlist1">
                  <div v-for="(item,index) in companData1" @click="selCompany1(item.projectName)"><span  v-html="item.projectName"></span></div>
                </div>
              </el-form-item>
              <div class="erow">
                <div class="elcol">
                  <el-form-item label="项目阶段：" prop="projectStage">
                    <el-select v-model="addParam.projectStage" style="width: 175px" class="form-content-width" placeholder="请选择项目阶段">
                      <el-option v-for="(item, index) in projectStage" :key="index" :label="item.dictLabel" :value="item.dictValue" />
                    </el-select>
                  </el-form-item>
                </div>
                <div class="elcol">
                  <el-form-item label="项目类别：" prop="projectCategory">
                    <el-select v-model="addParam.projectCategory" style="width: 175px" class="form-content-width" placeholder="请选择项目类别">
                      <el-option v-for="(item, index) in projectCategory" :key="index" :label="item.dictLabel" :value="item.dictValue" />
                    </el-select>
                  </el-form-item>
                </div>
              </div>

              <div class="erow">
                <div class="elcol">
                  <el-form-item label="项目状态：" prop="status">
                    <el-select v-model="addParam.status" style="width: 175px" class="form-content-width" placeholder="请选择项目状态">
                      <el-option v-for="(item, index) in status" :key="index" :label="item.dictLabel" :value="item.dictValue" />
                    </el-select>
                  </el-form-item>
                </div>
                <div class="elcol">
                  <el-form-item label="可见范围：" prop="isPrivate">
                    <el-select v-model="addParam.isPrivate" style="width: 175px" class="form-content-width" placeholder="请选择">
                      <el-option v-for="(item, index) in isPrivate" :key="index" :label="item.name" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </div>
              </div>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="投资估算（万）：" prop="investmentAmount"  label-width="120px">
                    <el-input v-model="addParam.investmentAmount" placeholder="请输入投资估算" style="width: 175px" @input="number"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item style="text-align: right;">
                <el-button @click="handleClose">关闭</el-button>
                <el-button type="primary" @click="submitForm">添加</el-button>
              </el-form-item>

            </el-form>
          </div>
        </el-dialog>
      </div>
    </template>

    <div v-else class="cooperate-detail">
      <Detail :detailId="detailId" @close-detail="closeDetail" />
    </div>

  </div>
</template>

<script>
import mixin from '../mixins/mixin'
import {getEnterprise,getDictType,} from '@/api/main'
import {
  getList,
  customerInfo,
  queryProject
} from '@/api/detail/party-a/cooperate'
import {addProject} from '@/api/project/project'
import Detail from "../../../project/projectList/detail"
export default {
  name: 'Cooperate',
  mixins: [mixin],
  components: {
    Detail
  },
  props: ['customerIds','companyInfo','cooDetail','customerInfo'],
  data() {
    return {
      ifEmpty:false,
      queryParams: {
        customerId: this.customerIds,
        pageNum: 1,
        pageSize: 20
      },
      forData: [
        {label: '项目名称', prop: 'projectName', slot: true},
        {label: '项目阶段', prop: 'projectStage', width: '120'},
        {label: '投资金额(万元)', prop: 'investmentAmount', width: '140', slot: true},
        {label: '项目状态', prop: 'status', width: '90', slot: true}
      ],
      formData: [
        { type: 1, fieldName: 'projectStage',width:'94', value: '', placeholder: '项目阶段', options: []},
        { type: 1, fieldName: 'status', width:'94',value: '', placeholder: '项目状态', options: []},
        { type: 3, fieldName: 'projectName', width:'240', value: '', placeholder: '输入项目名称关键字搜索'},
      ],
      stageOptions:[],
      statusOptions:[],
      //列表
      tableLoading:false,
      tableData:[],
      tableDataTotal:0,
      //弹窗-关联项目
      drawer: false,
      drawer1: false,
      direction: 'rtl',
      //业主单位
      showlist:false,
      companData:[],
      //项目名称
      showlist1:false,
      companData1:[],
      //弹窗-添加项目
      dialogVisible: true,
      addParam: {
        userId:'',
        projectName:'',
        companyId:'',
        ownerCompany:'',
        projectStage:'',
        projectCategory:'',
        investmentAmount:'',
        status:'',
        isPrivate:0,
        customerId:'',
      },
      rules: {
        projectName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
        ],
        ownerCompany: [
          { required: true, message: '请输入业主单位', trigger: 'blur' },
        ],
      },
      projectStage:[], //项目阶段
      projectType:[], //项目类型
      projectCategory:[], //项目类别
      status:[], //项目状态
      isPrivate:[
        {
          value: 0,
          name: '仅自己可见'
        },
        {
          value: 1,
          name: '他人可见'
        }
      ],//可见访问
      //客户详情
      info: this.customerInfo,
      //
      detailId: null,
      isDetailId: false,
      projectpage : 1,
      isscroll : false,
      threshold : false,
    }
  },
  watch:{
    cooDetail(newVal, oldVal){
      this.isDetailId = newVal
    }
  },
  created() {
    this.list()
    //项目阶段
    this.handleOptions('project_stage_type',0)
    //项目状态
    this.handleOptions('project_status_type',1)
    //项目阶段
    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.status = result.code == 200 ? result.data:[]
    })
  },
  computed: {

  },
  methods: {
    load(){
      if(this.threshold) return;
      if(this.isscroll){
        this.getCompany1()
      }
    },
    handleQuery(params) {
      this.list(params)
    },
    // 列表
    list(params){
      let data = params ? params : this.queryParams
      this.tableLoading = true
      getList(data).then(res=>{
        if(res.code == 200){
          if(res.rows.length >0){
            this.ifEmpty = true
          }
          this.tableData = res.rows
          this.tableData.forEach(item=>{
            let investmentAmount = item.investmentAmount
            if(investmentAmount){
              investmentAmount = parseFloat(investmentAmount)
              if(investmentAmount<=0){
                item.investmentAmount = null
              }
            }else{
              item.investmentAmount = null
            }
          })
          this.tableDataTotal = res.total
          this.tableLoading = false
        }
      })
    },

    //弹窗-添加项目
    handleClose(formName) {
      this.$refs.addParam.resetFields();
      this.drawer = false
      this.showlist = false
      this.showlist1 = false
    },
    submitForm(){
      this.$refs.addParam.validate((valid) => {
        if (valid) {
          this.addParam.customerId = this.queryParams.customerId
          this.addParam.companyId = this.info.companyId
          this.addParam.userId = this.info.userId
          this.addParam.investmentAmount = this.addParam.investmentAmount ? this.addParam.investmentAmount : null
          addProject(this.addParam).then(result=>{
            if(result.code == 200){
              this.$message.success('添加成功！')
              this.handleCurrentChange(1)
              this.handleClose()
            }else{
              this.$message.error(result.msg)
            }
          })
        }
      });
    },
    resetProjectSearch() {
      this.companData1 = []
      this.projectpage = 1
      console.log(this.companData1);
    },
    //获取项目名称
    getCompany1(){
      if (this.addParam?.projectName?.length>=2){
        this.threshold = true;
        let param = {
          projectName:this.addParam?.projectName,
          pageSize:20,
          pageNum:this.projectpage
        }
        queryProject(JSON.stringify(param)).then(result=>{
          if(result.code != 200){
              return false
          }
          if(result.data && result.data?.length) {
            this.showlist1 = true;
            this.isscroll = true
            this.companData1 = [...this.companData,...result.data]
            this.projectpage ++;
            return;
          }
          this.isscroll = false;
        }).finally(() => this.threshold = false)
      }
    },
    selCompany1(item){
      this.addParam.projectName = item.replace(/<[^>]+>/g, '')
      this.showlist1 = false
    },
    //获取业主单位
    getCompany(value){
      if (value.length>=2){
        let param = {
          keyword:value,
          page:{
            limit:20,
            page:1
          }
        }
        getEnterprise(JSON.stringify(param)).then(result=>{
          if(result.code != 200)
            return
          this.showlist = true
          this.companData = result.data.list
        })
      }
    },
    selCompany(item){
      this.addParam.ownerCompany = item.name.replace(/<[^>]+>/g, '')
      this.showlist = false
    },
    // 处理条件下拉
    handleOptions(name,index){
      getDictType(name).then(res=>{
        if(res.code == 200 && res.data){
          for(var i=0;i<res.data.length;i++){
            this.formData[index].options.push({
              name:res.data[i].dictLabel,
              value:res.data[i].dictValue
            })
          }
        }
      })
    },
    //处理项目状态
    handleStatus(val){
      let da = this.formData[1].options.find(option => option.value == val)
      if(da){
        return da.name
      }
    },
    //输入数字
    number(value){
      this.addParam.investmentAmount = value.replace(/^\D*(\d*(?:\.\d{0,6})?).*$/g, '$1')//输入2位小数
    },
    //打开详情
    clickDetail(id){
      this.detailId = id
      this.isDetailId = true
      this.$emit('detail')
    },
    //关闭详情
    closeDetail(){
      this.isDetailId = false
      this.detailId = ''
    },
    // 转科学计算
    numbers(v){
      return Number(v);
    }

  }
}
</script>
<style lang="scss" scoped>
.cooperate{
  background: #ffffff;
  border-radius: 4px;
  padding: 16px;
  input{
    border: 1px solid #EFEFEF;
  }
  ::v-deep .el-form-item{
    margin-right: 8px !important;
  }
  .resultlist{
    position: absolute;
    width: 100%;
    max-height: 218px;
    background: #FFFFFF;
    -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    overflow: auto;
    z-index: 2;
    text-indent: 13px;
    cursor: pointer;
  }
  .cooperate-name{
    ::v-deep .el-form-item__content{
      display: flex;
      span{
        width: 60px;
        height: 32px;
        background: #F5F5F5;
        text-align: center;
        color: #0081FF;
        border: 1px solid #EFEFEF;
        border-left: 0;
        cursor: pointer;
      }
    }
    ::v-deep .el-input__inner{
      border-right: 0;
      border-radius: 2px 0 2px 0;
    }
  }
  .query-add{
    button{
      width: 124px;
      line-height: 32px;
      height: 32px;
      background: #0081FF;
      border-radius: 2px 2px 2px 2px;
      padding: 0;
      color: #ffffff;
      span{
        color: #ffff;
        margin-left: 4px;
      }
    }
  }
  .cooperate_empty{
    text-align: center;
    height: calc(100vh - 170px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    img{
      width: 108px;
      height: 108px;
      border-radius: 50%;
      margin-bottom: 24px;
    }
    .empty-t{
      font-size: 16px;
      color: #333333;
      margin-bottom: 8px;
    }
    .empty-d{
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      margin-bottom: 24px;
    }
    .empty-b{
      width: 116px;
      height: 36px;
      background: #0081FF;
      border-radius: 4px;
      padding: 0;
    }
  }
  .table-item{
    margin-top: 10px;
  }
//  弹窗
  .cooperate_addhzqk{
    .poptitle {
      line-height: 48px;
      border-bottom: 1px solid #E1E1E1;
      height: 48px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      img {
        width: 17px;
        margin: 16px;
        float: left;
      }
      span {
        font-weight: bold;
        font-size: 16px;
        color: #232323;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        width: 385px;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .addhzqk_top{
      padding: 14px 16px;
      border-bottom: 1px solid #E1E1E1;
      .addhzqk_top_t{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .top_t_h1{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
          display: flex;
          align-items: center;
          font-weight: 700;
          img{
            width: 17px;
            height: 17px;
            margin-right: 8px;
          }
        }
        .top_t_close{

        }
      }
      .addhzqk_top_d{
        display: flex;
        margin-top: 10px;
        .top_d_item{
          font-size: 14px;
          color: rgba(35,35,35,0.4);
          margin-left: 28px;
          display: flex;
          //flex: 1;
          span{
            color: rgba(35,35,35,0.8);
            display: inline-block;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            cursor: pointer;
            flex: 1;
          }
          &:nth-child(1){
            max-width: 15%;
          }
          &:nth-child(2){
            max-width: 30%;
          }
          &:nth-child(3){
            max-width: 50%;
          }
        }
      }
    }
    .addhzqk_from{
      //padding: 26px 16px;
      ::v-deep .el-form-item__label{
        padding: 0;
        font-weight: 400;
        color: #232323;
      }
      ::v-deep .el-icon-arrow-up:before {
        content: "\e78f";
        color: rgba(35,35,35,0.4);
      }
      ::v-deep .el-form-item__label{
        padding: 0;
      }
      ::v-deep .el-form-item{
        margin-right: 0 !important;
      }
      ::v-deep .el-input{
        .el-input__inner{
          height: 32px;
          line-height: 32px;
        }
      }
      .erow{
        display:flex;
        .elcol{
          &:nth-child(1){
            margin-left: 50px
          }
          &:nth-child(2){
            margin-left: 24px
          }
        }
      }
    }
    ::v-deep .el-dialog__body{
      padding-top: 40px;
      padding-bottom: 1px;
    }
    ::v-deep .el-dialog__headerbtn{
      z-index: 9;
    }
  }
  ::v-deep .el-dialog{
    display: flex;
    display: -ms-flex; /* 兼容IE */
    flex-direction: column;
    -ms-flex-direction: column; /* 兼容IE */
    margin:0 !important;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    max-height:calc(100% - 30px);
    max-width:calc(100% - 30px);
  }
  ::v-deep .el-dialog .el-dialog__body{
    max-height: 100%;
    flex: 1;
    -ms-flex: 1 1 auto; /* 兼容IE */
    overflow-y: auto;
    overflow-x: hidden;
  }
}

::v-deep .cooperate-detail{
  width: 100%;
  height: 100%;
  .miantitle, .app-container{
    //margin: 12px 0;
  }
}

.details-of-cooperation {
  width: 100%;
  height: 100%;
}

</style>
