<template>
    <div class="page addPhase">
        <div class="q-pa-md q-gutter-sm navbar">
            <q-breadcrumbs>
                <q-breadcrumbs-el label="返回" icon="navigate_before" @click="jumpBeforePage" />
                <q-breadcrumbs-el label="创建阶段" />
            </q-breadcrumbs>
            <q-btn color="primary" label="完成" @click="savemove" :loading="state.loading" />
        </div>
        <div class="container">
            <div class="content-block">
                <div class="bold">名称</div>
                <q-input
                    clearable
                    debounce
                    filled
                    maxlength="20"
                    counter
                    v-model="state.addMsg.FlowName"
                    style="width:600px"
                    placeholder="名称"
                    :rules="[val => !!val || '不能为空']"
                />
            </div>
            <div class="content-block">
                <div class="bold">阶段适用范围</div>
                <!-- <q-input clearable debounce filled maxlength="20" counter v-model="state.addMsg.FlowName" style="width:600px"
                placeholder="名称" :rules="[val => !!val || '不能为空']" />-->
            </div>
            <div class="content-block">
                <div class="bold">
                    选择使用阶段
                    <span style="font-size: 14px;font-weight: 300;color:rgb(133, 133, 152);">
                        若没有找到可选项，请前往
                        <span style="color:#3470ff;cursor: pointer;" @click="stageManagement">"阶段管理"</span>进行
                    </span>
                </div>
                <div style="display:flex;align-items: center;">
                    <div class="all-stage" :style="{ height: state.getheight + 'px' }">
                        <p class="select-item-title">全部阶段</p>
                        <div class v-for="(x,y) in state.StageList" :key="y">
                            <q-checkbox
                                v-model="state.addMsg.UseStage"
                                :val="x.Id"
                                :label="x.Name"
                                :disable="x.IsDefault == 0 ? false : true"
                                v-if="x.Type == 1"
                                @update:model-value="getusestageName"
                            />
                        </div>
                    </div>
                    <div class="right-arrow">
                        <i class="el-icon-arrow-right"></i>
                    </div>
                    <div class="all-stage" :style="{ height: state.getheight + 'px' }">
                        <p class="select-item-title">已选阶段</p>
                        <div v-for="(x,y) in state.UseStageName" :key="y">
                            <div style="height:40px;line-height: 40px;"  v-if="x.IsDefault == 0">
                                <span >{{ x.Name }}</span>
                            </div>
                        </div>
                        <div
                          
                            v-for="(x,y) in state.UseStageName"
                            :key="y"
                        >
                            <span v-if="x.IsDefault == 1" style="color: #ccc;height:40px;line-height: 40px;">{{ x.Name }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="state.StageList">
                <div v-for="(x,y) in state.StageList" :key="y">
                    <div class="content-block" v-if="x.Type == 2">
                        <div class="bold" v-if="x.Name == '已输单'">
                            选择输单原因
                            <span
                                style="font-size: 14px;font-weight: 300;color:rgb(133, 133, 152);"
                            >
                                若没有找到可选项，请前往
                                <span
                                    style="color:#3470ff;cursor: pointer;"
                                    @click="stageManagement"
                                >"阶段管理"</span>进行
                            </span>
                        </div>
                        <div class="bold" v-if="x.Name == '无效'">
                            选择无效原因
                            <span
                                style="font-size: 14px;font-weight: 300;color:rgb(133, 133, 152);"
                            >
                                若没有找到可选项，请前往
                                <span
                                    style="color:#3470ff;cursor: pointer;"
                                    @click="stageManagement"
                                >"阶段管理"</span>进行
                            </span>
                        </div>
                        <div style="display:flex;align-items: center;flex-wrap: wrap;">
                            <div v-if="x.Name =='已输单'">
                                <q-checkbox
                                    v-model="state.addMsg.LoseCause"
                                    v-for="(item,index) in x.OptionsList"
                                    :key="index"
                                    :val="item.Id"
                                    :label="item.Name"
                                />
                            </div>

                            <div v-if="x.Name =='无效'">
                                <q-checkbox
                                    v-model="state.addMsg.InvalidCause"
                                    v-for="(item,index) in x.OptionsList"
                                    :key="index"
                                    :val="item.Id"
                                    :label="item.Name"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, } from 'vue'
import router from '@/router/index'
import customerService from '@/api/customer'
import { useQuasar } from 'quasar'


export default defineComponent({

    setup() {
        const $q = useQuasar()
        const state: any = reactive({
            addMsg: {
                Id: 0,
                FlowName: '',
                DeptEmpList: [],
                UseStage: [],
                LoseCause: [],
                InvalidCause: [],
            },
            StageList: [],
            gettypeoneList: [],
            getheight: 270,
            loading: false,
            UseStageName: [],
        })
        const jumpBeforePage = () => {
            router.push({
                path: '/customerSetup',
                query: {
                    type:'phase'
                }
            })
        }

        const getList = () => {
            customerService.getCustomerStageList({}).then((res) => {
                if (res.data.Code == 1) {
                    state.StageList = res.data.Data;
                    state.gettypeoneList = []
                    state.StageList.forEach(x => {
                        if (x.Type == 1) {
                            if (x.IsDefault == 1) {
                                state.addMsg.UseStage.push(x.Id)
                            }
                            state.gettypeoneList.push(x)
                        }
                    })
                    if (state.gettypeoneList.length > 5) {//阶段数量大于5个的时候
                        state.getheight = 71 + Number(state.gettypeoneList.length) * 40
                    }
                    getusestageName()
                    // if (this.$route.query && this.$route.query.FlowId) {//如果有的话 调接口
                    //     this.FlowId = this.$route.query.FlowId
                    //     this.getdetails()
                    // }
                } else {//如果移动失败 重新获取列表

                }
            })
        }
        const compare = (property: string) => {
            return function (a, b) {
                var value1 = a[property];
                var value2 = b[property];
                return value1 - value2;
            }
        }
        const getusestageName = () => {
            state.UseStageName = []
            if (state.addMsg.UseStage && state.addMsg.UseStage.length > 0) {
                state.addMsg.UseStage.forEach(x => {
                    state.StageList.forEach(j => {
                        if (x == j.Id) {
                            state.UseStageName.push(j)
                        }
                    })
                })
                state.UseStageName = state.UseStageName.sort(compare('Sort'))
            }
        }
        const stageManagement = () => {
            router.push({
                path: '/editor/manageStageRange',
                query: {

                }
            })
        }
        const savemove = () => {
            $q.notify({
                type: 'negative',
                message: '不能删除',
                position: 'top'
            })
        }
        onMounted(() => {
            getList()
        })
        return {
            state,
            jumpBeforePage,
            getList,
            getusestageName,
            compare,
            stageManagement,
            savemove
        }
    }

})

</script>
<style lang="scss" scoped>
.page {
    min-height: 100vh;
    background-color: #f4f4f6;
    padding-bottom: 20px;
    padding-top: 80px;

    .mt20 {
        margin-top: 90px;
    }
}

.navbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    font-size: 16px;
    border-bottom: 1px solid #d7d7d7;
    background-color: #fff;
    position: fixed;
    /* left: 0; */
    top: 0;
    right: 0;
    z-index: 9;
}

.container {
    margin: 0 auto;
    width: 1087px;

    .content-block {
        padding: 30px 20px;
        border-radius: 8px;
        background-color: #fff;
        margin-top: 20px;

        .fission-title {
            color: #000;
            font-size: 18px;
            font-weight: 600;
        }

        .fission-subtitle {
            color: #000;
            font-weight: bold;
            margin-top: 15px;
            margin-bottom: 15px;
            font-size: 14px;
        }

        .departs {
            .depart-title {
                font-size: 14px;

                .per {
                    height: 16px;
                    width: 2px;
                    display: inline-block;
                    margin: 0 15px;
                    background: #d7d7d7;
                }
            }
        }
    }

    .btn {
        display: flex;
        align-items: center;
        margin-top: 24px;
        margin-left: 56px;
        margin-bottom: 30px;
    }

    .bold {
        font-weight: 760;
        font-size: 16px;
        color: #333;
        border-left: 3px solid #3470ff;
        margin-bottom: 20px;
        margin-left: -20px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.addPhase .all-stage {
    width: 300px;
    padding: 20px 45px;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    min-height: 260px;
}

.addPhase .select-item-title {
    font-size: 14px;
    font-weight: 800;
    padding-bottom: 10px;
}

.addPhase .right-arrow {
    width: 28px;
    height: 28px;
    background: #e7e7e7;
    border-radius: 50%;
    align-self: center;
    line-height: 28px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    margin: 0 30px;
}

.addPhase .user_lists {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}
</style>