<template>
    <Wraper :hidden="hidden" noFooter>
        <Table
            url="/ranger/inspection/api/v1/route/assembles"
            rowKey="assembleId"
            :formatData="formatData"
            ref="assembleTable"
            :scroll="scroll"
            :otherQuery="getDefaultQuery()"
            @expand="expand"
            :buttons="buttons"
            noPadding
            :width="400"
        >
            <template #operation>
                <a-button type="primary" @click="addPlace">新增地点</a-button>
            </template>
            <template #drawer="drawer">
                <AddPlace v-if="addType === 'PLACE'" v-bind="drawer" :refresh="refresh" />
                <AddUnit v-if="addType === 'UNIT'" v-bind="drawer" :refresh="refresh" />
                <AddItem v-if="addType === 'ITEM'" v-bind="drawer" :refresh="refresh" />
            </template>
            <a-table-column title="名称" :width="150" data-index="assembleObjectName" />
            <a-table-column title="顺序" :width="60">
                <template #default="row">
                    <span v-if="row.assembleObjectType === 'PLACE'">{{ row.assembleOrder }}</span>
                    <span v-else>-</span>
                </template>
            </a-table-column>
            <a-table-column title="类型" :width="60">
                <template #default="row">
                    <span v-if="row.assembleObjectType === 'PLACE'">地点</span>
                    <span v-if="row.assembleObjectType === 'UNIT'">单元</span>
                    <span v-if="row.assembleObjectType === 'ITEM'">项目</span>
                </template>
            </a-table-column>
            <a-table-column title="免检" :width="60">
                <template #default="row">
                    <span :style="{ color: '#2db7f5' }" v-if="row.exemptionState === 'YES'">是</span>
                    <span :style="{ color: '#f5222d' }" v-if="row.exemptionState === 'NO'">否</span>
                </template>
            </a-table-column>
            <a-table-column title="状态" :width="60">
                <template #default="row">
                    <span :style="{ color: '#2db7f5' }" v-if="row.assembleState === 'VALID'">有效</span>
                    <span :style="{ color: '#f5222d' }" v-if="row.assembleState === 'INVALID'">无效</span>
                </template>
            </a-table-column>
            <a-table-column title="描述" data-index="assembleDesc" :width="200" />
            <template #other>
                <SetOrder ref="setOrder" :afterSubmit="setRouteAssemblesOrder" />
            </template>
        </Table>
    </Wraper>
</template>

<script>
import Table from '@/components/table/table.vue';
import Wraper from '@/components/table/wraper.vue';
import { getRouteAssemblesListApi, updateRouteAssemblesApi, setRouteAssemblesOrderApi } from '@/api';
import AddPlace from './addPlace.vue';
import AddUnit from './addUnit.vue';
import AddItem from './addItem.vue';
import SetOrder from './setOrder.vue';

export default {
    components: { Wraper, Table, AddPlace, AddUnit, AddItem, SetOrder },
    props: { hidden: Function, row: Object },
    data() {
        return {
            scroll: { x: 1300, y: 600 },
            buttons: {
                options: { width: 220, fixed: 'right' },
                title: '操作',
                data: [
                    {
                        label: '新增单元',
                        click: this.addUnit,
                        isHidden: (row) => {
                            return row.assembleObjectType !== 'PLACE';
                        },
                    },
                    {
                        label: '新增项目',
                        click: this.addItem,
                        isHidden: (row) => {
                            return row.assembleObjectType !== 'UNIT';
                        },
                    },
                    {
                        label: '置顶',
                        click: this.toTop,
                        isHidden: (row) => {
                            return row.assembleObjectType !== 'PLACE';
                        },
                    },
                    {
                        label: '排序',
                        click: this.setOrder,
                        isHidden: (row) => {
                            return row.assembleObjectType !== 'PLACE';
                        },
                    },
                    {
                        label: '失效',
                        click: (row) => this.assembleUpdate(row, 'INVALID'),
                        isHidden: (row) => {
                            if (row.assembleObjectType === 'ITEM') {
                                return true;
                            } else {
                                return row.assembleState === 'INVALID';
                            }
                        },
                    },
                    {
                        label: '生效',
                        click: (row) => this.assembleUpdate(row, 'VALID'),
                        isHidden: (row) => {
                            if (row.assembleObjectType === 'ITEM') {
                                return true;
                            } else {
                                return row.assembleState === 'VALID';
                            }
                        },
                    },

                    {
                        type: 'confirm',
                        url: (row) => `/ranger/inspection/api/v1/route/assembles/${row.assembleId}`,
                        after: this.refresh,
                    },
                ],
            },
            addType: '',
        };
    },
    mounted() {},
    methods: {
        refresh() {
            this.$refs.assembleTable.resetGetData();
        },
        getDefaultQuery() {
            const { routeId, regionId } = this.row;
            return {
                parentAssembleObjectType: 'REGION',
                parentAssembleObjectId: regionId,
                routeId,
            };
        },
        addPlace() {
            const row = this.getDefaultQuery();
            this.addType = 'PLACE';
            this.$refs.assembleTable.show({ row, title: '新增地点', type: 'add' });
        },
        addUnit(row) {
            this.addType = 'UNIT';
            this.$refs.assembleTable.show({ row, title: '新增单元', type: 'add' });
        },
        addItem(row) {
            this.addType = 'ITEM';
            const newRow = { ...row, regionId: this.row.regionId };
            this.$refs.assembleTable.show({ row: newRow, title: '新增项目', type: 'add' });
        },

        async assembleUpdate(row, assembleState) {
            const {
                assembleId,
                assembleObjectId,
                assembleObjectType,
                parentAssembleObjectId,
                parentAssembleObjectType,
                routeId,
            } = row;
            const param = {
                assembleState,
                assembleId,
                assembleObjectId,
                assembleObjectType,
                parentAssembleObjectId,
                parentAssembleObjectType,
                routeId,
            };
            const resp = await updateRouteAssemblesApi(param);
            if (resp) {
                this.$message.success('操作成功');
                this.refresh();
            } else {
                this.$message.warning('操作失败');
            }
        },

        toTop(row) {
            const { assembleId, routeId } = row;
            const param = {
                assembleId,
                routeId,
                assembleOrder: 1,
            };
            this.setRouteAssemblesOrder(param);
        },

        setOrder(row) {
            this.$refs.setOrder.setRow(row);
            this.$refs.setOrder.showModal();
        },

        async setRouteAssemblesOrder(param) {
            const resp = setRouteAssemblesOrderApi(param);
            if (resp) {
                this.$message.success('操作成功');
                setTimeout(() => {
                    this.refresh();
                }, 500);
            } else {
                this.$message.warning('操作失败');
            }
        },
        formatData(list) {
            return list.records.map((i) => {
                return {
                    ...i,
                    children: [],
                };
            });
        },
        async expand(expanded, record) {
            const { routeId, assembleObjectType, assembleObjectId, assembleState, exemptionState } = record;
            const params = {
                routeId,
                parentAssembleObjectType: assembleObjectType,
                parentAssembleObjectId: assembleObjectId,
                assembleObjectType: assembleObjectType === 'PLACE' ? 'UNIT' : 'ITEM',
            };

            const resp = await getRouteAssemblesListApi(params);

            const newData = resp.map((i) => {
                return {
                    ...i,
                    children: assembleObjectType === 'PLACE' ? [] : undefined,
                    assembleState: assembleState === 'INVALID' ? assembleState : i.assembleState,
                    exemptionState: exemptionState === 'NO' ? exemptionState : i.exemptionState,
                };
            });
            record.children = newData;

            this.$refs.assembleTable?.refreshView();
        },
    },
};
</script>
