<script setup lang="ts">
import { ref, h, computed, nextTick } from "vue";
import { statusOptions } from "./config/_options";
import BaseForm from "./components/baseForm.vue";
import { useDetail } from "/@/hooks/core/useDetail";
import BasicDescriptions from "/@/components/BasicDescriptions";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { useTask } from "/@/hooks/core"
import { httpStatus } from "/@/api/sellOut/zixunOrder";
import { useRoute, useRouter } from "vue-router"


import { 
  ElTag, 
  ElButton, 
  ElTooltip,
  ElMessageBox
} from "element-plus"

const { 
  id, 
  title, 
  isDetail: _isDetail, 
  collapses 
} = useDetail({ baseName: "竞价单", collapseLen: 5 });


const route = useRoute()
const router = useRouter()

const isUpdate = computed(() => route.query.type == 'update')
const isCopy = computed(() => route.query.type == 'copy')

const isDetail = computed(() => {
  return _isDetail.value && !isCopy.value && !isUpdate.value
})


const statusTask = useTask({ success(){ 
  isDisplay.value = false 
  nextTick(() => isDisplay.value = true)
}})

const isDisplay = ref(true)
const detail = ref<Record<string, any>>({})
const isPause = computed(() => detail.value.status === '1')

function onClick(isPause){
  const status = isPause ? '7' : '1'

  ElMessageBox.confirm(
    '是否确认' + ( isPause ? '停止招标任务?' : '重启招标任务?'), 
    isPause ? '' : '重启需要重新编辑竞价信息',
    {
      confirmText: '确认',
      cancelText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    if (isPause) {
      statusTask.run(httpStatus({ infoNo: id.value, status }))
    } else {
      router.push('/sellOut/zixunOrderDetail?id=' + id.value + '&type=update')
    }
  })
}
</script>

<template>
  <div class="p-[10px] bg-white">
    <ElTabs>
      <ElTabPane :label="title" v-loading="statusTask.loading">
        <BasicDescriptions
          v-if="isDetail"
          class="mb-[10px]"
          :data="detail" 
          :columns="[
            { label: '竞价单编号', span: 6, field: 'infoNo' }, 
            { label: '状态', span: 6, field: 'status', render(status){
              return h('div', { style: 'display:flex; align-items: center' },[
                h(ElTag, { size: 'small', type: 'primary' }, { default: statusOptions.find(item => item.value === status)?.label || '--'}),
                h(ElTooltip, 
                  { content: isPause ? '停止招标任务' : '重启招标任务', placement: 'top' }, 
                  { 
                    default: h(ElButton, { 
                      link: true, 
                      icon: useRenderIcon(isPause ? 'video-pause' : 'video-play'), 
                      onClick: () => onClick(isPause) 
                    })
                  }
                )
              ])
            }}, 
            { label: '竞价次数', span: 3 , field: 'bargain_num' }, 
            { label: '创建人', span: 3, field: 'salesman' }, 
            {label: '创建时间', span: 6, field: 'addtime'}
          ]" 
        >
      </BasicDescriptions>

        <ElCollapse v-model="collapses">
          <ElCollapseItem :title="title" name="1">
            <BaseForm
              v-if="isDisplay"
              @getDetail="data => detail = data"
              :isUpdate="isUpdate"
              :isDetail="isDetail"
              :isCopy="isCopy"
              :id="id"
            />
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
