<template>
  <BasicTable @register="registerTable">
    <template #toolbar>
      <!-- <a-button type="primary" @click="exportExcel"> 导出1</a-button> -->
    </template>
    <template #href="{ record }">
          <a v-if="record.roomTitle && isDev" target="_blank" :href="`/livestream/?m=${record.sceneNumList && record.sceneNumList[0]}&lang=zh&isTour=1&roomId=roomId_${record.roomId}`">{{record.roomTitle}}</a>
          <span v-else-if="record.roomTitle">{{record.roomTitle}}</span>
          <span v-else>-</span>
    </template>
    <template #action="{ record }">
      <TableAction
        stopButtonPropagation
        :actions="[
          {
            label: '删除',
            color: 'error',
            ifShow:getCheckPerm('livestream-delete'),
            onClick: handleDelete.bind(null, record),
          },
        ]"
      />
    </template>
  </BasicTable>
</template>
<script lang="ts">
  import { defineComponent, h, reactive, toRefs, computed } from 'vue';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    TableImg,
    FormProps,
  } from '/@/components/Table';
  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 { roomList, deleteRoom, updateRoomShow } from '/@/api/operate';
  import { message } from 'ant-design-vue';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { useUserStore } from '/@/store/modules/user';
  export default defineComponent({
    components: {
      BasicTable,
      TableAction,
      PageWrapper,
      TableImg,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
    },
    setup() {
      const { t } = useI18n();
      const { createMessage, createConfirm } = useMessage();
      const userStore = useUserStore();
      const permissionStore = usePermissionStore();
      const isDev = computed(() => userStore.getSystemEnv);
      const { getCheckPerm } = permissionStore;
      const columns: BasicColumn[] = [
        {
          title: '带看房间标题',
          dataIndex: 'roomTitle',
          slots: { customRender: 'href' },
          width: 150,
          // customRender: ({ record }) => {
          //   return record.name ? h('span', record.name) : '-';
          // },
        },
        {
          title: '房间编号',
          dataIndex: 'roomId',
          ellipsis: true,
          width: 180,
        },
        {
          title: '用户账号',
          dataIndex: 'roomUserName',
          width: 100,
        },
        {
          title: '带看状态',
          dataIndex: 'roomStatus',
          width: 100,
          customRender: ({ record }) => {
            let status = {
              0:'未开启',
              1:'进行中',
              2:'已关闭',
            }
            return h('span', status[record.roomStatus] || '-')
          },
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          sorter: true,
          width: 180,
          customRender: ({ record }) => {
            return record.createTime
              ? h(Time, {
                  value: record.createTime,
                  mode: 'datetime',
                })
              : '-';
          },
        },
        {
          title: '最新编辑时间',
          dataIndex: 'updateTime',
          width: 180,
          customRender: ({ record }) => {
            return record.updateTime
              ? h(Time, {
                  value: record.updateTime,
                  mode: 'datetime',
                })
              : '-';
          },
        },
        {
          title: '是否显示',
          dataIndex: 'isShow',
          width: 80,
          ifShow:!isDev.value,
          customRender: ({ record }) => {
          if (!Reflect.has(record, 'pendingStatus')) {
            record.pendingStatus = false;
          }
          return h(Switch, {
            checked: record.isShow === 1,
            checkedChildren: '是',
            unCheckedChildren: '否',
            disabled:!getCheckPerm('livestream-show'),
            loading: false,
            onChange: async (checked: boolean) => {
              record.pendingStatus = true;
              const id: string = record.roomId || '';
              const newStatus = checked ? 1 : 0;
              Reflect.set(record, 'isShow', newStatus);
              await updateRoomShow({ roomId: id, isShow: newStatus });
              createMessage.success(t('common.optSuccess'));
              // reload()
            },
          });
          },
        },
        {
          title: '观看次数',
          dataIndex: 'roomViewCount',
          sorter: true,
          width: 80,
        },
        {
          title: '分享次数',
          dataIndex: 'shareCount',
          ifShow: !isDev.value,
          sorter: true,
          width: 80,
        },
        {
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          ifShow: true,
          fixed: 'right',
          flag: 'ACTION',
          width: 50,
        },
      ];
      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        autoSubmitOnEnter:true,
        schemas: [
          {
            field: 'roomTitle',
            label: '房间标题',
            component: 'Input',
            componentProps: {
              maxLength: 100,
            },
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
          {
            field: 'roomUserName',
            label: '用户账号',
            component: 'Input',
            componentProps: {
              maxLength: 100,
            },
            colProps: {
              xl: 6,
              xxl: 6,
            },
          },
          {
            field: 'isShow',
            label: '是否显示',
            component: 'Select',
            ifShow:!isDev.value,
            defaultValue:' ',
            componentProps: {
              options: [{
                label: '全部',
                  value: '',
                  key: '',
              },{
                label: '是',
                  value: 1,
                  key: '1',
              },{
                label: '否',
                  value: 0,
                  key: '0',
              }]
            },
            colProps: {
              xl: 6,
              xxl: 6,
            },
          },
        ],
      };
      const [registerTable, { reload }] = useTable({
        api: roomList,
        title: '房间列表',
        // titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
        columns: columns,
        searchInfo: { type: 1 },
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        rowKey: 'num',
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        canResize: true,
      });
      async function handleDelete(record: Recordable) {
        createConfirm({
          title: '删除',
          content: '确定要删除吗？',
          onOk: async () => {
            const res = await deleteRoom({ roomId: record.roomId })
            console.log('resres',res)
              message.success({
                content: '删除成功',
              });
              reload();
          }
        })
      }
      async function handleMove(record: Recordable) {
        sceneMove({ snCode: record.snCode, num: record.num })
          .then(() => {
            message.success({
              content: '迁移成功',
            });
          })
      }
      function handleDownload(record: Recordable) {
        console.log('handleDownload', record);
      }
      function handleReset(record: Recordable) {
        console.log('handleReset', record);
      }
      // function exportExcel() {
      //   createConfirm({
      //     iconType: 'warning',
      //     title: () => h('span', '温馨提示'),
      //     content: () => h('span', '确定当前标签下的订单记录?'),
      //     onOk: async () => {
      //       // await DownExport();
      //     },
      //   });
      // }
      return {
        registerTable,
        handleDelete,
        handleMove,
        handleDownload,
        handleReset,
        getCheckPerm,
        isDev
      };
    },
  });
</script>
