<template>
  <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>
    <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="53%"
      :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" />重庆轨道交通(集团)有限公司
            </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>王志</span>
            </div>
            <div class="top_d_item">
              注册资本：<span>356889.88万</span>
            </div>
            <div class="top_d_item">
              注册地址：<span>重庆市渝北区财富大道19号1幢（财富三号A栋6楼1、2#-1）</span>
            </div>
          </div>
        </div>
        <div class="addhzqk_from">
          <el-form ref="queryForm" :model="queryParams" size="small" label-width="126px">
            <el-form-item label="项目名称：">
              <el-input v-model="queryParams.name" placeholder="请输入项目名称"></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目状态：">
                  <el-select v-model="queryParams.status" style="width: 100%" clearable class="form-content-width" placeholder="请选择项目状态">
                    <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.name" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目阶段：">
                  <el-select v-model="queryParams.stage" style="width: 100%" clearable class="form-content-width" placeholder="请选择项目阶段">
                    <el-option v-for="(item, index) in stageOptions" :key="index" :label="item.name" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="投资金额（万元）：">
                  <el-input v-model="queryParams.name" placeholder="请输入投资金额"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="关键决策人：">
                  <el-input v-model="queryParams.name" placeholder="请输入关键决策人名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="关键决策人电话：">
                  <el-input v-model="queryParams.name" placeholder="请输入关键决策人电话"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="竞争对手：">
                  <el-input v-model="queryParams.name" placeholder="请输入竞争对手名称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="建设内容：">
              <el-input v-model="queryParams.key"
                        type="textarea"
                        :autosize="{ minRows: 8, maxRows: 8}"
                        maxlength="500"
                        show-word-limit
                        placeholder="请输入建设内容">
              </el-input>
            </el-form-item>
            <el-form-item style="text-align: right;">
              <el-button @click="handleClose">关闭</el-button>
              <el-button type="primary">保存内容</el-button>
            </el-form-item>

          </el-form>
        </div>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import mixin from '../mixins/mixin'
import {getDictType,} from '@/api/main'
import {
  getList
} from '@/api/detail/party-a/cooperate'
export default {
  name: 'Cooperate',
  mixins: [mixin],
  components: {

  },
  data() {
    return {
      ifEmpty:true,
      queryParams: {
        customerId: 6034,
        pageNum: 1,
        pageSize: 10
      },
      forData: [
        {label: '项目名称', prop: 'punishReason'},
        {label: '项目阶段', prop: 'punishBegin', width: '120'},
        {label: '投资金额(万元)', prop: 'punishResult', width: '140'},
        {label: '项目状态', prop: 'fileNum', 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:[],
      pageIndex:1,
      pageSize:10,
      tableDataTotal:0,
      //弹窗
      drawer: false,
      direction: 'rtl',
    }
  },
  created() {
    this.list()
    //项目阶段
    this.handleOptions('project_stage_type',0)
    //项目状态
    this.handleOptions('project_status_type',1)
  },
  computed: {

  },
  methods: {
    handleQuery(params) {
      this.list(params)
    },
    list(params){
      let data = params ? params : this.queryParams
      getList(data).then(res=>{
        console.log(res)
      })
    },
    //弹窗
    handleClose(done) {
      this.drawer = 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
            })
          }
        }
      })
    }
  }
}
</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;
  }
  .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);
      }
    }
  }
}

</style>
