<!-- 抄送人设置 -->
<script setup name="CopyerDrawer">
import { computed, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import selectEmployeesDialog from '../dialog/selectEmployeesDialog.vue'

import $func from '@/plugins/preload'
import useWorkFlowStore from '@/store/modules/workFlow'
const workFlowStore = useWorkFlowStore()
const copyerConfig = ref({})
const ccSelfSelectFlag = ref([])
const copyerVisible = ref(false)
const checkedList = ref([])
// const { copyerDrawer, copyerConfigValue } = workFlowStore
const { setCopyerConfig, setCopyer } = workFlowStore

const closeDrawer = () => {
  setCopyer(false)
}
const visible = computed({
  get() {
    return workFlowStore.copyerDrawer
  },
  set() {
    closeDrawer()
  },
})
watch(() => workFlowStore.copyerConfigValue, (val) => {
  copyerConfig.value = val.value
  ccSelfSelectFlag.value = copyerConfig.value.ccSelfSelectFlag == 0 ? [] : [copyerConfig.value.ccSelfSelectFlag]
})

const addCopyer = () => {
  copyerVisible.value = true
  checkedList.value = copyerConfig.value.nodeUserList
}
const sureCopyer = (data) => {
  copyerConfig.value.nodeUserList = data
  copyerVisible.value = false
}
const saveCopyer = () => {
  if (!copyerConfig.value.nodeUserList.length) {
    ElMessage({
      message: '请选择抄送人',
      type: 'warning',
    })
    return
  }
  copyerConfig.value.ccSelfSelectFlag = ccSelfSelectFlag.value.length == 0 ? 0 : 1
  copyerConfig.value.error = !$func.copyerStr(copyerConfig.value)
  setCopyerConfig({
    value: copyerConfig.value,
    flag: true,
    id: workFlowStore.copyerConfigValue.id,
  })
  closeDrawer()
}
</script>

<template>
  <el-drawer v-model="visible" :append-to-body="true" title="抄送人设置" direction="rtl" custom-class="set_copyer" size="550px" @close="closeDrawer">
    <div class="demo-drawer__content">
      <div class="copyer_content drawer_content">
        <el-button type="primary" @click="addCopyer">
          添加成员
        </el-button>
        <p class="selected_list">
          <span v-for="(item, index) in copyerConfig.nodeUserList" :key="index" class="people-box">
            {{ item.name }}
            <!-- <img src="../../assets/images/add-close1.png" @click="$func.removeEle(copyerConfig.nodeUserList, item, 'targetId')"> -->
            <el-icon style="vertical-align: middle;" @click="$func.removeEle(copyerConfig.nodeUserList, item, 'targetId')">
              <close />
            </el-icon>
          </span>
          <a v-if="copyerConfig.nodeUserList && copyerConfig.nodeUserList.length !== 0" @click="copyerConfig.nodeUserList = []">清除</a>
        </p>
        <!-- <el-checkbox-group v-model="ccSelfSelectFlag" class="clear">
          <el-checkbox :label="1">
            允许发起人自选抄送人
          </el-checkbox>
        </el-checkbox-group> -->
      </div>
      <div class="demo-drawer__footer clear" style="margin-top: 50px;">
        <el-button type="primary" @click="saveCopyer">
          确 定
        </el-button>
        <el-button @click="closeDrawer">
          取 消
        </el-button>
      </div>
      <!-- <employees-role-dialog
        v-model:visible="copyerVisible"
        v-model:data="checkedList"
        @change="sureCopyer"
      /> -->
      <!-- 成员弹框 -->
      <select-employees-dialog
        v-model:visible="copyerVisible"
        v-model:data="checkedList"
        @change="sureCopyer"
      />
    </div>
  </el-drawer>
</template>

<style lang="scss" scoped>
.people-box {
  font-size: 12px;
  margin-right: 10px;
  padding: 3px 6px 3px 9px;
  white-space: nowrap;
  border-radius: 6px;
  border: 1px solid rgb(220 220 220 / 100%);
}
</style>

<style lang="scss">
.set_copyer {
  .copyer_content {
    padding: 20px 20px 0 0;

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

    .el-checkbox {
      margin-bottom: 20px;
    }
  }
}
</style>