<!--商机报备表单，废弃-->
<template>
  <div class="report">
    <div class="title">基础报备</div>
    <div class="headerTitle">基础信息</div>
    <div class="baseInfo">
      <div class="inputContainer">
        <div class="inputBox">
          <red-star />
          <input-vue title="项目名称" placeholder="请输入单位名称" class="inputWidth " width="300px"></input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue title="项目预算" placeholder="请入预计工期" width="300px"></input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue title="预计工期" placeholder="选择日期" width="300px"></input-vue>
        </div>
      </div>
      <div class="inputContainer">
        <div class="inputBox">
          <red-star />
          <input-vue title="商机负责人" placeholder="请输入商机负责人姓名" width="300px"></input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue title="联系方式" placeholder="请输入联系方式" width="300px"></input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue title="单位组织" placeholder="请输入单位组织" width="300px"></input-vue>
        </div>
      </div>
      <div class="inputContainer">
        <div class="inputBoxState">
          <red-star />
          <input-vue title="商机状态">
            <el-select v-model="value" placeholder="请选择" style="width:300px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </input-vue>
        </div>
        <div class="inputBoxfun">
          <red-star />
          <input-vue title="联系方式">
            <el-select v-model="value" placeholder="省/市" style="width:130px;margin-left:110px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="value" placeholder="市/区" style="width:120px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="value" placeholder="县/街道" style="width:120px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-input v-model="input" placeholder="请输入详细地址" style="width:468px"></el-input>
          </input-vue>

        </div>
      </div>
    </div>
    <div class="headerTitle">关联方信息</div>
    <div class="relevance">
      <div class="inputContainer">
        <div class="inputBox">
          <red-star />
          <input-vue title="业主方名称" placeholder="请输入名称"></input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue title="总包方名称" placeholder="请输入名称"></input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue title="施工方名称" placeholder="请输入名称"></input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue title="代理商名称" placeholder="请输入名称"></input-vue>
        </div>
      </div>
      <div class="inputContainer">
        <div class="inputBox">
          <red-star />
          <input-vue title="业主方联系人" placeholder="请输入联系方式"></input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue title="总包方联系人" placeholder="请输入联系方式"></input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue title="施工方联系人" placeholder="请输入联系方式"></input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue title="代理商联系人" placeholder="请输入联系方式"></input-vue>
        </div>
      </div>
      <div class="inputContainer">
        <div class="inputBox">
          <red-star />
          <input-vue title="业主方联系方式" placeholder="请输入联系方式"></input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue title="总包方联系方式" placeholder="请输入联系方式"></input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue title="施工方联系方式" placeholder="请输入联系方式"></input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue title="代理商联系方式" placeholder="请输入联系方式"></input-vue>
        </div>
      </div>
    </div>
    <div class="headerTitle">产品信息</div>
    <div class="footer">

    </div>
  </div>
</template>

<script>
import InputVue from '../../components/mycomponent/input/inputVue.vue'

import redStar from '../../components/mycomponent/redStar.vue'
export default {
  components: { redStar, InputVue, },

}
</script>

<style lang="scss" scoped>
.report {
  padding: 10px;

  .title {
    padding: 10px;
    font-size: 24px;
    font-weight: bold;
  }

  .headerTitle {
    background: #2483b3;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    padding: 10px 20px;
  }

  .baseInfo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .inputContainer {
      display: flex;
      padding: 0 10px;

      .inputBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        padding-right: 10px;
      }

      .inputBoxState,
      .inputBoxfun {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 10px;
      }

      .inputBoxState {
        flex: 1;
      }

      .inputBoxfun {
        flex: 2;
      }
    }
  }

  .relevance {
    display: flex;

    .inputContainer {
      display: flex;
      // justify-items:
    }
  }
}
</style>