<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 v-if="data.length<20" color="accent" style="margin-bottom: 10px;" class="q-mr-md" label="创建阶段流程" @click="goestablish()"></q-btn>
                <span style="margin-left: 20px;color: rgb(133, 133, 152);">已添加：{{data.length}}/20</span>
            </div>
            <q-btn color="white" text-color="black" style="margin-bottom: 10px;" class="q-mr-md" label="阶段管理"
                @click="stageManagement()"></q-btn>
        </div>
        <div class="page-content">
            <table class="payTable">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>适用范围</th>
                        <th>启用</th>
                        <th>阶段</th>
                        <th width="13%">操作信息</th>
                        <th width="12%">操作</th>
                    </tr>
                </thead>
                <tr v-if="data.length==0">
                    <td :colspan="6" align="center">暂无数据</td>
                </tr>

                <tr v-for="(item,index) in data" :key="index">
                    <td><span>{{item.FlowName}}</span></td>
                    <td>
                        <span v-if='item.DeptEmpList && item.DeptEmpList.length>0' v-for="(x,y) in  item.DeptEmpList" :key='y'>
                            <!-- <el-tag type="danger" v-if="x.Type==0">{{x.Name}}</el-tag>
                            <el-tag type="success" v-if="x.Type==1">{{x.Name}}</el-tag> -->
                            <el-tag style="margin-right: 15px;margin-bottom: 5px;" v-if="x.Type==1"><i class="el-icon-folder"
                                style="margin-right: 3px;"></i>{{x.Name}}</el-tag>
                            <el-tag style="margin-right: 15px;margin-bottom: 5px" type="success" v-if="x.Type==2"><i class="el-icon-user-solid"
                                style="margin-right: 3px;"></i>{{x.Name}}</el-tag>
                            <el-tag v-if="x.Type==0">{{x.Name}}</el-tag>
                        </span>
                        <span v-else>未适配其他规则的阶段</span>
                    </td>
                    
                    <td>
                        <q-toggle v-if="item.IsDefault==1" v-model="item.Enable" :true-value="1" :false-value="2" 
                            icon="lock" disable />
                        <q-toggle v-else v-model="item.Enable" :true-value="1" :false-value="2"
                        @input="setFiledState(item,1)" />
                    </td>
                    <td>
                        <span v-for="(x,y) in  item.StageList" :key='y'>
                            {{x}}{{item.StageList.length!=y+1?'->':''}}
                        </span>
                    </td>
                    <td>
                        <div>{{item.UpdateByName}}</div>
                        <div>{{item.UpdateTime}}</div>
                    </td>
                    <td>
                        <q-btn v-if='item.IsDefault!=1' flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
                            label="编辑" @click="goedit(item)" />
                        <q-btn v-if='item.IsDefault!=1' flat size="xs" icon="delete" color="negative" class="q-mr-xs"
                            label="删除" @click="godelete(item)" />
                    </td>
                   
                </tr>
            </table>

            <div v-if="Isadd==true">
                <addfield :obj='addMsg' :deptl='deptl' :tabsList='tabsList' :checkboxList='checkboxList'
                    @getcancel='getcancel'></addfield>
            </div>
        </div>
    </div>
</template>

<script>
    import addfield from "./components/addfield"
    import {
        getCustomerStageFlowList,
        setCustomerStageFlowState
    } from '../../../../api/system/wechat';
    //部门
    import {
        getDeptTree
    } from '../../../../api/system/dept'
    export default {
        components: {
            addfield,
        },

        data() {
            return {
                loading: false,
                data: [],
                Isadd: false,
                addMsg: null,
                Enable: -1,
                deptl: [],//部门下拉
                tabsList: [],
                checkboxList: [],//输入类型 数组
                dragId: 0,//拖动的ID
            }
        },
        created() {
            this.getList()
            this.getDepartList()

        },
        methods: {
            goaddfield() {//新增字段
                this.Isadd = true;
                this.addMsg = null
            },
            goedit(item) {
                this.$router.push({
                    path: '/enterprise/customer/CSChild/addPhase',
                    query: {
                        FlowId: item.Id
                    }
                });
            },
            godelete(item) {//删除
                this.$q.dialog({
                    title: "提示信息",
                    message: '是否删除该阶段流程',
                    cancel: {
                        label: "取消",
                        flat: true
                    },
                    ok: {
                        label: "确认",
                        flat: true,
                        focus: true
                    }
                }).onOk(() => {
                    this.setFiledState(item,2)
                });

            },

            setFiledState(item,Type) {
                console.log('2')
                let msg = {
                    Type: Type,
                    FlowId: item.Id,
                }
                setCustomerStageFlowState(msg).then(res => {
                    if (res.Code == 1) {
                        this.$q.notify({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: res.Message,
                            position: 'top'
                        })
                        this.getList()
                    }
                })
            },
            getcancel(type) {
                this.Isadd = false;
                this.tabsList.forEach(x => {
                    x.disable = false
                })
                if (type == 2) {//数据保存成功的处理
                    this.getList()
                }
            },
            getList() {
                this.loading = true
                getCustomerStageFlowList({ Enable: 0 }).then(res => {
                    this.loading = false
                    if (res.Code == 1) {
                        this.data = res.Data;
                    }

                })
            },
            //获取部门下拉数据
            getDepartList(id) {
                let msg = {
                    School_Id: 0
                }
                getDeptTree(msg).then(res => {
                    if (res.Code == 1) {
                        this.deptl = res.Data;
                    }
                })

            },
            stageManagement() {//阶段管理
                this.$router.push({
                    path: '/enterprise/customer/CSChild/stageManagement',
                   
                });
            },
            goestablish() {//创建阶段流程
                this.$router.push({
                    path: '/enterprise/customer/CSChild/addPhase',
                   
                });
            }



        }
    }

</script>

<style>
    .customerPhase .payTable {
        width: 100%;
        border-collapse: collapse;
    }

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

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

    .customerPhase .payTable tr td {
        font-size: 13px;
        text-align: center;
        color: #2D2D2D;
        padding: 10px 0;
        font-weight: bold;
        border-bottom: 1px solid #E5E5E5;
    }
</style>