<template>
    <div class="page">
        <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" style="margin-bottom: 30px;">跟进阶段</div>
                <draggable v-model="state.followupStage" item-key="Id">
                    <template #item="{ element, index }">
                        <div style="display: flex;align-items: flex-start;">
                            <div style="width: 57px;margin-top: 5px;">
                                <i
                                    class="iconfont icon-drag"
                                    style="font-size: 25px;color: #777;margin: 0 10px;"
                                ></i>
                            </div>
                            <q-input
                                clearable
                                debounce
                                filled
                                maxlength="10"
                                counter
                                v-model="element.Name"
                                style="width:500px"
                                placeholder="名称"
                                :rules="[val => !!val || '不能为空']"
                            />
                            <q-btn
                                flat
                                size="md"
                                icon="delete"
                                color="negative"
                                class="q-mr-xs"
                                style="margin-left: 10px;margin-top: 10px;"
                                label
                                @click="getStageDel(element.Id, index)"
                            />
                        </div>
                    </template>
                </draggable>
                <div>
                    <div v-for="(x,y) in state.followupStage_d" :key="y" style="display: flex;">
                        <div style="width: 57px;height: 1px;"></div>
                        <q-input
                            clearable
                            debounce
                            filled
                            v-model="x.Name"
                            style="width:500px"
                            disable
                            placeholder="名称"
                            :rules="[val => !!val || '不能为空']"
                        />
                    </div>
                </div>
                <div class="btn">
                    <q-btn
                        v-if="state.followupStage.length < 30"
                        color="accent"
                        class="q-mr-md"
                        label="添加"
                        icon="add"
                        @click="state.followupStage.push({
                            Id: 0,
                            IsDefault: 0,
                            Name: '',
                            OptionsList: [],
                            Sort: 0,
                            Type: 1
                        })"
                        style="width: 100px;"
                    />
                    <span style="color:#858598">已设/可设上限：{{ state.followupStage.length }}/30</span>
                </div>
            </div>
            <div class="content-block">
                <div class="bold">结束跟进</div>
                <div v-for="(x,y) in state.reasonList" :key="y">
                    <ul style="margin-left: 30px;margin-top: 10px;" v-if="x.Type == 2">
                        <li>
                            <q-input
                                clearable
                                filled
                                debounce
                                placeholder="名称"
                                v-model="x.Name"
                                style="width:500px"
                                disable
                            />
                        </li>
                        <li class="bold" style="margin: 10px 0 30px;" v-if="x.Name == '已输单'">输单原因</li>
                        <li class="bold" style="margin: 10px 0 30px;" v-if="x.Name == '无效'">无效原因</li>
                        <draggable v-model="x.OptionsList" item-key="Id">
                            <template #item="{ element, index }">
                                <div style="display: flex;">
                                    <div style="width: 31px;">
                                        <i
                                            class="iconfont icon-weiyi"
                                            style="font-size: 14px;color: #777;margin: 0 10px;"
                                        ></i>
                                    </div>
                                    <q-input
                                        clearable
                                        debounce
                                        filled
                                        maxlength="10"
                                        counter
                                        v-model="element.Name"
                                        style="width:500px"
                                        placeholder="名称"
                                        :rules="[val => !!val || '不能为空']"
                                    />
                                    <q-btn
                                        flat
                                        size="sm"
                                        icon="delete"
                                        color="negative"
                                        class="q-mr-xs"
                                        style="margin-left: 10px;"
                                        label
                                        @click="setCauseDel(y, index, x.Name, element.Id)"
                                    />
                                </div>
                            </template>
                        </draggable>
                    </ul>
                    <div class="btn" style="margin-left: 61px" v-if="x.Type == 2">
                        <q-btn
                            v-if="x.OptionsList.length < 30"
                            color="accent"
                            class="q-mr-md"
                            label="添加"
                            icon="add"
                            @click="state.reasonList[y].OptionsList.push({ Id: 0, Name: '', disable: false })"
                            style="width: 100px;"
                        />
                        <span style="color:#858598">已设/可设上限：{{ x.OptionsList.length }}/30</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import router from '@/router/index'
import customerService from '@/api/customer'
import draggable from "vuedraggable";
import { useQuasar } from 'quasar'


export default defineComponent({
    components: {
        draggable
    },
    setup() {
        const $q = useQuasar()
        const state: any = reactive({
            addMsg: [],
            followupStage: [],
            followupStage_d: [],
            reasonList: [],
            loading: false
        })
        const jumpBeforePage = () => {
            // router.go(-1)
            router.push({
                path: '/customerSetup',
                query: {
                    type:'phase'
                }
            })
        }

        const getList = () => {
            customerService.getCustomerStageList({}).then((res) => {
                if (res.data.Code == 1) {
                    state.addMsg = res.data.Data
                    state.followupStage = [];
                    state.followupStage_d = [];
                    state.reasonList = [];
                    let orderEntered = false //判读是否有已输单
                    let invalid = false //无效
                    let list = JSON.parse(JSON.stringify(state.addMsg))
                    list.forEach(x => {
                        if (x.Type == 1) {
                            if (x.IsDefault == 0) {
                                state.followupStage.push(x)
                            } else {
                                state.followupStage_d.push(x)
                            }
                        }

                        if (x.Type == 2) {
                            state.reasonList.push(x)
                            if (x.Name == '已输单') {
                                orderEntered = true
                            }
                            if (x.Name == '无效') {
                                invalid = true
                            }
                        }
                    })
                    if (orderEntered == false) { //没有的话 加一个已输单
                        let obj = {
                            Id: 0,
                            IsDefault: 0,
                            Name: '已输单',
                            OptionsList: [],
                            Sort: 0,
                            Type: 2
                        };
                        state.reasonList.push(obj)
                    }
                    if (invalid == false) { //没有的话 加一个无效
                        let obj = {
                            Id: 0,
                            IsDefault: 0,
                            Name: '无效',
                            OptionsList: [],
                            Sort: 0,
                            Type: 2
                        };
                        state.reasonList.push(obj)
                    }
                } else {//如果移动失败 重新获取列表

                }
            })
        }
        const getStageDel = (Id: number, index: number) => {
            if (Id > 0) {//判断是否是新加 
                customerService.validataCustomerStageDel({ StageId: Id }).then((res) => {
                    if (res.data.Code == 1) {
                        if (res.data.Data.UseState == false) {//可以删除
                            state.followupStage.splice(index, 1)
                        } else {
                            $q.notify({
                                type: 'negative',
                                message: '不能删除',
                                position: 'top'
                            })
                        }
                    } else {//如果移动失败 重新获取列表

                    }
                })
            } else {//不是的话直接删除
                state.followupStage.splice(index, 1)
            }

        }
        const setCauseDel = (y: number, index: number, Name: string, Id: number) => {
            let Type = 1
            if (Name == '无效') Type = 2
            let data = {
                CauseId: Id,
                Type: Type
            }

            if (Id > 0) {
                customerService.validataCustomerCauseDel(data).then((res) => {
                    if (res.data.Code == 1) {
                        if (res.data.Data.UseState == false) {//可以删除
                            state.reasonList[y].OptionsList.splice(index, 1)
                        } else {
                            $q.notify({
                                type: 'negative',
                                message: '不能删除',
                                position: 'top'
                            })
                        }
                    } else {//如果移动失败 重新获取列表

                    }
                })
            } else {
                state.reasonList[y].OptionsList.splice(index, 1)
            }

        }
        const savemove = () => {
            var show = ref(false)
            for (let i = 0; i < state.followupStage.length; i++) {//判断根据阶段的值填写没有
                let x = state.followupStage[i]
                if (x.Name == '' || x.Name == null) {
                    $q.notify({
                        type: 'negative',
                        message: '请填写跟进阶段列表选项值',
                        position: 'top'
                    })
                    return

                }
            }
            for (let i = 0; i < state.reasonList.length; i++) {
                let x = state.reasonList[i]
                if (show.value == true) {
                    return
                }
                let list = JSON.parse(JSON.stringify(x.OptionsList))
                let maxnum = list.sort((a, b) => { return b.Id - a.Id })[0].Id

                for (let j = 0; j < x.OptionsList.length; j++) {
                    let z = x.OptionsList[j]

                    if (z.Name == '' || z.Name == null) {
                        $q.notify({
                            type: 'negative',
                            message: '请填写' + x.Name + '原因值',
                            position: 'top'
                        })
                        show.value = true
                        return
                    }
                    if (z.Id == 0) {
                        z.Id = maxnum + 1;
                        maxnum++
                    }
                }
            }
            state.addMsg = []
            state.addMsg = (state.followupStage.concat(state.followupStage_d)).concat(state.reasonList)
            state.addMsg.forEach((x, i) => {
                x.Sort = i + 1
            })
            state.loading = true
            customerService.setCustomerStageInfo(state.addMsg).then((res) => {
                if (res.data.Code == 1) {
                    state.loading = false
                    $q.notify({
                        icon: 'iconfont icon-chenggong',
                        color: 'accent',
                        timeout: 2000,
                        message: res.data.Message,
                        position: 'top'
                    })
                    getList()
                } else {//如果移动失败 重新获取列表
                    state.loading = false

                }
            })
        }
        onMounted(() => {
            getList()
        })
        return {
            state,
            jumpBeforePage,
            getList,
            getStageDel,
            setCauseDel,
            savemove,
        }
    }

})

</script>
<style lang="scss" scoped>
.page {
    /* 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: 30px;

        .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: 700;
        font-size: 14px;
        color: #333;
    }
}
</style>