<template>
  <div class="auth-config">
    <a-tabs v-model:activeKey="authType" type="card" size="small">
      <a-tab-pane key="1" tab="所有成员">
        <a-alert
          message="权限说明"
          description="所有人员指不限制流程模版的发起人员，表示每个人都能发起该流程模版。"
          type="info"
          show-icon
        />
      </a-tab-pane>
      <a-tab-pane key="2" tab="指定成员">
        <a-space>
          <a-radio-group>
            <a-radio-button value="1" @click="handlePostClick">岗位</a-radio-button>
            <a-radio-button value="2" @click="handleRoleClick">角色</a-radio-button>
            <a-radio-button value="3" @click="handleAccountClick">用户</a-radio-button>
          </a-radio-group>
          <a-button danger @click="clearAll">清空</a-button>
        </a-space>
        <a-table
          size="small"
          :columns="columns"
          :data-source="dataSource"
          bordered
          :pagination="false"
        >
          <template #bodyCell="{ column, text, record }">
            <template v-if="['name'].includes(column.dataIndex)">
              <div>
                {{ text }}
              </div>
            </template>
            <template v-else-if="['type'].includes(column.dataIndex)">
              <div>
                {{ typeFormat(text) }}
              </div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
              <a-popconfirm
                v-if="dataSource.length"
                title="确定要删除吗？"
                @confirm="onDelete(record.name)"
              >
                <delete-outlined two-tone-color="#eb2f96" />
              </a-popconfirm>
            </template>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>
    <a-modal
      width="60%"
      v-model:open="data.postOpen"
      wrap-class-name="full-modal-children"
      title="添加岗位"
      @ok="postHandleOk"
      :destroyOnClose="true"
    >
      <SelectPos ref="posRef" />
    </a-modal>
    <a-modal
      width="60%"
      v-model:open="data.roleOpen"
      wrap-class-name="full-modal-children"
      title="添加角色"
      @ok="roleHandleOk"
      :destroyOnClose="true"
    >
      <SelectRole ref="roleRef" />
    </a-modal>
    <a-modal
      width="60%"
      v-model:open="data.accountOpen"
      wrap-class-name="full-modal-children"
      title="添加角色"
      @ok="accountHandleOk"
      :destroyOnClose="true"
    >
      <SelectAccount ref="accountRef" />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { DeleteOutlined } from '@ant-design/icons-vue';
  import { SelectPos } from '@/components/SelectPos/index';
  import { SelectRole } from '@/components/SelectRole/index';
  import { SelectAccount } from '@/components/SelectAccount/index';

  let authType = ref('1');
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '类型',
      dataIndex: 'type',
    },
    {
      title: '操作',
      dataIndex: 'operation',
    },
  ];
  let dataSource = ref([]);
  const data = reactive({
    postOpen: false,
    roleOpen: false,
    accountOpen: false,
  });
  function typeFormat(type) {
    type = type.toString();
    switch (type) {
      case '1':
        return '岗位';
      case '2':
        return '角色';
      case '3':
        return '用户';
      case '4':
        return '上下级';
      case '5':
        return '节点';
      case '6':
        return '表字段';
    }
  }
  function clearAll() {
    dataSource.value = [];
  }
  function addTableData(selectData) {
    let addData = selectData.filter(
      (t: { id: string }) =>
        dataSource.value.findIndex((t2: { id: string }) => t2.id == t.id) == -1,
    );
    dataSource.value = dataSource.value.concat(addData);
  }
  // 岗位
  const posRef = ref<any>();

  function handlePostClick() {
    data.postOpen = true;
  }
  function postHandleOk() {
    let selectData = posRef.value.getRow().map((t) => {
      return { type: '1', id: t.id, name: t.name };
    });
    addTableData(selectData);
    data.postOpen = false;
  }
  // 角色
  const roleRef = ref<any>();

  function handleRoleClick() {
    data.roleOpen = true;
  }
  function roleHandleOk() {
    let selectData = roleRef.value.getRow().map((t) => {
      return { type: '2', id: t.id, name: t.name, condition: '' };
    });
    addTableData(selectData);
    data.roleOpen = false;
  }
  // 用户
  const accountRef = ref<any>();

  function handleAccountClick() {
    data.accountOpen = true;
  }
  function accountHandleOk() {
    let selectData = accountRef.value.getRow().map((t) => {
      return { type: '3', id: t.id, name: t.name };
    });
    addTableData(selectData);
    data.accountOpen = false;
  }
  function onDelete(key) {
    dataSource.value = dataSource.value.filter((item: { name: string }) => item.name !== key);
  }
  function setForm(data) {
    authType.value = data.authType.toString();
    dataSource.value = data.authData;
  }
  function getForm() {
    return {
      authType: authType.value,
      authData: dataSource.value,
    };
  }
  defineExpose({
    getForm,
    setForm,
  });
</script>
<style lang="less" scoped>
  .site-space-compact-wrapper {
    width: 100%;

    .ant-select {
      width: 100%;
    }
  }

  ::v-deep .ant-tabs {
    padding: 0 !important;
  }

  ::v-deep .ant-table-content {
    margin-top: 10px;
  }
</style>
<style lang="less">
  .full-modal-children {
    .ant-modal {
      max-width: 100%;
    }

    .ant-modal-content {
      height: calc(80vh);
    }

    .ant-modal-body {
      height: 80%;
    }
  }
</style>
