<template>
  <div style="width: 100%;">
  <a-row :gutter="6">
    <a-col :span="21"><a-input v-model:value="showInfo" readonly :disabled="disabledFlag" /></a-col>
    <a-col :span="2"><a-button type="primary" @click="handleModel" :disabled="disabledFlag">选择</a-button></a-col>
  </a-row>
    <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
      <ActSelect :actinfo="actinfo" />
    </BasicModal>
  </div>
</template>

<script lang="ts" setup name="StSelectActInput">
import { computed, defineProps, ref, watch } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { propTypes } from '/@/utils/propTypes';
import ActSelect from '/@/views/standardlib/components/ActSelect.vue';
import { list } from '/@/views/standardlib/controlactivity/StCaMain.api';

    const actinfo = ref({})
    // Emits声明
    const emit = defineEmits(['register','success']);
    const props = defineProps({
      model: propTypes.object.def({}),
      field: String,
      caNo: String,
    });
    const disabledFlag = ref(false)
    function disabledForm(flag){
      disabledFlag.value = flag
    }
    const showInfo = ref('')
    //表单赋值
    watch(()=>props.caNo,(newValue, oldValue) =>{
       console.log(newValue)
       console.log(oldValue)
      if(!!newValue){
        list({"caNo":newValue}).then((data)=>{
          if(data.total!=1){
            showInfo.value=""
          }else{
            showInfo.value = data.records[0]['caNo']+"-"+data.records[0]['caName']
          }
      })
      }
    },{immediate: true,})
    //设置标题
    const title = computed(() => ('控制活动'));
    //表单赋值
    const [registerModal, {setModalProps,closeModal}] = useModalInner(async (data) => {
        //重置表单
        setModalProps({confirmLoading: false,showCancelBtn:true,showOkBtn:true});
    });
    function handleModel(){
      setModalProps({visible: true});
    }
    //表单提交事件
    async function handleSubmit(v) {
        try {
            setModalProps({confirmLoading: true});
            //提交表单
            //showInfo.value = actinfo.value['caNo']+"-"+actinfo.value['caName']
            props.model[props.field] = actinfo.value['caNo']
            //console.log(props.model)
            //console.log(props.field)
            //关闭弹窗
            closeModal();
            //刷新列表
            emit('success');
        } finally {
            setModalProps({confirmLoading: false});
        }
    }
    defineExpose({disabledForm})
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>