/*
 * @Author: wfl
 * @LastEditors: wfl
 * @description:
 * @updateInfo:
 * @Date: 2022-08-03 17:15:24
 * @LastEditTime: 2022-10-14 09:38:36
 */
import roleApi from '@/mainApp/api/sys-default/role';
import GlContentHeader from '@/global/components/GlContentHeader';
import GlTitle from '@/global/components/GlTitle/GlTitle';
import { useMessage } from '@/global/hooks/web/useMessage';
import { Button, Col, Input, Row, Tabs } from 'ant-design-vue';
import _ from 'lodash-es';
import { defineComponent, Ref, ref, withModifiers } from 'vue';
import { RoleFormState } from '../type';
import RoleListConfig from './RoleListConfig';
import RoleModal from './roleModal.vue';
import RoleUserTable from './RoleUserTable';
import './style.less';

const liClass = 'h-50px flex items-center';

const roleManage = defineComponent({
  setup() {
    const { createMessage, createConfirm } = useMessage();
    const loading = ref(false);
    const visible = ref(false);
    const refRole = ref(null);
    const helpState = ref(false);
    const selectId: Ref<RoleFormState | null> = ref(null);
    const editData: Ref<RoleFormState | null> = ref(null);
    const activeKey = ref(1);

    const roleLists: Ref<Array<RoleFormState>> = ref([]);
    const __roleLists: Ref<Array<RoleFormState>> = ref([]);
    const searchText = ref('');
    const filterRole = () => {
      roleLists.value.filter((role) => role.name === searchText.value);
    };

    const getRoleList = async () => {
      loading.value = true;
      const { success, data, msg } = await roleApi.getRoleList();
      if (success) {
        roleLists.value = data;
        __roleLists.value = _.cloneDeep(data);
        selectId.value ??= data?.[0];
      } else {
        createMessage.warning(msg);
      }
      loading.value = false;
    };
    getRoleList();

    const handAddNewRole = () => {
      visible.value = true;
    };

    const handleShow = (visib: boolean) => {
      visible.value = visib;
      !visib && (editData.value = null);
    };

    const handSelectRole = (role: RoleFormState) => {
      selectId.value = role;
    };

    const handEditRole = (role: RoleFormState) => {
      visible.value = true;
      editData.value = role;
    };

    const handDeleteRole = async (role: RoleFormState) => {
      createConfirm({
        title: '提示',
        content: '确定删除该角色吗？',
        iconType: 'warning',
        onOk: () => {
          loading.value = true;
          roleApi
            .deleteRole(role.id)
            .then(({ success, msg }) => {
              if (success) getRoleList();
              else createMessage.warning(msg);
              loading.value = false;
            })
            .catch(() => {
              loading.value = false;
            });
        },
      });
    };

    return () => (
      <>
        <GlContentHeader title="角色管理" iconList={[]} border>
          {{
            default: ({ height }) => {
              return (
                <>
                  <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
                    <Col xl={4} lg={5} md={6} class="cus-role-left-col">
                      <GlTitle title="角色列表" border showIcon onClick={() => handAddNewRole()}>
                        <Input.Search
                          v-model:value={searchText.value}
                          placeholder="请输入搜索内容"
                          onSearch={() => {
                            filterRole();
                          }}
                        />
                        <ul className="mt-15px role-manage-list">
                          {roleLists.value.map((role) => {
                            return (
                              <li
                                key={role.id}
                                onClick={() => handSelectRole(role)}
                                className={`cursor-pointer flex items-center p-8px justify-between h-45px ${
                                  selectId.value?.id === role.id ? 'active' : null
                                }`}
                              >
                                <span>{role.name}</span>
                                <span>
                                  <i
                                    onClick={withModifiers(() => handEditRole(role), ['stop'])}
                                    className="ik ik-bianji mr-8px text-lg cursor-pointer"
                                  />
                                  <i
                                    onClick={withModifiers(() => handDeleteRole(role), ['stop'])}
                                    className="ik ik-shanchu1 text-lg cursor-pointer"
                                  />
                                </span>
                              </li>
                            );
                          })}
                        </ul>
                      </GlTitle>
                    </Col>
                    <Col xl={20} lg={19} md={18}>
                      <GlTitle title={selectId.value?.name} showIcon border>
                        {{
                          rightIcon: () => (
                            <Button
                              type="link"
                              onClick={() => (helpState.value = !helpState.value)}
                            >
                              <i className="ik ik-baocun1 text-sm" />
                              保存
                            </Button>
                          ),
                          default: () => (
                            <Tabs v-model:activeKey={activeKey.value}>
                              <Tabs.TabPane key={1} tab="角色权限">
                                <RoleListConfig
                                  role={selectId.value!}
                                  ref={refRole}
                                  helpState={helpState.value}
                                  height={height}
                                />
                              </Tabs.TabPane>
                              <Tabs.TabPane key={2} tab="角色账号" force-render>
                                <RoleUserTable role={selectId.value!} />
                              </Tabs.TabPane>
                              <Tabs.TabPane key={3} tab="角色信息" force-render>
                                <ul>
                                  <li className={liClass}>
                                    <span className="font-600 w-120px">角色名称</span>
                                    <span>{selectId.value?.name}</span>
                                  </li>
                                  <li className={liClass}>
                                    <span className="font-600 w-120px">角色描述</span>
                                    <span>{selectId.value?.remark}</span>
                                  </li>
                                  <li className={liClass}>
                                    <span className="font-600 w-120px">数据权限类型</span>
                                    <span>{selectId.value?.dataScopeType}</span>
                                  </li>
                                  <li className={liClass}>
                                    <span className="font-600 w-120px">排序值</span>
                                    <span>{selectId.value?.sortOrder}</span>
                                  </li>
                                </ul>
                              </Tabs.TabPane>
                            </Tabs>
                          ),
                        }}
                      </GlTitle>
                    </Col>
                  </Row>
                </>
              );
            },
          }}
        </GlContentHeader>
        <RoleModal
          visible={visible.value}
          editData={editData.value}
          onVisibleChange={(val) => handleShow(val)}
          onDataChange={() => getRoleList()}
        />
      </>
    );
  },
});

export default roleManage;