<template>
    <div class="visa-box" style="min-height: 830px;">
        <div class="visasearch-ul">
            <div class="visasearch-li">
                <div class="feeType-box">
                    <label>费用类型: </label>
                    <el-select  v-model="feeTypValue" filterable placeholder="请选择费用类型"  @change="filtersub()">
                        <el-option
                        v-for="item in feeTypeData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="feeType-box">
                    <label>费用子类型: </label>
                    <el-select @change="downtrigger()" :disabled="banned" v-model="feeSubTypeValue" filterable placeholder="请选择费用子类型">
                        <el-option
                        v-for="item in feeSubTypeData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="feeType-box">
                    <label>财务审核: </label>
                    <el-select @change="downtrigger()" v-model="financialValue" filterable placeholder="请输入财务审核状态">
                        <el-option
                        v-for="item in financialAudit"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="feeType-box">
                    <label>总经理审核: </label>
                    <el-select @change="downtrigger()" v-model="GMValue" filterable placeholder="请输入总经理审核状态">
                        <el-option
                        v-for="item in GMAudit"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="feeType-box">
                    <label>是否付款: </label>
                    <el-select @change="downtrigger()" v-model="isPaySign" filterable placeholder="请输入总经理审核状态">
                        <el-option key="-1" label="全部" value="-1"></el-option>
                        <el-option key="0" label="未付款" value="0"></el-option>
                        <el-option key="1" label="已付款" value="1"></el-option>
                    </el-select>
                </div>
                <div class="feeType-box">
                    <label>费用描述:</label>
                    <el-autocomplete
                    popper-class="custom-autocomplete-dropdown"
                    style="width:100%;"
                    v-model="formInline.feeDesc"
                    :fetch-suggestions="querySearchAsync"
                    :trigger-on-focus="false"
                    placeholder="请输入或选择"
                    @input="downtrigger()"
                    @select="handleSelect"
                    >
                        <template slot-scope="{ item }">
                            <div style="width: 300px">{{ item.instructions }}</div>
                        </template>
                    </el-autocomplete>
                    <!-- <el-select popper-class="my-select" style="width:100%" v-model="formInline.feeDesc" clearable filterable remote :remote-method="DailyFeeKeywordSearch" :loading="selectLoading" @change="downtrigger()" placeholder="请选择">
                        <el-option
                        v-for="item in inputArr"
                        :key="item.id"
                        :label="item.instructions"
                        :value="item.instructions">
                        </el-option>
                    </el-select> -->
                    <!-- <el-input @input="downtrigger()" v-model="formInline.feeDesc" placeholder="费用描述"></el-input> -->
                </div>
                <div class="feeType-box">
                    <label>申请人: </label>
                    <el-select @change="downtrigger()" v-model="userNameValue" filterable placeholder="请选择申请人">
                        <el-option
                        v-for="item in userNameData"
                        :key="item.id"
                        :label="item.cnName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <el-button @click="addDaily()" type="primary">新增数据</el-button>
            </div>
            <!-- <div class="search-li">
                <el-button type="primary">查询</el-button>
            </div> -->
        </div>
        <el-row>
            <!-- <el-button type="primary">导出费用</el-button>
            <el-button type="primary">批量生成</el-button> -->
            
          </el-row>
        <div class="dailyment-box">
            <template>
                <el-table
                height="700"
                :data="tableData"
                border
                :row-class-name="rowClassName"
                style="width: 100%">
                    <el-table-column
                        prop="rouNumber"
                        label="序 号"
                        width="55">
                        <template slot-scope="scope">
                            {{(currentPage - 1) * pageSize + scope.$index + 1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="companyName"
                        width="200"
                        label="公 司">
                    </el-table-column>
                    <el-table-column
                        prop="instructions"
                        label="费用描述"
                       >
                    </el-table-column>
                    <el-table-column
                        prop="sumPrice"
                        :formatter="numFilter"
                        label="费用总计"
                        width="110">
                    </el-table-column>
                    <el-table-column
                        prop="createUser"
                        label="申请人"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="createTime"
                        label="申请时间"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="fAuditDesc"
                        label="财务审核"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="mAuditDesc"
                        label="总经理审核"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        label="是否付款"
                        width="100">
                        <template slot-scope="scope">
                            {{ scope.row.isPay==1?'已付款':'未付款' }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="Id"
                        label="操 作"
                        width="200">
                        <template slot-scope="scope">
                            <el-button
                            title="生成"
                            size="mini"
                            @click="handleGenerate(scope.$index, scope.row)"><i class="el-icon-download"></i></el-button>
                            <el-button
                            title="详情"
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit-outline"></i></el-button>
                            <el-button
                            title="删除"
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row,tableData)"><i class="el-icon-delete"></i></el-button>
                          </template>
                    </el-table-column>
                </el-table>
            </template>
            <div class="block">
                <el-pagination align='center' 
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange"
                    :current-page="currentPage" 
                    :page-sizes="[5,10,15,20]" 
                    :page-size="pageSize" 
                    layout="total, sizes, prev, pager, next" 
                    :total="tableDataLength">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    
    data() {
        return {
            banned:true,
            input: '',
            financialValue:-1,
            financialAudit:[
                {
                    value: -1,
                    label: '全部'
                },
                {
                    value: 0,
                    label: '未审核'
                },
                {
                    value: 1,
                    label: '已通过'
                },
                {
                    value: 2,
                    label: '未通过'
                },
            ],
            GMValue:-1,
            GMAudit:[
                {
                    value: -1,
                    label: '全部'
                },
                {
                    value: 0,
                    label: '未审核'
                },
                {
                    value: 1,
                    label: '已通过'
                },
                {
                    value: 2,
                    label: '未通过'
                },
            ],
            feeTypeData:[
                {
                    id: -1,
                    name: "全部"
                },
            ],
            feeTypValue:-1,
            userNameData:[
                
            ],
            userNameValue:'',
            isPaySign:"-1",//是否付款
            feeSubTypeData:[
                {
                    id: -1,
                    name: "全部",
                    sTid:'-1'
                }
            ],
            feeSubTypeValue:-1,
            formInline:{
                feeDesc:""
            },
            tableData: [],
            tableDataLength: 0, // 数据总条数
            currentPage: 1,     // 当前页码
            pageSize: 10 ,       // 每页的数据条数
           
            multipleTable:[],
            token:'',
            userid:'',
            sqrpd:false,
            inputArr:[],
            selectLoading:false,
        }
    },
    methods:{
        //异步搜索方法
        querySearchAsync(queryString, cb) {
            if (queryString === '' || queryString.trim() === '') {
                cb(this.inputArr);
                return;
            }
            this.selectLoading = true;
            var url = "/api/System/DailyFeeKeywordSearch?keyword=" + queryString;
            var that = this;

            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    const results = res.data.data || [];
                    // 如果没有搜索结果，添加一个自定义选项
                    if (results.length === 0 && queryString.trim() !== '') {
                        results.push({
                            id: 'custom',
                            teamName: queryString,
                            clientUnit: '自定义输入',
                            isCustom: true
                        });
                    }
                    console.log(results);
                    
                    cb(results);
                } else {
                    cb([]);
                }
            }).finally(() => {
                that.selectLoading = false;
            });
        },

        // 处理选择
        handleSelect(item) {
            if (item.isCustom) {
                // 如果是自定义输入，直接使用输入的值
                this.formInline.feeDesc = item.instructions;
                this.downtrigger();
            } else {
                this.formInline.feeDesc = item.instructions;
                this.downtrigger();
            }
        },
        

        //搜索提示
        DailyFeeKeywordSearch(query) {
            if (query !== '') {
                this.selectLoading=true;
                var url = "/api/System/DailyFeeKeywordSearch?keyword=" + query+"&auditType=0"
                var that = this
                this.$axios({
                    method: 'get',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.inputArr = res.data.data;
                    }else{
                        that.inputArr=[];
                    }
                }).finally(()=>{
                    that.selectLoading=false;
                })
            }
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.postPageDailyPaymentList()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.postPageDailyPaymentList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        getRowKeys(row) {
            return row.num
        },
        numFilter(row,column) {
            return parseFloat(row[column.property]).toFixed(4);
        },
        postPageDailyPaymentList() {
            var url = "/api/Financial/PostPageSearchDailyPaymentList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    pageIndex: that.currentPage,
                    pageSize: that.pageSize,
                    companyId: -1,
                    financialAuditStatus: that.financialValue,//财务审核
                    managerAuditStatus: that.GMValue,  //总经理审核
                    feeTypeId: that.feeTypValue,           //费用类型
                    feeSubTypeId: that.feeSubTypeValue,       //费用子类型
                    feeDesc: that.formInline.feeDesc,    //描述
                    createUserId: that.userNameValue, //申请人
                    isPaySign:that.isPaySign //是否支付
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.tableData = res.data.data.dataList;
                    that.tableDataLength = res.data.data.dataCount;
                }
            })
        },
        //判断审核权限
        judgmentpms(){
            var Permissions=JSON.parse(localStorage.getItem('Permissions'))
            if(!Permissions){
                return
            }
            for(var i=0;i<Permissions.length;i++){
                if(Permissions[i].funid==12){
                    this.userNameValue=-1;
                    this.sqrpd=false;
                }else{
                    this.userNameValue=this.userid
                    this.sqrpd=true;
                }
            }
        },
        getTypeData() {
            var url = "/api/Financial/PostPageSearchDailyPaymentPriceTypeData"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 1,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    for(var u=0;u<res.data.data.userNameData.length;u++){
                        that.userNameData.push(res.data.data.userNameData[u])
                    }
                    // that.userNameData=res.data.data.userNameData;
                    for(var l=0;l<res.data.data.feeTypeData.length;l++){
                        that.feeTypeData.push(res.data.data.feeTypeData[l])
                    }
                    // that.feeTypeData=res.data.data.feeTypeData;
                    that.feeSubType=res.data.data.feeSubTypeData;
                }
            })
        },
        filtersub(){
            this.feeSubTypeData=[
                {
                    id: -1,
                    name: "全部",
                    sTid:'-1'
                }
            ];
            this.feeSubTypeValue=-1;
            for(var i=0;i<this.feeSubType.length;i++){
                if(this.feeSubType[i].sTid==this.feeTypValue){
                    this.feeSubTypeData.push(this.feeSubType[i]);
                }
            }
            if(this.feeSubTypeData.length==1){
                this.banned=true;
            }else{
                this.banned=false;
            }
            this.currentPage= 1;
            this.postPageDailyPaymentList();
        },
        downtrigger(){
            this.currentPage= 1;
            this.postPageDailyPaymentList();
        },
        addDaily(){
            this.$router.push({ path: "/home/DailyFeeedit"});
        },
        //编辑保存全局变量
        handleEdit(index, row) {
            var PaymentRequest = {
                feeTypValue:this.feeTypValue,
                feeSubTypeValue:this.feeSubTypeValue,
                financialValue:this.financialValue,
                GMValue:this.GMValue,
                feeDesc:this.formInline.feeDesc,
                userNameValue:this.userNameValue,
                isPaySign:this.isPaySign,
                pgindex:this.currentPage,
                pageSize:this.pageSize,
            };
            localStorage.setItem('PaymentRequest', JSON.stringify(PaymentRequest));
            this.$router.push({path: '/home/DailyFeeedit?id=' + row.id +''});
        },
        //判断全局变量是否有值
        estimatePaymentRequest(){
            if(JSON.parse(localStorage.getItem('PaymentRequest'))){
                this.feeTypValue=JSON.parse(localStorage.getItem('PaymentRequest')).feeTypValue;
                this.feeSubTypeValue=JSON.parse(localStorage.getItem('PaymentRequest')).feeSubTypeValue;
                this.financialValue=JSON.parse(localStorage.getItem('PaymentRequest')).financialValue;
                this.GMValue=JSON.parse(localStorage.getItem('PaymentRequest')).GMValue;
                this.formInline.feeDesc=JSON.parse(localStorage.getItem('PaymentRequest')).feeDesc;
                this.userNameValue=JSON.parse(localStorage.getItem('PaymentRequest')).userNameValue;
                this.isPaySign=JSON.parse(localStorage.getItem('PaymentRequest')).isPaySign;
                this.currentPage=JSON.parse(localStorage.getItem('PaymentRequest')).pgindex;
                this.pageSize=JSON.parse(localStorage.getItem('PaymentRequest')).pageSize;
                
               
                var url = "/api/Financial/PostPageSearchDailyPaymentPriceTypeData"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + that.token
                    },
                    data: {
                        portType: 1,
                    }
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.feeSubType=res.data.data.feeSubTypeData;
                        that.feeSubTypeData=[
                            {
                                id: -1,
                                name: "全部",
                                sTid:'-1'
                            }
                        ];
                        for(var i=0;i<that.feeSubType.length;i++){
                            if(that.feeSubType[i].sTid==that.feeTypValue){
                                that.feeSubTypeData.push(that.feeSubType[i]);
                            }
                        }
                        if(that.feeSubTypeData.length==1){
                            that.banned=true;
                        }else{
                            that.banned=false;
                        }
                    }
                })
            }
        },
        handleDelete(index, row,rows) {
            this.$confirm('此操作将删除该条信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                var url="/api/Financial/PostDelDailyPayment"
                var that=this
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        portType: 1,
                        id:row.id,
                        userId:that.userid
                    }
                }).then(function(res){
                    if(res.data.code==200){
                        that.$message({
                            message:res.data.msg ,
                            type: 'success',
                            offset:50
                        });
                        rows.splice(index, 1);
                        that.postPageDailyPaymentList();
                    }else{
                        that.$message({
                            message:res.data.msg ,
                            type: 'warning',
                            offset:50
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        handleGenerate(index, row){
            this.$confirm('是否生成此条数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                var url="/api/Financial/PostExcelDailyPaymentDownload"
                var that=this
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        portType: 1,
                        id:row.id,
                    }
                }).then(function(res){
                    if(res.data.code==200){
                        that.$message({
                            message:"生成成功！" ,
                            type: 'success',
                            offset:50
                        });
                        window.open(res.data.msg);
                    }else{
                        that.$message({
                            message:res.data.msg ,
                            type: 'warning',
                            offset:50
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消生成'
                });          
            });
        },
        rowClassName({ row, rowIndex }) {
            if (rowIndex % 2 === 0) {
                return 'warning-row';
            }else{
                return 'success-row';
            }
        }
    },
    beforeRouteLeave(to,from,next) {
        if(to.name=='DailyFeeedit'){
            next();
        }else{
            this.$store.state.PaymentRequest={};
             next();
        }
    },
    created(){
        
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        if(this.userid==21){//zhang
            this.GMValue=0
        }else if(this.userid==22){//zhu
            this.financialValue=0

        }
        this.getTypeData();
        this.judgmentpms();
        this.estimatePaymentRequest();
    }, 
    mounted() {
        this.postPageDailyPaymentList();
        // this.getTypeData();
        
    },
    watch:{
        'feeSubTypeData.length': {
            handler(newValue, oldValue) {
                if (newValue !== oldValue) {
                    // this.banned=false
                }
            }
        }
    },
    beforeRouteLeave(to, from, next) {
        if(to.name!='DailyFeeedit'){
            localStorage.removeItem('PaymentRequest');
        }
        next()
    },
}
</script>
<style>
    .el-table .warning-row {
        background: #f9f9f9;
    }

    .el-table .success-row {
        background: #efefef;
    }
    .visa-box{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
        
    }
    /*.search-li:nth-child(1){
        width: 80%;
    }*/

    /*.search-li:nth-child(2){
        width: 20%;
        justify-content: end;
    }*/
    .visasearch-ul{
        margin-bottom: 10px;
    }
    .visasearch-li label{
        color: #606266;
    }
    .visasearch-li{
        display: flex;
        justify-content: space-between;
    }
    .visasearch-li>div{
        margin-right: 10px;
    }
    .dailyment-box .el-table th.el-table__cell>.cell{
        text-align: center;
    }
    .dailyment-box .el-table td.el-table__cell div{
        text-align: center;
    }
    .dailyment-box .block{
        margin-top: 10px;
    }
    .visa-box .el-row{
        text-align: right;
        margin-bottom: 5px;
    }
    .visas-list{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
    }
    .visas-title{
        display: flex;
        font-size: 17px;
        font-weight:600 ;
        color: #555;
        margin-top: 8px;
        margin-bottom: 2px;
        justify-content: space-between;
        align-items: center;
    }
    .visas-box{
        display: flex;
    }
    .visas-box>button{
        margin-left: 10px;
        padding: 8px 20px;
    }
 
    .country-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .interpret-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .dailyment-box .el-link{
        margin: 0 8px;
    }
    .visasearch-li .feeType-box{
        width: 200px;
        margin-right: 0;
    }
    .feeType-box .el-select{
        width: 100%;
    }
    .feeType-box label{
        font-size: 14px;
        color: #606266;
    }
    .my-select .el-select-dropdown__item {
        width: 350px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .my-select .el-select-dropdown__list {
        width: 350px;
    }
    .custom-autocomplete-dropdown{
        width: 350px !important;
    }
</style>y