<template>
    <div class="groupApproval">
        <div class="query-box">
            <ul>
              <li>
                <em>出团公司</em>
                <el-select class="permiss-input w160" filterable  v-model='msg.OutBranchId'
                @change='getControlList()'>
                <el-option :label="$t('pub.unlimitedSel')" :value="-1" :key="-1"></el-option>
                <el-option
                v-for="item in companyList"
                :label='item.BName'
                :value='item.Id'
                :key='item.Id'
                ></el-option>
                </el-select>
            </li>
                <li>
                    <span>
                        <em>团类型</em>
                        <el-select class="permiss-input w160" v-model="msg.PriceTeamType" filterable :placeholder="$t('pub.pleaseImport')"
                            @change="getControlList()">
                            <el-option :label="$t('pub.unlimitedSel')" value="-1">
                            </el-option>
                            <el-option v-for="item in TeamListArr" :label="item.Name" :value="item.Id"
                                :key="item.Id"></el-option>
                        </el-select>
                    </span>
                </li>
                <li>
                    <span>
                        <em>团号</em>
                        <el-input maxlength="50" v-model="msg.TCNUM" class="permiss-input w160"
                            @keyup.enter="getControlList" :placeholder="$t('pub.pleaseImport')"></el-input>
                    </span>
                </li>
                <li>
                    <span>
                        <em>编号</em>
                        <el-input maxlength="6" v-model="msg.TCID" class="permiss-input w160"
                            @keyup.native.enter="getControlList" :placeholder="$t('pub.pleaseImport')"
                            @keyup.native="checkInteger(msg,'TCID')"></el-input>
                    </span>
                </li>
                <li>
                    <span>
                        <em>出团日期</em>
                        <el-date-picker
                            style="height: 34px;"
                            value-format="yyyy-MM-dd"
                            v-model="DatelistBM"
                            type="daterange"
                            :range-separator="$t('OrderList.zhi')"
                            :start-placeholder="$t('OrderList.star')"
                            :end-placeholder="$t('OrderList.end')" @change="getDatesBM">
                        </el-date-picker>
                    </span>
                </li>
                <li v-if="userinfo.ActionMenuCode.indexOf('Finance_clumpSeeAll')!=-1">
                  <span><em>只看待我审核</em>
                    <el-switch
                        v-model="PendingMyTrial"
                        active-value="1"
                        inactive-value="0" @change="getPendingMyTrial"> </el-switch>
                  </span>
                </li>
                <li>
                <button class="hollowFixedBtn" type="button"
                    @click="getControlList">{{$t('pub.searchBtn')}}</button>
                </li>
            </ul>
        </div>
        <ul class="_nav clearfix">
            <li :class="active==1?'_active':''" @click="active=1, msg.OutGroupAuditState=1, getControlList()">待审批</li>
            <li :class="active==2?'_active':''" @click="active=2, msg.OutGroupAuditState=2, getControlList()">已审批</li>
            <div style="float: right;" v-if="multipleSelection.length>0">
                <button class="hollowFixedBtn" @click="setAudit()">批量审核</button>
            </div>
            <li style="float: right;color: red;font-size: 14px;">
                注：落地团，小包团，国内线 均按订单利润的20%计算最大预计销售提成，实际发放提成不会超过最大预期销售提成
            </li>
        </ul>

        <ul style="overflow: initial!important">
            <li style="margin-bottom:10px;width: 100%;">

            </li>
        </ul>
        <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="dataList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            >
                <el-table-column
                type="selection"
                width="55" :selectable="selectable">
                </el-table-column>
                <el-table-column
                label="团队编号"
                width="170">
                    <template slot-scope="scope">
                        <p>{{scope.row.OutBranchName}}</p>
                        <span style="cursor: pointer;text-decoration: underline;"
                        @click="goTravel(scope.row.TCID)">{{scope.row.TCNUM}}({{scope.row.TCID}})</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="LtName"
                label="系列"
                width="80"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    {{scope.row.LineName}}</br>
                    {{scope.row.LtName}}
                </template>
                </el-table-column>
                <el-table-column
                prop="Title"
                label="团名"
                width="200"
                show-overflow-tooltip></el-table-column>
                <el-table-column
                prop="OPName"
                label="OP/申请日期">
                <template slot-scope="scope">
                   <p> {{scope.row.OPName}}</p>
                   <p> {{scope.row.OutGroupApplyDateStr}}</p>
                </template>
            </el-table-column>
                <el-table-column
                prop="PriceTeamTypeName"
                label="团队类型">
                <template slot-scope="scope">
                    <template v-if="scope.row.TeamTypeName">{{scope.row.TeamTypeName}}/</template>
                    {{scope.row.PriceTeamTypeName}}
                </template>
                </el-table-column>
                <el-table-column
                prop="ShouldReceive"
                label="应收"></el-table-column>
                <el-table-column
                prop="ActualReceive"
                label="实收"></el-table-column>
                <el-table-column
                prop="WaitRecive"
                label="待收"></el-table-column>
                <el-table-column
                prop="ShouldPay"
                label="应付"></el-table-column>
                <el-table-column
                prop="ActualPay"
                label="实付"></el-table-column>
                <el-table-column
                prop="WaitPay"
                label="待付"></el-table-column>
                <el-table-column
                prop="ActualProfit"
                label="团队利润"></el-table-column>
                <el-table-column
                prop="SaleCommission"
                label="预计销售提成" width="130px">
                    <template slot-scope="scope">
                        <span
                        :style="{'cursor':scope.row.SaleCommissionType>0?'pointer':'',
                        'color': scope.row.SaleCommissionType>0?'#33B3FF':''}"
                        @click="scope.row.SaleCommissionType>0?goAnticipate(scope.row,scope.row.SaleCommissionType):''">
                        {{scope.row.SaleCommission}}
                      </span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="Config_OfferId"
                label="报价详情">
                    <template slot-scope="scope">
                        <p v-if="scope.row.ConfigID>0&&scope.row.Config_OfferId>0"
                            style="cursor: pointer;text-decoration: underline;color: #33B3FF;font-size: 12px;"
                        @click="showDialog(scope.row.ConfigID, scope.row.Config_OfferId)">报价详情</p>
                    </template>
                </el-table-column>
                <el-table-column v-if="active==1"
                prop=""
                label="审批人" width="130px">
                <template slot-scope="scope">
                        <p>待审核：{{scope.row.AuditEmpName}}</p>
                        <p v-if="scope.row.FinanceAuditEmpName">已审核：{{scope.row.FinanceAuditEmpName}}/{{scope.row.FinanceOutGroupAuditDate}}</p>
                    </template>
            </el-table-column>
                <el-table-column v-if="active==2"
                prop=""
                label="审批结果">
                    <template slot-scope="scope">
                        <span v-if="scope.row.OutGroupAuditState == 2" style="color: green;">通过</span>
                        <span v-if="scope.row.OutGroupAuditState == 3" style="color: red;">拒绝</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="active==2"
                prop=""
                label="审批信息" width="130px">
                    <template slot-scope="scope">
                        <p>{{scope.row.AuditEmpName}}/{{scope.row.OutGroupAuditDate}}</p>
                        <p v-if="scope.row.FinanceAuditEmpName">{{scope.row.FinanceAuditEmpName}}/{{scope.row.FinanceOutGroupAuditDate}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                prop=""
                :label="$t('system.table_operation')">
                width="150">
                    <template slot-scope="scope">
                        <div class="_icon_btn">
                        <el-tooltip class="item" effect="dark" :content="$t('fnc.shenhe')" placement="top" v-if="active==1 && EmployeeId==scope.row.OutGroupAuditEmpId">
                            <i class="iconfont icon-ico_commodity_defaul" @click="shenhei(scope.row)" v-if="active==1 && EmployeeId==scope.row.OutGroupAuditEmpId"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="驳回" placement="top" v-if="active==1 && EmployeeId==scope.row.OutGroupAuditEmpId">
                            <i class="iconfont icon-shenhebohui" @click="bohui(scope.row)" v-if="active==1 && EmployeeId==scope.row.OutGroupAuditEmpId"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="收支明细" placement="top">
                            <i class="iconfont icon-mingxi" @click="goTeamBalance(scope.row.TCID)"></i>
                        </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        <div style="width: 100%;">
            <el-pagination  background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="msg.pageIndex"
                layout="sizes,total,prev, pager, next, jumper"
                :page-sizes="[5, 10, 20, 30,50,100]"
                :page-size="msg.pageSize" :total="total">
            </el-pagination>
        </div>

        <el-dialog
          custom-class="w600"
          title="驳回缘由"
          :visible.sync="cancelOrderDialog"
        >
          <div style="padding-bottom:20px">
            <el-input
              type="textarea"
              autofocus
              rows="5"
              placeholder="请填写驳回该团的缘由"
              clear="w300"
              v-model="cancelRemark"
            ></el-input>
            <el-row :gutter="20" style="margin-top: 20px;">
              <el-col :span="24" style="text-align: right;">
                <input
                  type="button"
                  class="normalBtn"
                  value="确定驳回"
                  @click="cancelOrderHandler"
                />
                <input
                  type="button"
                  class="hollowFixedBtn"
                  :value="$t('pub.closeSel')"
                  @click="cancelOrderDialog = false,cancelRemark=''"
                />
              </el-col>
            </el-row>
          </div>
        </el-dialog>
        <el-dialog :visible.sync="dialog.show" width="1400px" title="报价详情">
            <price-dialog :ConfigId="dialog.ConfigId" :OfferId="dialog.OfferId" ref="dialog"></price-dialog>
          </el-dialog>
    </div>
</template>

<script>
     import priceDialog from '../TravelManager/TravelNewQuotation/priceDialog.vue';
    export default {
        data() {
            return {
                PendingMyTrial: '0',
                companyList:[],
                cancelRemark: '',
                dataRow: null,
                cancelOrderDialog: false,
                loading: false,
                dataList: [],
                active: '1',
                msg: {
                    pageIndex: 1,
                    pageSize: 10,
                    PriceTeamType: "0",
                    TCNUM: '',//团号
                    TCID: '',
                    OutBranchId: -1,
                    OutGroupAuditState: 1,
                    OutGroupAuditEmpId: 0,//当前登录用户id ， 如果有查询所有的权限 则=0
                    QStartDate: '',
                    QEndDate: ''
                },
                TeamListArr:[],
                total:0,
                EmployeeId:0,
                multipleSelection: [],
                AuditLoading: false,
                dialog: {
                    show: false,
                    ConfigId: '',
                    OfferId: ''
                },
              getCompanyMsg:{
                RB_Group_Id:'0',
                Status:'0',
              },
              userinfo: {},
              DatelistBM:[]
            }
        },
        components: {
            priceDialog
        },
        created() {
            this.getTeamList()
            let userinfo = this.getLocalStorage();
            this.userinfo = this.getLocalStorage()
            this.getCompanyMsg.RB_Group_Id=userinfo.RB_Group_id;
            this.EmployeeId = userinfo.EmployeeId
            let ActionMenuCode=userinfo.ActionMenuCode;
            if(ActionMenuCode.indexOf('Finance_clumpSeeAll')!=-1){//如果有权限 可以查看所有 如果没有只能看自己审核的
                if(userinfo.EmployeeId==2786||userinfo.EmployeeId==5){
                  this.PendingMyTrial = '1'
                  this.msg.OutGroupAuditEmpId = userinfo.EmployeeId
                }else this.msg.OutGroupAuditEmpId = 0
            }else{
                this.msg.OutGroupAuditEmpId = userinfo.EmployeeId
            }
            if(this.$route.query && this.$route.query.TCID){
                this.msg.TCID = this.$route.query.TCID
            }
            this.getCompany()
        },
        mounted() {
            this.getList()

        },
        methods: {
          getDatesBM(){
            if(this.DatelistBM){
              this.msg.QStartDate = this.DatelistBM[0];
              this.msg.QEndDate = this.DatelistBM[1];
            }if(!this.DatelistBM){
              this.msg.QStartDate = '';
              this.msg.QEndDate = '';
            }
          },
          getPendingMyTrial(){
            let ActionMenuCode=this.userinfo.ActionMenuCode;
            if(ActionMenuCode.indexOf('Finance_clumpSeeAll')!=-1){
              if(this.PendingMyTrial=='0') {
                this.msg.OutGroupAuditEmpId = '0'
              }else{
                this.msg.OutGroupAuditEmpId = this.userinfo.EmployeeId
              }
              this.getList()
            }
          },
          // 销售预期提成
      goAnticipate(row,type){
          let userInfo = this.getLocalStorage();
          let name
          if(type==1){//国内
            name = 'domesticCommissiondetails'
          }else if(type==2){//单项
            name = 'ServiceCommissiondetails'
          }else if(type==3){//台湾
            name = 'domesticCommissiondetailsTW'
          }else if(type==4){//同业
            name = 'TradeTicketDetails'
          }
          this.$router.push({
            name: name,
            query: {
              Type: 1,
              TCNUM: row.TCNUM,
              blank: 'y'
            }
          });
        },
        getCompany(){
                this.apipost('admin_get_BranchGetList',this.getCompanyMsg,res=>{
                    if(res.data.resultCode==1){
                        this.companyList=res.data.data;
                    }else{}
                },err=>{})
            },
            showDialog(ConfigId, OfferId) {
                this.dialog = {
                    show: true,
                    ConfigId,
                    OfferId
                }
                this.$nextTick(() => {
                this.$refs.dialog.getPostData()
                })
            },
            selectable(row, index) {
                if(this.active==1){
                    return true
                }else{
                    return false
                }
            },
            setAudit(type){
                let ids = this.multipleSelection.map(x=>{ return x.TCID})
                if(ids.length==0){
                    return this.$message.error('请勾选需要批量审核的数据');
                }
                let that = this;
                that.$confirm('是否通过该批量审核数据?', this.$t('tips.tips'), {
                    confirmButtonText: this.$t('pub.sureBtn'),
                    cancelButtonText: this.$t('pub.cancelBtn'),
                    type: 'warning'
                }).then(() => {
                    for(let i=0;i<ids.length;i++){
                        setTimeout(()=>{
                            this.groupAudit(2,ids[i],'multiple',(i+1)==ids.length?ids.length:0)
                        },500)
                    }
                }).catch(() => {

                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            getControlList() {
                this.msg.pageIndex = 1;
                this.getList()
            },
            handleSizeChange(e){
                this.msg.pageSize = e;
                this.getList()
            },
            handleCurrentChange(e){
                this.msg.pageIndex = e;
                this.getList()
            },
            getList() {
                this.loading = true
                let msg = JSON.parse(JSON.stringify(this.msg))
                if(msg.TCID==''){
                    msg.TCID = 0
                }
                this.apipost(
                    "travel_get_GetOutGroupAuditPageListNew",
                    msg,
                    res => {
                        this.loading = false
                        if (res.data.resultCode == 1) {
                            this.dataList = res.data.data.pageData;
                            this.total = res.data.data.count;

                        }else{
                            this.Error(res.data.message);
                        }
                    },
                    err => {

                    }
                );
            },
            shenhei(item) {
                let that = this;
                that.$confirm('是否审核通过该团?', this.$t('tips.tips'), {
                    confirmButtonText: this.$t('pub.sureBtn'),
                    cancelButtonText: this.$t('pub.cancelBtn'),
                    type: 'warning'
                }).then(() => {
                    this.groupAudit(2,item.TCID)
                }).catch(() => {

                });
            },
            cancelOrderHandler(){
                if(!this.cancelRemark) return this.Error('请输入驳回缘由')
                let that = this;
                that.$confirm('是否驳回该团?', this.$t('tips.tips'), {
                    confirmButtonText: this.$t('pub.sureBtn'),
                    cancelButtonText: this.$t('pub.cancelBtn'),
                    type: 'warning'
                }).then(() => {
                    //掉接口
                    this.groupAudit(3,this.dataRow.TCID)
                }).catch(() => {

                });
            },
            bohui(item) {
                this.dataRow = item
                this.cancelOrderDialog = true
                return
                let that = this;
                that.$confirm('是否驳回该团?', this.$t('tips.tips'), {
                    confirmButtonText: this.$t('pub.sureBtn'),
                    cancelButtonText: this.$t('pub.cancelBtn'),
                    type: 'warning'
                }).then(() => {
                    //掉接口
                    this.groupAudit(3,item.TCID)
                }).catch(() => {

                });
            },
            groupAudit(type,TCID,name,length){

                this.apipost("travel_post_SetOutGroupAuditInfo", {
                    TCID:TCID,
                    OutGroupAuditState:type,
                    OutGroupAuditRemark:this.cancelRemark
                }, res => {
                    if (res.data.resultCode == 1) {
                        if(!name){
                           this.cancelOrderDialog = false
                           this.Success(res.data.message);
                           this.getList()
                        }else{
                            if(length){
                                this.cancelOrderDialog = false
                                this.Success(res.data.message);
                                this.getList()
                            }
                        }
                    } else {
                        this.Error(res.data.message);
                    }
                },
                    err => { }
                );
            },
            goTeamBalance(id, OutBranchId) {//团队收支明细
                this.$router.push({
                    name: "TeamBalancePayment",
                    query: {
                        id: id,
                        IsHaveAuth: true,
                        blank: "y",
                        tab: "团队收支明细"
                    }
                });
            },
            getTeamList() {
                this.apipost("travel_get_GetTravelPriceTeamTypeList", {}, res => {
                    if (res.data.resultCode == 1) {
                        this.TeamListArr = res.data.data;
                    } else {
                        this.Error(res.data.message);
                    }
                },
                    err => { }
                );
            },
            goTravel(TCID){//跳转到团队列表
                this.$router.push({
                    path: 'TravelControlList',
                    query: {
                        TCID: TCID,
                        blank: 'y',
                        tab: '团控列表'
                    }
                });
            }
        }
    }

</script>
<style scoped>
    .groupApproval .singeRowTable {
        margin-top: 20px;
    }

    ._nav {
        margin: 20px 0 0 0;
        background-color: #f5f5f5;
    }

    ._nav li {
        float: left;
        font-size: 14px;
        color: #666666;
        padding: 15px 20px;
        cursor: pointer;
        position: relative;
        background-color: #f1f1f1;
        margin-right: 5px
    }

    ._nav li._active {
        background-color: #FFFFFF;
        color: #333333
    }

    ._nav li._active::after {
        content: "";
        width: 20px;
        height: 3px;
        background-color: #E95252;
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 38%;
    }

    ._icon_btn i {
        width: 30px;
        height: 30px;
        display: inline-block;
        color: white !important;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        margin-right: 10px;
        cursor: pointer;
        outline: none;
    }

    ._icon_btn i.icon-ico_commodity_defaul {
        background-color: #F16C3C;
    }

    ._icon_btn i.icon-ico_commodity_defaul:hover {
        background-color: #e87c54
    }

    ._icon_btn i.icon-ico_commodity_defaul:active {
        background-color: #f76630
    }

    ._icon_btn i.icon-shenhebohui {
        background-color: #E95252
    }

    ._icon_btn i.icon-mingxi {
        background-color: rgb(71, 191, 140)
    }
</style>
