<!-- 发起人设置 -->
<script setup>
import { computed, ref, watch } from 'vue'
import employeesDialog from '../dialog/employeesDialog.vue'
import $func from '@/plugins/preload'
import useWorkFlowStore from '@/store/modules/workFlow'
const workFlowStore = useWorkFlowStore()
const flowPermission = ref([])
const promoterVisible = ref(false)
const checkedList = ref([])
// const { promoterDrawer, flowPermission1 } = workFlowStore
const { setPromoter, setFlowPermission } = workFlowStore

const closeDrawer = () => {
  console.log('close4')
  setPromoter(false)
}
const visible = computed({
  get() {
    console.log('4')

    return workFlowStore.promoterDrawer
  },
  set() {
    closeDrawer()
  },
})
watch(workFlowStore.flowPermission1, (val) => {
  flowPermission.value = val.value
})

const addPromoter = () => {
  checkedList.value = flowPermission.value
  promoterVisible.value = true
}
const surePromoter = (data) => {
  flowPermission.value = data
  promoterVisible.value = false
}
const savePromoter = () => {
  setFlowPermission({
    value: flowPermission.value,
    flag: true,
    id: workFlowStore.flowPermission1.value.id,
  })
  closeDrawer()
}
</script>

<template>
  <el-drawer v-model="visible" :append-to-body="true" title="发起人" direction="rtl" custom-class="set_promoter" size="550px" :before-close="savePromoter">
    <div class="demo-drawer__content">
      <div class="promoter_content drawer_content">
        <p>{{ $func.arrToStr(flowPermission) || '所有人' }}</p>
        <el-button type="primary" @click="addPromoter">
          添加/修改发起人
        </el-button>
      </div>
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="savePromoter">
          确 定
        </el-button>
        <el-button @click="closeDrawer">
          取 消
        </el-button>
      </div>
      <employees-dialog
        v-model:visible="promoterVisible"
        v-model:data="checkedList"
        :is-department="true"
        @change="surePromoter"
      />
    </div>
  </el-drawer>
</template>

<style lang="scss">
.set_promoter {
  .promoter_content {
    padding: 0 20px;

    .el-button {
      margin-bottom: 20px;
    }

    p {
      padding: 18px 0;
      font-size: 14px;
      line-height: 20px;
      color: #000;
    }
  }
}
</style>