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

const props = defineProps({
  pageType: String, // 页面类型
})

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 conditionPersonVisible = ref(false) // 条件选择人员对话框显隐
const conditionDeptVisible = ref(false) // 条件选择部门对话框显隐
const selectConditionTypeFront = ref('') // 选择条件类型，1人员、2角色、3部门
const { setCondition, setConditionsConfig } = workFlowStore
const originalType = ref('') // 记录原始的类型
// 关闭条件抽屉
const closeDrawer = () => {
  setCondition(false)
}
// 监听控制条件抽屉显隐字段
const visible = computed({
  get() {
    if (workFlowStore.conditionDrawer && !conditionConfig.value.conditionList.length) {
      clickfq(conditionList.value, { columnId: 0 }, 'columnId') // 把发起人条件加进来
      sureCondition()
    }
    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: [] }
  if (conditionConfig.value.nodeUserList.length) {
    selectConditionTypeFront.value = `${conditionConfig.value.nodeUserList[0].type}`
    originalType.value = `${conditionConfig.value.nodeUserList[0].type}`
  }
})

// 点击添加条件，弹出条件选择框
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 })
      }
    }
  }
}

// 点击确定--抽屉添加条件条件
function 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: 0, // 条件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
  }
  console.log(conditionsConfig.value)

  // 保存条件设置
  setConditionsConfig({
    value: conditionsConfig.value,
    flag: true,
    id: workFlowStore.conditionsConfigValue.id,
  })
}
const selectDeptTreeRef = ref() // 选择部门树结构
// 添加条件--人员、角色、部门
const addSelectCondition = () => {
  if (selectConditionTypeFront.value === '1') { // 人员
    conditionPersonVisible.value = true
  }
  else if (selectConditionTypeFront.value === '2') { // 角色
    conditionRoleVisible.value = true
  }
  else { // 部门
    // conditionDeptVisible.value = true
    selectDeptTreeRef.value.initDialog()
  }

  checkedList.value = conditionConfig.value.nodeUserList
}
// 选好人员、角色、部门了
const sureSelectedCondition = (data: any) => {
  // conditionConfig.value.nodeUserList = data
  data.forEach((item: any) => {
    if (conditionConfig.value.nodeUserList.every((ele: any) => ele.targetId !== item.targetId)) {
      conditionConfig.value.nodeUserList.push(item)
    }
  })
  conditionRoleVisible.value = false
  conditionPersonVisible.value = false
  conditionDeptVisible.value = false
}

// 切换条件--清空
const changeSelectRadio = () => {
  conditionConfig.value.nodeUserList = []
}

// 点击发起人
function clickfq(conditionList: any, param: any, columnId: number | string) {
  $func.toChecked(conditionList, param, columnId)
}
// onUpdated(() => { // 首次不监听
//   // 条件变化清空列表
//     watch(() => selectConditionTypeFront.value, (newValue) => {
//       conditionConfig.value.nodeUserList = []
//     })
// })
watch(() => selectConditionTypeFront.value, (newValue) => {
  if (originalType.value !== selectConditionTypeFront.value) {
    conditionConfig.value.nodeUserList = []
  }
})
</script>

<template>
  <el-drawer v-model="visible" class="condition-drawer" :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> -->
        <div style="display: flex;justify-content: space-between;">
          <el-radio-group v-model="selectConditionTypeFront" style="margin-bottom: 20px;">
            <el-radio label="1">
              人员
            </el-radio>
            <el-radio label="2">
              角色
            </el-radio>
            <el-radio label="3">
              部门
            </el-radio>
          </el-radio-group>
          <div>
            <el-button type="primary" @click="addSelectCondition">
              选择
            </el-button>
            <el-button
              v-if="conditionConfig.nodeUserList && conditionConfig.nodeUserList.length !== 0"
              type="info" @click="conditionConfig.nodeUserList = []"
            >
              清空
            </el-button>
          </div>
        </div>

        <ul>
          <li v-for="(item, index) in conditionConfig.conditionList" :key="index">
            <!-- <span class="ellipsis">{{ item.type === 1 ? '发起人' : item.showName }}：</span> -->
            <span style="white-space: nowrap;">{{ selectConditionTypeFront === '1' ? '已选人员' : selectConditionTypeFront === '2' ? '已选角色' : '已选部门' }}：</span>
            <div v-if="item.type === 1">
              <!-- <el-input v-if="conditionConfig.nodeUserList.length === 0" type="text" placeholder="请选择具体人员/角色/部门" @click="addSelectCondition" /> -->
              <p v-if="conditionConfig && conditionConfig.nodeUserList && conditionConfig.nodeUserList.length" style="border: none;" 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> -->
          <!-- <el-checkbox :checked="true" disabled>
            发起人
          </el-checkbox> -->
          <h6>发起人的：</h6>
          <el-radio-group v-model="selectConditionTypeFront" @change="changeSelectRadio">
            <el-radio label="1">
              人员
            </el-radio>
            <el-radio label="2">
              角色
            </el-radio>
            <el-radio label="3">
              部门
            </el-radio>
          </el-radio-group>
          <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="conditionPersonVisible"
        v-model:data="checkedList"
        @change="sureSelectedCondition"
      />

      <!-- 角色弹框 -->
      <select-role-dialog
        v-model:visible="conditionRoleVisible"
        v-model:data="checkedList"
        @change="sureSelectedCondition"
      />

      <!-- 部门弹框 -->
      <!-- <select-dept-dialog
        v-model:visible="conditionDeptVisible"
        v-model:data="checkedList"
        @change="sureSelectedCondition"
      /> -->

      <!-- 选择部门树 -->
      <select-dept-tree ref="selectDeptTreeRef" @change="sureSelectedCondition" />
      <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-drawer {
  .el-radio__label {
    display: block !important;
  }
}

.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>