<template>
  <div>
    <el-form :model="formData" size="small" :inline="true" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="24">
          <!-- 供应商 组件 -->
          <el-form-item v-if="soByType" label="供应商" prop="supplierId">
            <SupplierChoose />
          </el-form-item>
          <!-- 日期 内嵌 -->
          <el-form-item label="日期" prop="soTime">
            <el-date-picker
              v-model="formData.soTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <!-- 单据编号 内嵌 -->
          <el-form-item label="单据编号" prop="soNo">
            <el-input disabled v-model="formData.soNo" style="width: 20rem"/>
          </el-form-item>
          <!-- 采购员/领料人 组件 -->
          <el-form-item :label="staffRole" prop="userId">
            <StaffChoose @selected="getStaff"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="2">
        <!-- 选择商品 组件 -->
        <el-col :span="12">
          <el-form-item label="选择商品">
            <PartChoose />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 商品表格 组件 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <SoTable :so-by-type="soByType"/>
        </el-col>
      </el-row>
      <el-row :gutter="2" style="margin-top: 1rem">
        <!-- 备注 -->
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input style="width: 45rem" />
          </el-form-item>
        </el-col>
        <!-- 按钮操作 -->
        <el-col :span="12" style="text-align: right">
          <el-button v-if="soByType" type="danger">结算</el-button>
          <el-button v-else type="primary">确定</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

import StaffChoose from "@/views/repair/Components/StaffChoose.vue";
import PartChoose from "@/views/repair/Components/PartChoose.vue";
import SoTable from "@/views/repair/stockOperate/Components/SoTable.vue";
import SupplierChoose from "@/views/repair/Components/SupplierChoose.vue";
import {createUniqueCodeByHead} from "@/utils/createUniqueCode";

export default {
  name: "SoInfo",
  components: {
    StaffChoose,
    PartChoose,
    SoTable,
    SupplierChoose
  },
  props:{
    soByType:{
      type: Boolean,
      defaultValue: true,
      required: true
    }
  },
  data() {
    return {
      formData: {
        soNo: null,
        supplierId: null,
        supplierName: null,
        soTime: Date.now(),
        userId: null,
        userName: null,
        partList: []
      },
      staffRole: "采购员"
    }
  },
  mounted() {
    this.formData.soNo = createUniqueCodeByHead(this.soByType ? "CG" : "LL")
    this.staffRole = this.soByType ? this.staffRole : "领料人"
  },
  methods: {
    // 得到员工选择组件回传的值
    getStaff(data) {
      this.formData.userId = data.id
      this.formData.userName = data.name
    }
  }
}
</script>

<style scoped lang="scss">

</style>
