<template>
    <div class="q-pa-md">
        <div class="q-gutter-lg">
            <q-radio
                v-model="configMsg.ClueType"
                :val="1"
                label="自动分配"
                @update:model-value="configChange"
            ></q-radio>
            <q-radio
                v-model="configMsg.ClueType"
                :val="2"
                label="手动分配"
                @update:model-value="configChange"
            ></q-radio>
        </div>
        <div class="q-pa-md" v-if="configMsg.ClueType === 1">
            <div class="aoto-matic-header">
                若客户满足多条规则，会优先按照编号顺序执行规则
                <q-btn
                    color="primary"
                    label="+新增规则"
                    style="margin-left: 10px;"
                    @click="jumpPage('/editor/editRule')"
                />
            </div>
            <table class="payTable">
                <thead>
                    <tr>
                        <th>排序</th>
                        <!-- <th>查询类型</th> -->
                        <th>规则</th>
                        <th>部门列表</th>
                        <th>人员列表</th>
                        <th>分配方式</th>
                        <th width="10%">编辑</th>
                        <th width="5%"></th>
                    </tr>
                </thead>
                <tr v-if="data.length == 0 && defaultData.length == 0">
                    <td :colspan="9" align="center">暂无数据</td>
                </tr>
                <template v-if="defaultData.length > 0">
                    <tr v-for="(item,index) in defaultData" :key="index">
                        <td></td>
                        <!-- <td>
                            <span v-if="item.RuleSelectType === 1">并且</span>
                            <span v-if="item.RuleSelectType === 2">或者</span>
                        </td>-->
                        <td>
                            <div v-if="item.ConditionStrList.length > 0">
                                <div v-for="(e,i) in item.ConditionStrList" :key="i">{{ e }}</div>
                            </div>
                            <div v-else>未匹配设定规则的客户</div>
                        </td>
                        <td>
                            <div v-if="item.DeptList.length > 0">
                                <div v-for="(e) in item.DeptList" :key="e.DeptId">{{ e.DeptName }}</div>
                            </div>
                            <div v-else>-</div>
                        </td>
                        <td>
                            <div v-if="item.EmpList.length > 0">
                                <div v-for="(e) in item.EmpList" :key="e.Id">{{ e.EmployeeName }}</div>
                            </div>
                            <div v-else>-</div>
                        </td>
                        <td>
                            <span v-if="item.RuleAllotWay === 1">依次轮流</span>
                            <span v-if="item.RuleAllotWay === 2">随机分配</span>
                        </td>
                        <td>
                            <q-btn
                                flat
                                size="xs"
                                icon="edit"
                                style="font-weight:400;color: #3FC4FF"
                                class="q-mr-xs"
                                label="编辑"
                                @click="jumpPage('/editor/editRule', item.Id)"
                            />
                        </td>
                        <td></td>
                    </tr>
                </template>
                <draggable
                    v-model="data"
                    tag="tbody"
                    item-key="Id"
                    @update="datadragEnd"
                    v-if="data.length > 0"
                    :move="getDragId"
                >
                    <template #item="{ element, index }">
                        <tr>
                            <td>
                                <span style="color:#606266">{{ index + 1 }}</span>
                            </td>
                            <!-- <td>
                                <span v-if="element.RuleSelectType === 1">并且</span>
                                <span v-if="element.RuleSelectType === 2">或者</span>
                            </td>-->
                            <td>
                                <div v-if="element.ConditionStrList.length > 0">
                                    <div v-for="(e,i) in element.ConditionStrList" :key="i">{{ e }}</div>
                                </div>
                                <div v-else>未匹配设定规则的客户</div>
                            </td>
                            <td>
                                <div v-if="element.DeptList.length > 0">
                                    <div
                                        v-for="(e) in element.DeptList"
                                        :key="e.DeptId"
                                    >{{ e.DeptName }}</div>
                                </div>

                                <div v-else>-</div>
                            </td>
                            <td>
                                <div v-if="element.EmpList.length > 0">
                                    <div
                                        v-for="(e) in element.EmpList"
                                        :key="e.Id"
                                    >{{ e.EmployeeName }}</div>
                                </div>

                                <div v-else>-</div>
                            </td>
                            <td>
                                <span v-if="element.RuleAllotWay === 1">依次轮流</span>
                                <span v-if="element.RuleAllotWay === 2">随机分配</span>
                            </td>
                            <td>
                                <q-btn
                                    flat
                                    size="xs"
                                    icon="edit"
                                    style="font-weight:400;color: #3FC4FF"
                                    class="q-mr-xs"
                                    label="编辑"
                                    @click="jumpPage('/editor/editRule', element.Id)"
                                />
                                <q-btn
                                    v-if="element.IsDefault != 1"
                                    flat
                                    size="xs"
                                    icon="delete"
                                    color="negative"
                                    class="q-mr-xs"
                                    label="删除"
                                    @click="del(element.Id)"
                                />
                            </td>
                            <td>
                                <i class="iconfont icon-drag" style="font-size: 20px;color: #777;"></i>
                            </td>
                        </tr>
                    </template>
                </draggable>
            </table>
        </div>
        <div class="q-pa-md manual" v-if="configMsg.ClueType === 2">
            <div
                class="box-manual"
                :class="{ 'checked-border': configMsg.ClueAllotWay == 1 }"
                @click="configMsg.ClueAllotWay = 1; configChange()"
            >
                <q-icon name="autorenew" size="lg" />
                <div>按已选员工顺序依次轮流分配</div>
                <div class="right" v-if="configMsg.ClueAllotWay == 1">
                    <q-icon name="check" class="check-icon" />
                </div>
            </div>
            <div
                class="box-manual"
                :class="{ 'checked-border': configMsg.ClueAllotWay == 2 }"
                @click="configMsg.ClueAllotWay = 2; configChange()"
            >
                <q-icon name="shuffle" size="lg" />
                <div>按已选员工随机分配</div>
                <div class="right" v-if="configMsg.ClueAllotWay == 2">
                    <q-icon name="check" class="check-icon" />
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import {
    ref,
    defineComponent,
    reactive,
    onMounted
} from 'vue'
import draggable from "vuedraggable";
import { Dialog } from 'quasar'
import message from '@/utils/message'
import customerSetService from '@/api/customerSet';
import router from '@/router/index'

interface dataType {
    Id: number,
    RuleSelectType: number,
    IsDefault: number,
    DeptList: Array<any>,
    EmpList: Array<any>,
    RuleAllotWay: number,
    ConditionList: Array<any>,
    ConditionStrList: Array<string>,
    Sort: number
}
interface dataConfigType {
    Id?: number,
    ClueType: number,
    ClueAllotWay: number
}
export default defineComponent({
    components: {
        draggable,
    },
    setup() {
        let defaultData = ref<Array<dataType>>([])
        let data = ref<Array<dataType>>([])
        let dragId = ref(0)
        const getDragId = (e: any) => {
            dragId.value = e.draggedContext.element.Id
        }
        const datadragEnd = (e: any) => {
            let olddragId = 0
            if (e.newIndex > 0) {
                olddragId = data.value[e.newIndex - 1].Id
            } else {
                olddragId = 0
            }
            let msg = {
                RuleId: dragId.value,
                Type: 1,
                TargetId: olddragId,
            }
            setState(msg)
        }
        const getClueList = () => {
            defaultData.value = []
            data.value = []
            customerSetService.getCustomerClueRuleList({}).then(res => {
                res.data.Data.map((item: dataType) => {
                    if (item.IsDefault === 1) {
                        defaultData.value.push(item)
                    } else {
                        data.value.push(item)
                    }
                })
            })
        }
        let configMsg = reactive<dataConfigType>({
            ClueType: 1,// 1手动分配 2自动分配
            ClueAllotWay: 1,// 1依次轮流 2随机分配
        })
        const getCustomerClueRuleConfig = () => {
            customerSetService.getCustomerClueRuleConfig({}).then(res => {
                let data = res.data.Data
                configMsg.ClueType = data.ClueType
                configMsg.ClueAllotWay = data.ClueAllotWay
            })
        }
        const jumpPage = (url: string, Id = 0) => {
            router.push({
                path: url,
                query: {
                    Id
                }
            })
        }
        const del = (id) => {
            Dialog.create({
                title: "提示",
                message: "确认删除？",
                cancel: '取消',
                ok: "确认"
            }).onOk(() => {
                console.log('>>>> OK', id)
                let msg = {
                    RuleId: id,
                    Type: 2,
                }
                setState(msg)
            })
        }
        const configChange = () => {
            customerSetService.setCustomerClueRuleConfig(configMsg).then(res => {
                console.log(228, res.data)
            })
        }

        const setState = (msg) => {
            customerSetService.setCustomerClueRuleState(msg).then(res => {
                message.successMsg(res.data.Message)
                if (msg.Type == 2) {
                    getClueList()
                }
            })
        }
        onMounted(() => {
            getClueList();
            getCustomerClueRuleConfig();
        })
        return {
            getDragId,
            configChange,
            defaultData,
            data,
            datadragEnd,
            jumpPage,
            configMsg,
            del
        }
    }
})

</script>
<style lang="scss" scoped>
.payTable {
    width: 100%;
    border-collapse: collapse;
}

.payTable tr th {
    background: #fff;
    height: 60px;
    font-size: 12px;
    font-weight: bold;
    color: #2d2d2d;
    background: #dddee0;
}

.payTable tr {
    background: #fff;
    text-align: center;
    height: 60px;
}

.payTable tr td {
    font-size: 13px;
    text-align: center;
    color: #2d2d2d;
    box-sizing: border-box;
    padding: 10px;
    font-weight: bold;
    border-bottom: 1px solid #e5e5e5;
}

.aoto-matic-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
    margin-left: 2px;
    color: #858598;
    font-size: 14px;
}

.manual {
    height: 100%;
    display: flex;
    margin: 0 auto;
    width: 800px;
    justify-content: space-around;
    margin-top: 191px;

    .box-manual {
        cursor: pointer;
        width: 311px;
        height: 198px;
        background: #f9f9f9;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        position: relative;

        .right {
            position: absolute;
            right: -20px;
            bottom: -20px;
            display: block;
            width: 0;
            height: 0;
            transform: rotate(45deg);
            border: 20px solid transparent;
            border-left: 20px solid #3470ff;
            .check-icon {
                position: absolute;
                top: -8px;
                left: -19px;
                transform: rotate(-45deg);
                font-size: 14px;
                font-weight: 700;
                color: #fff;
            }
        }
    }
}

.checked-border {
    background-color: #edf2fd !important;
    border: 2px solid #3470ff !important;
    color: #3470ff;
}
</style>
