<template>
  <PageWrapper contentBackground>
    <div class="desc-wrap-BasicTable">
      <BasicTable @register="registerTable">
        <template #toolbar>
          <a-button
            type="primary"
            v-if="getCheckPerm('company-add')"
            @click="
              () => {
                openInfoModal(true,{});
              }
            "
          >
            新增客户</a-button
          >
        </template>

        <template #action="{ record }">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '设备',
                ifShow: getCheckPerm('customer-device'),
                onClick: handleRouter.bind(null, { type: 'device', id: record.id }),
              },
              {
                label: '场景',
                ifShow: getCheckPerm('customer-scenes'),
                onClick: handleRouter.bind(null, { type: 'scene', id: record.id }),
              },
              {
                label: '编辑',
                ifShow: getCheckPerm('customer-update'),
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',
                color: 'error',
                ifShow: getCheckPerm('customer-delete'),
                popConfirm: {
                  title: '是否删除？',
                  confirm: handleDelete.bind(null, record),
                  placement: 'topLeft',
                },
              },
            ]"
          />
        </template>
      </BasicTable>
    </div>
    <InfoModal @update="reload" @register="registerInfoModal" />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, h, reactive, toRefs } from 'vue';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    TableImg,
    FormProps,
  } from '/@/components/Table';
  import { router } from '/@/router';
  import { PageWrapper } from '/@/components/Page';
  import { Time } from '/@/components/Time';
  import { Descriptions } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Switch } from 'ant-design-vue';
  // import { operateSceneList, sceneMove, sceneDelete } from '/@/api/operate';
  import { companyList, companyDelete } from '/@/api/customer';
  import { message } from 'ant-design-vue';
  import InfoModal from './modal/InfoModal.vue';
  import { useModal } from '/@/components/Modal';
  import { usePermissionStore } from '/@/store/modules/permission';
  export default defineComponent({
    components: {
      BasicTable,
      TableAction,
      PageWrapper,
      TableImg,
      InfoModal,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
    },
    setup() {
      const [registerInfoModal, { openModal: openInfoModal }] = useModal();
      const { t } = useI18n();
      const permissionStore = usePermissionStore();
      const { getCheckPerm } = permissionStore;
      const { createMessage, createConfirm } = useMessage();

      const columns: BasicColumn[] = [
        {
          title: '客户ID',
          dataIndex: 'id',
          width: 150,
        },
        {
          title: '客户名称',
          dataIndex: 'companyName',
          ellipsis: false,
          width: 80,
        },

        {
          title: '客户描述',
          dataIndex: 'companyDesc',
          width: 180,
          customRender: ({ record }) => {
            return record.companyDesc ? record.companyDesc : '-';
          },
        },
        {
          title: '设备数',
          dataIndex: 'cameraCount',
          width: 80,
          customRender: ({ record }) => {
            return record.cameraCount ? record.cameraCount : '0';
          },
        },
        {
          title: '场景数',
          dataIndex: 'sceneCount',
          width: 80,
          customRender: ({ record }) => {
            return record.sceneCount ? record.sceneCount : '0';
          },
        },
        {
          title: '创建人',
          dataIndex: 'createUserName',
          width: 180,
          customRender: ({ record }) => {
            return record.createUserName ? record.createUserName : '-';
          },
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: 180,
          customRender: ({ record }) => {
            return record.createTime
              ? h(Time, {
                  value: record.createTime,
                  mode: 'datetime',
                })
              : '-';
          },
        },

        {
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          ifShow: true,
          flag: 'ACTION',
          fixed: 'right',
          width: 200,
        },
      ];
      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        schemas: [
          {
            field: 'companyName',
            label: '客户名称',
            component: 'Input',
            componentProps: {
              maxLength: 100,
            },
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
        ],
      };
      const [registerTable, { reload }] = useTable({
        api: companyList,
        title: '客户列表',
        // titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        rowKey: 'id',
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        canResize: false,
      });
      function handleRouter(options) {
        if (options.type == 'device') {
          router.push('/customer/device/' + options.id);
        } else {
          router.push('/customer/scene/' + options.id);
        }
      }
      function handleEdit(record) {
        openInfoModal(true, {
          ...record,
        });
      }
      async function handleDelete(record: Recordable) {
        console.log('handleDelete', record);

        companyDelete({ id: record.id })
          .then(() => {
            message.success({
              content: '删除成功',
            });
            reload();
          })
      }
      async function handleMove(record: Recordable) {}
      function handleDownload(record: Recordable) {
        console.log('handleDownload', record);
      }
      function handleReset(record: Recordable) {
        console.log('handleReset', record);
      }

      return {
        openInfoModal,
        registerInfoModal,
        registerTable,
        handleRouter,
        handleDelete,
        handleMove,
        handleEdit,
        handleDownload,
        handleReset,
        reload,
        getCheckPerm,
      };
    },
  });
</script>
<style lang="less" scoped>
  .desc-wrap-BasicTable {
    background-color: #f0f2f5;
    .vben-basic-table-form-container {
      padding: 0;
    }
  }
</style>
