<!-- address: "浙江省,杭州市,萧山区 山阴路688号恒隆广场B座1217"
adminId: null
appListPicUrl: "https://4dkk.4dage.com/shop/huafa/20211206/150212290bc34b.jpg?x-oss-process=image/resize,m_fixed,w_400,h_400"
bindShowerId: null
bindShowerName: null
bindShowerNameList: null
city: null
contractPhone: "15975119071"
createTime: null
createUserDeptId: 178
createUserId: 266
deleted: 0
id: 1046768
introduceVideo: null
introduceVideoCover: null
latitude: 30.178317
liveRoomUrl: "https://zfb.4dkankan.com/shop.html?m=zfb-Vs6EY33Ql"
livestreamStatus: 0
longitude: 120.262421
name: "eliaukd"
picList: ""
sceneNum: "zfb-Vs6EY33Ql"
sceneUrl: "https://zfb.4dkankan.com/smobile.html?m=zfb-Vs6EY33Ql"
shareWxQrCode: "https://houseoss.4dkankan.com/domain/shop/image/zfb-Vs6EY33Ql1638771871311_QRCode.png"
simpleDesc: "eliauk"
sortOrder: 101
token: null
type: 0
updateTime: null
updateUserDeptId: 178
updateUserId: 427 -->
<template>
  <div class="p-4">
    <BasicTable @register="registerTable" :rowSelection="{ type: 'checkbox' }">
      <template #toolbar>
        <a-button type="primary" @click="handleLiveOpen"> 新增</a-button>
        <!-- <a-button type="primary" color="warning" @click="() => {}"> 编辑</a-button>
        <a-button type="primary" color="error" @click="() => {}"> 删除</a-button> -->
      </template>
      <template #cover="{ record }">
        <TableImg
          v-if="record.appListPicUrl"
          :size="150"
          :simpleShow="true"
          :imgList="[record.appListPicUrl]"
        />
      </template>
      <template #houseType="{ record }">
        {{ renderHouseType(record.houseType) }}
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'eos-icons:role-binding',
              label: t('routes.scenes.bindAnchor'),
              color: 'success',
              onClick: handleBindAnchor.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'warning',
              label: '编辑',
              onClick: () => {},
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              label: '删除',
              popConfirm: {
                title: '是否确认删除',
                confirm: () => {
                  createMessage.info(`暂未接入`);
                },
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <bindModal @register="registerBindModal" @success="reload" />
    <!-- <addLiveModal @register="registeraddLiveModal" /> -->
    <LiveDrawer @register="registerLiveDrawer" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import {
    BasicTable,
    useTable,
    BasicColumn,
    // FormSchema,
    FormProps,
    TableAction,
    TableImg,
  } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import { uploadApi } from '/@/api/sys/upload';
  import { Tag } from 'ant-design-vue';
  import { h } from 'vue';
  import { ListApi, brandTypeListApi } from '/@/api/scene/live';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useModal } from '/@/components/Modal';
  import { useDrawer } from '/@/components/Drawer';
  import bindModal from './bindModal.vue';

  import LiveDrawer from './liveDrawer.vue';
  export default defineComponent({
    components: { BasicTable, TableAction, TableImg, bindModal, LiveDrawer },
    setup() {
      const { createMessage } = useMessage();
      const { t } = useI18n();
      const [registerBindModal, { openModal: openBindModal }] = useModal();

      const [registerLiveDrawer, { openDrawer: openLiveDrawer }] = useDrawer();

      const columns: BasicColumn[] = [
        {
          title: 'ID',
          dataIndex: 'id',
          fixed: 'left',
          width: 100,
        },
        {
          title: t('routes.scenes.anchorRoom'),
          dataIndex: 'name',
          ellipsis: false,
          width: 130,
        },
        {
          title: t('common.type'),
          dataIndex: 'houseType',
          slots: { customRender: 'houseType' },
          width: 100,
        },
        {
          title: t('routes.scenes.appListPicUrl'),
          dataIndex: 'appListPicUrl',
          slots: { customRender: 'cover' },
          width: 150,
        },
        {
          title: t('routes.scenes.sortOrder'),
          dataIndex: 'sortOrder',
          width: 150,
          sorter: true,
        },
        {
          title: t('routes.scenes.webSite'),
          dataIndex: 'liveRoomUrl',
          slots: { customRender: 'link' },
          width: 180,
        },
        {
          title: t('routes.scenes.bindShowerNameList'),
          dataIndex: 'bindShowerNameList',
          ellipsis: false,
          width: 180,
        },

        {
          title: t('routes.scenes.livestreamStatus'),
          dataIndex: 'livestreamStatus',
          width: 180,
          customRender: ({ record }) => {
            const enable = record.livestreamStatus === 1;
            const color = enable ? 'green' : 'red';
            const text = enable ? t('common.yes') : t('common.no');
            return h(Tag, { color: color }, () => text);
          },
        },

        {
          title: t('common.operation'),
          dataIndex: '',
          slots: { customRender: 'action' },
          width: 250,
          fixed: 'right',
        },
      ];

      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        schemas: [
          {
            field: 'sceneName',
            label: t('routes.scenes.anchorRoom'),
            component: 'Input',

            colProps: {
              xl: 5,
              xxl: 5,
            },
          },
          {
            field: 'type',
            label: t('common.type'),
            component: 'ApiSelect',
            colProps: {
              xl: 5,
              xxl: 5,
            },
            componentProps: {
              api: brandTypeListApi,
              resultField: 'list',
              labelField: 'name',
              valueField: 'id',
              params: {
                page: 1,
                limit: 1000,
              },
            },
          },
          {
            field: 'livestreamStatus',
            label: t('routes.scenes.livestreamStatus'),
            component: 'Select',
            colProps: {
              xl: 5,
              xxl: 5,
            },
            componentProps: {
              options: [
                {
                  label: t('common.all'),
                  value: '',
                  key: '0',
                },
                {
                  label: t('common.yes'),
                  value: 1,
                  key: '1',
                },
                {
                  label: t('common.no'),
                  value: 0,
                  key: '2',
                },
              ],
            },
          },
        ],
      };
      function renderHouseType(type: number): string {
        switch (type) {
          case 0:
            return t(`routes.scenes.houseType.0`);
          case 1:
            return t(`routes.scenes.houseType.1`);
          case 2:
            return t(`routes.scenes.houseType.2`);
          case 3:
            return t(`routes.scenes.houseType.3`);
          default:
            return t(`routes.scenes.houseType.9`);
        }
      }

      const [registerTable, { reload }] = useTable({
        title: t(`routes.scenes.liveBroadcast`),
        api: ListApi,
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        tableSetting: { fullScreen: true },
        showIndexColumn: false,
        rowKey: 'id',
        pagination: { pageSize: 20 },
        clickToRowSelect: false,
        fetchSetting: {
          pageField: 'page',
          sizeField: 'limit',
          listField: 'list',
          totalField: 'totalCount',
        },
        defSort: {
          field: 'order',
          order: 'asc',
        },
      });

      function handleBindAnchor(record: Recordable) {
        console.log('record', record);
        openBindModal(true, record);
      }
      function handleLiveOpen(record: Recordable) {
        console.log('record', record);
        openLiveDrawer(true, record);
      }
      return {
        registerTable,
        createMessage,
        renderHouseType,
        t,
        registerBindModal,
        handleBindAnchor,

        reload,
        registerLiveDrawer,
        handleLiveOpen,
      };
    },
  });
</script>
