<template>
  <div class="admin-authorize-editInfo">
    <el-dialog :title="formData.titleText" v-model="formData.isShowDialog" draggable width="769px">
      <el-form :model="formData.editData"
               :rules="rules"
               ref="formRef"
               v-loading="formData.loading"
               size="default"
               label-width="80px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="部件类型" prop="type">
              <el-select v-if="mapType" v-model="formData.editData.type" placeholder="请选择部件类型" >
                <el-option v-for="(value, key) in mapType" :key="key" :label="value[1].name"  :value="Number(value[1].value)" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="部件名称" prop="bomName">
              <el-input v-model="formData.editData.bomName" placeholder="请输入部件名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="物料号" prop="bomNo">
              <el-input v-model="formData.editData.bomNo" placeholder="请输入物料号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="状态" prop="status">
              <el-select v-if="mapState" v-model="formData.editData.status" placeholder="请选择部件状态" >
                <el-option v-for="(value, key) in mapState" :key="key" :label="value[1].name"  :value="Number(value[1].value)" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="图片" prop="img">
              <MyUploadImg :imgUrl="formData.editData.img" @onUpload="onUpload" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.editData.remark" placeholder="备注" clearable :rows="8" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" icon="ele-CircleClose" size="default">取 消</el-button>
          <el-button type="primary" :icon="formData.editIcon" @click="onSubmit" size="default">{{formData.buttonText}}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent, reactive, ref, watch} from "vue";
import {FormRules} from "element-plus";
import {componentTypeDto, typeTable} from "/@/api/admin/productionManagement/ComponentTypeDto";
import {ComponentTypeApi} from "/@/api/admin/productionManagement/ComponentType";
import eventBus from "/@/utils/mitt";
const MyUploadImg = defineAsyncComponent(() => import('/src/components/my-upload-img/index.vue'))

const formProps = defineProps({
  mapType:Map,
  mapState:Map
})

const mapType = ref(formProps.mapType)
const mapState = ref(formProps.mapState)

enum Form {
  ADD,
  UPDATE
}

/**数据对象 */
const formData = reactive({
  loading: false,
  formType: Form,
  titleText:'',
  editIcon:'',
  buttonText:'',
  isShowDialog: false,
  //表单数据对象
  editData:{} as typeTable,
})

// /**有效时间选择校验*/
// const validateDate = (rule: any, value: any, callback: any) => {
//   if(new Date(value).getTime() > Date.now()){
//     callback()
//   }else{
//     callback(new Error('选择的时间已失效'))
//   }
// }

/**表单校验*/
const rules = reactive<FormRules>({
  type:[
    {required: true, message: '请选择部件类型', trigger: 'blur' }
  ],
  bomName: [
    { required: true, message: '请输入部件名称', trigger: 'blur' },
  ],
  bomNo: [
    { required: true, message: '请输入物料号', trigger: 'blur' },
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'blur' },
  ],
})


const formRef = ref()

const onUpload = (val) => {
  formData.editData.img = val
}

const openDialog = (val) => {

  if(val){
    formData.editData = JSON.parse(JSON.stringify(({...val,type:Number(val.type.value), status:Number(val.status.value)})))
    formData.titleText = '更新部件'
    formData.buttonText = '更新'
    //更新操作
    formData.formType = Form.UPDATE
    formData.editIcon = 'ele-Refresh'
  }else {
    formData.editData = {} as typeTable
    formData.titleText = '添加部件'
    formData.buttonText = '添加'
    //添加操作
    formData.formType = Form.ADD
    formData.editIcon = 'ele-CirclePlus'
  }
  formData.isShowDialog = true
}

const onCancel = () => {
  formData.editData = {} as typeTable
  formData.isShowDialog = false
}

/***监听弹窗关闭表单验证*/
watch(() => formData.isShowDialog,(newVal) => {
  if(newVal) formRef.value?.resetFields()
})

const onSubmit =  () => {
  formRef.value.validate(async (valid: boolean) =>{
    if(!valid) return

    formData.loading = true
    let res = {} as any
    if(formData.formType === Form.UPDATE){
      res = await new ComponentTypeApi().upDateComponentType(formData.editData as componentTypeDto).catch(() => {
        formData.loading = false
      })
    }else if(formData.formType === Form.ADD){
      res = await new ComponentTypeApi().addComponentType(formData.editData as componentTypeDto).catch(() => {
        formData.loading = false
      })
    }else {
      formData.loading = false
      return
    }

    if(res?.success){
      eventBus.emit('refreshView')
      formData.isShowDialog = false
      formData.editData = {}
    }

    formData.loading = false
  })
}


defineExpose({
  openDialog,
})

</script>
<style scoped lang="scss">

</style>
