<script setup lang="ts">
import ConfigTemplate from '../../ConfigTemplate.vue'

const props = defineProps<{ node: any }>()

const role = inject('role') as string

const form = reactive({
  date_type: '',
  date_type_name: '',
  date_rule: '',
  date_rule_name: '',
  date: '',
  week: [],
  week_name: ''
})
watchEffect(() => {
  Object.assign(form, props.node.data[role])
})

const dateTypeList = ref([
  { label: '日期范围', value: '0' },
  { label: '星期范围', value: '1' }
])
const dateRuleList = ref([
  { label: '早于', value: '0' },
  { label: '晚于', value: '1' },
  { label: '区间', value: '2' }
])
const weekList = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])

watchEffect(() => {
  form.date_type_name = dateTypeList.value.find(item => item.value === form.date_type)?.label || ''
})
watchEffect(() => {
  form.date_rule_name = dateRuleList.value.find(item => item.value === form.date_rule)?.label || ''
})
watchEffect(() => {
  form.week_name = form.week.join('、')
})
</script>

<template>
  <ConfigTemplate :model="form" :node="node">
    <el-form-item label="时间判断类型">
      <el-radio-group v-model="form.date_type">
        <el-radio v-for="item in dateTypeList" :key="item.value" :value="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="进入该步骤的时间">
      <template v-if="form.date_type === '0'">
        <el-select v-model="form.date_rule" placeholder="请选择" style="width: 115px; margin-right: 10px">
          <el-option v-for="item in dateRuleList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-date-picker v-if="['0', '1'].includes(form.date_rule)" v-model="form.date" type="date" placeholder="请选择" value-format="YYYY-MM-DD" />
        <el-date-picker
          v-else
          v-model="form.date"
          style="width: 100px"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD" />
      </template>
      <template v-else>
        <el-checkbox-group v-model="form.week">
          <el-checkbox v-for="item in weekList" :key="item" :label="item" :value="item" />
        </el-checkbox-group>
      </template>
    </el-form-item>
  </ConfigTemplate>
</template>
