<template>
    <div class="q-pa-md">
        <requestGroup/>
        <div class="q-gutter-lg">
            <q-radio v-model="ClueType" :val="1" label="自动分配"></q-radio>
            <q-radio v-model="ClueType" :val="2" label="手动分配"></q-radio>
        </div>
        <div class="q-pa-md" v-if="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>排序</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>
                                <span v-if="item.RuleSelectType === 1">并且</span>
                                <span v-if="item.RuleSelectType === 2">或者</span>
                            </td>
                            <td>
                                <span v-if="item.IsDefault == 1">是</span>
                                <span v-else>否</span>
                            </td>
                            <td>
                                <span>{{ item.DeptList.join(',') }}</span>
                            </td>
                            <td>
                                <span>{{ item.EmpList.join(',') }}</span>
                            </td>
                            <td>
                                <span v-if="item.RuleAllotWay === 1">依次轮流</span>
                                <span v-if="item.RuleAllotWay === 2">随机分配</span>
                            </td>
                            <td>
                                <span>未匹配设定规则的客户</span>
                            </td>
                            <td>
                                <span>{{ item.Sort }}</span>
                            </td>
                            <td>
                                <q-btn
                                    flat
                                    size="xs"
                                    icon="edit"
                                    style="font-weight:400;color: #3FC4FF"
                                    class="q-mr-xs"
                                    label="编辑"
                                   
                                />
                            </td>
                            <td>
                            </td>
                </tr>
                </template>
                <draggable v-model="data" tag="tbody" item-key="Id" @update="datadragEnd" v-if="data.length > 0">
                    <template #item="{ element }">
                        <tr>
                            <td>
                                <span v-if="element.RuleSelectType === 1">并且</span>
                                <span v-if="element.RuleSelectType === 2">或者</span>
                            </td>
                            <td>
                                <span v-if="element.IsDefault == 1">是</span>
                                <span v-else>否</span>
                            </td>
                            <td>
                                <span>{{ element.DeptList.join(',') }}</span>
                            </td>
                            <td>
                                <span>{{ element.EmpList.join(',') }}</span>
                            </td>
                            <td>
                                <span v-if="element.RuleAllotWay === 1">依次轮流</span>
                                <span v-if="element.RuleAllotWay === 2">随机分配</span>
                            </td>
                            <td>
                                <span>{{ element.ConditionStrList.join(',') }}</span>
                            </td>
                            <td>
                                <span>{{ element.Sort }}</span>
                            </td>
                            <td>
                                <q-btn
                                    flat
                                    size="xs"
                                    icon="edit"
                                    style="font-weight:400;color: #3FC4FF"
                                    class="q-mr-xs"
                                    label="编辑"
                                    @click="goedit(element)"
                                />
                                <q-btn
                                    v-if="element.IsDefault != 1"
                                    flat
                                    size="xs"
                                    icon="delete"
                                    color="negative"
                                    class="q-mr-xs"
                                    label="删除"
                                    @click="godelete(element, 3, index)"
                                />
                            </td>
                            <td>
                                <i class="iconfont icon-drag" style="font-size: 20px;color: #777;"></i>
                            </td>
                        </tr>
                    </template>
                </draggable>
            </table>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from 'vue'
import draggable from "vuedraggable";
import customerService from '@/api/customer';
import requestGroup from '@/components/customer/request-group.vue'
import router from '@/router/index'
// import { url } from 'inspector';
interface dataType {
    Id: number,
    RuleSelectType: number,
    IsDefault: number,
    DeptList: Array<any>,
    EmpList: Array<any>,
    RuleAllotWay: number,
    ConditionList: Array<any>,
    ConditionStrList: Array<string>,
    Sort: number
}
export default defineComponent({
    components: {
        draggable,
        requestGroup
    },
    setup() {
        let defaultData:Array<dataType>= reactive([])
        let data:Array<dataType>= reactive([])
        const datadragEnd = (e: any) => {
            console.log('拖动结束', e)
        }
        const getClueList = () => {
            customerService.getCustomerClueRuleList({}).then(res => {  
                res.data.Data.map((item:dataType)=>{
                    if(item.IsDefault===1){
                        defaultData.push(item)
                    }else{
                        data.push(item)
                    }
                })
                 console.log(69,defaultData)
                 console.log(123, data)
               
            })
        }
        const jumpPage=(url:string,Id=0)=>{
            router.push({
                path:url,
                query:{
                    Id
                }
            })
        }
        onMounted(() => {
            getClueList();
        })
        return {
            ClueType: ref(1),
            defaultData,
            data,
            datadragEnd,
            jumpPage
        }
    }
})
</script>
<style lang="scss" scoped>
.payTable {
    width: 100%;
    border-collapse: collapse;
}

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

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

.payTable tr td {
    font-size: 13px;
    text-align: center;
    color: #2d2d2d;
    padding: 10px 0;
    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;
}
</style>