<template>
    <Wraper :hidden="hidden" noFooter>
        <a-button class="tw-mb-4" type="primary" @click="onAdd">新增</a-button>
        <addDrawer ref="addDrawer" :row="row" :refresh="getList" />
        <a-list :data-source="data" :grid="{ gutter: 16, xs: 1, sm: 1, md: 1, lg: 1, xl: 1, xxl: 1 }">
            <a-list-item slot="renderItem" slot-scope="item">
                <a-card>
                    <template #title>
                        <a-row>
                            <a-col :span="12">
                                <a-tag v-if="item.shiftState === 'VALID'" color="#87d068"> 有效 </a-tag>
                                <a-tag v-else color="#f50"> 无效 </a-tag>
                                <span v-if="item.shiftType === 'DAY'">白班</span>
                                <span v-if="item.shiftType === 'MIDDLE'">中班</span>
                                <span v-if="item.shiftType === 'NIGHT'">晚班</span>
                            </a-col>
                            <a-col :span="12" class="tw-text-right">
                                <a-space>
                                    <PopconfirmDelete
                                        :url="`/ranger/inspection/api/v1/route/schedules/${item.shiftId}`"
                                        :cb="getList"
                                    />
                                    <a
                                        v-if="item.shiftState === 'INVALID'"
                                        @click="() => scheduleUpdateState(item.shiftId, 'VALID')"
                                        >生效</a
                                    >
                                    <a
                                        v-if="item.shiftState === 'VALID'"
                                        @click="() => scheduleUpdateState(item.shiftId, 'INVALID')"
                                        >失效</a
                                    >
                                </a-space>
                            </a-col>
                        </a-row>
                    </template>
                    <div>{{ item.scheduleRule }}</div>
                    <div>{{ item.scheduleDescription }}</div>
                    <div>{{ item.isNextDay === 'YES' && '生成第二天线路' }}</div>
                </a-card>
            </a-list-item>
        </a-list>
    </Wraper>
</template>

<script>
import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
import Wraper from '@/components/table/wraper.vue';
import { getRouteSchedulesListApi, updateRouteSchedulesStateApi } from '@/api';
import addDrawer from './add.vue';

export default {
    components: { Wraper, PopconfirmDelete, addDrawer },
    props: { hidden: Function, row: Object },
    data() {
        return {
            data: [],
            loading: false,
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        async getList() {
            const { routeId } = this.row;
            this.loading = true;
            const data = await getRouteSchedulesListApi({ routeId, pageNum: 1, pageSize: 10 });
            this.data = data.records;
            this.loading = false;
        },
        async scheduleUpdateState(id, state) {
            await updateRouteSchedulesStateApi({ id, state });
            this.getList();
        },
        onAdd() {
            this.$refs.addDrawer?.open();
        },
    },
};
</script>
