<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('quick Search Placeholder', { fields: t('reqOrder.quick Search Fields') })"
        />

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" />

        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted } from 'vue'
import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'

const { t } = useI18n()
const tableRef = ref()
const optButtons = defaultOptButtons(['edit', 'delete'])
const baTable = new baTableClass(
    new baTableApi('/admin/ReqOrder/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('reqOrder.id'), prop: 'id', align: 'center', width: 180, operator: 'RANGE', sortable: 'custom' },
            { label: t('reqOrder.city'), prop: 'city_text', align: 'center', operator: false },
            { label: t('reqOrder.name'), prop: 'name', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('reqOrder.participant'), prop: 'participant', align: 'center', render: 'tag', operator: '=', sortable: false, replaceValue: { '大型活动（1000以上）': t('reqOrder.participant 大型活动（1000以上）'), '中型活动（100以上）': t('reqOrder.participant 中型活动（100以上）'), '小型活动（100以下）': 'participant 小型活动（100以下）', '小型活动（100以上）': t('reqOrder.participant 小型活动（100以上）') } },
            { label: t('reqOrder.require_item'), prop: 'require_item', align: 'center', render: 'tags', operator: 'FIND_IN_SET', sortable: false, replaceValue: { '场地': t('reqOrder.require_item 场地'), '用餐': t('reqOrder.require_item 用餐'), '住宿': t('reqOrder.require_item 住宿') } },
            { label: t('reqOrder.act_time'), prop: 'act_time', align: 'center', operator: '=', sortable: 'custom', width: 160 },
            { label: t('reqOrder.act_day_count'), prop: 'act_day_count', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('reqOrder.req_endtime'), prop: 'req_endtime', align: 'center', operator: '=', sortable: 'custom', width: 160 },
            { label: t('reqOrder.flow_stage'), prop: 'flow_stage', align: 'center', render: 'tag', operator: '=', sortable: false, replaceValue: { '磋商阶段': t('reqOrder.flow_stage 磋商阶段'), '落地阶段': t('reqOrder.flow_stage 落地阶段'), '确定阶段': t('reqOrder.flow_stage 确定阶段'), '结算阶段': t('reqOrder.flow_stage 结算阶段'), '订单已取消': t('reqOrder.flow_stage 订单已取消') } },
            { label: t('reqOrder.status'), prop: 'status', align: 'center', render: 'tag', operator: '=', sortable: false, replaceValue: { '待供应商反馈评估预算函': t('reqOrder.status 待供应商反馈评估预算函'), '待供应商上传活动方案': t('reqOrder.status 待供应商上传活动方案'), '待供应商上传计划预算函': t('reqOrder.status 待供应商上传计划预算函'), '待客户上传确认执行凭证': t('reqOrder.status 待客户上传确认执行凭证'), '待平台审批执行凭证': t('reqOrder.status 待平台审批执行凭证'), '待供应商确认已执行': t('reqOrder.status 待供应商确认已执行'), '外加评价': t('reqOrder.status 外加评价'), '平台驳回执行凭证': t('reqOrder.status 平台驳回执行凭证'), '待供应商上传结算函': t('reqOrder.status 待供应商上传结算函'), '待客户确认结算函': t('reqOrder.status 待客户确认结算函'), '客户驳回结算函': t('reqOrder.status 客户驳回结算函'), '订单执行成功': t('reqOrder.status 订单执行成功'), '订单已取消': t('reqOrder.status 订单已取消') } },
            { label: t('reqOrder.department__pid'), prop: 'department.pid', align: 'center', operatorPlaceholder: t('Fuzzy query'), render: 'tags', operator: 'LIKE' },
            { label: t('reqOrder.department__name'), prop: 'department.name', align: 'center', operatorPlaceholder: t('Fuzzy query'), render: 'tags', operator: 'LIKE' },
            { label: t('reqOrder.req_tel'), prop: 'req_tel', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('reqOrder.req_user_id'), prop: 'req_user_id', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE' },
            { label: t('reqOrder.admin__username'), prop: 'admin.username', align: 'center', operatorPlaceholder: t('Fuzzy query'), render: 'tags', operator: 'LIKE' },
            { label: t('reqOrder.admin__mobile'), prop: 'admin.mobile', align: 'center', operatorPlaceholder: t('Fuzzy query'), render: 'tags', operator: 'LIKE' },
            { label: t('reqOrder.budget'), prop: 'budget', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('reqOrder.prepay_amount'), prop: 'prepay_amount', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('reqOrder.settle_amount'), prop: 'settle_amount', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('reqOrder.supplier__name'), prop: 'supplier.name', align: 'center', operatorPlaceholder: t('Fuzzy query'), render: 'tags', operator: 'LIKE' },
            { label: t('operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: [undefined],
    },
    {
        defaultItems: { name: null, participant: '小型活动（100以下）', act_time: null, act_day_count: 0, req_endtime: null, flow_stage: '磋商阶段', status: '待供应商反馈评估预算函', req_tel: null, req_user_id: null, prepay_type: '未设置', prepay_amount: 0, settle_amount: 0 },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})
</script>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'reqOrder',
})
</script>

<style scoped lang="scss"></style>
