<template>
  <a-modal
      v-model:visible="vdata.isShow"
      :title=" vdata.isAdd ? '新增任务' : '修改任务' "
      placement="right"
      :closable="true"
      width="40%"
      :mask-closable="false"
      @ok="handleOkFunc"
      @close="onClose"
  >
    <!-- <a-modal :confirmLoading="confirmLoading"> -->

    <a-form
        ref="infoFormModel"
        :model="vdata.saveObject"
        layout="vertical"
        :rules="rules"
        style="padding-bottom:50px"
    >
      <a-row justify="space-between" type="flex">
        <a-col :span="11">
          <a-form-item label="任务名称:" name="taskName">
            <a-input v-model:value="vdata.saveObject['taskName']" :disabled="!vdata.isAdd" />
          </a-form-item>
        </a-col>
        <a-col :span="11">

        </a-col>

        <a-col :span="11">
          <a-form-item label="联系人名称：" name="realName">
            <a-input v-model:value="vdata.saveObject['realName']" />
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item label="联系人手机号：" name="contactTel">
            <a-input v-model:value="vdata.saveObject['contactTel']" />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="业务场景：" name="taskSceneUrl">
            <JeepayUpload v-model:src="vdata.saveObject['taskSceneUrl']" list-Type="picture"  bizType="notice" />
            <!--            <span class="jeepay-tip-text">建议最小尺寸：220*220px，不超过2.9M</span>-->
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注：" name="remark">
            <a-textarea v-model:value="vdata.saveObject['remark']" placeholder="请输入备注" type="textarea" />
          </a-form-item>
        </a-col>

      </a-row>

      <div class="drawer-btn-center">
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          <close-outlined />
          取消
        </a-button>
        <a-button type="primary" :loading="vdata.confirmLoading" @click="handleOkFunc">
          <check-outlined />
          保存
        </a-button>
      </div>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {
  req,
  API_URL_SYS_USER_LIST,
  API_URL_SYS_USER_TEAM_LIST,
  $getPasswordRules,
  API_URL_PAY_TASK_ADD, API_URL_PAY_TASK_SAVE
} from '@/api/manage'
import { reactive,ref } from 'vue'
import { Base64 } from 'js-base64'
import { message } from 'ant-design-vue'

const props = defineProps ({
  callbackFunc: { type: Function, default: () => ({}) }
})

const fileList = ref([])
const previewVisible = ref()
const previewImage = ref()
const infoFormModel = ref()
const vdata = reactive ({
  newPwd: '', //  新密码
  resetIsShow: false, // 重置密码是否展现
  passwordRules: /^$/,//密码规则
  passwordRulesText: '', //密码规则提示文字
  sysPassword: {
    resetPass: false, // 重置密码
    defaultPass: true, // 使用默认密码
    confirmPwd: '' //  确认密码
  },
  loading: false, // 按钮上的loading
  value: 1, // 单选框默认的值
  teamList: [] as any, // 团队列表
  confirmLoading: false, // 显示确定按钮loading图标
  isAdd: true, // 新增 or 修改页面标识
  isShow: false, // 是否显示弹层/抽屉
  saveObject: {} as any, // 数据对象
  recordId: null, // 更新对象ID
  fileList:[],
})
const rules = reactive({
  taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
  realName:  [{ required: true, message: '请输入联系人名称', trigger: 'blur' }],
  contactTel:  [{ required: true, message: '请输入联系人电话', trigger: 'blur' }],
  taskSceneUrl: [{ required: true, message: '请输入业务场景', trigger: 'blur' }],
})
defineExpose({show})
function show (record) { // 弹层打开事件
  if (infoFormModel.value !== undefined) {
    infoFormModel.value.resetFields()
  }

  vdata.isAdd = !record
  // 数据恢复为默认数据
  vdata.saveObject = {}
  vdata.confirmLoading = false // 关闭loading


  if (!vdata.isAdd) { // 修改信息 延迟展示弹层
    vdata.resetIsShow = true // 展示重置密码板块
    vdata.recordId = record.id
    vdata.saveObject = record
    vdata.isShow = true
  } else {
    vdata.isShow = true // 立马展示弹层信息
  }
}
function handleOkFunc () { // 点击【确认】按钮事件
  infoFormModel.value.validate().then(valid=>{
    vdata.loading = true // 打开按钮上的 loading
    vdata.confirmLoading = true // 显示loading
    if (vdata.isAdd) {
      req.add(API_URL_PAY_TASK_ADD, vdata.saveObject).then(res => {
        message.success('新增成功')
        vdata.isShow = false
        vdata.loading = false
        props.callbackFunc()
      }).catch((res) => {
        vdata.confirmLoading = false
      })
    } else {
      req.updateById(API_URL_PAY_TASK_SAVE, vdata.recordId, vdata.saveObject).then(res => {
        message.success('修改成功')
        vdata.isShow = false
        vdata.resetIsShow = false // 取消展示
        props.callbackFunc()
      }).catch(res => {
        vdata.confirmLoading = false
      })
    }
  })
}
// 关闭抽屉
function onClose () {
  vdata.isShow = false
}



const handleCancel = () => {
  previewVisible.value = false;
};
</script>
