<!-- @format -->

<template>
  <ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" rowKey="uuid" />
  <a-drawer
    :width="1200"
    :visible="visible"
    :body-style="{ paddingBottom: '80px' }"
    :footer-style="{ textAlign: 'right' }"
    destroyOnClose
    @close="onClose">
    <ns-form ref="formRef" :schemas="formSchema" :model="formData" formLayout="vertical" />
    <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
    <a-button type="primary" @click="onEdit">确定</a-button>
  </a-drawer>
  <a-drawer
    :width="600"
    :visible="borderVisible"
    :body-style="{ paddingBottom: '80px' }"
    :footer-style="{ textAlign: 'right' }"
    destroyOnClose
    @close="onClose">
    <a-button type="primary" @click="borderAdd">新增</a-button>
    <a-button type="primary" style="margin-left: 10px; margin-bottom: 10px" @click="borderAddSon"
      >新增子集</a-button
    >
    <a-directory-tree @select="handleSelect" multiple :tree-data="treeData">
      <template #title="{ title, key }">
        {{ title }}
        <a-button type="link" @click="editTree(title, key)">编辑</a-button>
        <a-button type="link" danger @click="deleteTree(title, key)">删除</a-button>
      </template>
    </a-directory-tree>
  </a-drawer>

  <a-drawer
    :width="600"
    :visible="serviceVisible"
    :body-style="{ paddingBottom: '80px' }"
    :footer-style="{ textAlign: 'right' }"
    destroyOnClose
    @close="onClose">
    <a-input-search
      placeholder="请选择开通模块"
      v-model:value="searchValue"
      style="margin-bottom: 8px"
      @search="onSearch" />
    <a-tree
      :tree-data="treeData"
      v-model:checkedKeys="checkedKeys"
      checkable
      @select="ServiceSelect">
      <template #title="{ title }">
        {{ title }}
      </template>
    </a-tree>
    <ns-button style="margin: 20px" type="primary" @click="onClose">取消</ns-button>
    <ns-button type="primary" @click="Sure">确定</ns-button>
  </a-drawer>

  <tree-add ref="treeAdd" />
</template>
<script lang="ts">
  import { Modal } from 'ant-design-vue';
  import { createVNode, defineComponent, reactive, ref, watch } from 'vue';
  import { http } from '/nerv-lib/util/http';
  import { cloneDeep } from 'lodash-es';
  import TreeAdd from './TreeAdd.vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { h } from 'vue';
  import { formConfig } from './config';
  import { NsMessage } from '/nerv-lib/component';
  import { mockData, treeData } from './mock';

  export default defineComponent({
    name: 'OrderListIndex',
    components: {
      TreeAdd,
    },
    setup() {
      const data = reactive({});
      const treeAdd = ref();
      const mainRef = ref();
      let formData = ref({});
      const formRef = ref();
      const searchValue = ref<string>('');
      const checkedKeys = ref<string[]>([]);
      const visible = ref(false);
      const borderVisible = ref(false);
      const serviceVisible = ref(false);
      const treeAddVisible = ref(false);
      const formSchema = formConfig;

      const opMap: any = {
        type: 'add',
        fuc: () => {},
        record: {},
      };

      watch(checkedKeys, () => {
        console.log('checkedKeys', checkedKeys.value);
      });

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

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

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

      const borderAdd = () => {
        treeAddVisible.value = true;
        treeAdd.value?.toggle();
      };

      const borderAddSon = () => {
        treeAddVisible.value = true;
      };

      const onEdit = () => {
        formRef.value?.triggerSubmit().then(() => {
          console.log(formData.value, 'formData.value');
          opMap.fuc && opMap.fuc(formData.value);
          visible.value = false;
        });
      };

      const Sure = () => {
        serviceVisible.value = false;
      };

      const editTree = (title: any, key: any) => {
        console.log(title, 'title');
        console.log(key, 'key');
      };

      const deleteTree = (title: any, key: any) => {
        console.log(title, 'title');
        console.log(key, 'key');
        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 onSearch = () => {
        console.log(searchValue.value);
      };

      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({
                  id: Math.random().toString().slice(2, 6),
                  ...cloneDeep(formData),
                });
              };
              visible.value = true;
            },
          },
        ],
        params: {
          page: 0,
          pageSize: 10,
        },
        rowSelection: null,
        columns: [
          {
            title: '序号',
            dataIndex: 'address',
            width: 80,
            customRender: (text: any) => {
              return text.index + 1;
            },
          },
          {
            title: '组织ID',
            dataIndex: 'zuzhi',
          },
          {
            title: '集团名称',
            dataIndex: 'jituanname',
          },
          {
            title: '组织名称',
            dataIndex: 'zuzhiname',
          },
          {
            title: '状态',
            dataIndex: 'status',
          },
          {
            title: '省市区',
            dataIndex: 'area',
          },
          {
            title: '地址',
            dataIndex: 'address',
          },
          {
            title: '联系人',
            dataIndex: 'person',
          },
          {
            title: '联系电话',
            dataIndex: 'phone',
          },
        ],
        columnActions: {
          title: '操作',
          actions: [
            {
              label: '编辑',
              name: 'RoleTypeEdit',
              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: '组织边界',
              handle: (record: any) => {
                console.log(record, 'record');
                borderVisible.value = true;
              },
            },
            {
              label: '服务',
              handle: (record: any) => {
                console.log(record, 'record');
                serviceVisible.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() {
                    NsMessage.success('冻结成功');
                  },
                  class: 'test',
                });
              },
            },
            {
              label: '重置密码',
              name: 'RoleTypeEdit',
              handle: (record: any) => {
                console.log(record, 'record');
                Modal.confirm({
                  title: '重置密码',
                  icon: createVNode(ExclamationCircleOutlined),
                  okText: '重置',
                  content: h('div', {}, [
                    h('p', `企业名称:   ${record.jituanname}`),
                    h('p', '管理员账号:   hxdtadmin'),
                  ]),
                  onOk() {
                    Modal.confirm({
                      icon: createVNode(ExclamationCircleOutlined),
                      content: '是否确认重置该企业管理员密码',
                      onOk() {
                        Modal.success({
                          okText: '确认',
                          content: h('div', {}, [
                            h('p', '重置成功'),
                            h('p', '点击【确认】后自动复制密码并离开'),
                          ]),
                        });
                      },
                    });
                  },

                  onCancel() {
                    console.log('Cancel');
                  },
                  class: 'test',
                });
              },
            },
            {
              label: '删除',
              name: 'RoleTypeEdit',
              dynamicParams: {
                uuid: 'uuid',
              },
              confirm: true,
              handle: (record: any, name: any, reload: any) => {
                console.log(record, name, reload, 'record');
                mockData.value.splice(0, 1);
              },
            },
          ],
        },

        formConfig: {
          schemas: [
            {
              field: 'zuzhibianhao',
              label: '组织编号',
              component: 'NsInput',
              componentProps: {
                maxLength: 20,
              },
            },
            {
              field: 'jituanname',
              label: '集团名称',
              component: 'NsInput',
              componentProps: {
                maxLength: 20,
              },
            },
            {
              field: 'zuzhiname',
              label: '组织名称',
              component: 'NsInput',
              componentProps: {
                maxLength: 20,
              },
            },
            {
              field: 'status',
              label: '状态',
              component: 'NsSelect',
              componentProps: {
                options: [
                  {
                    label: '正常',
                    value: 1,
                  },
                  {
                    label: '冻结',
                    value: 2,
                  },
                ],
              },
            },
            {
              field: 'cityName',
              label: '城市地区',
              component: 'NsInputCity',
              defaultValue: '',
              fieldMap: ['provinceName', 'cityName', 'areaName', 'province', 'city', 'area'],
              componentProps: {
                api: '/api/parking_merchant/objs/BaseArea',
                isSeparate: true,
              },
            },
          ],
          params: {},
        },
        // pagination: { defaultPageSize: 10 },
        rowKey: 'id',
      };

      return {
        searchValue,
        onSearch,
        tableConfig,
        data,
        mainRef,
        visible,
        borderVisible,
        treeAddVisible,
        onClose,
        onEdit,
        editTree,
        deleteTree,
        borderAdd,
        borderAddSon,
        formSchema,
        formData,
        treeData,
        handleSelect,
        serviceVisible,
        ServiceSelect,
        checkedKeys,
        treeAdd,
        Sure,
        formRef,
      };
    },
  });
</script>
