<script setup lang="ts">
import { ref } from "vue"
import { useTask } from "/@/hooks/core"
import {  columns } from "./config/_options"
import BasicForm from "./components/BasicForm.vue"
import { useDetail } from "/@/hooks/core/useDetail"
import { httpDetail } from "/@/api/sellOut/salesOrder";
import BasicDescriptions from "/@/components/BasicDescriptions";
import ReturnModal from "./components/ReturnModal.vue"


import UploadAddressModal from "./components/upload-address/index.vue"

import { useRenderIcon } from "/@/components/ReIcon/src/hooks";

const pageName = 'salesOrderDetail'

const visible = ref(false)
const addrVisible = ref(false)

const orderDetailTask = useTask({ initialData: {} })
const { title, collapses, isDetail, id } = useDetail({ baseName: "销售订单", collapseLen: 5 });


if(isDetail.value){ orderDetailTask.run(httpDetail({ id: id.value })) }
</script>

<template>
  <div class="p-[10px] bg-white" v-loading="orderDetailTask.loading">
    <ElTabs>
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem :title="title" name="1">
            <BasicForm v-if="!isDetail" />

            <BasicDescriptions 
              v-else 
              :columns="columns" 
              :data="orderDetailTask.data" 
            />
          </ElCollapseItem>

          <template v-if="isDetail">
            <ElCollapseItem title="发货单" name="2">
              <ElTable border size="small">
                <ElTableColumn type="selection" width="55px" />
                <ElTableColumn label="发货单号" />
                <ElTableColumn label="状态" />
                <ElTableColumn label="发货数量" />
                <ElTableColumn label="联系人" />
                <ElTableColumn label="联系电话" />
                <ElTableColumn label="收货地址" />
                <ElTableColumn label="发货时间" />
                <ElTableColumn>
                <template #header>
                  <div class="flex">
                    <ElTooltip placement="top" content="有地址批量退货">
                      <ElButton 
                        type="primary"
                        size="small"
                        link
                        :icon="useRenderIcon('ppt')">
                      </ElButton>
                    </ElTooltip>

                    <ElTooltip placement="top" content="无地址退货">
                      <ElButton 
                        type="primary"
                        size="small"
                        link
                        :icon="useRenderIcon('delete')"
                        @click="visible = true"
                        >
                      </ElButton>
                    </ElTooltip>

                    <ElTooltip placement="top" content="下载收货地址模板">
                      <ElButton 
                        type="primary"
                        size="small"
                        link
                        :icon="useRenderIcon('arrow-down-line')">
                      </ElButton>
                    </ElTooltip>

                    <ElTooltip placement="top" content="导入收货地址">
                      <ElButton 
                        type="primary"
                        size="small"
                        link
                        :icon="useRenderIcon('arrow-up-line')"
                        @click="() =>addrVisible = true"
                      />
                    </ElTooltip>

                    <ElTooltip placement="top" content="有地址批量退货">
                      <ElButton 
                        type="primary" 
                        size="small" 
                        link 
                        :icon="useRenderIcon('add')" 
                      />
                    </ElTooltip>
                  </div>
                </template>
                </ElTableColumn>
              </ElTable>
            </ElCollapseItem>
          </template>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>


    <ReturnModal v-model:visible="visible" />

    <UploadAddressModal v-model:visible="addrVisible" />
  </div>
</template>
