<template>
    <div class="customerPhase page-body">
        <div style="display: flex;align-items: center;justify-content: space-between;">
            <div style="display: flex;align-items: center;">
                <q-btn v-if="state.data.length < 20" color="accent" style="margin-bottom: 10px;" class="q-mr-md"
                    label="创建阶段流程" @click="jumpPage('/editor/createStageRange')" size="sm"></q-btn>
                <span style="margin-left: 20px;color: rgb(133, 133, 152);">已添加：{{ state.data.length }}/20</span>
            </div>
            <q-btn color="white" text-color="black" style="margin-bottom: 10px;" class="q-mr-md" label="阶段管理" size="sm"
                @click="jumpPage('/editor/manageStageRange')"></q-btn>
        </div>
        <table class="payTable">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>适用范围</th>
                    <th>启用</th>
                    <th>阶段</th>
                    <th width="13%">操作信息</th>
                    <th width="12%">操作</th>
                </tr>
            </thead>
            <tr v-if="state.data.length == 0">
                <td :colspan="6" align="center">暂无数据</td>
            </tr>
            <tr v-for="(item,index) in state.data" :key="index">
                <td>
                    <span>{{ item.FlowName }}</span>
                </td>
                <td>
                    <div v-if="item.DeptEmpList && item.DeptEmpList.length > 0">
                        <span v-for="(x,y) in  item.DeptEmpList" :key="y">
                            <q-chip color="blue-1" text-color="blue" icon="folder" size="sm" v-if="x.Type == 1">
                                {{ x.Name }}</q-chip>
                            <q-chip color="green-1" text-color="green" icon="person" size="sm" v-if="x.Type == 2">
                                {{ x.Name }}</q-chip>
                        </span>
                    </div>
                    <span v-else>未适配其他规则的阶段</span>
                </td>

                <td>
                    <q-toggle v-if="item.IsDefault == 1" v-model="item.Enable" :true-value="1" :false-value="2"
                        icon="lock" disable />
                    <q-toggle v-else v-model="item.Enable" :true-value="1" :false-value="2"
                        @update:model-value="setFiledState(item.Id, 1)" />
                </td>
                <td>
                    <span v-for="(x,y) in  item.StageList"
                        :key="y">{{ x }}{{ item.StageList.length != y + 1 ? '->' : '' }}</span>
                </td>
                <td>
                    <div>{{ item.UpdateByName }}</div>
                    <div>{{ item.UpdateTime }}</div>
                </td>
                <td>
                    <q-btn v-if="item.IsDefault != 1" flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF"
                        class="q-mr-xs" label="编辑" @click="goedit(item.Id)" />
                    <q-btn v-if="item.IsDefault != 1" flat size="xs" icon="delete" color="negative" class="q-mr-xs"
                        label="删除" @click="godelete(item.Id)" />
                </td>
            </tr>
        </table>
    </div>
</template>
<script lang="ts">
    import {
        defineComponent,
        onMounted,
        reactive
    } from 'vue'
    import customerSetService from '@/api/customerSet'
    import {
        useQuasar
    } from 'quasar'
    import router from '@/router/index'

    export default defineComponent({
        setup() {
            const $q = useQuasar()
            const state = reactive({
                data: [],
            })
            const getList = () => {
                customerSetService.getCustomerStageFlowList({
                    Enable: 0
                }).then((res) => {
                    if (res.data.Code == 1) {
                        state.data = res.data.Data
                    } else { //如果移动失败 重新获取列表

                    }
                })
            }
            const godelete = (Id: number) => {
                $q.dialog({
                    title: "提示信息",
                    message: '是否删除该阶段流程',
                    cancel: {
                        label: "取消",
                        flat: true
                    },
                    ok: {
                        label: "确认",
                        flat: true,
                    }
                }).onOk(() => {
                    setFiledState(Id, 2)
                });
            }
            const setFiledState = (Id: number, Type: number) => {
                let msg = {
                    Type: Type,
                    FlowId: Id,
                }
                customerSetService.setCustomerStageFlowState(msg).then((res) => {
                    if (res.data.Code == 1) {
                        $q.notify({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: res.data.Message,
                            position: 'top'
                        })
                        getList()
                    } else { //如果移动失败 重新获取列表

                    }
                })
            }
            const jumpPage = (url: string) => {
                router.push({
                    path: url,
                    query: {

                    }
                })
            }
            const goedit = (Id: number) => {
                router.push({
                    path: '/editor/createStageRange',
                    query: {
                        FlowId: Id
                    }
                })
            }

            onMounted(() => {
                getList()
            })
            return {
                getList,
                state,
                setFiledState,
                godelete,
                jumpPage,
                goedit
            }
        }
    })
</script>
<style>
    .customerPhase .payTable {
        width: 100%;
        border-collapse: collapse;
    }
    .customerPhase .payTable tr th {
        background: #fff;
        height: 40px;
        font-size: 12px;
        font-weight: bold;
        color: #2d2d2d;
        background: #f5f5fa;
    }

    .customerPhase .payTable tr {
        background: #fff;
        text-align: center;
        height: 40px;
    }

    .customerPhase .payTable tr td {
        font-size: 13px;
        text-align: center;
        color: #2d2d2d;
        padding: 10px 0;
        font-weight: bold;
        border-bottom: 1px solid #e5e5e5;
    }
</style>