<script setup lang="ts">
import { reactive, ref } from "vue";
import { rules } from "./rules"
import { cg_order_type_options, xs_inv_type_list } from "/@/utils/status";
import { httpCompanies } from "/@/api/invoiceInOut/productManager";

import { ElForm, ElOption, ElSelect } from "element-plus"

const formRef = ref<InstanceType<typeof ElForm> | null>(null)

const formData = ref({ 
  companyNo: "", 
  supplierNo: "",
  goodSource: "",
  goodCode: '',
  goodType: '',
  is_combind: "",
  invGoodName: "",
  afterTaxPrice: '',
  in_cost_status: '',
  beforeTaxPrice: '',
  goodName: "",
  spuCode: '',
  in_code: '',
  invType: '',
  in_tax: '',
  spec: '',
  unit: '',
  weight: '',
  fg: ''
})

const state = reactive({
  companies: []
})

async function submit(){
  try{
    await formRef.value?.validate()
    console.log('joined~~~')
  }catch(err){
    console.log(err)
  }
}

(async function initialData(){
  const result = await httpCompanies({ size: 10000 })

  if(result.code == 0){
    state.companies = result.data.list.map(({ companyNo, company_name }) => ({ value: companyNo, label: company_name })) 
    console.log(state.companies)
  }
})()
</script>

<template>
  <ElForm
    ref="formRef"
    :rules="rules" 
    :model="formData" 
  >
    <ElRow :gutter="10">
      <ElCol :span="12">
        <ElFormItem label="销售方公司" prop="supplierNo">
          <ElSelect
            style="width: 100%"
            v-model="formData.supplierNo" 
            placeholder="销售方公司" 
          >
            <ElOption 
              v-for="item in state.companies"
              :value="item.value"
              :label="item.label"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>

      <ElCol :span="12">
        <ElFormItem label="购买方公司" prop="companyNo">
          <ElInput
            v-model="formData.companyNo" 
            placeholder="购买方公司" 
          />
        </ElFormItem>
      </ElCol>

      <ElCol :span="8">
        <ElFormItem label="商品来源" prop="goodSource">
          <ElSelect
            @change="formData.goodCode = ''"
            v-model="formData.goodSource"
            placeholder="商品来源"
            style="width: 100%"
          >
            <ElOption label="采销商品" value="0" />
            <ElOption label="非采销商品" value="1" />
          </ElSelect>
        </ElFormItem>
      </ElCol>

      <ElCol :span="8">
        <ElFormItem label="商品编号" prop="spuCode">
          <ElInput v-model="formData.spuCode" placeholder="商品编号" />
        </ElFormItem>
      </ElCol>

      <ElCol :span="8">
        <ElFormItem label="订单商品类型" prop="goodType">
          <ElSelect 
            v-model="formData.goodType"
            placeholder="订单商品类型"
            style="width: 100%" 
          >
            <ElOption
              v-for="opt in cg_order_type_options"
              :value="opt.value"
              :label="opt.label"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>

      <ElCol :span="8">
        <ElFormItem label="组合类型" prop="is_combind">
          <ElSelect style="width: 100%" v-model="formData.is_combind">
            <ElOption label="非组合商品" value="0" />
            <ElOption label="组合商品" value="1" />
          </ElSelect>
        </ElFormItem>
      </ElCol>

      <ElCol :span="8">
        <ElFormItem label="订单商品名称" prop="goodName">
          <ElInput
            v-model="formData.goodName"
            placeholder="订单商品名称" 
          />
        </ElFormItem>
      </ElCol>

      <ElCol :span="8">
        <ElFormItem label="发票商品名称" prop="invGoodName">
          <ElInput 
            v-model="formData.invGoodName" 
            placeholder="发票商品名称" 
          />
        </ElFormItem>
      </ElCol>

      <ElCol :span="8">
        <ElFormItem label="规格" prop="spec">
          <ElInput 
            v-model="formData.spec" 
            placeholder="规格" 
          />
        </ElFormItem>
      </ElCol>

      <ElCol :span="8">
        <ElFormItem label="商品代码" prop="goodCode">
          <ElInput 
            v-model="formData.goodCode" 
            placeholder="商品代码" 
          />
        </ElFormItem>
      </ElCol>

      <ElCol :span="8">
        <ElFormItem label="成本税前单价" prop="beforeTaxPrice">
          <ElInput 
            v-model="formData.beforeTaxPrice"  
            placeholder="成本税前单价" 
          />
        </ElFormItem>
      </ElCol>

      <ElCol :span="8">
        <ElFormItem label="单位" prop="unit">
          <ElInput 
            v-model="formData.unit"  
            placeholder="单位" 
          />
        </ElFormItem>
      </ElCol>

      <ElCol :span="8">
        <ElFormItem label="重量" prop="weight">
          <ElInput 
            v-model="formData.weight" 
            placeholder="重量" 
          />
        </ElFormItem>
      </ElCol>

      <ElCol :span="8">
        <ElFormItem label="成本税后单价" prop="afterTaxPrice">
          <ElInput 
            v-model="formData.afterTaxPrice" 
            placeholder="成本税后单价" 
          />
        </ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem label="进项税目" prop="in_code">
          <ElInput
            prop="in_code"
            style="width: 100%" 
            placeholder="进项税目" 
            v-model="formData.in_code"
           />
        </ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem label="分光" prop="fg">
          <ElInput  
            v-model="formData.fg"
            placeholder="分光" 
            style="width: 100%" 
          />
        </ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem label="发票类型" prop="invType">
          <ElSelect
            v-model="formData.invType"
            placeholder="发票类型" 
            style="width: 100%" 
          > 
            <ElOption 
              v-for="opt in xs_inv_type_list"
              :value="opt.value"
              :label="opt.label"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem label="进项税率" prop="in_tax">
          <ElSelect 
            v-model="formData.in_tax" 
            placeholder="进项税率" 
            style="width: 100%"
          > </ElSelect>
        </ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem label="进项成本状态" prop="in_cost_status">
          <ElSelect 
            v-mdoel="formData.in_cost_status" 
            placeholder="进项成本状态"
          >
            <ElOption label="真实成本信息" value="0" />
            <ElOption label="预估成本信息" value="1" />
          </ElSelect>
        </ElFormItem>
      </ElCol>
    </ElRow>

    <!-- 
    <ElRow>
      <ElCol :span="24">
        <ElFormItem label="子商品">
          <ElTable border size="small">
            <ElTableColumn label="比例" />
            <ElTableColumn label="商品编号" />
            <ElTableColumn label="商品类型" />
            <ElTableColumn label="商品名称" />

            <ElTableColumn width="80px">
              <template #header>
                <div class="w-full flex justify-between">
                  <p>操作</p>
                  <ElButton
                    link
                    size="small"
                    type="primary"
                    :icon="useRenderIcon('add')"
                  />
                </div>
              </template>
            </ElTableColumn>
          </ElTable>
        </ElFormItem>
      </ElCol>
    </ElRow> -->
    <!-- <Modal /> -->

    <div class="w-full flex justify-end">
      <ElButton type="primary" @click="submit">保存</ElButton>
    </div>
  </ElForm>
</template>
