<template>
  <a-tabs v-model:activeKey="searchInfo.activeKey">
    <a-tab-pane key="1" tab="权益订单">
      <BasicTable @register="registerTimeTable">
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: '编辑',
                ifShow:getCheckPerm('account-equityEdit'),
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',
                ifShow:getCheckPerm('account-equityDelete'),
                popConfirm: {
                  title: '是否确认删除',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </BasicTable>
    </a-tab-pane>
    <a-tab-pane key="2" tab="下载订单">
      <BasicTable @register="registerDown"></BasicTable>
    </a-tab-pane>
    <a-tab-pane key="3" tab="相机订单">
      <BasicTable @register="registerCamera"  @expand="handleExpanded">
      <template #expandedRowRender="{ record }">
        <div>
          <a-descriptions title="商品信息" :column="2">
            <!-- <a-descriptions-item label="商品名称">{{record.shipName}} </a-descriptions-item>
            <a-descriptions-item label="角色码"> 1234567 </a-descriptions-item> -->
            <a-descriptions-item label="套餐"> {{record.goodsName}}</a-descriptions-item>
            <a-descriptions-item label="收件人"> {{record.shipName}} </a-descriptions-item>
            <a-descriptions-item label="数量"> {{record.goodsCount}} </a-descriptions-item>
            <a-descriptions-item label="手机号码"> {{record.shipMobile}} </a-descriptions-item>
            <a-descriptions-item label="商品单价"> {{record.goodsPrice}} </a-descriptions-item>
            <a-descriptions-item label="地址"> {{record.shipAreaPath}}{{record.shipAddress}} </a-descriptions-item>
            <a-descriptions-item label="" :span="1">
              <TableImg style="margin: 0"
                :size="120"
                :simpleShow="true"
                :imgList="[record.goodsPic || 'http://zfb-4dkankan.oss-cn-shenzhen.aliyuncs.com/sceneLogo/1653644220202_3ee8b3c006e74012a82f2b286b2f4914.png']"
              />
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </template>
      </BasicTable>
    </a-tab-pane>
  </a-tabs>
</template>
<script lang="ts">
import { defineComponent, reactive, computed } from 'vue';
import { BasicTable, useTable, FormProps, TableAction, TableImg } from '/@/components/Table';
import { PageWrapper } from '/@/components/Page';
import { Divider, Card, Empty, Descriptions, Steps, Tabs } from 'ant-design-vue';
import { DelAndUpload } from '/@/api/product';
import { IncrementList } from '/@/api/order'
import { DownList,CameraList } from '/@/api/order'
import { useModal } from '/@/components/Modal';
  import { CameraItem } from '/@/api/order'
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { cameraColumns, dowmColumns, equityColumns,orderSearchForm } from './data'
import { otherInfoStore } from '/@/store/modules/other'
import { usePermissionStore } from '/@/store/modules/permission';
export default defineComponent({
  components: {
    BasicTable,
    TableImg,
    TableAction,
    PageWrapper,
    [Divider.name]: Divider,
    [Card.name]: Card,
    Empty,
    [Descriptions.name]: Descriptions,
    [Descriptions.Item.name]: Descriptions.Item,
    [Steps.name]: Steps,
    [Steps.Step.name]: Steps.Step,
    [Tabs.name]: Tabs,
    [Tabs.TabPane.name]: Tabs.TabPane,
  },
  setup() {
    const { t } = useI18n();
    const permissionStore = usePermissionStore();
    const { getCheckPerm } = permissionStore;
    const otherInfo = otherInfoStore();
    const OverviewInfo = computed(() => otherInfo.getOverviewInfo);
    const { userName } = OverviewInfo.value
    const searchInfo = reactive<Recordable>({
      activeKey: '1',
      userName,
    });
    console.log('OverviewInfo',searchInfo,OverviewInfo,userName)
    const [registerAddModal, { openModal: openAddModal }] = useModal();
    const [registerEditModal, { openModal: openEditModal }] = useModal();
    const { createMessage } = useMessage();

    const searchForm: Partial<FormProps> = {
      labelWidth: 100,
      schemas: [
        {
          field: 'version',
          label: '版本号',
          component: 'Input',
          componentProps: {
            maxLength: 100,
          },
          colProps: {
            xl: 6,
            xxl: 6,
          },
        },
      ],
    };
    
    const [registerDown, { reload:Downreload }] = useTable({
      api: DownList,
      title: '下载列表',
      columns: dowmColumns,
      useSearchForm: true,
      formConfig: orderSearchForm,
      showTableSetting: true,
      showIndexColumn: false,
      rowKey: 'id',
      searchInfo,
      beforeFetch:(T)=>{
          if(T.ctivated){
            T.startTime = T.ctivated[0]
            T.endTime = T.ctivated[1]
          }
          return T
      },
      fetchSetting: {
        pageField: 'pageNum',
        sizeField: 'pageSize',
        listField: 'list',
        totalField: 'total',
      },
      // actionColumn: {
      //   width: 180,
      //   title: '操作',
      //   dataIndex: 'action',
      //   slots: { customRender: 'action' },
      // },
      canResize: true,
    });
    
    const [registerCamera, { reload:Camerareload }] = useTable({
      api: CameraList,
      title: '相机列表',
      columns: cameraColumns,
      useSearchForm: true,
      formConfig: orderSearchForm,
      showIndexColumn:false,
      showTableSetting: true,
      canResize: true,
      expandRowByClick: true,
      rowKey: 'id',
      searchInfo,
      beforeFetch:(T)=>{
          if(T.ctivated){
            T.startTime = T.ctivated[0]
            T.endTime = T.ctivated[1]
          }
          return T
      },
      rowKey: 'id',
      fetchSetting: {
        pageField: 'pageNum',
        sizeField: 'pageSize',
        listField: 'list',
        totalField: 'total',
      },
      canResize: true,
    });
    const [registerTimeTable, { reload }] = useTable({
      api: IncrementList,
      title: '权益列表',
      columns: equityColumns,
      useSearchForm: true,
      formConfig: orderSearchForm,
      showIndexColumn: false,
      showTableSetting: true,
      searchInfo,
      beforeFetch:(T)=>{
          if(T.ctivated){
            T.startTime = T.ctivated[0]
            T.endTime = T.ctivated[1]
          }
          return T
      },
      rowKey: 'id',
      fetchSetting: {
        pageField: 'pageNum',
        sizeField: 'pageSize',
        listField: 'list',
        totalField: 'total',
      },
      // searchInfo: searchInfo,
      // actionColumn: {
      //   width: 180,
      //   title: '操作',
      //   dataIndex: 'action',
      //   slots: { customRender: 'action' },
      // },
      canResize: true,
    });
    function tabChange(val: string) {
      console.log('tabChange', val);
      reload();
    }
    async function handleDelete(record: Recordable) {
      console.log('点击了删除', record);
      await DelAndUpload({ id: record.id });
      createMessage.success(t('common.optSuccess'));
      reload();
    }
    function handleOpen(record: Recordable) {
      console.log('点击了启用', record);
    }
    
    function handlerowClick(record: Recordable){
        CameraItem({id:record.id}).then(res => {
          if(res.length){
            let item = res[0]
            Reflect.set(record, 'goodsCount', item.goodsCount);
            Reflect.set(record, 'goodsName', item.goodsName);
            Reflect.set(record, 'goodsPic', item.goodsPic);
            Reflect.set(record, 'goodsPrice', item.goodsPrice);
          }
        })
      }
    function handleExpanded(_,record: Recordable) {
        handlerowClick(record)
      }
    function handleEdit(record: Recordable) {
      console.log('record', record);
      openEditModal(true, {
        ...record,
      });
    }
    return {
      handleExpanded,
      registerTimeTable,
      registerCamera,
      registerDown,
      handleDelete,
      handleOpen,
      tabChange,
      reload,
      Downreload,
      Camerareload,
      registerAddModal,
      registerEditModal,
      openAddModal,
      handleEdit,
      getCheckPerm,
      t,
      searchInfo,
    };
  },
});
</script>
<style lang="less" scoped>
.desc-wrap-BasicTable {
  background-color: #f0f2f5;
  .vben-basic-table-form-container {
    padding: 0;
  }
}
</style>
