<template>
  <div>

    <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>
          </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-drawer
          title="添加合作情况"
          size="40%"
          :visible.sync="drawer"
          :direction="direction"
          :with-header="false"
          :before-close="handleClose">
          <div class="cooperate_addhzqk">
            <div class="addhzqk_top">
              <div class="addhzqk_top_t">
                <div class="top_t_h1">
                  <img src="@/assets/images/economies/icon.png" />{{ info.companyName }}
                </div>
                <div class="top_t_close"><i class="el-icon-close" @click="handleClose"></i></div>
              </div>
              <div class="addhzqk_top_d">
                <div class="top_d_item">
                  法定代表人：<span>{{ info.legalPerson }}</span>
                </div>
                <div class="top_d_item">
                  注册资本：<span>{{ info.registerCapital }}万</span>
                </div>
                <div class="top_d_item">
                  注册地址：<span>{{ info.registerAddress }}</span>
                </div>
              </div>
            </div>
            <div class="addhzqk_from">
              <el-form :model="addParam" :rules="rules" ref="addParam"  size="small" label-width="126px">
                <el-form-item label="项目名称：" prop="projectName">
                  <el-input v-model="addParam.projectName" placeholder="请输入项目名称" @input="getCompany1"></el-input>
                  <div class="resultlist" v-if="showlist1">
                    <div v-for="(item,index) in companData1" @click="selCompany1(item)"><span  v-html="item"></span></div>
                  </div>
                </el-form-item>
                <el-form-item label="业主单位：" prop="ownerCompany">
                  <el-input v-model="addParam.ownerCompany" placeholder="请输入业主单位" @input="getCompany"></el-input>
                  <div class="resultlist" v-if="showlist">
                    <div v-for="(item,index) in companData" @click="selCompany(item)"><span  v-html="item.name"></span></div>
                  </div>
                </el-form-item>
                <el-form-item label="项目阶段：" prop="projectStage">
                  <el-select v-model="addParam.projectStage" style="width: 100%" 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>
                <el-form-item label="项目类型：" prop="projectType">
                  <el-select v-model="addParam.projectType" style="width: 100%" class="form-content-width" placeholder="请选择项目阶段">
                    <el-option v-for="(item, index) in projectType" :key="index" :label="item.dictLabel" :value="item.dictValue" />
                  </el-select>
                </el-form-item>
                <el-form-item label="项目类别：" prop="projectCategory">
                  <el-select v-model="addParam.projectCategory" style="width: 100%" 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>
                <el-form-item label="投资估算（万）：" prop="investmentAmount">
                  <el-input v-model="addParam.investmentAmount" placeholder="请输入投资估算" @input="number"></el-input>
                </el-form-item>
                <el-form-item label="可见范围：" prop="isPrivate">
                  <el-select v-model="addParam.isPrivate" style="width: 100%" 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>
                <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>
          </div>
        </el-drawer>
      </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: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ifEmpty:false,
      queryParams: {
        customerId: this.customerIds,
        pageNum: 1,
        pageSize: 10
      },
      forData: [
        {label: '项目名称', prop: 'projectName', slot: true},
        {label: '项目阶段', prop: 'projectStage', width: '120'},
        {label: '投资金额(万元)', prop: 'investmentAmount', width: '140'},
        {label: '项目状态', prop: 'status', width: '90'}
      ],
      formData: [
        { type: 1, fieldName: 'projectStage', value: '', placeholder: '项目阶段', options: []},
        { type: 1, fieldName: 'status', value: '', placeholder: '项目状态', options: []},
        { type: 3, fieldName: 'keys', value: '', placeholder: '输入企业名称查询'},
      ],
      stageOptions:[],
      statusOptions:[],
      //列表
      tableLoading:false,
      tableData:[],
      tableDataTotal:0,
      //弹窗-关联项目
      drawer: false,
      direction: 'rtl',
      //业主单位
      showlist:false,
      companData:[],
      //项目名称
      showlist1:false,
      companData1:[],
      //弹窗-添加项目
      dialogVisible: true,
      addParam: {
        userId:'',
        projectName:'',
        companyId:'',
        ownerCompany:'',
        projectStage:'',
        projectCategory:'',
        investmentAmount:'',
        isPrivate:0,
        customerId:'',
      },
      rules: {
        projectName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
        ],
        ownerCompany: [
          { required: true, message: '请输入业主单位', trigger: 'blur' },
        ],
      },
      projectStage:[], //项目阶段
      projectType:[], //项目类型
      projectCategory:[], //项目类别
      isPrivate:[
        {
          value: 0,
          name: '仅自己可见'
        },
        {
          value: 1,
          name: '他人可见'
        }
      ],//可见访问
      //客户详情
      info: {},
      //
      detailId: null,
      isDetailId: false,
    }
  },
  created() {
    this.list()
    this.customerInfos()
    //项目阶段
    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:[]
    })
  },
  computed: {

  },
  methods: {
    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.tableDataTotal = res.total
          this.tableLoading = false
        }
      })
    },
    // 客户详情
    customerInfos(){
      customerInfo(this.queryParams.customerId).then(res=>{
        this.info = res.data
      })
    },

    //弹窗-添加项目
    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
          addProject(this.addParam).then(result=>{
            if(result.code == 200){
              this.$message.success('添加成功！')
              this.handleCurrentChange(1)
              this.handleClose()
            }else{
              this.$message.error(result.msg)
            }
          })
        }
      });
    },
    //获取项目名称
    getCompany1(value){
      if (value.length>=2){
        let param = {
          projectName:value,
          // page:{
          //   limit:20,
          //   page:1
          // }
        }
        queryProject(JSON.stringify(param)).then(result=>{
          if(result.code != 200)
            return
          this.showlist1 = true
          this.companData1 = result.data
        })
      }
    },
    selCompany1(item){
      this.addParam.projectName = item
      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
            })
          }
        }
      })
    },
    //输入数字
    number(value){
      this.addParam.investmentAmount = value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')//输入2位小数
    },
    //打开详情
    clickDetail(id){
      this.detailId = id
      this.isDetailId = true
    },
    //关闭详情
    closeDetail(){
      this.isDetailId = false
      this.detailId = ''
    }

  }
}
</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{
    .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;
          span{
            color: rgba(35,35,35,0.8);
          }
        }
      }
    }
    .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 .cooperate-detail{
  .miantitle, .app-container{
    margin: 12px 0;
  }
}

</style>
