<script setup lang="ts">
import { ref, watch } from "vue";
import { ElButton, ElDatePicker, ElForm, ElFormItem } from "element-plus";
import { useAsync, useResponseHandle } from "/@/hooks";
import { httpManagerCreate, httpManagerUpdate } from "/@/api/purchase/orderRecord";
import { useVModel } from "@vueuse/core";

import { UnitInput } from "/@/components/Input"
import { httpUserSingleList } from "/@/api/user";


const emit = defineEmits(["refresh"]);
const props = defineProps<{ visible: boolean; data: any , type: string }>()

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

const {
  run: userlistRun,
  data: userlist,
  loading: userLoading
} = useAsync<Array<Record<string, string>>>({
  initalData: [],
  success(data){
    userlist.value = data.item
  }
});

const formData = ref<Record<string, any>>({
  inv_fee: 0,
  return_inv_fee: 0,
  cost_fee: 0,
  return_cost_fee: 0,
  day_time: ''
});

const loading = ref(false);
const responseHandle = useResponseHandle();


watch(() => visible.value, () => {
  if(!visible.value) return
  formData.value = { ...props.data }
  userlistRun(httpUserSingleList({ size: 1000, pid: '58'}));
})

const rules = {
  uid: [{ required: true, message: '请选择用户', trigger: 'change' }],
  day_time: [{ required: true, message: '请选择时间', trigger: 'change' }],
  inv_fee: [{ required: true, message: '请输入开票金额', trigger: 'change' }],
  return_inv_fee: [{ required: true, message: '请输入退票金额', trigger: 'change' }],
  cost_fee: [{ required: true, message: '请输入开票成本金额', trigger: 'change' }],
  return_cost_fee: [{ required: true, message: '请输入退票成本金额', trigger: 'change' }],
}


async function handleSubmit(){
  try{
    await formRef.value.validate()
    loading.value = true;
    const api = props.type === 'create' ? httpManagerCreate : httpManagerUpdate
    const { code, message } = await api(formData.value);
    loading.value = false;

    responseHandle({
      code, message,
      responseCode: 1,
      handler: () => {
        visible.value = false
        emit('refresh')
      }
    });

  }catch(err){
    console.log(err)
  }
}


function handleClose(){
  formData.value = {
    inv_fee: 0,
    return_inv_fee: 0,
    cost_fee: 0,
    return_cost_fee: 0,
    day_time: ''
  }
}
</script>

<template>
  <el-dialog top="10vh" :close-on-click-modal="false" v-model="visible"
    :title="(type === 'create' ? '添加' : '编辑') + '采购员开票补充'" center width="1040px" @close="handleClose">
    <ElForm label-width="120px" :rules="rules" ref="formRef" :model="formData" v-loading="userLoading || loading">
      <ElFormItem label="月份" prop="day_time">
        <ElDatePicker v-model="formData.day_time" style="width: 100%" placeholder="月份" value-format="YYYY-MM"
          type="month" :disabledDate="time => time.getTime() > Date.now()" :disabled="type === 'update'" />
      </ElFormItem>

      <ElFormItem label="采购员" prop="uid">
        <el-select placeholder="采购员" v-model="formData.uid" w-full filterable :disabled="type === 'update'">
          <el-option v-for="item in userlist" :key="item.account_id" :value="item.account_id" :label="item.nickname" :disabled="item.status == '0'" />
        </el-select>
      </ElFormItem>

      <ElFormItem label="开票金额" prop="inv_fee">
        <UnitInput v-model="formData.inv_fee" placeholder="开票金额" unit="元" />
      </ElFormItem>

      <ElFormItem label="退票金额" prop="return_inv_fee">
        <UnitInput v-model="formData.return_inv_fee" placeholder="退票金额" unit="元" />
      </ElFormItem>

      <ElFormItem label="开票成本金额" prop="cost_fee">
        <UnitInput v-model="formData.cost_fee" placeholder="开票成本金额" unit="元" />
      </ElFormItem>

      <ElFormItem label="退票成本金额" prop="return_cost_fee">
        <UnitInput v-model="formData.return_cost_fee" placeholder="退票成本金额" unit="元" />
      </ElFormItem>

      <div style="display: flex;justify-content: flex-end;">
        <ElButton type="primary" @click="handleSubmit">保存</ElButton>
      </div>
    </ElForm>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-table__header) {
  .el-checkbox {
    display: none;
  }
}
</style>
