<!-- @format -->

<template>
  <div class="main">
    <div class="left">
      <div class="top">
        <div class="ns-table-title">关联企业</div>
        <div>
          <a-input-search
            v-model:value="searchValue"
            style="margin-bottom: 8px"
            placeholder="请输入关联企业"
            @search="onSearch" />
          <a-tree :tree-data="treeData" @select="handleSelect">
            <template #title="{ title }">
              {{ title }}
              <!-- <span v-if="title.indexOf(searchValue) > -1">
                    {{ title.substring(0, title.indexOf(searchValue)) }}
                  </span>
                  <span v-else>{{ title }}</span> -->
            </template>
          </a-tree>
        </div>
      </div>
      <div class="ns-table-title">关联部门</div>
      <div>
        <a-input-search
          v-model:value="searchValue2"
          style="margin-bottom: 8px"
          placeholder="请输入关联部门"
          @search="onSearch2" />
        <a-tree :tree-data="treeData2" @select="handleSelect2">
          <template #title="{ title }">
            {{ title }}
            <!-- <span v-if="title.indexOf(searchValue) > -1">
                    {{ title.substring(0, title.indexOf(searchValue)) }}
                  </span>
                  <span v-else>{{ title }}</span> -->
          </template>
        </a-tree>
      </div>
    </div>
    <div class="right">
      <ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" class="table" />
    </div>
  </div>
  <a-drawer
    :width="1200"
    :visible="visible"
    :body-style="{ paddingBottom: '80px' }"
    :footer-style="{ textAlign: 'right' }"
    @close="onClose">
    <ns-form :schemas="formSchema" :model="formData" class="form" />
    <span class="admin">用户权限</span>
    <ns-view-list-table v-bind="tableConfig2" :model="data" ref="mainRef" rowKey="uuid" />
    <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
    <a-button type="primary" @click="onEdit">确定</a-button>
  </a-drawer>

  <a-modal
    title="用户信息"
    :width="600"
    :visible="addformvisible"
    cancelText="取消"
    @ok="handleOk"
    @cancel="handleClose">
    <ns-form :schemas="formSchema2" :model="formData2" />
  </a-modal>
</template>
<script lang="ts">
  import { Modal } from 'ant-design-vue';
  import { createVNode, defineComponent, reactive, ref } from 'vue';
  import { http } from '/nerv-lib/util/http';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { cloneDeep } from 'lodash-es';
  import { NsMessage } from '/nerv-lib/component';
  export default defineComponent({
    name: 'OrderListIndex',
    setup() {
      const mainRef = ref();
      const data = reactive({});
      let formData = ref({});
      let formData2 = ref({});
      const visible = ref(false);
      const addformvisible = ref(false);
      const searchValue = ref<string>('');
      const searchValue2 = ref<string>('');
      const opMap: any = {
        type: 'add',
        fuc: () => {},
        record: {},
      };

      const mockData = ref([
        {
          id: 3,
          zhanghao: 'axb',
          name: '张三',
          sex: '男',
          phone: '123456789',
          email: '1234567889',
          relation: '1',
          role: '1',
          status: '1',
        },
      ]);
      const mockData2 = ref([
        {
          information: '1',
        },
      ]);

      const treeData = [
        {
          title: '铁路总局',
          key: '0-0',
          children: [
            { title: '济阳站', key: '0-0-0' },
            { title: '临沂站', key: '0-0-1' },
          ],
        },
      ];
      const treeData2 = [
        {
          title: '全部',
          key: '0-0',
          children: [
            { title: '产品部', key: '0-0-0' },
            { title: '运维部', key: '0-0-1' },
          ],
        },
      ];

      const onSearch = () => {
        console.log(searchValue.value);
      };
      const onSearch2 = () => {
        console.log(searchValue2.value);
      };

      const handleSelect = (selectedKeys: any, info: any) => {
        console.log(selectedKeys, 'selectedKeys');
        console.log(info, 'info');
      };
      const handleSelect2 = (selectedKeys: any, info: any) => {
        console.log(selectedKeys, 'selectedKeys');
        console.log(info, 'info');
      };

      const onClose = () => {
        visible.value = false;
      };

      const onEdit = () => {
        opMap.fuc && opMap.fuc(formData.value);
        visible.value = false;
      };

      const handleOk = () => {
        opMap.fuc && opMap.fuc(formData2.value);
        addformvisible.value = false;
      };
      const handleClose = () => {
        addformvisible.value = false;
      };

      const tableConfig = {
        // title: '企业管理',
        // api: {
        //   url: '/carbon_emission/device/getGatewayList',
        //   method: 'post',
        // },
        value: mockData.value,
        listField: 'data.records',
        headerActions: [
          {
            label: '新增',
            name: 'RoleTypeAdd',
            type: 'primary',
            handle: () => {
              opMap.type = 'add';
              opMap.fuc = (formData: any) => {
                console.log(formData, 'formData');
                mockData.value.push(cloneDeep(formData));
              };
              visible.value = true;
            },
          },
          {
            label: '导入',
            type: 'primary',
            name: 'RoleTypeAdd',
            handle: () => {},
          },
          {
            label: '模板下载',
            type: 'primary',
            name: 'RoleTypeAdd',
            handle: () => {},
          },
          {
            label: '导出',
            type: 'primary',
            name: 'exports',
          },
          {
            label: '批量删除',
            type: 'primary',
            name: 'RoleTypeAdd',
            handle: () => {},
            dynamicDisabled: (data: any) => {
              return data.list.length === 0;
            },
            confirm: true,
            isReload: true,
          },
        ],
        params: {
          page: 0,
          pageSize: 10,
        },
        columns: [
          {
            title: '序号',
            dataIndex: 'address',
            width: 80,
            customRender: (text: any) => {
              return text.index + 1;
            },
            sorter: {
              compare: (a, b) => a.address - b.address,
            },
          },
          {
            title: '账号',
            dataIndex: 'zhanghao',
            sorter: {
              compare: (a, b) => a.zhanghao - b.zhanghao,
            },
          },
          {
            title: '姓名',
            dataIndex: 'name',
            sorter: {
              compare: (a, b) => a.name - b.name,
            },
          },
          {
            title: '性别',
            dataIndex: 'sex',
            sorter: {
              compare: (a, b) => a.name - b.name,
            },
          },
          {
            title: '手机号',
            dataIndex: 'phone',
          },
          {
            title: '邮箱',
            dataIndex: 'email',
          },
          {
            title: '组织关系',
            dataIndex: 'relation',
          },
          {
            title: '部门角色',
            dataIndex: 'role',
          },
          {
            title: '状态',
            dataIndex: 'status',
          },
        ],
        columnActions: {
          title: '操作',
          actions: [
            {
              label: '编辑',
              name: 'RoleTypeEdit',
              // dynamicParams: 'uuid',
              handle: (record: any) => {
                console.log(record, 'record');
                formData.value = record;
                opMap.type = 'edit';
                opMap.fuc = (formData: any) => {
                  Object.assign(
                    mockData.value.filter((item) => item.id === record.id)[0],
                    formData,
                  );
                };
                visible.value = true;
              },
            },
            {
              label: '冻结',
              name: 'RoleTypeEdit',
              handle: (record: any) => {
                console.log(record, 'record');
                Modal.confirm({
                  title: '是否冻结该账户',
                  icon: createVNode(ExclamationCircleOutlined),
                  content: createVNode('div', { style: 'color:red;' }, ''),
                  onOk() {
                    // http
                    //   .post('/api/parking_merchant/objs/gateInfo/delete', {
                    //     uuid: record.uuid,
                    //   })
                    //   .then((res) => {
                    //     mainRef.value.nsTableRef.reload();
                    //   });
                    NsMessage.success('冻结成功');
                  },
                  onCancel() {
                    console.log('Cancel');
                  },
                  class: 'test',
                });
              },
            },
            {
              label: '重置密码',
              name: 'RoleTypeEdit',
              handle: (record: any) => {
                console.log(record, 'record');
                Modal.confirm({
                  title: '是否重置密码',
                  icon: createVNode(ExclamationCircleOutlined),
                  content: createVNode('div', { style: 'color:red;' }, ''),
                  onOk() {
                    // Modal.success({
                    //   title: '密码重置成功,初始密码123456',
                    // });
                    NsMessage.success('密码重置成功,初始密码123456');
                  },
                  onCancel() {
                    console.log('Cancel');
                  },
                  class: 'test',
                });
              },
            },
            {
              label: '删除',
              name: 'RoleTypeEdit',
              dynamicParams: {
                uuid: 'uuid',
              },
              confirm: true,
              handle: (record: any, name, reload) => {
                console.log(record, name, reload, 'record');
                mockData.value.splice(0, 1);
              },
            },
          ],
        },

        formConfig: {
          schemas: [
            {
              field: 'zhanghao',
              label: '账号名',
              component: 'NsInput',
              componentProps: {
                placeholder: '请输入账号名',
              },
            },
            {
              field: 'name',
              label: '姓名',
              component: 'NsInput',
              componentProps: {
                placeholder: '请输入姓名',
              },
            },
            {
              field: 'phone',
              label: '手机号',
              component: 'NsInput',
              componentProps: {
                placeholder: '请输入手机号',
              },
            },
            {
              field: 'email',
              label: '邮箱',
              component: 'NsInput',
              componentProps: {
                placeholder: '请输入邮箱',
              },
            },
            {
              field: 'status',
              label: '用户状态',
              component: 'NsSelect',
              componentProps: {
                placeholder: '请选择',
                options: [
                  {
                    label: '正常',
                    value: 1,
                  },
                  {
                    label: '冻结',
                    value: 2,
                  },
                ],
              },
            },
          ],
          params: {},
        },
        // pagination: { defaultPageSize: 10 },
        rowKey: 'id',
      };
      const tableConfig2 = {
        // api: {
        //   url: '/carbon_emission/device/getGatewayList',
        //   method: 'post',
        // },
        value: mockData2.value,
        listField: 'data.records',
        rowSelection: null,
        headerActions: [
          {
            label: '新增',
            name: 'RoleTypeAdd',
            type: 'primary',
            handle: () => {
              opMap.type = 'add';
              opMap.fuc = (formData2: any) => {
                console.log(formData2, 'formData2');
                mockData2.value.push(cloneDeep(formData2));
              };
              addformvisible.value = true;
            },
          },
        ],
        columns: [
          {
            title: '角色信息',
            dataIndex: 'information',
          },
        ],
        columnActions: {
          title: '操作',
          actions: [
            {
              label: '编辑',
              name: 'RoleTypeEdit',
              // dynamicParams: 'uuid',
              handle: (record: any) => {
                console.log(record, 'record');
                formData2.value = record;
                opMap.type = 'edit';
                opMap.fuc = (formData2: any) => {
                  Object.assign(
                    mockData.value.filter((item) => item.id === record.id)[0],
                    formData2,
                  );
                };
                addformvisible.value = true;
              },
            },
            {
              label: '删除',
              name: 'RoleTypeEdit',
              dynamicParams: {
                uuid: 'uuid',
              },
              confirm: true,
              handle: (record: any, name, reload) => {
                console.log(record, name, reload, 'record');
                mockData2.value.splice(0, 1);
              },

              // Modal.confirm({
              //   title: '确定确认删除',
              //   icon: createVNode(ExclamationCircleOutlined),
              //   content: createVNode('div', { style: 'color:red;' }, ''),
              //   onOk() {
              //     // http
              //     //   .post('/api/parking_merchant/objs/gateInfo/delete', {
              //     //     uuid: record.uuid,
              //     //   })
              //     //   .then((res) => {
              //     //     mainRef.value.nsTableRef.reload();
              //     //   });
              //   },
              //   onCancel() {
              //     console.log('Cancel');
              //   },
              //   class: 'test',
              // });
            },
          ],
        },
      };

      const formSchema = reactive([
        {
          field: 'field111',
          component: 'NsChildForm',
          componentProps: {
            title: '用户信息',
            schemas: [
              {
                label: '账号',
                field: 'zhanghao',
                component: 'NsInput',
                componentProps: {
                  placeholder: '请输入账号',
                },
                rules: [
                  {
                    required: false,
                    message: '请输入账号',
                  },
                ],
              },
              {
                label: '姓名',
                field: 'name',
                component: 'NsInput',
                componentProps: {
                  placeholder: '请输入姓名',
                },
                rules: [
                  {
                    required: false,
                    message: '请输入姓名',
                  },
                ],
              },
              {
                label: '性别',
                field: 'sex',
                component: 'NsRadioGroup',
                componentProps: {
                  radioType: 'radio',
                  options: [
                    { label: '男', value: 1 },
                    { label: '女', value: 2 },
                  ],
                },
              },
              {
                label: '手机号',
                field: 'phone',
                component: 'NsInput',
                componentProps: {
                  placeholder: '请输入手机号',
                },
                rules: [
                  {
                    required: false,
                    message: '请输入手机号',
                  },
                ],
              },
              {
                label: '邮箱',
                field: 'email',
                component: 'NsInput',
                componentProps: {
                  placeholder: '请输入邮箱',
                },
              },
              {
                label: '组织关系',
                field: 'relation',
                component: 'NsSelect',
                componentProps: {
                  placeholder: '请选择组织关系',
                  options: [
                    {
                      label: '正常',
                      value: 1,
                    },
                    {
                      label: '冻结',
                      value: 2,
                    },
                  ],
                },
              },
            ],
          },
        },
      ]);
      const formSchema2 = reactive([
        {
          field: 'information',
          component: 'NsCascader',
          componentProps: {
            placeholder: '请选择',
            options: [
              {
                value: 'zhejiang',
                label: '铁路局',
                children: [
                  {
                    value: 'hangzhou',
                    label: '铁路局1',
                    children: [
                      {
                        value: 'xihu',
                        label: '铁路局2',
                      },
                    ],
                  },
                ],
              },
            ],
          },
        },
      ]);

      return {
        tableConfig,
        tableConfig2,
        data,
        mainRef,
        visible,
        addformvisible,
        formSchema,
        formSchema2,
        formData,
        formData2,
        treeData,
        treeData2,
        searchValue,
        searchValue2,
        handleSelect,
        handleSelect2,
        onClose,
        onEdit,
        onSearch,
        onSearch2,
        handleOk,
        handleClose,
      };
    },
  });
</script>
<style lang="less" scoped>
  .main {
    display: flex;
  }
  .left {
    width: 400px;
    /* height: 95vh; */
    height: 92.7vh;
    border-right: 5px solid rgb(229, 235, 240);
    min-width: fit-content;
  }
  .top {
    height: 46vh;
    border-bottom: 5px solid rgb(229, 235, 240);
  }
  /* .ns-table-title {
    text-align: left;
    height: 46px;
    line-height: 46px;
    font-size: 18px;
    font-weight: bold;
    user-select: text;
    padding-left: 16px;
    width: 100%;
  } */
  .table {
    /* width: 2000px; */
    /* width: auto; */
  }
  .admin {
    text-align: left;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    font-weight: bold;
    user-select: text;
    padding-left: 16px;
    width: calc(100% + 32px);
  }
  .form {
    margin-left: 10px;
  }
</style>
