<template>
  <div>
    <a-form-model
      ref="flowForm"
      :class="$style.flowactionForm"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 13 }"
    >
      <a-form-model-item :label="innerForm.label">
        <a-radio-group v-model="innerForm.mode" @change="modeChnage">
          <a-radio value="global" :style="radioStyle"
            >系统全局设置（当前为‘{{ innerForm.globalValue ? '是' : '否' }}’）</a-radio
          >
          <a-radio value="custom" :style="radioStyle">
            <span>本{{ mode === 'flow' ? '流程' : '环节' }}自定义</span>
            <a-radio-group
              v-if="innerForm.mode === 'custom'"
              v-model="innerForm.value"
              :class="$style.allowRadio"
            >
              <a-radio :value="true">是</a-radio>
              <a-radio :value="false">否</a-radio>
            </a-radio-group>
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item
        v-if="innerForm.id === 'skipSameUser' && innerForm.value"
        :class="$style.skipStep"
        label="不显示跳过节点"
      >
        <a-radio-group v-model="innerForm.notShowSkipStep">
          <a-radio :value="true">是</a-radio>
          <a-radio :value="false">否</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item v-if="innerForm.id === 'allowInform'" label="已阅方式">
        <a-select v-model="innerForm.informType" :class="$style.select">
          <a-select-option value="openRead">
            打开待阅变已阅
          </a-select-option>
          <a-select-option value="clickRead">
            点击反馈变已阅
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import components from './_import-components/sd-flowaction-form-import'

export default {
  name: 'SdFlowactionForm',
  components,
  props: {
    form: {
      type: Object,
      default: () => {},
    },
    mode: {
      type: String,
      default: '',
    },
  },
  metaInfo: {
    title: 'SdFlowactionForm',
  },
  data() {
    return {
      radioStyle: {
        display: 'block',
        height: '40px',
        lineHeight: '40px',
      },
      innerForm: { ...this.form },
    }
  },
  watch: {
    innerForm: {
      handler(val) {
        const newForom = { ...val }
        delete newForom.globalValue
        this.$emit('change', newForom)
      },
      deep: true,
    },
  },
  methods: {
    modeChnage(e) {
      this.innerForm.value = e.target.value === 'custom' ? true : ''
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.flowaction-form {
  width: 70%;
  padding: 0 20px;
  margin: 15px auto;
  border: 1px solid #ccc;
}
.allow-radio {
  margin-left: 60px;
}
.select {
  min-width: 120px;
}
.skip-step {
  margin-top: -24px;
}
</style>
