<template>
  <div :class="$style.border">
    <a-form
      ref="flowForm"
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
    >
      <div :class="$style.label">超时处理</div>
      <a-form-item label="到期后执行的操作">
        <a-select v-model="actions" :options="actionOptions"></a-select>
      </a-form-item>
      <div v-if="actions && actions !== '无操作'">
        <div :class="$style.label">时限设置</div>
        <a-form-item
          v-for="(item, index) in Object.keys(form)"
          :key="item + index"
          :label="item === 'alarmTimeDefinition' ? '预警时限' : '到期时限'"
          :class="$style.timeItem"
        >
          <div :class="$style.timeSelect">
            <a-select
              v-model="form[item].dateUnit"
              :options="timeLimitOptions"
              :class="$style.timeUnit"
            ></a-select>
            <a-input
              v-model="form[item].dateValue"
              :class="$style.timeValue"
              type="number"
              :min="0"
            ></a-input>
          </div>
        </a-form-item>

        <div :class="$style.label">超时提醒</div>
        <a-form-item
          v-for="(k, index) in formProps.alarm"
          :key="index + 'alarm'"
          :class="$style.timeItem"
          v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
          :label="index === 0 ? '到期前' : ''"
        >
          <div :class="$style.timeSelect">
            <a-select
              v-model="k.dateUnit"
              :options="timeLimitOptions"
              :class="$style.timeUnit"
            ></a-select>
            <a-input
              v-model="k.dateValue"
              :class="$style.timeValue"
              type="number"
              :min="0"
            ></a-input>
            <a-button
              :type="index === 0 ? 'primary' : 'danger'"
              :icon="index === 0 ? 'plus' : 'minus'"
              @click="index === 0 ? add('alarm') : remove('alarm', k)"
            />
          </div>
        </a-form-item>
        <a-form-item
          v-for="(k, index) in formProps.due"
          :key="index"
          :class="$style.timeItem"
          v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
          :label="index === 0 ? '超期后' : ''"
        >
          <div :class="$style.timeSelect">
            <a-select
              v-model="k.dateUnit"
              :options="timeLimitOptions"
              :class="$style.timeUnit"
            ></a-select>
            <a-input
              v-model="k.dateValue"
              :class="$style.timeValue"
              type="number"
              :min="0"
            ></a-input>
            <a-button
              :type="index === 0 ? 'primary' : 'danger'"
              :icon="index === 0 ? 'plus' : 'minus'"
              @click="index === 0 ? add('due') : remove('due', k)"
            />
          </div>
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>

<script>
import components from './_import-components/sd-time-limit-import'

export default {
  name: 'SdTimeLimit',
  metaInfo: {
    title: 'SdTimeLimit',
  },
  components,
  data() {
    const actions = ['暂停流程', '终止流程', '等待', '流转到指定环节', '无操作']
    return {
      formItemLayout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 13 },
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          span: 13,
          offset: 8,
        },
      },
      actionOptions: actions.map((item) => ({ label: item, value: item })),
      timeLimitOptions: [
        { label: '天', value: 'd' },
        { label: '小时', value: 'H' },
        { label: '分', value: 'm' },
      ],
      actions: null,
      form: {
        alarmTimeDefinition: { dateUnit: null, dateValue: null },
        dueTimeDefintion: { dateUnit: null, dateValue: null },
      },
      formProps: {
        alarm: [{ dateUnit: null, dateValue: null }],
        due: [{ dateUnit: null, dateValue: null }],
      },
    }
  },
  computed: {},
  methods: {
    allForm() {
      if (!this.actions) return null
      if (this.actions === '无操作') return { action: this.actions }
      const { dueTimeDefintion, alarmTimeDefinition } = this.form
      const hasLimitValue = dueTimeDefintion.dateUnit && dueTimeDefintion.dateValue
      const hasErrorValue = [...Object.values({ ...this.form, ...this.formProps })]
        .flat()
        .some((item) => item.dateValue < 0)
      if (!hasLimitValue) return { errorCode: 1 }
      if (hasErrorValue) return { errorCode: 2 }
      else {
        const alarmProps = this.formProps.alarm.filter(
          (item) => item.dateUnit && item.dateValue && item.dateValue >= 0
        )
        const dueProps = this.formProps.due.filter(
          (item) => item.dateUnit && item.dateValue && item.dateValue >= 0
        )
        return {
          action: this.actions,
          dueTimeDefintion,
          alarmTimeDefinition:
            alarmTimeDefinition.dateUnit && alarmTimeDefinition.dateValue > 0
              ? alarmTimeDefinition
              : null,
          props:
            alarmProps.length > 0 || dueProps.length > 0
              ? {
                  alarm: alarmProps.length > 0 ? JSON.stringify(alarmProps) : null,
                  due: dueProps.length > 0 ? JSON.stringify(dueProps) : null,
                }
              : null,
        }
      }
    },
    confirmText() {
      const form = this.allForm()
      if (!form) return []
      const labelList = { H: '小时', d: '天', m: '分钟' }
      let propsConfirmText = []
      if (form.props) {
        propsConfirmText = [
          form.props.alarm
            ? {
                label: '超时提醒到期前',
                value: JSON.parse(form.props.alarm)
                  .map((item) => item.dateValue + labelList[item.dateUnit])
                  .join(),
              }
            : null,
          form.props.due
            ? {
                label: '超时提醒超期后',
                value: JSON.parse(form.props.due)
                  .map((item) => item.dateValue + labelList[item.dateUnit])
                  .join(),
              }
            : null,
        ]
      }
      return [
        { label: '到期后执行的操作', value: form.action },
        form.alarmTimeDefinition
          ? {
              label: '预警时限',
              value:
                form.alarmTimeDefinition.dateValue + labelList[form.alarmTimeDefinition.dateUnit],
            }
          : null,
        form.dueTimeDefintion
          ? {
              label: '到期时限',
              value: form.dueTimeDefintion.dateValue + labelList[form.dueTimeDefintion.dateUnit],
            }
          : null,
      ]
        .concat(propsConfirmText)
        .filter((item) => item !== null)
    },
    add(type) {
      this.formProps[type].push({ dateUnit: null, dateValue: null })
    },
    remove(type, k) {
      this.formProps[type] = this.formProps[type].filter((item) => item !== k)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.border {
  width: 70%;
  padding: 10px;
  margin: 0 auto 20px;
  border: 1px solid #ccc;
  .label {
    margin: 10px;
    font-weight: bold;
  }
}
.time-item {
  margin-bottom: 12px;
  .time-select {
    .time-unit {
      width: 80px;
    }
    .time-value {
      width: 135px;
      margin: 0 10px;
    }
  }
}
</style>
