<template>
  <!-- 流程时限设置 -->
  <a-modal
    :destroy-on-close="true"
    title="流程时限设置"
    :body-style="{ overflow: 'auto' }"
    :width="600"
    :visible="showFlowTimeModal"
    @ok="handleOkFlowTimeSet"
    @cancel="() => (showFlowTimeModal = false)"
  >
    <a-form-model
      ref="remindForm"
      layout="horizontal"
      :model="flowTimeForm"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 18 }"
      :class="$style.remindWrap"
    >
      <a-form-model-item label="预警时限">
        <a-input-group compact>
          <a-select v-model="flowTimeForm.alarmTimeDefinition.dateUnit">
            <a-select-option value="d">
              天
            </a-select-option>
            <a-select-option value="H">
              小时
            </a-select-option>
            <a-select-option value="m">
              分钟
            </a-select-option>
          </a-select>
          <a-input-number v-model="flowTimeForm.alarmTimeDefinition.dateValue" :min="0" />
        </a-input-group>
      </a-form-model-item>
      <a-form-model-item label="到期时限">
        <a-input-group compact>
          <a-select v-model="flowTimeForm.dueTimeDefintion.dateUnit">
            <a-select-option value="d">
              天
            </a-select-option>
            <a-select-option value="H">
              小时
            </a-select-option>
            <a-select-option value="m">
              分钟
            </a-select-option>
          </a-select>
          <a-input-number v-model="flowTimeForm.dueTimeDefintion.dateValue" :min="0" />
        </a-input-group>
      </a-form-model-item>
      <a-form-model-item label="发送提醒">
        <sd-user-picker
          v-model="flowTimeForm.notificationReceivers"
          :single="false"
          :read-only="false"
        />
      </a-form-model-item>
      多次提醒
      <a-form-model-item
        v-for="(item, index) in flowTimeForm.alarmNotificationDefinition"
        :key="item.key"
        label="到期前"
      >
        <a-input-group compact>
          <a-select v-model="item.dateUnit">
            <a-select-option value="d">
              天
            </a-select-option>
            <a-select-option value="H">
              小时
            </a-select-option>
            <a-select-option value="m">
              分钟
            </a-select-option>
          </a-select>
          <a-input-number v-model="item.dateValue" :min="0" /> </a-input-group
        >发送提醒消息
        <a-icon
          v-if="index !== 0"
          :class="$style.notifyDeleteButton"
          type="minus-circle-o"
          @click="removeNotification(item, 'alarmNotificationDefinition')"
        />
        <a-icon
          v-if="index === 0"
          type="plus-circle"
          @click="addNotification('alarmNotificationDefinition')"
        />
      </a-form-model-item>
      <a-form-model-item
        v-for="(item, index) in flowTimeForm.dueNotificationDefinition"
        :key="index"
        label="超期后"
      >
        <a-input-group compact>
          <a-select v-model="item.dateUnit">
            <a-select-option value="d">
              天
            </a-select-option>
            <a-select-option value="H">
              小时
            </a-select-option>
            <a-select-option value="m">
              分钟
            </a-select-option>
          </a-select>
          <a-input-number v-model="item.dateValue" :min="0" /> </a-input-group
        >发送提醒消息
        <a-icon
          v-if="index !== 0"
          :class="$style.notifyDeleteButton"
          type="minus-circle-o"
          @click="removeNotification(item, 'dueNotificationDefinition')"
        />
        <a-icon
          v-if="index === 0"
          type="plus-circle"
          @click="addNotification('dueNotificationDefinition')"
        />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import components from './_import-components/sd-workflow-flow-time-definition-import'

export default {
  name: 'SdWorkflowFlowTimeDefinition',
  metaInfo: {
    title: 'SdWorkflowFlowTimeDefinition',
  },
  components,
  data() {
    return {
      showFlowTimeModal: false,
      flowTimeForm: {
        dueTimeDefintion: {
          dateUnit: 'd',
          dateValue: '',
        },
        alarmTimeDefinition: {
          dateUnit: 'd',
          dateValue: '',
        },
        notificationReceivers: [],
        messengerBeanIds: 'personMsgMessenger',
        alarmNotificationDefinition: [
          {
            dateUnit: 'd',
            dateValue: '',
            key: Date.now(),
          },
        ],
        dueNotificationDefinition: [
          {
            dateUnit: 'd',
            dateValue: '',
            key: Date.now(),
          },
        ],
      },
    }
  },
  methods: {
    run() {
      this.showFlowTimeModal = true
    },
    removeNotification(item, type) {
      const index = this.flowTimeForm[type].indexOf(item)
      if (index !== -1) {
        this.flowTimeForm[type].splice(index, 1)
      }
    },
    addNotification(type) {
      this.flowTimeForm[type].push({
        dateUnit: 'd',
        dateValue: '',
        key: Date.now(),
      })
    },
    handleOkFlowTimeSet() {
      if (
        this.flowTimeForm.alarmTimeDefinition.dateValue ||
        this.flowTimeForm.dueTimeDefintion.dateValue
      ) {
        const notificationReceivers = this.flowTimeForm.notificationReceivers.map((receiver) => {
          return {
            type: receiver.type,
            code: receiver.code,
            name: receiver.name,
            attrs: null,
          }
        })
        this.flowTimeForm.notificationReceivers = notificationReceivers
        this.flowTimeForm.alarmNotificationDefinition.every((item) => {
          delete item.key
        })
        this.flowTimeForm.dueNotificationDefinition.every((item) => {
          delete item.key
        })
        this.webflow.timer = this.flowTimeForm
      }
      this.showFlowTimeModal = false
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
// 时限设置
.remind-wrap {
  :global(.ant-input-group-compact) {
    width: 62%;
    :global(.ant-select) {
      width: 30%;
    }
    :global(.ant-input-number) {
      width: 68%;
    }
  }
  .notify-delete-button {
    margin-right: 4px;
  }
}
</style>
