<script setup name="approvalDialog">
import { reactive, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import store from '@/store'
import OrgTree from '@/components/orgTree/index.vue'
import { useRoute } from 'vue-router'

const userInfo = storeToRefs(store.userStore).userInfo || {},
  route = useRoute(),
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: Object,
    orgCode: {
      type: String,
      default: ''
    }
  }),
  emits = defineEmits(['close', 'update:data']),
  formRef = ref(),
  form = ref({
    name: undefined,
    unitType: undefined,
    assignedUser: []
  }),
  rules = {
    name: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
    assignedUser: [{ required: true, message: '请至少选择一个节点负责人' }],
    mode: [{ required: true, message: '请选择审核方式' }]
    // overNum: [{ required: true, message: '请输入小时' }],
    // intervalNum: [{ required: true, message: '请输入小时' }],
    // notifyWay: [{ required: true, message: '请选择提醒方式' }],
    // notifyContent: [{ required: true, message: '请输入提醒内容' }]
  },
  submit = async formEl => {
    if (!formEl) {
      return
    }
    await formEl.validate(async valid => {
      if (valid) {
        const data = {
          name: form.value.name,
          id: form.value.id,
          parentId: form.value.parentId,
          type: form.value.type,
          props: {
            assignedType: 'ASSIGN_USER',
            assignedUser: form.value.assignedUser.map(i => i),
            mode: form.value.mode || undefined
            // isTimeoutRemind: form.value.isTimeoutRemind || undefined,
            // overNum: form.value.isTimeoutRemind ? form.value.overNum : undefined,
            // overUnit: form.value.isTimeoutRemind ? 2 : undefined,
            // intervalNum: form.value.isTimeoutRemind ? form.value.intervalNum : undefined,
            // intervalUnit: form.value.isTimeoutRemind ? 2 : undefined,
            // notifyWay: form.value.isTimeoutRemind ? form.value.notifyWay : undefined,
            // notifyContent: form.value.isTimeoutRemind ? form.value.notifyContent : undefined,
            // isStamp: form.value.type === 'stamp' ? true : undefined,
            // defaultExpandedkeys: form.value.defaultExpandedkeys || []
          }
        }
        emits('update:data', data)
        emits('close', true)
      }
    })
  },
  // 选择人弹窗
  orgProps = reactive({
    unitVisible: false,
    showCheckbox: true,
    data: undefined
  }),
  closeOrg = () => {
    orgProps.unitVisible = false
  },
  getOrgData = (data, expandedKeys) => {
    form.value.assignedUser = data.map(i => {
      return {
        id: i.key,
        name: i.title
      }
    })
    orgProps.unitVisible = false
  },
  showUnitUserDialog = () => {
    orgProps.unitVisible = true
    orgProps.data = form.value.assignedUser.map(i => ({ key: i.id, title: i.name }))
  },
  // 删除人员
  delTag = (index) => {
    form.value.assignedUser.splice(index, 1)
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      form.value = {
        ...props.data,
        props: undefined,
        assignedUser: props.data.props && props.data.props.assignedUser && props.data.props.assignedUser.length && props.data.props.assignedUser.map(i => i) || [],
        mode: props.data.props && props.data.props.mode
      }
    } else {
      formRef.value.resetFields()
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    :title="`${data.type==='APPROVAL'? '审批':data.type==='CONSTRCTION'? '建设审批': data.type === 'CC' ? '抄送' : data.type === 'SEAL' ? '盖章':''}节点设置`"
    width="840px"
    destroy-on-close
    @close="emits('close')"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="115px"
      label-suffix=":"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="节点名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="assignedUser" label="节点负责人">
            <div class="flex flex-col items-start">
              <el-button type="primary" @click="showUnitUserDialog"><el-icon><Plus /></el-icon>添加人员</el-button>
              <p>
                <el-tag
                  v-for="(item,index) in form.assignedUser"
                  :key="index"
                  class="mr-8"
                  closable
                  @close="delTag(index)"
                >
                  {{ item.name }}
                </el-tag>
              </p>
            </div>
          </el-form-item>
        </el-col>
        <template v-if="form.type!='CC'">
          <el-col :span="24">
            <el-form-item label="审核方式" prop="mode">
              <el-radio-group v-model="form.mode">
                <el-radio label="OR">或签</el-radio>
                <el-radio label="AND">会签</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="false" :span="24">
            <el-form-item label="超时提醒" prop="isTimeoutRemind">
              <el-switch v-model="form.isTimeoutRemind" />
            </el-form-item>
          </el-col>
          <template v-if="form.isTimeoutRemind">
            <el-col :span="24">
              <el-form-item label="提醒规则" required>
                若流程达到该节点
                <el-form-item prop="overNum">
                  <el-input v-model="form.overNum" placeholder="几个小时" style="width:100px" />
                </el-form-item>
                小时后未处理,则每隔
                <el-form-item prop="intervalNum">
                  <el-input v-model="form.intervalNum" placeholder="几个小时" style="width:100px" />
                </el-form-item>
                小时提醒一次
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="提醒方式" prop="notifyWay">
                <el-checkbox-group v-model="form.notifyWay">
                  <el-checkbox :label="1">浙政钉工作通知</el-checkbox>
                  <el-checkbox :label="2">手机短信</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="提醒内容" prop="notifyContent">
                <el-input v-model="form.notifyContent" type="textarea" />
                <p class="text-info">变量：项目名称{projectName}，流程名称{flowName}</p>
              </el-form-item>
            </el-col>
          </template>
        </template>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit(formRef)">
        提交
      </el-button>
      <el-button @click="emits('close')">
        关闭
      </el-button>
    </template>
  </el-dialog>
  <org-tree
    is-person
    :params="{needMember:true, organizationCode: route.query.orgCode || userInfo.empPosUnitCode,}"
    :visible="orgProps.unitVisible"
    :show-checkbox="orgProps.showCheckbox"
    :default-data="orgProps.data"
    title="人员"
    @close="closeOrg"
    @get-select-unit="getOrgData"
  />
</template>
