<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="事业公司:">
        <el-select
          v-model="form.company"
          style="width: 25vw"
          placeholder="请选择事业公司"
        ></el-select>
      </el-form-item>
      <el-form-item label="供应商:">
        <div class="supplier_container">
          <div class="left_supplier">
            <el-input v-model="form.supplier"></el-input>
            <i class="el-icon-edit"></i>
          </div>
          <div class="right_supplier">
            <i class="el-icon-search"></i>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div class="btn_container">
      <el-button type="info">主单批量下载</el-button>
      <span>用户名所管辖的供应商，未下载的主单单据</span>
    </div>
    <div class="tip_content">2022年12月16日订单已经可以正常下载</div>
  </div>
</template>

<script>
  export default {
    name: 'OrderDownload',
    data() {
      return {
        form: {
          company: '',
          supplier: '',
        },
      }
    },
  }
</script>

<style lang="scss" scoped>
  .container::v-deep {
    padding: 1.5vh 1vw;
    box-sizing: border-box;

    .btn_container {
      margin: 3vh 0;
      display: flex;
      align-items: center;
      .el-button {
        margin-right: 0.5vw;
      }
      span {
        font-size: calc(100vh * 27 / 1920);
      }
    }

    .el-form-item {
      display: flex;
      align-items: center;
      height: 3.5vh;

      .el-form-item__label {
        font-size: calc(100vh * 28 / 1920);
        font-weight: bold;
        width: 5vw;
      }

      .el-input__inner {
        font-size: calc(100vh * 26 / 1920);
        height: 3.5vh;
      }

      .supplier_container {
        display: flex;
        align-items: center;
        width: 25vw;
        height: 3.5vh;
        border: 1px solid #dcdfe6;
        border-radius: 4px;

        .left_supplier {
          width: 89%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .el-input__inner {
            border: none;
          }

          i {
            font-size: calc(100vh * 32 / 1920);
            margin-right: 0.8vw;
          }
        }

        .right_supplier {
          width: 11%;
          height: 100%;
          background: #f1f1f1;
          border-left: 1px solid #dcdfe6;
          display: flex;
          justify-content: center;
          align-items: center;

          i {
            font-size: calc(100vh * 32 / 1920);
          }
        }
      }
    }
    .tip_content {
      font-size: calc(100vh * 45 / 1920);
    }
  }
</style>