<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) => {
            console.log(Id, Type)
            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>