<template>
<!--  <div>-->

<!--  </div>-->
<!--  <div>-->
    <div v-for="(group, index) in selectedNode.props.groups" :key="index + '_g'" class="group">
      <div class="group-header">
        <!--      <span class="group-name">条件组 {{ groupNames[index] }}</span>-->
        <span class="group-name">条件</span>
        <div class="group-cp">
          <span>组内条件关系：</span>
          <el-switch v-model="group.groupType" active-color="#409EFF"
                     inactive-color="#c1c1c1" active-value="AND" inactive-value="OR"
                     active-text="且" inactive-text="或"/>
        </div>

        <div class="group-operation">
          <el-popover placement="bottom" title="选择审批条件" width="300" trigger="click">
            <template #reference>
              <el-icon :size="18" class="group-icon">
                <Plus/>
              </el-icon>
            </template>
            <div>以下条件将决定具体的审批流程</div>
            <el-checkbox-group v-model="group.cids" value-key="id">
              <el-checkbox :label="condition.id" v-for="(condition, cindex) in conditionList" :key="condition.id"
                           @change="conditionChange(cindex, group)">
                {{ condition.title }}
              </el-checkbox>
            </el-checkbox-group>
          </el-popover>
          <!--        <el-icon :size="18" class="group-icon" @click="delGroup(index)">-->
          <!--          <Close/>-->
          <!--        </el-icon>-->
        </div>
      </div>
      <div class="group-content">
        <p v-if="group.conditions.length === 0">点击右上角 + 添加条件</p>
        <div v-else>
          <el-form ref="condition-form">
            <!--构建表达式-->
            <el-form-item v-for="(condition, cindex) in group.conditions" :key="condition.id + '_' + cindex">
              <ellipsis slot="label" hover-tip :content="condition.title"/>
              <span v-if="condition.valueType === ValueType.string">
                <el-select placeholder="判断符" style="width: 120px;" v-model="condition.compare"
                           @change="condition.value = []" filterable clearable>
                  <el-option label="等于" value="="></el-option>
                  <el-option label="不等于" value="!="></el-option>
                  <el-option label="包含在" value="IN"></el-option>
                </el-select>
                 <span v-if="isSelect(condition.id)" style="margin-left: 10px">
                   <el-select v-if="condition.compare === 'IN'" style="width: 280px;" clearable multiple size="small"
                              v-model="condition.value" placeholder="选择值" filterable>
                     <el-option v-for="(option, oi) in getOptions(condition.id)" :key="oi" :label="option"
                                :value="option"></el-option>
                   </el-select>
                   <el-select v-else style="width: 280px;" clearable size="small" v-model="condition.value[0]"
                              placeholder="选择值" filterable>
                     <el-option v-for="(option, oi) in getOptions(condition.id)" :key="oi" :label="option"
                                :value="option"></el-option>
                   </el-select>
                 </span>
                 <span v-else style="margin-left: 10px">
                   <el-input v-if="condition.compare === '=' ||condition.compare === '!='" style="width: 280px;"
                             placeholder="输入比较值"
                             v-model="condition.value[0]"/>
                   <el-select v-else style="width: 280px;" multiple clearable filterable allow-create size="small"
                              v-model="condition.value" placeholder="输入可能包含的值"></el-select>
                 </span>
              </span>
              <span v-else-if="condition.valueType === ValueType.number">
                <el-select size="small" placeholder="判断符" style="width: 120px;" v-model="condition.compare" filterable
                           clearable>
                  <el-option :label="exp.label" :value="exp.value" :key="exp.value" v-for="exp in explains"></el-option>
                </el-select>
                <span style="margin-left: 10px">
                  <el-input style="width: 280px;" v-if="conditionValType(condition.compare) === 0"
                            placeholder="输入比较值" type="number" v-model="condition.value[0]"/>
                  <el-select style="width: 280px;" multiple filterable allow-create clearable
                             v-else-if="conditionValType(condition.compare) === 1"
                             v-model="condition.value" placeholder="输入可能包含的值"></el-select>
                  <span v-else>
                    <el-input style="width: 130px;" type="number" placeholder="输入比较值"
                              v-model="condition.value[0]"/>
                    <span> ~
                      <el-input style="width: 130px;" type="number" placeholder="输入比较值"
                                v-model="condition.value[1]"/>
                    </span>
                  </span>
                </span>
              </span>
              <span v-else-if="condition.valueType === ValueType.company">
                <span class="item-desc" style="margin-right: 20px">公司</span>
                <el-select placeholder="判断符" style="width: 120px;" v-model="condition.compare" filterable clearable>
                  <el-option label="等于" value="="></el-option>
                  <el-option label="不等于" value="!="></el-option>
                </el-select>
                <el-tree-select
                    v-model="condition.value[0]"
                    @node-click="(data)=>{
                      condition.value[1] = data.label
                    }"
                    :data="companyList"
                    check-strictly
                    style="width: 240px"
                />
              </span>
              <el-icon class="delete-icon" @click="delSubCondition(group, cindex)">
                <Minus/>
              </el-icon>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
<!--  </div>-->
<!--  <div>-->
<!--    <el-input placeholder="请输入表达式"></el-input>-->
<!--  </div>-->
</template>

<script setup>
import {ValueType} from '@/views/workflow/form/ComponentsConfigExport.js'
import {computed, ref} from 'vue'
import {useProcessStore} from '@/stores/processStore.js'
import Ellipsis from '../common/Ellipsis.vue'
import {getSubCompOpt} from '@/api/user/user.js';

const processStore = useProcessStore()


const users = ref([])
const companyList = ref([])
// const orgType = ref('user')
const showOrgSelect = ref(false)
const groupNames = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'])
const supportTypes = ref([ValueType.number, ValueType.string, ValueType.company])
const explains = ref(
    [
      {label: '等于', value: '='},
      {label: '大于', value: '>'},
      {label: '大于等于', value: '>='},
      {label: '小于', value: '<'},
      {label: '小于等于', value: '<='},
      {label: '包含在', value: 'IN'},
      {label: 'x < 值 < x', value: 'B'},
      {label: 'x ≤ 值 < x', value: 'AB'},
      {label: 'x < 值 ≤ x', value: 'BA'},
      {label: 'x ≤ 值 ≤ x', value: 'ABA'},
    ]
)

const selectedNode = computed(() => {
  //当前选择的节点
  return processStore.getSelectedNode()
})

const processFromPerms = computed(() => {
  return processStore.getDesign().processFromPerms;
});

const conditionList = computed(() => {
  //条件数组
  //构造可用条件选项
  const conditionItems = []
  filterConditionMosr(conditionItems)
  // processStore.getDesign().formItems.forEach(item => filterCondition(item, conditionItems))
  // if (conditionItems.length === 0 || conditionItems[0].id !== 'root') {
  //   conditionItems.unshift({id: 'root', title: '发起人', valueType: 'User'})
  // }
  // conditionItems.unshift({id: 'root', title: '发起人', valueType: 'User'})
  return conditionItems
})

const isSelect = (processDefinitionKey) => {
  //判断是否被选择
  let form = processStore.getFormMap().get(processDefinitionKey)
  return (form && (form.name === 'SelectInput' || form.name === 'MultipleSelect'))
}

const getOptions = (processDefinitionKey) => {
  //获取到对应的option选项
  return processStore.getFormMap().get(processDefinitionKey).props.options || []
}

const conditionValType = (type) => {
  //条件类型选择
  switch (type) {
    case '=':
    case '>':
    case '>=':
    case '<':
    case '<=':
      return 0;
    case 'IN':
      return 1;
    default:
      return 2;
  }
}

const filterConditionMosr = (list) => {
  processFromPerms.value.forEach((item) => {
    // console.log(item)
    if (item.required && supportTypes.value.indexOf(item.valueType) > -1) {
      list.push({title: item.title, id: item.id, valueType: item.valueType})
    }
  })
}

const filterCondition = (item, list) => {
  //从表单中过滤出可以选择的条件
  if (item.name === 'SpanLayout') {
    item.props.items.forEach(sub => filterCondition(sub, list))
  } else if (supportTypes.value.indexOf(item.valueType) > -1 && item.props.required) {
    list.push({title: item.title, id: item.id, valueType: item.valueType})
  }
}

const selected = (selected) => {
  let userInfoList = []
  for (let val of selected) {
    let userInfo = {
      id: val.id,
      roleName: val.name
    }
    userInfoList.push(userInfo)
  }
  users.value = userInfoList
  //组织选择器的选中回调函数
  // users.value.length = 0
  processStore.getAssignedUser().forEach(u => users.value = userInfoList)
}

const delGroup = (index) => {
  //删除条件组
  processStore.getSelectedNode().props.groups.splice(index, 1)
}

const delSubCondition = (group, index) => {
  //删除
  group.cids.splice(index, 1)
  group.conditions.splice(index, 1)
}

const conditionChange = (index, group) => {
  //条件组进行发生了改变
  //判断新增的
  group.cids?.forEach(cid => {
    if (0 > group.conditions?.findIndex(cd => cd.id === cid)) {
      //新增条件
      let condition = {...conditionList.value[index]}
      condition.compare = '';
      condition.value = []
      group.conditions.push(condition)
    }
  })
  for (let i = 0; i < group.conditions.length; i++) {
    //去除没有选中的
    if (group.cids.indexOf(group.conditions[i].id) < 0) {
      group.conditions.splice(i, 1)
    }
  }
}


const getCompanyList = () => {
  getSubCompOpt().then(res => {
    companyList.value = res.data
  })
}

getCompanyList()

</script>

<style lang="scss" scoped>
.group {
  margin-bottom: 20px;
  color: #5e5e5e;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #e3e3e3;

  .group-header {
    padding: 5px 10px;
    background: #e3e3e3;
    position: relative;

    div {
      display: inline-block;
    }

    .group-name {
      font-size: small;
    }

    .group-cp {
      font-size: small;
      position: absolute;
      left: 100px;
      display: flex;
      top: 5px;
      justify-content: center;
      align-items: center;
    }

    .group-operation {
      position: absolute;
      right: 10px;

      .group-icon {
        cursor: pointer;
      }
    }
  }

  .group-content {
    padding: 10px 5px;

    p {
      text-align: center;
      font-size: small;
    }

    .delete-icon {
      position: absolute;
      cursor: pointer;
      top: 12px;
      right: 10px;
    }
  }

  .condition-title {
    display: block;
    width: 100px;
  }
}
</style>
