<style>
 @import url('../../assets/css/financia/accountingWork.css');

</style>
<template>
    <div class="page_accountingWork">
        <div class="query-box">
           <ul>
               <li>
                <span>
                    <em>{{$t('fnc.liucheng')}}</em>
                    <el-select class="w200"
                    filterable
                    v-model="msg.TemplateId"
                    :placeholder="$t('pub.pleaseSel')"
                    >
                    <el-option :label="$t('system.ph_buxian')" value="-1"></el-option>
                    <el-option
                        v-for="(item,index) in SingleList"
                        :label="item.Name"
                        :value="item.Id"
                        :key="index+50000"
                    ></el-option>
                    </el-select>
                </span>
                <span>
                    <em>{{$t('advmanager.v_line')}}</em>
                    <el-select class="w200"
                    filterable
                    v-model="msg.LineID"
                    :placeholder="$t('pub.pleaseSel')"
                    >
                    <el-option :label="$t('system.ph_buxian')" value="-1"></el-option>
                    <el-option
                        v-for="(item,index) in LineList"
                        :label="item.LineName"
                        :value="item.LineID"
                        :key="index+60000"
                    ></el-option>
                    </el-select>
                </span>
                </li>
               <li>
                    <button class="normalBtn" @click="getList" >{{$t('pub.searchBtn')}}</button>
                    <button class="normalBtn" @click="addShow=true,text=$t('pub.addBtn')" >{{$t('pub.addBtn')}}</button>
                    <el-tooltip class="item" effect="dark" :content="$t('fnc.qhpaiban')" placement="top-end">
                        <i v-if="transitionShow" class="iconfont icon-biaoge" @click="switchMethod(1)"></i>
                        <i v-if="transitionShow2" class="iconfont icon-icon-ssan" @click="switchMethod(2)"></i>
                    </el-tooltip>
               </li>
           </ul>
        </div>
        <div>
            <p class="_cashierWorl_tit">{{$t('tips.accWorkTips')}}</p>
            <div class="cm_content _scrollbar" :class="addShow==true?'_edHeight':''">
                <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0" v-loading="loading" v-if="transitionShow2">
                    <tr>
                        <th>{{$t('fnc.w_ckmingcheng')}}</th>
                        <th>{{$t('system.query_company')}}</th>
                        <th>{{$t('fnc.w_ywrenyuan')}}</th>
                        <th>{{$t('fnc.liucheng')}}</th>
                        <th>{{$t('advmanager.v_line')}}</th>
                        <th>{{$t('fnc.w_fzfangxiang')}}</th>
                        <th>{{$t('system.table_operation')}}</th>
                    </tr>
                    <tr v-for="(item,index) in dataList" :key="index">
                        <td>{{item.Name}}</td>
                        <td>{{item.BName}}</td>
                        <td>
                            <span v-for="(i,ix) in item.emList">{{i.emName}} <span v-if="ix!=item.emList.length-1">,</span> </span>
                        </td>
                        <td>
                            <span v-for="(i,ix) in item.TemplateList" :key="ix+5000">{{i.Name}} <span v-if="ix!=item.TemplateList.length-1">,</span> </span>
                        </td>
                        <td>
                            <span v-for="(i,ix) in item.LineList" :key="ix+7000">{{i.Name}} <span v-if="ix!=item.LineList.length-1">,</span> </span>
                        </td>
                        <td>
                            <span v-if="item.Direct==1">{{$t('fnc.shoukuan')}}</span>
                            <span v-else-if="item.Direct==2">{{$t('fnc.zhikuan')}}</span>
                            <span v-else>{{$t('fnc.shouzhi')}}</span>
                        </td>
                        <td>
                            <el-row>
                                <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
                                    <el-button type="primary" class="iconfont icon-bianji-smal" circle @click="editCurency(item.ID),text=$t('pub.updateMsg')"></el-button>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" :content="$t('fnc.w_djxinxi')" placement="top-start">
                                    <el-button type="danger" class="iconfont icon-img-rili" circle @click="goUrlDetail('CashierWorkDetail',2,item.Name,item.ID,item.BranchId)"></el-button>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
                                    <el-button type="danger" class="iconfont icon-img_delete_small" circle @click="financeinfoRemove(item.ID,item.ID)"></el-button>
                                </el-tooltip>
                            </el-row>
                        </td>
                    </tr>
                </table>
                <div v-if="transitionShow" class="clearfix">
                    <div class="po_content_list_item" v-for="(item,index) in dataList" :key="index">
                        <div class="po_content_list_item_top">
                            <span class="_item_top_name">{{item.Name}}</span>
                            <span class="_item_top_icon">
                                <i class="iconfont icon-rizhi1" @click="goUrlDetail('CashierWorkDetail',1,item.Name,item.ID,item.BranchId)"></i>
                                <i class="iconfont icon-bianji-smal" @click="editCurency(item.ID),text=$t('system.table_edit')"></i>
                                <i class="iconfont icon-img_delete_small" @click="financeinfoRemove(item.ID)"></i>
                            </span>
                        </div>
                        <div class="po_content_list_item_bottom">
                            <p>
                                <span>{{$t('fnc.w_ywrenyuan')}}</span>
                                <template v-if="item.emList.length>0">
                                    <span v-if="item.emList.length==1">
                                        {{item.emList[0].emName}}
                                    </span>
                                    <div v-else>
                                        <el-popover
                                            placement="bottom"
                                            popper-class="CashierWork_tripDetails"
                                            trigger="click">
                                            <div class="">
                                                <span class="_all_name" v-for="(i,io) in item.emList">{{i.emName}}</span>
                                            </div>
                                            <span slot="reference" @click=""  class="_underline">{{item.emList[0].emName}} {{$t('fnc.w_gong')}}（{{item.emList.length}}）{{$t('hotel.hotel_people')}}</span>
                                        </el-popover>
                                    </div>
                                </template>
                                <template v-else>
                                    <span>{{$t('fnc.no')}}</span>
                                </template>

                            </p>
                        </div>
                    </div>
                </div>
                <div class="noData" v-show="noData">
                    {{$t('system.content_noData')}}
                </div>
                <div>
                    <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        layout="total,prev, pager, next, jumper"
                        :page-size=msg.pageSize
                        :total=total>
                    </el-pagination>
                </div>
            </div>
            <div class="_vMG_edit" :class="addShow==true?'edHeight':''">
                <el-row class="_margin_bottom_20">
                    <el-col :span="20">
                        <p class="_tit">{{text}}{{$t('fnc.w_chuangkou')}}</p>
                    </el-col>
                    <el-col :span="4" class="_add_saveBtn">
                        <button type="button" class="normalBtn" @click="submitForm('addMsg',1)">{{$t('pub.saveBtn')}}</button>
                        <button class="hollowFixedBtn" type="button" @click="cancelEdit(),resetForm('addMsg'),addShow=false">{{$t('pub.cancelBtn')}}</button>
                    </el-col>
                </el-row>
                <el-form class=" clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="100px">
                    <el-row>
                        <el-col :span="4">
                            <el-form-item :label="$t('system.query_airName')+'：'" prop="Name">
                                <el-input v-model="addMsg.Name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item :label="$t('fnc.ssuogongsi')+'：'" prop="BranchId">
                                <el-select  filterable v-model='addMsg.BranchId'>
                                    <el-option v-for='item in CompanyList'
                                        :label='item.BName'
                                        :value='item.Id'
                                        :key='item.Id'
                                        :disabled="item.disabled">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item :label="$t('fnc.w_ywrenyuan')+'：'" prop="listArr">
                                <el-select
                                    v-model="addMsg.listArr"
                                    filterable
                                    remote
                                    multiple
                                    reserve-keyword
                                    :placeholder="$t('pub.pleaseImport')"
                                    :remote-method="remoteMethod"
                                    @change="$forceUpdate()"
                                    @remove-tag="removeTag"
                                    :loading="loading2">
                                    <el-option
                                        v-for="(item,index) in searchList"
                                        :key="index+60000"
                                        :label="item.name"
                                        :value="item.empId">
                                        <span style="float: left">{{ item.name }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.postName }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item :label="$t('fnc.liucheng')">
                                <el-select
                                    v-model="addMsg.TemplateListArr"
                                    filterable
                                    multiple
                                    collapse-tags
                                    @change="$forceUpdate()"
                                    :placeholder="$t('pub.pleaseImport')">
                                    <el-option
                                        v-for="(item,index) in SingleList"
                                        :key="index+200"
                                        :label="item.Name"
                                        :value="item.Id">
                                        <!-- <span style="float: left">{{ item.name }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.postName }}</span> -->
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item :label="$t('advmanager.v_line')">
                                <el-select
                                    v-model="addMsg.LineListArr"
                                    filterable
                                    multiple
                                    collapse-tags
                                    @change="$forceUpdate()"
                                    :placeholder="$t('pub.pleaseImport')">
                                    <el-option
                                        v-for="(item,index) in LineList"
                                        :key="index+700"
                                        :label="item.LineName"
                                        :value="item.LineID">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                       <el-col :span="6">
                            <el-form-item :label="$t('fnc.w_fzfangxiang')" prop="Direct">
                                <el-radio v-model="addMsg.Direct" :label="1">{{$t('fnc.w_shou')}}</el-radio>
                                <el-radio v-model="addMsg.Direct" :label="2">{{$t('fnc.w_zhi')}}</el-radio>
                                <el-radio v-model="addMsg.Direct" :label="3">{{$t('fnc.shouzhi')}}</el-radio>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="12">
                            <el-form-item label="适用费用"  class="_treeselect">
                                <treeselect
                                    class=""
                                    v-model="CostIdS"
                                    value-consists-of="LEAF_PRIORITY"
                                    :placeholder="$t('pub.pleaseSel')"
                                    :multiple="true"
                                    :options="CostTypeList"
                                    noChildrenText=''
                                    :normalizer="normalizer"/>
                            </el-form-item>
                        </el-col> -->
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
	components: { Treeselect },
    data(){
        return{
            msg:{
                pageIndex:1,
                pageSize:15,
                TemplateId:'',
            },
            addMsg:{
                ID:0,
                Name:'',
                accountant_list:[],
                emList:[],
                TemplateList:[],
                listArr:[],
                BranchId:'',
                Direct:'',
                LineList:[]
            },
            type:-1,
            addShow:false,
            loading:false,
            loading2:false,
            noData:false,
            zhiChe:false,
            shouChe:false,
            total:0,
            currentPage: 1,
            text:'',
            dataList:[],
            searchList:[],
            AccList:[],
            CompanyList:[],
            rules: {//表单必填验证
                Name: [
                    { required: true, message: this.$t('rule.qtxckmingcheng'), trigger: 'blur' }
                ],
                listArr: [
                    {type: 'array', required: true, editCurencymessage: this.$t('rule.qxzywuyuan'), trigger: 'blur' }
                ],BranchId:[
                    { required: true, message: this.$t('rule.company'), trigger: 'change' }
                ],Direct:[
                    { required: true, message: this.$t('rule.qxzsyfangxiang'), trigger: 'change' }
                ]
            },
            AccListProps: {
                value:'Num',
                label:'Name',
                children: 'children'
            },
            selectVal:[],
            transitionShow:false,
            transitionShow2:true,
            contenWidth:0,
            contenHeight:0,
            tableSize:0,
            shouList:[],
            shouListLoading:false,
            CostTypeList:[],
            normalizer(node) {
				return {
					id: node.ID,
					label: node.Name,
					children: node.ChildList,
				}
            },
            CostIdS:[],
            getCompanyMsg:{
                RB_Group_Id:'0',
                Status:'0',
            },
            SingleList:[],
            LineList:[],
        }
    },created(){
        let userInfo = this.getLocalStorage();
        let allH,allW,cH,cW;
        allH = document.documentElement.clientHeight;
        allW = document.documentElement.clientWidth;
        cW = allW-90;
        cH = allH-187; //255 = 50 40 21 36 40
        this.contenWidth = cW;
        this.contenHeight = cH;
        this.msg.pageSize = parseInt(cH/40)-1;
        this.tableSize = this.msg.pageSize = parseInt(cH/45);
        this.getCompanyMsg.RB_Group_Id = userInfo.RB_Group_id;    //集团ID
        this.getSingleList();
        this.getLineList();
    },methods:{
        getSingleList(){  // 获取费用类型
			this.apipost('FinancialFlowTemplate_post_GetSingleList',{},res=>{
				if(res.data.resultCode==1){
                    this.SingleList=res.data.data;
                }else{}
			},err=>{})
		},
        getLineList(){
            this.apipost("line_post_GetAllList", {}, res => {
                if (res.data.resultCode == 1) {
                this.LineList = res.data.data;
                } else {
                this.$message.error(res.data.message);
                }
            });
        },
        switchMethod(t){
            this.msg.pageIndex = 1;
            if(t===1){
                this.transitionShow = false;
                this.transitionShow2 = true;
                this.msg.pageSize = this.tableSize;
                this.getList();
            }else if(t===2){
                this.transitionShow = true;
                this.transitionShow2 = false;
                // 宽 235 高 206
                let cont = parseInt(this.contenWidth/235) * parseInt(this.contenHeight/120);
                this.msg.pageSize = cont;
                this.getList();
            }
        },
        getCostTypeList(){  // 获取费用类型
			this.apipost('Financial_post_GetTreeList',{Type:3},res=>{
				if(res.data.resultCode==1){
						this.CostTypeList=res.data.data;
                }else{}
			},err=>{})
		},
        goUrlDetail(path,type,name,id,bid){
            this.$router.push({name:path,query:{WindowType:type,name:name,id:id,bid:bid,blank:'y',tab:this.$t('objFill.kuaijickdjxx')}})
        },
        removeTag(id){
            this.addMsg.emList.forEach((x,index)=>{
                if(x.EmId === id){
                    this.addMsg.emList.splice(index,1)
                }
            })
        },
        mergeArray(list3, list1){
            for (var i = 0 ; i < list3.length ; i ++ ){
                for(var j = 0 ; j < list1.length ; j ++ ){
                    if (list3[i].EmId === list1[j].EmId){
                        list3.splice(i,1);
                    }
                }
            }
            for(var i = 0; i <list1.length; i++){
                list3.push(list1[i]);
            }
            return list3;
        },
        addCashierWork(){ // 提交保存
            let emList = this.addMsg.listArr;
            let arr = [];
            emList.forEach(x=>{
                let obj = {
                    'EmId':x,
                    'ID':0,
                    'WindowId':0
                }
                arr.push(obj);
            })
            let list4 = this.mergeArray(arr,this.addMsg.emList);
            let TemplateListArr=this.addMsg.TemplateListArr;
            let newArr=[];

            TemplateListArr.forEach(item=>{
                this.SingleList.forEach(val=>{
                    let obj={};
                    if(item==val.Id){
                        obj.Id=val.Id;
                        obj.Name=val.Name;
                        newArr.push(obj);
                    }
                })
            })
            let LineListArr=this.addMsg.LineListArr;
            let lineArr =[];
            LineListArr.forEach(item=>{
                this.LineList.forEach(val=>{
                    let obj={};
                    if(item==val.LineID){
                        obj.Id=val.LineID;
                        obj.Name=val.LineName;
                        lineArr.push(obj);
                    }
                })
            })

            this.addMsg.emList = list4;
            this.addMsg.TemplateList = newArr;
            this.addMsg.LineList = lineArr;
            this.apipost('Window_post_SetAccountant',this.addMsg,r=>{
                if(r.data.resultCode==1){
                    this.$message.success(r.data.message);
                    this.getList();
                    this.addShow = false;
                    this.cancelEdit();
                    // this.CostIdS = [];
                }else{
                    this.$message.error(r.data.message);
                }
            },null)
        },
        submitForm(addMsg) {//提交创建、修改表单
            this.$refs[addMsg].validate((valid) => {
                if (valid) {
                    this.addCashierWork();
                } else {
                    return false;
                }
            });
        },
        financeinfoRemove(id){  // 删除
            this.$confirm(this.$t('tips.qrscchuangkou'), this.$t('tips.tips'), {
                confirmButtonText: this.$t('pub.sureBtn'),
                cancelButtonText: this.$t('pub.cancelBtn'),
                type: 'warning'
            }).then(() => {
                this.apipost('Window_post_RemoveAccountant',{ID:id}, res => {
                    if(res.data.resultCode == 1) {
                        this.getList()
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                }, err => {})
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('hotel.hotel_HasBeenCancelled')
                });
            });
        },
        remoteMethod(query) {
            if (query !== ''||this.addShow) {
                this.loading2 = true;
                this.apipost("admin_Get_Chat_All_SelectEmpName",{ EmName:query },res => {
                    if (res.data.resultCode == 1) {
                        this.searchList = res.data.data;
                        this.loading2 = false;
                    }
                },err => {});
            } else {
                this.searchList = [];
                this.loading2 = false;
            }
        },
        getList(){
            this.loading = true;
            this.apipost('Window_post_GetAccountantPageList',this.msg, res => {
                    if(res.data.resultCode == 1) {
                        this.dataList = res.data.data.pageData;
                        this.total = res.data.data.count;
                        if(this.total>0){
                            this.noData =false;
                        }else{
                            this.noData =true;
                        }
                    } else {
                        this.$message.error(res.data.message);
                    }
                    this.loading = false;
            }, err => {this.loading = false;})
        },
        editCurency(id){  //   修改  根据id 获取信息
            this.apipost('Window_post_GetAccountant',{ID:id}, res => {
                if(res.data.resultCode == 1) {
                    let data = res.data.data;
                    // data.CostList.forEach(x=>{
                    //     this.CostIdS.push(x.CostTypeId);
                    // })
                    this.addMsg = data;
                    this.addMsg.listArr = [];
                    this.addMsg.TemplateListArr = [];
                    this.addMsg.LineListArr=[];
                    if(data.emList&&data.emList.length>0){
                        data.emList.forEach(x=>{
                            this.remoteMethod(x.emName);
                            this.addMsg.listArr.push(x.EmId)
                        })
                    }
                    if(data.TemplateList&&data.TemplateList.length>0){
                        data.TemplateList.forEach(x=>{
                            this.addMsg.TemplateListArr.push(x.Id)
                        })
                    }
                    if(data.LineList&&data.LineList.length>0){
                        data.LineList.forEach(x=>{
                            this.addMsg.LineListArr.push(x.Id)
                        })
                    }
                    this.addMsg.accountant_list = [];
                    this.addShow = true;
                } else {
                    this.$message.error(res.data.message);
                }
            }, err => {})
        },
        handleCurrentChange(val) {
            this.msg.pageIndex = val;
            this.getList();
        },
        cancelEdit(){  // 取消修改、新增
            this.addMsg = {
                ID:0,
                Name:'',
                accountant_list:[],
                emList:[],
                listArr:[],
                TemplateListArr:[],
                TemplateList:[],
                BranchId:'',
                Direct:'',
                LineList:[],
                LineListArr:[]
            }
            this.CostIdS = [];
            this.searchList = [];
        },
        resetForm(formName) {//弹出框取消 初始化谈框内表单
            this.$refs[formName].resetFields();
        },
        getCompanyList(){ //获取公司列表
            this.apipost('admin_get_BranchGetList',this.getCompanyMsg,res=>{
                if(res.data.resultCode==1){
					let data = res.data.data
					this.CompanyList=res.data.data;
                }else{}
            },err=>{})
		},
    },mounted(){
        this.getList();
        this.getCostTypeList();
        this.getCompanyList();
    }
}
</script>