<!-- @format -->

<template>
  
</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';
  export default defineComponent({
    name: 'OrderListIndex',
    setup() {
      const mainRef = ref();
      const data = reactive({});
      const data2 = reactive([
        {
          userinformation: 1,
        },
      ]);
      const visible = ref(false);
      const searchValue = ref<string>('');
      const searchValue2 = ref<string>('');
      const addformvisible = ref(false);
      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' },
          ],
        },
      ];

      let formData = reactive({
        name: '',
        zhanghao: '',
      });
      let formData2 = reactive({
        information: '',
      });

      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 = () => {
        console.log(formData, 'formData');
        visible.value = false;
      };

      const handleOk = () => {
        addformvisible.value = false;
      };
      const handleClose = () => {
        addformvisible.value = false;
      };

      const tableConfig = {
        // title: '企业管理',
        api: {
          url: '/carbon_emission/device/getGatewayList',
          method: 'post',
        },
        listField: 'data.records',
        headerActions: [
          {
            label: '新增',
            name: 'RoleTypeAdd',
            type: 'primary',
            handle: () => {
              visible.value = true;
            },
          },
          {
            label: '导入',
            type: 'primary',
            name: 'RoleTypeAdd',
            handle: () => {},
          },
          {
            label: '模板下载',
            type: 'primary',
            name: 'RoleTypeAdd',
            handle: () => {},
          },
          {
            label: '导出',
            type: 'primary',
            name: 'RoleTypeAdd',
            handle: () => {},
          },
          {
            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.name = record.name;
                formData.zhanghao = record.zhanghao;
                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();
                    //   });
                  },
                  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',
                    });
                  },
                  onCancel() {
                    console.log('Cancel');
                  },
                  class: 'test',
                });
              },
            },
            {
              label: '删除',
              name: 'RoleTypeEdit',
              dynamicParams: {
                uuid: 'uuid',
              },
              // name: 'ExitManageDelete',
              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();
                    //   });
                  },
                  onCancel() {
                    console.log('Cancel');
                  },
                  class: 'test',
                });
              },
            },
          ],
        },

        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: 'uuid',
      };
      const tableConfig2 = {
        api: {
          url: '/carbon_emission/device/getGatewayList',
          method: 'post',
        },
        listField: 'data.records',
        rowSelection: null,
        headerActions: [
          {
            label: '新增',
            name: 'RoleTypeAdd',
            type: 'primary',
            handle: () => {
              addformvisible.value = true;
            },
          },
        ],
        columns: [
          {
            title: '角色信息',
            dataIndex: 'name',
          },
        ],
        columnActions: {
          title: '操作',
          actions: [
            {
              label: '编辑',
              name: 'RoleTypeEdit',
              // dynamicParams: 'uuid',
              handle: (record: any) => {
                console.log(record, 'record');
                addformvisible.value = true;
                // formData.name = record.name;
                // formData.zhanghao = record.zhanghao;
                // visible.value = true;
              },
            },
            {
              label: '删除',
              name: 'RoleTypeEdit',
              dynamicParams: {
                uuid: 'uuid',
              },
              // name: 'ExitManageDelete',
              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();
                    //   });
                  },
                  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: 'Zhejiang',
                children: [
                  {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                      {
                        value: 'xihu',
                        label: 'West Lake',
                      },
                    ],
                  },
                ],
              },
            ],
          },
        },
      ]);

      return {
        tableConfig,
        tableConfig2,
        data,
        data2,
        mainRef,
        visible,
        onClose,
        onEdit,
        formSchema,
        formData,
        treeData,
        treeData2,
        handleSelect,
        handleSelect2,
        searchValue,
        searchValue2,
        onSearch,
        onSearch2,
        handleOk,
        handleClose,
        formSchema2,
        formData2,
        addformvisible,
      };
    },
  });
</script>
<style scoped>
  .main {
    display: flex;
    flex: 1;
  }
  .left {
    width: 400px;
    /* height: 95vh; */
    height: 92vh;
    border-right: 5px solid rgb(229, 235, 240);
  }
  .top {
    height: 50vh;
    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: calc(100% + 32px);
  }
  .table {
    width: 2000px;
  }
  .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>
