<!-- 条件设置 -->
<script setup lang="ts" name="ConsitionDrawer">
import { computed, ref, watch } from 'vue'
import $func from '@/plugins/preload'
import useWorkFlowStore from '@/store/modules/workFlow'

const workFlowStore = useWorkFlowStore() // store
const conditionVisible = ref(false) // 控制选择条件对话框显隐
const conditionsConfig = ref({ // 多个条件数据配置
  conditionNodes: [],
}) as any
const conditionConfig = ref({}) as any// 单个条件数据配置
const PriorityLevel = ref() // 优先级
const conditions = ref([]) as any // 条件选项（可以选择的条件）
const conditionList = ref([]) as any// 条件列表
const checkedList = ref([]) as any// 选择的人员
const conditionRoleVisible = ref(false) // 条件选择人员对话框显隐

const { setCondition, setConditionsConfig } = workFlowStore

// 关闭条件抽屉
const closeDrawer = () => {
  setCondition(false)
}
// 监听控制条件抽屉显隐字段
const visible = computed({
  get() {
    return workFlowStore.conditionDrawer
  },
  set() {
    closeDrawer()
  },
})

// 监听条件配置数据
watch(() => workFlowStore.conditionsConfigValue, (val) => {
  conditionsConfig.value = val.value
  PriorityLevel.value = val.priorityLevel
  conditionConfig.value = val.priorityLevel
    ? conditionsConfig.value.conditionNodes[val.priorityLevel - 1]
    : { nodeUserList: [], conditionList: [] }
})

// 点击添加条件，弹出条件选择框
const addCondition = async () => {
  conditionList.value = []
  conditionVisible.value = true // 选择条件对话框显隐
  const data = [ // 其他的条件选项
  //   // {
  //   //   "columnId": "1090",
  //   //   "showType": "1",
  //   //   "showName": "预计采购总费用",
  //   //   "columnName": "planProcurementTotalMoney",
  //   //   "columnType": "Double",
  //   //   "fixedDownBoxValue": ""
  //   // },
  ] as any
  conditions.value = data // 条件选择项
  if (conditionConfig.value.conditionList) {
    for (let i = 0; i < conditionConfig.value.conditionList.length; i++) {
      var { columnId } = conditionConfig.value.conditionList[i]
      // 条件id  columnId == 0 为发起人
      if (columnId === 0) {
        conditionList.value.push({ columnId: 0 })
      }
    }
  }
}

// 点击确定--抽屉添加条件条件
const sureCondition = () => {
  // 1.弹窗有，外面无+
  // 2.弹窗有，外面有不变
  for (let i = 0; i < conditionList.value.length; i++) {
    const { columnId } = conditionList.value[i] // 条件id
    if ($func.toggleClass(conditionConfig.value.conditionList, conditionList.value[i], 'columnId')) {
      continue
    }
    if (columnId === 0) { // 发起人
      conditionConfig.value.nodeUserList = [] // 发起人列表置空
      conditionConfig.value.conditionList.push({ // 条件列表增加发起人条件
        type: 1,
        columnId, // 条件id
        showName: '发起人',
      })
    }
  }
  // 3.弹窗无，外面有-
  for (let i = conditionConfig.value.conditionList.length - 1; i >= 0; i--) {
    if (!$func.toggleClass(conditionList.value, conditionConfig.value.conditionList[i], 'columnId')) {
      conditionConfig.value.conditionList.splice(i, 1)
    }
  }
  // 条件列表排序
  conditionConfig.value.conditionList.sort((a: any, b: any) => { return a.columnId - b.columnId })
  conditionVisible.value = false // 关闭选择条件对话框
}

// 抽屉点击确定--保存条件
const saveCondition = () => {
  // 关闭条件抽屉
  closeDrawer()
  const getIndex = conditionsConfig.value.conditionNodes.splice(PriorityLevel.value - 1, 1)// 截取旧下标
  conditionsConfig.value.conditionNodes.splice(conditionConfig.value.priorityLevel - 1, 0, getIndex[0])// 填充新下标
  conditionsConfig.value.conditionNodes.map((item: any, index: number) => {
    item.priorityLevel = index + 1
  })

  // 设置条件节点的文字，同时设置error字段（空节点控制提示）
  for (let i = 0; i < conditionsConfig.value.conditionNodes.length; i++) {
    conditionsConfig.value.conditionNodes[i].error = $func.conditionStr(conditionsConfig.value, i) === '请设置条件' && i !== conditionsConfig.value.conditionNodes.length - 1
  }
  // 保存条件设置
  setConditionsConfig({
    value: conditionsConfig.value,
    flag: true,
    id: workFlowStore.conditionsConfigValue.id,
  })
}
// 添加条件--人员
const addConditionRole = () => {
  conditionRoleVisible.value = true
  checkedList.value = conditionConfig.value.nodeUserList
}
// 选好角色了
const sureConditionRole = (data: any) => {
  conditionConfig.value.nodeUserList = data
  conditionRoleVisible.value = false
}

// 点击发起人
const clickfq = (conditionList: any, param: any, columnId: number | string) => {
  $func.toChecked(conditionList, param, columnId)
}
</script>

<template>
  <el-drawer v-model="visible" :append-to-body="true" title="条件设置" direction="rtl" custom-class="condition_copyer" size="550px" :before-close="saveCondition">
    <template #header="{ titleId, titleClass }">
      <h3 :id="titleId" :class="titleClass">
        条件设置
      </h3>
      <select v-model="conditionConfig.priorityLevel" class="priority_level">
        <option v-for="item in conditionsConfig.conditionNodes.length" :key="item" :value="item">
          优先级{{ item }}
        </option>
      </select>
    </template>
    <div class="demo-drawer__content">
      <div class="condition_content drawer_content">
        <p class="tip">
          当审批单同时满足以下条件时进入此流程
        </p>
        <el-button
          type="primary"
          @click="addCondition"
        >
          添加条件
        </el-button>

        <ul>
          <li v-for="(item, index) in conditionConfig.conditionList" :key="index">
            <span class="ellipsis">{{ item.type === 1 ? '发起人' : item.showName }}：</span>
            <div v-if="item.type === 1">
              <el-input v-if="conditionConfig.nodeUserList.length === 0" type="text" placeholder="请选择具体人员/角色/部门" @click="addConditionRole" />
              <p v-if="conditionConfig && conditionConfig.nodeUserList && conditionConfig.nodeUserList.length" class="selected_list">
                <span v-for="(item, index) in conditionConfig.nodeUserList" :key="index" class="people-box">
                  {{ item.name }}
                  <el-icon style="vertical-align: middle;cursor: pointer;" @click="$func.removeEle(conditionConfig.nodeUserList, item, 'targetId')">
                    <close />
                  </el-icon>
                </span>
                <a v-if="conditionConfig.nodeUserList && conditionConfig.nodeUserList.length !== 0" @click="conditionConfig.nodeUserList = []">清除</a>
              </p>
            </div>
            <a v-if="item.type === 1" @click="conditionConfig.nodeUserList = [];$func.removeEle(conditionConfig.conditionList, item, 'columnId')">删除</a>
            <a v-if="item.type === 2" @click="$func.removeEle(conditionConfig.conditionList, item, 'columnId')">删除</a>
          </li>
        </ul>

        <el-dialog v-model="conditionVisible" title="选择条件" width="480px" append-to-body custom-class="condition_list">
          <p>请选择用来区分审批流程的条件字段</p>
          <p class="check_box">
            <a
              :class="$func.toggleClass(conditionList, { columnId: 0 }, 'columnId') && 'active'"
              @click="clickfq(conditionList, { columnId: 0 }, 'columnId')"
            >发起人</a>
            <a
              v-for="(item, index) in conditions" :key="index" :class="$func.toggleClass(conditionList, item, 'columnId') && 'active'"
              @click="$func.toChecked(conditionList, item, 'columnId')"
            >{{ item.showName }}</a>
          </p>
          <template #footer>
            <el-button @click="conditionVisible = false">
              取 消
            </el-button>
            <el-button type="primary" @click="sureCondition">
              确 定
            </el-button>
          </template>
        </el-dialog>
      </div>

      <!-- 成员弹框 -->
      <select-employees-dialog
        v-model:visible="conditionRoleVisible"
        v-model:data="checkedList"
        @change="sureConditionRole"
      />
      <div class="demo-drawer__footer clear" style="margin-top: 50px;">
        <el-button type="primary" @click="saveCondition">
          确 定
        </el-button>
        <el-button @click="closeDrawer">
          取 消
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<style lang="scss">
.condition_copyer {
  .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%);
  }

  .priority_level {
    position: absolute;
    top: 16px;
    right: 70px;
    width: 100px;
    height: 32px;
    background: rgb(255 255 255 / 100%);
    border-radius: 4px;
    border: 1px solid rgb(217 217 217 / 100%);
    font-size: 12px;
  }

  .condition_content {
    // padding: 20px 20px 0;

    p.tip {
      margin: 20px 0;
      width: 445px;
      text-indent: 17px;
      line-height: 45px;
      background: rgb(241 249 255 / 100%);
      border: 1px solid rgb(64 163 247 / 100%);
      color: #46a6fe;
      font-size: 14px;
    }

    ul {
      max-height: 500px;
      overflow-y: scroll;
      margin-bottom: 20px;

      li {
        & > span {
          float: left;
          margin-right: 8px;
          width: 70px;
          line-height: 32px;
          text-align: right;
        }

        & > div {
          display: inline-block;
          width: 370px;

          & > p:not(:last-child) {
            margin-bottom: 10px;
          }
        }

        &:not(:last-child) > div > p {
          margin-bottom: 20px;
        }

        & > a {
          float: right;
          margin-right: 10px;
          margin-top: 7px;
        }

        select + input {
          width: 260px;
        }

        select {
          margin-right: 10px;
          width: 100px;
        }

        p.selected_list {
          padding-left: 10px;
          border-radius: 4px;
          min-height: 32px;
          border: 1px solid rgb(217 217 217 / 100%);
          word-break: break-word;
        }

        p.check_box {
          line-height: 32px;
        }
      }
    }

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

.condition_list {
  .el-dialog__body {
    padding: 16px 26px;
  }

  p {
    color: #666;
    margin-bottom: 10px;

    & > .check_box {
      margin-bottom: 0;
      line-height: 36px;
    }
  }
}

.radio_box a,
.check_box a {
  font-size: 12px;
  position: relative;
  padding-left: 20px;
  margin-right: 30px;
  cursor: pointer;
  color: #333;
  white-space: pre;
}

.check_box.not a:hover {
  color: #333;
}

.check_box.not a::before,
.check_box.not a:hover::before {
  border: none;
}

.check_box.not.active {
  background: #f3f3f3;
}

.radio_box a:hover::before,
.check_box a:hover::before {
  border: 1px solid #46a6fe;
}

.radio_box a::before,
.check_box a::before {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  left: 0;
  top: 1px;
  content: "";
}

.radio_box a::before {
  border-radius: 50%;
}

.check-dot.active::after,
.radio_box a.active::after,
.check_box a.active::after {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  content: "";
}

.radio_box a.active::after {
  background: #46a6fe;
}

.check_box a.active::after {
  background: url("@/assets/images/check_box.png") no-repeat center;
}
</style>