<template>
  <div class="supplier-apply-page">
    <div class="supplier-apply-banner">
      <img src="~@/assets/supply/01.jpg" />
    </div>
    <div class="apply-to-join">
      <div class="join-title">申请加入</div>
      <div class="join-form">
        <el-form
          :model="joinForm"
          ref="joinForm"
          label-width="110px"
          label-position="right"
        >
          <el-row :gutter="20">
            <el-col :sm="24" :md="12" :lg="12">
              <el-form-item
                label="供应商全称"
                prop="supplierFullName"
                :rules="[{ required: true, message: '请输入供应商全称' }]"
              >
                <el-input
                  v-model="joinForm.supplierFullName"
                  placeholder="请输入供应商全称"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="12">
              <el-form-item
                label="供应商类别"
                prop="supplierCategory"
                :rules="[{ required: true, message: '请选择供应商类别' }]"
              >
                <el-select
                  v-model="joinForm.supplierCategory"
                  placeholder="请选择供应商类别"
                  clearable
                >
                  <el-option label="类别1" value="1"></el-option>
                  <el-option label="类别2" value="2"></el-option>
                  <el-option label="类别3" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="12">
              <el-form-item
                label="擅长面料品类"
                prop="fabricCategory"
                :rules="[{ required: true, message: '请选择面料品类' }]"
              >
                <el-select
                  v-model="joinForm.fabricCategory"
                  placeholder="请选择面料品类"
                  multiple
                  clearable
                >
                  <el-option label="品类1" value="1"></el-option>
                  <el-option label="品类2" value="2"></el-option>
                  <el-option label="品类3" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="12">
              <el-form-item
                label="品类"
                prop="category"
                :rules="[{ required: true, message: '请选择品类' }]"
              >
                <el-cascader
                  v-model="joinForm.category"
                  :options="options"
                  clearable
                  :props="{ multiple: true, checkStrictly: true }"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
// import { getCategory } from '@/api/category'
export default {
  name: 'SupplierApplyPage',
  data() {
    return {
      joinForm: {},
      options: [],
    }
  },
  created() {},
  methods: {
    async loadCategory() {
      // try {
      //   const res = await getCategory()
      //   console.log(res)
      // } catch (e) {
      //   console.error(e)
      // }
    },
  },
}
</script>
<style lang="scss" scoped>
.supplier-apply-page {
  &::v-deep {
    .el-cascader {
      width: 100%;
    }
    .el-select {
      width: 100%;
    }
  }
}
.supplier-apply-banner {
  height: 26vw;

  img {
    height: 100%;
    width: 100%;
  }
}

.join-title {
  font-size: 38px;
  font-weight: 400;
  color: #323232;
  margin: 0 auto;
  margin-top: 48px;
  text-align: center;
  margin-bottom: 72px;
  position: relative;

  &::after {
    content: '';
    display: block;
    width: 56px;
    height: 2.4px;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    background: #e29241;
  }
}

.join-form {
  width: 80%;
  margin: 0 auto;
}
</style>
