<template>
  <a-spin :spinning="confirmLoading">
    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row>
        <a-col :span="24">
          <a-form-item label="微信公众号文章id" v-bind="validateInfos.wechatPostsId">
            <a-input v-model:value="formData.wechatPostsId" placeholder="请输入微信公众号文章id" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="微信公众号唯一id" v-bind="validateInfos.msgBiz">
            <a-input v-model:value="formData.msgBiz" placeholder="请输入微信公众号唯一id" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="文章顺序" v-bind="validateInfos.msgIdx">
            <a-input v-model:value="formData.msgIdx" placeholder="请输入文章顺序" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="msgmid" v-bind="validateInfos.msgMid">
            <a-input v-model:value="formData.msgMid" placeholder="请输入msgmid" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="v" v-bind="validateInfos.contentV">
            <a-input v-model:value="formData.contentV" placeholder="请输入v" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="作者" v-bind="validateInfos.author">
            <a-input v-model:value="formData.author" placeholder="请输入作者" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="复制左边状态" v-bind="validateInfos.copyrightstat">
            <a-input v-model:value="formData.copyrightstat" placeholder="请输入复制左边状态" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="封面" v-bind="validateInfos.cover">
            <j-image-upload  v-model:value="formData.cover" :disabled="disabled"></j-image-upload>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="创建时间" v-bind="validateInfos.createAt">
            <a-date-picker placeholder="请选择创建时间"  v-model:value="formData.createAt" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="简介" v-bind="validateInfos.digest">
            <j-editor v-model:value="formData.digest" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="链接" v-bind="validateInfos.link">
            <a-textarea v-model:value="formData.link" rows="4" placeholder="请输入链接" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="添加时间" v-bind="validateInfos.publishAt">
            <a-date-picker placeholder="请选择添加时间"  v-model:value="formData.publishAt" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="资源链接" v-bind="validateInfos.sourceUrl">
            <a-textarea v-model:value="formData.sourceUrl" rows="4" placeholder="请输入资源链接" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="标题" v-bind="validateInfos.title">
            <a-textarea v-model:value="formData.title" rows="4" placeholder="请输入标题" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="更新时间" v-bind="validateInfos.updateAt">
            <a-date-picker placeholder="请选择更新时间"  v-model:value="formData.updateAt" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="微信公众号id" v-bind="validateInfos.wechatId">
            <a-input v-model:value="formData.wechatId" placeholder="请输入微信公众号id" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="文章内容" v-bind="validateInfos.content">
            <j-editor v-model:value="formData.content" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="点赞数" v-bind="validateInfos.likeNum">
            <a-input-number v-model:value="formData.likeNum" placeholder="请输入点赞数" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="点赞数2" v-bind="validateInfos.likeNum2">
            <a-input-number v-model:value="formData.likeNum2" placeholder="请输入点赞数2" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="阅读数" v-bind="validateInfos.readNum">
            <a-input-number v-model:value="formData.readNum" placeholder="请输入阅读数" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="更新数量时间" v-bind="validateInfos.updateNumAt">
            <a-date-picker placeholder="请选择更新数量时间"  v-model:value="formData.updateNumAt" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="错敏词列表" v-bind="validateInfos.sensitiveList">
            <a-input v-model:value="formData.sensitiveList" placeholder="请输入错敏词列表" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="校对敏感词个数" v-bind="validateInfos.sensitiveCount">
            <a-input-number v-model:value="formData.sensitiveCount" placeholder="请输入校对敏感词个数" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="错误原因" v-bind="validateInfos.retMsg">
            <a-input v-model:value="formData.retMsg" placeholder="请输入错误原因" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="成功标记" v-bind="validateInfos.retCode">
            <a-input v-model:value="formData.retCode" placeholder="请输入成功标记" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="校对错误个数" v-bind="validateInfos.errorCount">
            <a-input-number v-model:value="formData.errorCount" placeholder="请输入校对错误个数" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="校对重点关注词个数" v-bind="validateInfos.heavyCount">
            <a-input-number v-model:value="formData.heavyCount" placeholder="请输入校对重点关注词个数" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="修改状态" v-bind="validateInfos.modifyState">
            <j-dict-select-tag type='radio' v-model:value="formData.modifyState" dictCode="modify_state" placeholder="请选择修改状态" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="扫描次数" v-bind="validateInfos.numberScans">
            <a-input-number v-model:value="formData.numberScans" placeholder="请输入扫描次数" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="是否忽略" v-bind="validateInfos.isIgnore">
            <j-dict-select-tag type='radio' v-model:value="formData.isIgnore" dictCode="verify_status" placeholder="请选择是否忽略" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="复核时间" v-bind="validateInfos.checkTime">
            <a-date-picker placeholder="请选择复核时间"  v-model:value="formData.checkTime" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="复核状态" v-bind="validateInfos.checkState">
            <j-dict-select-tag type='radio' v-model:value="formData.checkState" dictCode="review_status" placeholder="请选择复核状态" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="复核校对错误个数" v-bind="validateInfos.checkErrorCount">
            <a-input-number v-model:value="formData.checkErrorCount" placeholder="请输入复核校对错误个数" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</template>

<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../WechatPostsWord.api';
import { Form } from 'ant-design-vue';

const props = defineProps({
  formDisabled: { type: Boolean, default: false },
  formData: { type: Object, default: ()=>{} },
  formBpm: { type: Boolean, default: true }
});
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
  id: '',
  wechatPostsId: '',
  msgBiz: '',
  msgIdx: '',
  msgMid: '',
  contentV: '',
  author: '',
  copyrightstat: '',
  cover: '',
  createAt: '',
  digest: '',
  link: '',
  publishAt: '',
  sourceUrl: '',
  title: '',
  updateAt: '',
  wechatId: '',
  content: '',
  likeNum: undefined,
  likeNum2: undefined,
  readNum: undefined,
  updateNumAt: '',
  sensitiveList: '',
  sensitiveCount: undefined,
  retMsg: '',
  retCode: '',
  errorCount: undefined,
  heavyCount: undefined,
  modifyState: '',
  numberScans: undefined,
  isIgnore: '',
  checkTime: '',
  checkState: '',
  checkErrorCount: undefined,
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//表单验证
const validatorRules = {
  wechatPostsId: [{ required: true, message: '请输入微信公众号文章id!'},],
  msgBiz: [{ required: true, message: '请输入微信公众号唯一id!'},],
  msgIdx: [{ required: true, message: '请输入文章顺序!'},],
  msgMid: [{ required: true, message: '请输入msgmid!'},],
  contentV: [{ required: true, message: '请输入v!'},],
  author: [{ required: true, message: '请输入作者!'},],
  copyrightstat: [{ required: true, message: '请输入复制左边状态!'},],
  cover: [{ required: true, message: '请输入封面!'},],
  createAt: [{ required: true, message: '请输入创建时间!'},],
  digest: [{ required: true, message: '请输入简介!'},],
  link: [{ required: true, message: '请输入链接!'},],
  publishAt: [{ required: true, message: '请输入添加时间!'},],
  sourceUrl: [{ required: true, message: '请输入资源链接!'},],
  title: [{ required: true, message: '请输入标题!'},],
  updateAt: [{ required: true, message: '请输入更新时间!'},],
  wechatId: [{ required: true, message: '请输入微信公众号id!'},],
  content: [{ required: true, message: '请输入文章内容!'},],
  likeNum: [{ required: true, message: '请输入点赞数!'},],
  likeNum2: [{ required: true, message: '请输入点赞数2!'},],
  readNum: [{ required: true, message: '请输入阅读数!'},],
  updateNumAt: [{ required: true, message: '请输入更新数量时间!'},],
  sensitiveList: [{ required: true, message: '请输入错敏词列表!'},],
  sensitiveCount: [{ required: true, message: '请输入校对敏感词个数!'},],
  retMsg: [{ required: true, message: '请输入错误原因!'},],
  retCode: [{ required: true, message: '请输入成功标记!'},],
  errorCount: [{ required: true, message: '请输入校对错误个数!'},],
  heavyCount: [{ required: true, message: '请输入校对重点关注词个数!'},],
  modifyState: [{ required: true, message: '请输入修改状态!'},],
  numberScans: [{ required: true, message: '请输入扫描次数!'},],
  isIgnore: [{ required: true, message: '请输入是否忽略!'},],
  checkTime: [{ required: true, message: '请输入复核时间!'},],
  checkState: [{ required: true, message: '请输入复核状态!'},],
  checkErrorCount: [{ required: true, message: '请输入复核校对错误个数!'},],
};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });

// 表单禁用
const disabled = computed(()=>{
  if(props.formBpm === true){
    if(props.formData.disabled === false){
      return false;
    }else{
      return true;
    }
  }
  return props.formDisabled;
});


/**
 * 新增
 */
function add() {
  edit({});
}

/**
 * 编辑
 */
function edit(record) {
  nextTick(() => {
    resetFields();
    //赋值
    Object.assign(formData, record);
  });
}

/**
 * 提交数据
 */
async function submitForm() {
  // 触发表单验证
  await validate();
  confirmLoading.value = true;
  const isUpdate = ref<boolean>(false);
  //时间格式化
  let model = formData;
  if (model.id) {
    isUpdate.value = true;
  }
  //循环数据
  for (let data in model) {
    //如果该数据是数组并且是字符串类型
    if (model[data] instanceof Array) {
      let valueType = getValueType(formRef.value.getProps, data);
      //如果是字符串类型的需要变成以逗号分割的字符串
      if (valueType === 'string') {
        model[data] = model[data].join(',');
      }
    }
  }
  await saveOrUpdate(model, isUpdate.value)
    .then((res) => {
      if (res.success) {
        createMessage.success(res.message);
        emit('ok');
      } else {
        createMessage.warning(res.message);
      }
    })
    .finally(() => {
      confirmLoading.value = false;
    });
}


defineExpose({
  add,
  edit,
  submitForm,
});
</script>

<style lang="less" scoped>
.antd-modal-form {
  min-height: 500px !important;
  overflow-y: auto;
  padding: 24px 24px 24px 24px;
}
</style>
