<template>
  <div
    style="width: 665px;"
  >
    <businessForm :form-config="formConfig"/>
    <businessButton :btn-config="btnConfig"/>
  </div>
</template>

<script>
  import businessForm from 'professionalComponents/businessForm';
  import businessButton from 'professionalComponents/businessButton';
  import { common } from '@yunque/service/index';
  import { showModalFcError } from '@yunque/service/modules/utils';

  export default {
    components: {
      businessForm,
      businessButton,
    },
    props: {
      objList: {
        type: Array
      },
      idArray: {
        type: Array
      },
      webid: {
        type: Number
      },
      tablename: {
        type: String
      },
      selectRowData: {
        type: Array
      }
    },
    data() {
      return {
        formConfig: {
          // 表单取值,和下面formData下对象的value一一对应
          formValue: {
            systemReceivableAmount: '',
            platReceivedAmount: '',
            manualVerificatedAmount: '',
            canManualVerificationAmount: '',
            manualVerificationAmount: '',
            remark: '',
          },
          // 表单配置
          formData: [
            {
              style: 'input', // 输入框类型
              label: '系统应收金额', // 输入框前文字
              value: 'systemReceivableAmount', // 输入框的值
              width: '12', // 所占的宽度 (宽度分为24份,数值代表所占份数的宽度)
              icon: '', // 输入框后带的图标,暂只有输入框支持
              placeholder: '', // 占位文本，默认为请输入
              ghost: false, // 是否关闭幽灵按钮，默认开启
              disabled: true, // 按钮禁用控制
              iconclick: () => {
              } // 点击icon图标事件
              // setRequired: "required" //必选标识,值不为required时无标识
            },
            {
              style: 'input', // 输入框类型
              label: '平台实收金额', // 输入框前文字
              value: 'platReceivedAmount', // 输入框的值
              width: '12', // 所占的宽度 (宽度分为24份,数值代表所占份数的宽度)
              icon: '', // 输入框后带的图标,暂只有输入框支持
              placeholder: '', // 占位文本，默认为请输入
              ghost: false, // 是否关闭幽灵按钮，默认开启
              disabled: true, // 按钮禁用控制
              iconclick: () => {
              } // 点击icon图标事件
              // setRequired: "required" //必选标识,值不为required时无标识
            },
            {
              style: 'input', // 输入框类型
              label: '已核销金额', // 输入框前文字
              value: 'manualVerificatedAmount', // 输入框的值
              width: '12', // 所占的宽度 (宽度分为24份,数值代表所占份数的宽度)
              icon: '', // 输入框后带的图标,暂只有输入框支持
              placeholder: '', // 占位文本，默认为请输入
              ghost: false, // 是否关闭幽灵按钮，默认开启
              disabled: true, // 按钮禁用控制
              iconclick: () => {
              } // 点击icon图标事件
              // setRequired: "required" //必选标识,值不为required时无标识
            },
            {
              style: 'input', // 输入框类型
              label: '可手工核销金额', // 输入框前文字
              value: 'canManualVerificationAmount', // 输入框的值
              width: '12', // 所占的宽度 (宽度分为24份,数值代表所占份数的宽度)
              icon: '', // 输入框后带的图标,暂只有输入框支持
              placeholder: '', // 占位文本，默认为请输入
              ghost: false, // 是否关闭幽灵按钮，默认开启
              disabled: true, // 按钮禁用控制
              iconclick: () => {
              } // 点击icon图标事件
              // setRequired: "required" //必选标识,值不为required时无标识
            },
            {
              style: 'input', // 输入框类型
              label: '手工核销金额', // 输入框前文字
              value: 'manualVerificationAmount', // 输入框的值
              width: '12', // 所占的宽度 (宽度分为24份,数值代表所占份数的宽度)
              icon: '', // 输入框后带的图标,暂只有输入框支持
              placeholder: '保留两位小数!', // 占位文本，默认为请输入
              ghost: false, // 是否关闭幽灵按钮，默认开启
              iconclick: () => {
              }, // 点击icon图标事件
              inputChange: () => {
                console.log('inputChange::绑定的this', this);
                let value = this.formConfig.formValue.manualVerificationAmount;
                value = value.replace(/[^\d.]/g, ''); // 清除“数字”和“.”以外的字符
                value = value.replace(/\.{2,}/g, '.'); // 只保留第一个. 清除多余的
                value = value.replace('.', '$#$')
                  .replace(/\./g, '')
                  .replace('$#$', '.');
                value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                console.log('过滤之后的value::', value);
                this.$nextTick(() => {
                  this.formConfig.formValue.manualVerificationAmount = value;
                });
              }
              // setRequired: "required" //必选标识,值不为required时无标识
            },
            {
              style: 'input', // 输入框类型
              label: '备注', // 输入框前文字
              value: 'remark', // 输入框的值
              width: '24', // 所占的宽度 (宽度分为24份,数值代表所占份数的宽度)
              icon: '', // 输入框后带的图标,暂只有输入框支持
              maxLength: 50,
              placeholder: '请输入50个以内字符', // 占位文本，默认为请输入
              ghost: false, // 是否关闭幽灵按钮，默认开启
              iconclick: () => {
              } // 点击icon图标事件
              // setRequired: "required" //必选标识,值不为required时无标识
            },
          ],
          // 表单非空提示
          ruleValidate: {
            manualVerificationAmount: [
              {
                required: true,
                message: ' ',
                trigger: 'blur'
              },
            ],
          }
        },
        time: '',
        btnConfig: {
          typeAll: 'error', // 按钮统一风格样式
          btnsite: 'right', // 按钮位置 (right , center , left)
          buttons: [
            {
              type: '', // 按钮类型
              text: '取消',
              icon: '', // 按钮图标
              size: '', // 按钮大小
              disabled: false, // 按钮禁用控制
              btnclick: () => {
                this.$emit('closeActionDialog', false);
              } // 按钮点击事件
            },
            {
              type: '', // 按钮类型
              text: '确定', // 下载 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              disabled: false, // 按钮禁用控制
              btnclick: async () => {
                console.log('点击确定按钮::输入框中的值=', this.formConfig.formValue);
                const formValue = this.formConfig.formValue;
                if (!formValue.manualVerificationAmount) {
                  this.$Message.error('请填写手工核销金额!');
                  return;
                }
                if(formValue.remark.length >50)
                {
                 this.$Message.error('备注长度不能超过50字符!');
                                  return;
                }
                // TODO 接口联调
                const param = {
                  ids: this.idArray,
                  param: {
                    T_OMSORDERRECONCILIATION: [
                      {
                        ID: this.idArray[0],
                        RECEIVEVERIFICATIONAMOUNT: formValue.manualVerificationAmount,
                        REMARKS: formValue.remark,
                      }
                    ]
                  },
                  tableName: this.$route.params.tableName,
                  actionName: 'T_OMSORDERRECONCILIATION_手工核销_SP',
                  isContainsParam: true,
                };
                const res = await this.service.common.exeAction(param);
                console.log(res);
                if (res.code == 0) {
                  this.$emit('closeActionDialog', true);
                  this.$Message.success(res.message || '手工核销成功!');
                } else {
                  this.$Message.error(res.message || '手工核销失败!');
                }
              }, // 按钮点击事件
            }
          ],
        },
      };
    },
    // 可选方法 组件出现时调用自定义的方法
    async mounted() {
      window.$vm0 = this;
      const selected = this.selectRowData[0];
      if (selected.CANCELVERIFICATIONSTATUS.val === '已核销') {
        this.$emit('closeActionDialog', false);
        this.$Message.error('该单据状态为已核销,不允许再次核销!');
        return;
      }

      let formValue = this.formConfig.formValue;

      // 获取初始化的数据
      const param = {
        ids: this.idArray,
        param: {
        },
        tableName: this.$route.params.tableName,
        actionName: 'T_OMSORDERRECONCILIATION_手工核销_初始化_SP',
        isContainsParam: false
      };
      let rsp = await common.exeAction(param);
      if (rsp === null) {
        showModalFcError('错误', '调用接口出现异常，请联系管理员！');
      } else if (rsp.code !== 0) {
        showModalFcError('错误', rsp.message);
      } else {
        let initData = JSON.parse(rsp.message);

        formValue.systemReceivableAmount = initData.SYSRECEIVEDAMOUNT;
        formValue.platReceivedAmount = initData.PLATFORMRECEIVEDAMOUNT;
        formValue.manualVerificatedAmount = initData.RECEIVEVERIFICATIONAMOUNT;
        formValue.canManualVerificationAmount = initData.CANMANUALVERIFICATIONAMOUNT;
      }
    },
    methods: {},
  };
</script>

<style lang="less" scoped>
  @import "~@yunque/css/modal/interfacePlatform/downLoadPublic.less";

  .tipModal {
    .ark-modal-footer {
      .ark-btn-text {
        display: none;
      }
    }
  }
</style>
