<script setup lang="ts">
import { useVModel } from "@vueuse/core"
import { ref, computed, shallowRef } from "vue"
import { isMultiplePlaceOptions, isCustomizedOptions, bidRules } from "./../config/_options"
import { CategoryFlattenQuery, BrandQuey, UnitQuery } from "/@/components/BasicForm"
import { ImageSingleUpload } from "/@/components/ImageUpload";
import { useCompany } from "/@/hooks/core/useCompany";
import SpecForm from "/@/components/SpecForm"
import { ElForm } from "element-plus"

import { UnitInput } from "/@/components/Input";

const props = defineProps<{ visible: boolean; data: any; isProject: boolean; index: number }>()
const emit = defineEmits(['submit'])


const configOptions = ['证书', '包装盒', '绒布袋', '标签', '其他']
const disabledDate = (time: any) =>  time.getTime() <= Date.now();

const isGoldPriceOptions = [{ value: '0', label: '不启用' }, { value: '1', label: '启用' }]

const nobleOptions = [{ value: '1', label: '18K' }, { value: '2', label: '24K' }, { value: '3', label: '白银' }]

const formRef = ref<InstanceType<typeof ElForm> | null>(null)
const visible = useVModel(props, 'visible')
const data = useVModel(props, 'data')

const total = computed(() => {
  const { budget_price, num } = data.value  
  return Number(budget_price * num).toFixed(2)
})

function handleChange(value){
  const { cat_name, is_gold } = value || {}
  data.value.cat_name = cat_name
  data.value.isNoble = is_gold
}

const { currentCompany } = useCompany()
async function onSubmit(){
  try{
    await formRef.value.validate()
    emit('submit',{ newData: data.value, index: props.index })
    visible.value = false
  } catch (err){
    console.log(err)
  }
}
</script>

<template>
  <ElDialog v-model="visible" title="添加竞价商品" center>
    <ElForm label-width="80px" :rules="bidRules" ref="formRef" :model="data">
      <ElRow :gutter="10">
        <ElCol :span="6">
          <ElFormItem label="到货日期" prop="arrival_time">
             <ElDatePicker 
                v-model="data.arrival_time"
                :disabledDate="disabledDate"
                 value-format="YYYY-MM-DD HH:mm:ss"
                :disabled="isProject"
                placeholder="到货日期" 
             />
          </ElFormItem>
        </ElCol>

        <ElCol :span="6">
          <ElFormItem label="是否多地" prop="is_addrs">
             <ElSelect placeholder="是否多地" v-model="data.is_addrs">
                <ElOption 
                  v-for="opt in isMultiplePlaceOptions" 
                  :label="opt.label"
                  :value="opt.value"
                  :key="opt.value"
                />
             </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :span="6">
          <ElFormItem label="预算单价" prop="budget_price">
            <div class="flex">
              <ElInputNumber 
                v-model="data.budget_price"
                controls-position="right"
                placeholder="预算单价"  
                :disabled="isProject"
                style="width:100%" 
                :precision="2"
              />
              <span class="ml-[5px]">元</span>
            </div>
          </ElFormItem>
        </ElCol>
        <ElCol :span="6">
          <ElFormItem label="数量" prop="num">
            <ElInputNumber
             v-model="data.num"
              style="width: 100%" 
              controls-position="right" 
              placeholder="数量"
              :disabled="isProject"
            />
          </ElFormItem>
        </ElCol>

        <ElCol :span="6">
          <ElFormItem label="是否定制" prop="is_custom">
            <ElSelect style="width: 100%" placeholder="是否定制" v-model="data.is_custom">
              <ElOption 
                v-for="opt in isCustomizedOptions"
                :label="opt.label"
                :value="opt.value"
                :key="opt.value"
              />
            </ElSelect>
          </ElFormItem>
        </ElCol>
        
        <ElCol :span="6">
          <ElFormItem label="重量" prop="total_weight">
            <div class="flex">
              <ElInputNumber 
                style="width:100%"  
                controls-position="right" 
                :precision="3" 
                v-model="data.total_weight" 
              />

              <span class="ml-[5px]">g</span>
            </div>
          </ElFormItem>
        </ElCol>
        
        <ElCol :span="6" >
          <ElFormItem label="单位" prop="unit">
            <UnitQuery v-model="data.unit" />
          </ElFormItem>
        </ElCol>

        <ElCol :span="6">
          <ElFormItem label="品牌" prop="brand_id">
            <BrandQuey v-model="data.brand_id" />
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElRow :gutter="10">
        <ElCol :span="12">
          <ElFormItem label="商品分类" prop="cat_id">
            <CategoryFlattenQuery
              v-model="data.cat_id" 
              :companyNo="currentCompany.companyNo"
              @change="handleChange"
            />
          </ElFormItem>
          <ElFormItem label="工艺说明" prop="cost_desc">
            <ElInput v-model="data.cost_desc" placeholder="工艺说明" />
          </ElFormItem>
          <ElFormItem label="产品用途" prop="use_desc">
            <ElInput v-model="data.use_desc" placeholder="产品用途" />
          </ElFormItem>
          <ElFormItem label="产品备注" prop="remark">
            <ElInput v-model="data.remark" placeholder="产品备注" />
          </ElFormItem>
        </ElCol>

        <ElCol :span="12">
          <ElFormItem 
            label="商品名称" 
            prop="good_name">
            <ElInput v-model="data.good_name"  placeholder='商品名称' />
          </ElFormItem>
          
          <SpecForm v-model:specs="data.specs" />
        </ElCol>
      </ElRow>

      <ElRow v-if="data.isNoble">
        <ElCol :span="12">
          <ElFormItem label="配置要求" prop="config">
            <ElSelect placeholder="配置要求" v-model="data.config" style="width: 100%">
              <ElOption 
                v-for="(item, index) in configOptions"
                :key="item + index"
                :label="item"
                :value="item"
              />
            </ElSelect>
          </ElFormItem>
        </ElCol>

        <ElCol :span="6">
          <ElFormItem label="金属克重" prop="specs_weight">
            <UnitInput unit="g" v-model="data.specs_weight" />
          </ElFormItem>
        </ElCol>

        <ElCol :span="6">
          <ElFormItem label="启用金价" prop="is_gold_price">
            <ElSelect v-model="data.is_gold_price"  style="width: 100%">
              <ElOption 
                v-for="item in isGoldPriceOptions"
                :value="item.value"
                :label="item.label"
              />
            </ElSelect>
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElRow v-if="data.isNoble">
        <ElCol :span="16">
          <ElFormItem label="其他配置要求" prop="other_config" label-width="110px">
            <ElInput
              v-model="data.other_config"
              type="textarea" 
              placeholder="其他配置要求"
              maxlength="250"
              show-word-limit
              :rows="2"
            />
          </ElFormItem>
        </ElCol>

        <ElCol :span="8">
          <ElFormItem label="金属种类" prop="metal_id">
            <ElSelect placeholder="贵金属种类" style="width: 100%" v-model="data.metal_id">
              <ElOption 
                v-for="opt in nobleOptions" 
                :value="opt.value" 
                :label="opt.label" 
              />
            </ElSelect>
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElRow>
        <ElCol :span="8">
          <ElFormItem label="商品图片" prop="good_img">
            <div class="flex justify-start">
              <ImageSingleUpload v-model="data.good_img" />
              <p class="ml-[10px]">小于1Mb</p>
            </div>
          </ElFormItem>
        </ElCol>
        
        <ElCol :span="8">
          <ElFormItem label="附件" prop="enclosure_file">
            <UploadFile v-model="data.file_url" />
          </ElFormItem>
        </ElCol>

        <ElCol :span="8">
          <div class="w-full h-full flex flex-col items-end">
            <h3 class="text-right font-bold mb-[5px]">竞价单总额: {{ total }}</h3>
            <div class="w-full flex justify-end">
              <ElButton type="primary" @click="onSubmit">保存</ElButton>
              <ElButton @click="visible = false">取消</ElButton>
            </div>
          </div>
        </ElCol>
      </ElRow>
    </ElForm>
  </ElDialog>  
</template>
