<script>
import OrgItemsView from '@/views/workFlow/designer/common/OrgItemsView.vue'
import OrgPicker from '@comp/OrgPicker/OrgPicker.vue'
import { ValueType } from '../../form/ComponentsConfigExport'
import { mapState } from 'vuex'

export default {
  name: 'InclusiveGroupItemConfig',
  components: {
    OrgItemsView,
    OrgPicker
  },
  data() {
    return {
      orgPickerRef: null,
      users: [],
      orgType: 'user',
      showOrgSelect: false,
      groupNames: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
      supportTypes: [ValueType.number, ValueType.string, ValueType.date, ValueType.dept, ValueType.user],
      explains: [
        { 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' }
      ]
    }
  },
  computed: {
    ValueType() {
      return ValueType
    },
    ...mapState({
      workflowStore: state => state.workflow
    }),
    selectedNode() {
      return this.workflowStore.selectedNode
    },
    formItems() {
      return this.workflowStore.design.formItems
    },
    formMap() {
      const map = new Map()
      this.formItems.forEach(item => this.itemToMap(map, item))
      return map
    },
    conditionList() {
      const conditionItems = []
      this.formItems.forEach(item => this.filterCondition(item, conditionItems))
      if (conditionItems.length === 0 || conditionItems[0].id !== 'root') {
        conditionItems.unshift({ id: 'root', title: '发起人', valueType: 'User' })
      }
      return conditionItems
    }
  },
  methods: {
    itemToMap(map, item) {
      map.set(item.id, item)
      if (item.name === 'SpanLayout') {
        item.props.items.forEach(sub => this.itemToMap(map, sub))
      }
    },
    isSelect(formId) {
      const form = this.formMap.get(formId)
      return Boolean(form && (form.name === 'SelectInput' || form.name === 'MultipleSelect'))
    },
    getOptions(formId) {
      const form = this.formMap.get(formId)
      return form ? form.props.options || [] : []
    },
    conditionValType(type) {
      switch (type) {
        case '=':
        case '>':
        case '>=':
        case '<':
        case '<=':
          return 0
        case 'IN':
          return 1
        default:
          return 2
      }
    },
    selectUser(value, orgType) {
      this.orgType = orgType
      this.users = value
      this.$refs.orgPickerRef && this.$refs.orgPickerRef.show()
    },
    filterCondition(item, list) {
      if (item.name === 'SpanLayout') {
        item.props.items.forEach(sub => this.filterCondition(sub, list))
      } else if (this.supportTypes.includes(item.valueType) && item.props.required) {
        list.push({ title: item.title, id: item.id, valueType: item.valueType })
      }
    },
    confirmHandle(select) {
      this.users = [...select]
    },
    delGroup(index) {
      this.selectedNode.props.groups.splice(index, 1)
    },
    rmSubCondition(group, index) {
      group.cids.splice(index, 1)
      group.conditions.splice(index, 1)
    },
    conditionChange(group) {
      group.cids.forEach(cid => {
        if (group.conditions.findIndex(cd => cd.id === cid) < 0) {
          const condition = { ...this.conditionList.find(c => c.id === cid) }
          condition.compare = ''
          condition.value = []
          group.conditions.push(condition)
        }
      })
      for (let i = 0; i < group.conditions.length; i++) {
        if (!group.cids.includes(group.conditions[i].id)) {
          group.conditions.splice(i, 1)
          i--
        }
      }
    }
  }
}
</script>

<template>
  <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>
        <div class="group-cp">
          <span>组内条件关系：</span>
          <a-switch v-model="group.groupType" :checkedValue="'AND'" :unCheckedValue="'OR'">
            <template #checkedChildren>且</template>
            <template #unCheckedChildren>或</template>
          </a-switch>
        </div>
        <div class="group-operation">
          <a-popover trigger="click" placement="bottom">
            <template #content>
              <div style="width: 300px">
                <div>选择审批条件</div>
                <a-checkbox-group
                  :value="group.cids"
                  @change="val => { group.cids = val; conditionChange(group); }"
                >
                  <a-checkbox
                    v-for="condition in conditionList"
                    :key="condition.id"
                    :value="condition.id"
                  >{{ condition.title }}
                  </a-checkbox>
                </a-checkbox-group>
              </div>
            </template>
            <i class="x-icon-plus x-iconfont"></i>
          </a-popover>
          <i class="x-icon-delete x-iconfont" @click="delGroup(index)"></i>
        </div>
      </div>
      <div class="group-content">
        <p v-if="group.conditions.length === 0">点击右上角 + 为本条件组添加条件 ☝</p>
        <div v-else>
          <a-form layout="vertical">
            <a-form-item v-for="(condition, cindex) in group.conditions" :key="condition.id + '_' + cindex">
              <span>{{ condition.title }}</span>
              <template v-if="condition.valueType === ValueType.string">
                <a-select v-model="condition.compare" size="small" style="width: 120px" @change="condition.value = []">
                  <a-select-option value="=">等于</a-select-option>
                  <a-select-option value="IN">包含在</a-select-option>
                </a-select>
                <template v-if="isSelect(condition.id)">
                  <a-select
                    v-if="condition.compare === 'IN'"
                    v-model="condition.value"
                    mode="multiple"
                    allow-clear
                    size="small"
                    style="width: 280px"
                    :options="getOptions(condition.id)"
                    placeholder="选择值"
                  />
                  <a-select
                    v-else
                    v-model="condition.value[0]"
                    allow-clear
                    size="small"
                    style="width: 280px"
                    :options="getOptions(condition.id)"
                    placeholder="选择值"
                  />
                </template>
                <template v-else>
                  <a-input
                    v-if="condition.compare === '='"
                    v-model="condition.value[0]"
                    size="small"
                    style="width: 280px"
                    placeholder="输入比较值"
                  />
                  <a-select
                    v-else
                    v-model="condition.value"
                    mode="tags"
                    allow-clear
                    size="small"
                    style="width: 280px"
                    placeholder="输入可能包含的值"
                  />
                </template>
              </template>
              <template v-else-if="condition.valueType === ValueType.number">
                <a-select
                  v-model="condition.compare"
                  size="small"
                  style="width: 120px"
                  :options="explains"
                />
                <template v-if="conditionValType(condition.compare) === 0">
                  <a-input-number
                    v-model="condition.value[0]"
                    size="small"
                    style="width: 280px"
                    placeholder="输入比较值"
                  />
                </template>
                <template v-else-if="conditionValType(condition.compare) === 1">
                  <a-select
                    v-model="condition.value"
                    mode="tags"
                    allow-clear
                    size="small"
                    style="width: 280px"
                    placeholder="输入可能包含的值"
                  />
                </template>
                <template v-else>
                  <a-input-number
                    v-model="condition.value[0]"
                    size="small"
                    style="width: 130px"
                    placeholder="输入比较值"
                  />
                  ~
                  <a-input-number
                    v-model="condition.value[1]"
                    size="small"
                    style="width: 130px"
                    placeholder="输入比较值"
                  />
                </template>
              </template>
              <template v-else-if="condition.valueType === ValueType.user">
                <span style="margin-right: 20px">属于某部门 / 为某些人其中之一</span>
                <a-button type="primary" size="small" shape="round" @click="selectUser(condition.value, 'user')">
                  <i class="x-icon-sort x-iconfont"></i> 选择人员/部门
                </a-button>
                <OrgItemsView v-model="condition.value" />
              </template>
              <template v-else-if="condition.valueType === ValueType.dept">
                <span style="margin-right: 20px">为某部门 / 某部门下的部门</span>
                <a-button type="primary" size="small" shape="round" @click="selectUser(condition.value, 'dept')">
                  <i class="x-icon-sort x-iconfont"></i> 选择部门
                </a-button>
                <OrgItemsView v-model="condition.value" />
              </template>
              <!-- 日期类型的暂略处理 -->
              <i class="x-icon-delete x-iconfont" @click="rmSubCondition(group, cindex)"></i>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
    <OrgPicker ref="orgPickerRef" :type="orgType" :multiple="true" :selected="users"
               @confirm="confirmHandle" />
  </div>
</template>

<style lang="less" 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;

      i {
        padding: 0 10px;

        &:hover {
          cursor: pointer;
        }
      }
    }
  }

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

    :deep(.n-ellipsis) {
      margin-left: 1rem;
      margin-right: 2rem;
    }

    :deep(.n-form-item-blank) {
      align-items: baseline;
    }

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

    .x-icon-delete {
      margin-left: auto;
    }
  }

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