<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-btn color="accent" label="选择部门/成员" @click="choicemember" />
                <div
                    class="user_lists"
                    v-if="state.addMsg.DeptEmpList && state.addMsg.DeptEmpList.length > 0"
                >
                    <div v-for="(x,y) in state.addMsg.DeptEmpList" :key="y">
                        <q-chip
                            color="primary"
                            v-if="x.Id.slice(0, 1) == '1'"
                            text-color="white"
                            icon="work"
                            :label="x.DeptName"
                        ></q-chip>
                        <q-chip
                            color="primary"
                            v-if="x.Id.slice(0, 1) == '2'"
                            text-color="white"
                            icon="person"
                            :label="x.DeptName"
                        ></q-chip>
                    </div>
                </div>
            </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="arrow_forward_ios"></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>
        <departmentStaff
            v-model="state.showDialog"
            v-model:defaultArray="state.defaultArray"
            nodeKey="newId"
            labelKey="DeptName"
            childrenKey="ChildList"
            strategy="leaf"
            :treeData="state.dataTree"
            @select="getdpt"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, } from 'vue'
import router from '@/router/index'
import customerSetService from '@/api/customerSet'
import departmentStaff from '@/components/common/departmentStaff.vue'
import customerService from '@/api/customer'

import { useQuasar } from 'quasar'


export default defineComponent({
    components: {
        departmentStaff
    },
    setup() {
        const $q = useQuasar()
        const state: any = reactive({
            addMsg: {
                Id: 0,
                FlowName: '',
                DeptEmpList: [],
                UseStage: [],
                LoseCause: [],
                InvalidCause: [],
            },
            StageList: [],
            gettypeoneList: [],
            getheight: 270,
            loading: false,
            UseStageName: [],
            showDialog: false,
            defaultArray: [],
            dataTree: [],
            FlowId: 0,//编辑上个页面带过来的
        })
        const jumpBeforePage = () => {
            router.push({
                path: '/customerSetup',
                query: {
                    type: 'phase'
                }
            })
        }

        const getList = () => {
            customerSetService.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 = () => {
            let data = JSON.parse(JSON.stringify(state.addMsg))
            if (data.FlowName == '') {
                $q.notify({
                    type: 'negative',
                    message: '请填写名称',
                    position: 'top'
                })
                return
            }
            if (data.DeptEmpList.length == 0) {//判断部门
                $q.notify({
                    type: 'negative',
                    message: '请选择阶段适用范围',
                    position: 'top'
                })
                return
            } else {
                data.DeptEmpList = [];
                if (state.addMsg.DeptEmpList && state.addMsg.DeptEmpList.length > 0) {
                    state.addMsg.DeptEmpList.forEach(x => {
                        let obj = {
                            Id: x.Id.split('-')[1],
                            Name: x.Name,
                            Type: x.Type,
                        }
                        data.DeptEmpList.push(obj)
                    })
                }
            }
            if (data.UseStage.length > 0) {
                data.UseStage = data.UseStage.join(',')
            } else {
                data.UseStage = ''
            }
            if (data.LoseCause.length > 0) {
                data.LoseCause = data.LoseCause.join(',')
            } else {
                data.LoseCause = ''
            }
            if (data.InvalidCause.length > 0) {
                data.InvalidCause = data.InvalidCause.join(',')
            } else {
                data.InvalidCause = ''
            }
            customerSetService.setCustomerStageFlowInfo(data).then(res => {
                if (res.data.Code == 1) {
                    $q.notify({
                        icon: 'iconfont icon-chenggong',
                        color: 'accent',
                        timeout: 2000,
                        message: res.data.Message,
                        position: 'top'
                    })
                    jumpBeforePage()
                }

            })


        }
        let choicemember = () => {
            state.showDialog = true

        }
        let getEmployeeData = () => {
            customerService.getEmployeeData({}).then(res => {
                state.dataTree = res.data.Data
                // 重组唯一id
                if (state.dataTree.length == 0) return
                state.dataTree.forEach(x => {
                    x.newId = x.DataType + '-' + x.DeptId
                    if (x.ChildList && x.ChildList.length > 0) {
                        getChildList(x.ChildList)
                    }
                })
            })
        }
        let getChildList = (ChildList: Array<any>) => {
            ChildList.forEach(x => {
                x.newId = x.DataType + '-' + x.DeptId
                if (x.ChildList && x.ChildList.length > 0) {
                    getChildList(x.ChildList)
                }
            })
        }
        let getdpt = (val) => {
            state.addMsg.DeptEmpList = val
            state.showDialog = false
        }
        let getdetails = (Id: number) => {
            customerSetService.getCustomerStageFlowInfo({ FlowId: Id }).then(res => {
                if (res.data.Code == 1) {
                    state.addMsg = res.data.Data
                    if (state.addMsg.UseStage.length != '') {
                        state.addMsg.UseStage = state.addMsg.UseStage.split(',').map(Number)
                    } else {
                        state.addMsg.UseStage = []
                    }
                    if (state.addMsg.LoseCause.length != '') {
                        state.addMsg.LoseCause = state.addMsg.LoseCause.split(',').map(Number)
                    } else {
                        state.addMsg.LoseCause = []
                    }
                    if (state.addMsg.InvalidCause.length != '') {
                        state.addMsg.InvalidCause = state.addMsg.InvalidCause.split(',').map(Number)
                    } else {
                        state.addMsg.InvalidCause = []
                    }
                    state.defaultArray= []
                    state.addMsg.DeptEmpList.forEach(x => {
                        x.Id = x.Type+'-'+x.Id
                        state.defaultArray.push(x.Id)
                    })
                    getusestageName()

                }
            })
        }
        onMounted(() => {
            getList()
            getEmployeeData()
            if (router.currentRoute.value.query && router.currentRoute.value.query.FlowId) {
                state.FlowId = router.currentRoute.value.query.FlowId as string
                getdetails(state.FlowId)
            }
        })
        return {
            state,
            jumpBeforePage,
            getList,
            getusestageName,
            compare,
            stageManagement,
            savemove,
            choicemember,
            getEmployeeData,
            getChildList,
            getdpt,
            getdetails
        }
    }

})

</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>