<template>
  <div class="cooperate">

    <template v-if="ifEmpty">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
            <el-form-item prop="stage">
              <el-select v-model="queryParams.stage" 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-form-item prop="status">
              <el-select v-model="queryParams.status" 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-form-item class="cooperate-name">
              <el-input v-model="queryParams.name" placeholder="输入企业名称查询"></el-input>
              <span>搜索</span>
            </el-form-item>
          </el-form>
        </div>
        <div class="flex-box query-add">
          <el-button type="primary" icon="el-icon-plus" @click="drawer = true">添加商务信息</el-button>
        </div>
      </div>
      <div class="table-item">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column label="序号" width="50" align="left">
            <template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column label="项目名称" prop="enterpriseName" min-width="70" align="left" />
          <el-table-column label="项目阶段" prop="level" min-width="70" align="left" />
          <el-table-column label="投资金额(万元)" prop="legalPerson" min-width="70" align="left" />
          <el-table-column label="项目状态" prop="capital" min-width="115" align="right" />
        </el-table>
      </div>
      <div class="pagination-box">
        <el-pagination background :current-page="pageIndex" :page-size="pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
      </div>
    </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>
export default {
  name: 'Cooperate',
  components: {

  },
  data() {
    return {
      ifEmpty:true,
      queryParams:{

      },
      stageOptions:[],
      statusOptions:[],
      //列表
      tableLoading:false,
      tableData:[],
      pageIndex:1,
      pageSize:10,
      tableDataTotal:0,
      //弹窗
      drawer: false,
      direction: 'rtl',
    }
  },
  created() {

  },
  computed: {

  },
  methods: {
    resetQuery() {

    },
    //分页
    handleCurrentChange(e){

    },
    handleSizeChange(e){

    },
    //弹窗
    handleClose(done) {
      this.drawer = false
    }
  }
}
</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>
