<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
                    color="accent"
                    style="margin-bottom: 10px;"
                    class="q-mr-md"
                    label="新增分配规则 "
                    @click="Addallocation('/editor/editlaqun')"
                    size="sm"
                ></q-btn>
                <span style="margin-left: 10px;color: #3470ff;cursor: pointer;" @click="icon = true">查看拉群分配流程</span>
            </div>
            <div style="display: flex;align-items: center;">
                <span
                    style="font-size: 14px; color: #858598;margin-right: 10px;"
                >若客户满足多条规则，会优先按照编号顺序执行规则</span>
                <q-btn
                    color="accent"
                    style="margin-bottom: 10px;"
                    class="q-mr-md"
                    label="新增分配规则 "
                    @click="Addallocation('/editor/editlaqun')"
                    size="sm"
                ></q-btn>
            </div>
        </div>
        <q-dialog v-model="icon">
            <q-card style="max-width: 1300px;">
                <q-card-section class="row items-center q-pb-none">
                    <div class="text-h6">拉群分配客户流程 <span style="color: #858598;font-size: 14px;">（销售分配更公平，客服拉群更便捷）</span></div>
                    <q-space />
                    <q-btn icon="close" flat round dense v-close-popup />
                </q-card-section>
                <div style="display: flex;align-items: flex-start;justify-content: space-around;padding: 0 40px">
                    <div class="text-wrapper" v-for="(x,y) in textList " :key='y'>{{x.Name}}</div>
                </div>
                <div class="flow-line">
                    <div class="flow-line-slide1" style="width: 110px;"></div>
                    <div class="flow-line-center" style="width: 220px;"></div>
                    <div class="flow-line-center" style="width: 220px;"></div>
                    <div class="flow-line-center" style="width: 220px;"></div>
                    <div class="flow-line-center" style="width: 220px;"></div>
                    <div class="flow-line-slide2" style="width: 110px;">
                        <div class="right-arrow"></div>
                    </div>
                </div>
                <div class="flow-content-wrapper" style="padding: 0 40px">
                    <div class="flow-content">
                        <div class="arrow"></div>
                        <div>
                            <li class='setting-text'> 选择可拉群的SDR </li>
                            <li class='setting-text'>  选择适用的客户  </li>
                            <li class='setting-text'>  选择可分配的销售  </li>
                            <li class='setting-text'>  顺序分配或随机分配  </li>
                        </div>
                    </div>
                    <div class="flow-content">
                        <div class="arrow"></div>
                        <img class="flow-image" src="../../../../assets/images/customer/flow1.a3a1048d.png" alt="">
                    </div>
                    <div class="flow-content">
                        <div class="arrow"></div>
                        <img class="flow-image" src="../../../../assets/images/customer/flow2.61729a6c.png" alt="">

                    </div>
                    <div class="flow-content">
                        <div class="arrow"></div>
                        <img class="flow-image" src="../../../../assets/images/customer/flow3.85769e1f.png" alt="">

                    </div>
                    <div class="flow-content">
                        <div class="arrow"></div>
                        <div class="setting-text">自定义销售身份</div>
                        <div class="setting-text">负责人 or 协作人</div>
                    </div>
                   
                </div>
                
            </q-card>
        </q-dialog>
    </div>
</template>
<script  lang="ts">
import {
    defineComponent,
    ref,
    //  onMounted 
} from 'vue'
// import { useQuasar } from 'quasar'
import router from '@/router/index'

export default defineComponent({
    setup() {
        const textList = ref < Array < {Name:string} >> ([
            {Name:' 设置分配规则 '},
            {Name:'  SDR（售前客服) 在客户详情点击“更多”  '},
            {Name:'  点击“拉群分配客户”  '},
            {Name:'  建群成功，系统自动分配销售  '},
            {Name:'  根据设置自动指定负责人  '},
        ])
        const Addallocation = (url: string) => {//新增分配规则
            router.push({
                path: url,
                query: {

                }
            })
        }
        return {
            Addallocation,
            icon:ref(false),
            textList
        }
    }
})
</script>
<style lang="scss">
    .text-wrapper{
        width: 200px;
        font-size: 14px;
        color: #333;
        font-weight: 500;
        line-height: 20px;
        text-align: center;
        margin: 20px 6px 0;
    }
    .flow-line{
        margin-top: 20px;
        display: flex;
        justify-content: center;
        .flow-line-slide1{
            height: 30px;
            border-top: 1px dashed #3470ff;
            border-right: 1px dashed #3470ff;
        }
        .flow-line-center{
            border-top: 1px dashed #3470ff;
            border-right: 1px dashed #3470ff;
            height: 30px;
        }
        .flow-line-slide2{
            position: relative;
            height: 30px;
            border-top: 1px dashed #3470ff;
            .right-arrow{
                position: absolute;
                top: -7px;
                right: -9px;
                border-top: 7px solid transparent;
                border-bottom: 7px solid transparent;
                border-left: 9px solid #3470ff;
            }
        }

    }
    .flow-content-wrapper{
        height: 430px;
        display: flex;
        justify-content: space-around;
        .flow-content{
            position: relative;
            width: 220px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .arrow{
                position: absolute;
                top: 0;
                margin: 0 auto;
                height: 0;
                width: 0;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-top: 9px solid #3470ff;
            }
            .setting-text{
                color: #333;
                border-radius: 20px;
                height: 40px;
                line-height: 40px;
                background: #f9f9f9;
                padding: 0 10px;
                margin: 10px 0;
                text-align: center;
                list-style: none outside none;

            }
            .flow-image{
                width: 190px;
                height: 400px;
            }
        }
    }
</style>