<template>
    <div class="app-container" id="costApplyList">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
                <el-form-item prop="startTime">
                    <el-date-picker
                    v-model="queryParams.startTime"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="开始日期"
                    @change="() => queryParams.endTime = ''"
                    style="width: 130px"
                    />
                </el-form-item>
                <el-form-item>-</el-form-item>
                <el-form-item prop="endTime">
                    <el-date-picker
                    v-model="queryParams.endTime"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="结束日期"
                    :picker-options="{ disabledDate: (t) => t.getTime() < new Date(queryParams.startTime).getTime() - 86400000}"
                    style="width: 130px"
                    />
                </el-form-item>
            <el-form-item prop="unitIds">
                <treeselect
                    v-model="queryParams.unitId"
                    :options="unitList" :normalizer="normalizer"
                    :show-count="true" style="width: 240px" :disable-branch-nodes="true"
                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
                    placeholder="请选择结算单位" @select="unitChange"
                /> 
                <!-- <el-cascader v-model="unitIds"
                    :show-all-levels="false"
                    :options="unitList"
                    :props="selectTreeProps"
                    filterable
                    clearable 
                    collapse-tags 
                    @change="unitChange" 
                    placeholder="请选择单位"
                ></el-cascader>  -->
            </el-form-item>
            <el-form-item prop="projectIds">
                <treeselect
                    v-model="queryParams.projectId"
                    :options="proList" :normalizer="normalizer"
                    :show-count="true" style="width: 240px" :disable-branch-nodes="true"
                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
                    placeholder="请选择结算工程" @select="proChange"
                />
                <!-- <el-cascader v-model="projectIds"
                        :show-all-levels="false"
                        :options="proList"
                        :props="selectTreeProps"
                        filterable clearable
                        collapse-tags 
                        @change="proChange"
                        placeholder="请选择工程"  
                    ></el-cascader>  -->
            </el-form-item>
            <el-form-item prop="agreementCode">
                <el-input v-model="queryParams.agreementCode" placeholder="请输入协议号" clearable disabled/>
            </el-form-item>
            <el-form-item prop="keyWord">
                <el-input v-model="queryParams.keyWord" placeholder="请输入关键词" clearable />
            </el-form-item>
            <el-form-item prop="status">
                <el-select
                    v-model="queryParams.status"
                    placeholder="请选择工程结算状态"
                    clearable
                    filterable
                >
                    <el-option label="待审核" value="1"></el-option>
                    <el-option label="审核通过" value="2"></el-option>
                    <el-option label="审核驳回" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >查询</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="tableList" :max-height="650">
            <el-table-column label="序号" align="center" type="index">
                <template slot-scope="scope">
                    <span>{{
                        (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="结算时间" align="center" prop="createTime" width="100"/> 
            <el-table-column label="结算人" align="center" prop="createBy" :show-overflow-tooltip="true"/> 
            <el-table-column label="结算单位" align="center" prop="unitName" width="200"/>
            <el-table-column label="结算工程" align="center" prop="projectName" width="200"/>
            <el-table-column label="协议号" align="center" prop="agreementCode" :show-overflow-tooltip="true"/> 
            <el-table-column label="合计费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
                <template slot-scope="scope" v-if="scope.row.costs != null && scope.row.costs!=''">
                            {{ scope.row.costs.toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column label="结算状态" align="center" prop="status" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.cost_status" :value="scope.row.status"/>
                </template>
                <!-- <template slot-scope="scope">
                    <span v-if="scope.row.status == '0'">未结算</span>
                    <span v-if="scope.row.status == '1'">已结算</span>
                    <span v-if="scope.row.status == '2'">已审核</span>
                    <span v-if="scope.row.status == '3'">已驳回</span>
                </template> -->
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
            <el-table-column label="操作" align="center"  class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-search"
                        @click="handleApply(scope.row)"
                        >查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />


    </div>
</template>

<script>
import {
    getProjectList,
    getUnitList,
    getAgreementInfoById, 
} from '@/api/back/index.js'  
import { getSltRecord } from '@/api/business/index'
import vueEasyPrint from "vue-easy-print";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: 'CostApplyList',
    dicts: ['cost_status'],
    components: { Treeselect },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true, 
            // 总条数
            total: 0,
            // 单位数据
            unitList: [],
            // 工程数据
            proList: [],
            unitIds: null,
            projectIds: null,
            selectTreeProps: {
                children: 'children',
                label: 'name', 
                value: 'id',
                // multiple: true,//false
            },  
            // statusList: [
            //     { id: '1', name: '未结算' },
            //     { id: '2', name: '已结算' },
            //     { id: '3', name: '已审核' },
            //     { id: '4', name: '已驳回' },
            // ],
            // 表格数据
            tableList: [], 
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10, 
                status: '',
                isCommit:'',
                unitId: null,
                projectId: null,
                agreementId: '',
                agreementCode: '',
                time: null,
                keyWord: '',
                startTime: '',
                endTime: '',
            },
            openPrint:false
        }
    },
    created() { 
        this.GetUnitData()
        this.GetProData()
        this.getList()
    },
    methods: {
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.name,
                children: node.children,
            };
        }, 
        // 获取 来往单位 列表数据
        async GetUnitData() {
                const params = {
                    // projectId: this.queryParams.projectId /*  */,
                }
                const res = await getUnitList(params)
                this.unitList = res.data;

                this.getAgreementInfo() 
        },
        unitChange(val){
            // if(val&&val.length>0){
            //     this.queryParams.unitId=this.unitIds[this.unitIds.length - 1]
            // }else if(val&&val.length==0){
            //     this.queryParams.unitId=""
            // }
            // this.GetProData()
            setTimeout(()=>{
                this.queryParams.projectId=null
                this.queryParams.agreementId = null
                this.queryParams.agreementCode = null
                this.GetProData()
            },500)  
        }, 
        // 获取 工程名称 列表数据
        async GetProData() {
                const params = {
                    unitId: this.queryParams.unitId,
                }
                const res = await getProjectList(params)
                this.proList = res.data;
               
                this.getAgreementInfo() 
        },
        proChange(val){
            // if(val&&val.length>0){
            //     this.queryParams.projectId=this.projectIds[this.projectIds.length - 1]
            // }else if(val&&val.length==0){
            //     this.queryParams.projectId=""
            // }
            // this.GetUnitData()
            setTimeout(()=>{
                this.GetUnitData()
            },500) 
        },
        // 获取 协议id
        async getAgreementInfo() {
            if (this.queryParams.unitId && this.queryParams.projectId) {
                const params = {
                    unitId: this.queryParams.unitId,
                    projectId: this.queryParams.projectId,
                }
                const res = await getAgreementInfoById(params)
                console.log(res)
                if (!(res.data && res.data.agreementId)) {
                    this.$message.error('当前单位和工程无协议！')
                    this.queryParams.unitId = null
                    this.queryParams.projectId = null
                    this.GetUnitData()
                    this.GetProData()
                } else {
                    this.queryParams.agreementId = res.data.agreementId
                    this.queryParams.agreementCode = res.data.agreementCode 
                }
            }
        }, 
        /** 查询列表 */
        getList() {
            this.loading = true
            const params = {
                unitId: this.queryParams.unitId,
                proId: this.queryParams.proId,
                keyWord: this.queryParams.keyWord,
                status: this.queryParams.status,
                startTime: this.queryParams.startTime,
                endTime: this.queryParams.endTime,
                pageSize: this.queryParams.pageSize,
                pageNum: this.queryParams.pageNum
            }
            getSltRecord(params).then((response) => {
                this.tableList = response.rows
                this.total = response.total
                this.loading = false
            })
        }, 
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.unitIds=[]
            this.projectIds=[] 
            this.queryParams.time=[]
            this.queryParams={
                pageNum: 1,
                pageSize: 10, 
                status: '',
                isCommit:'',
                unitId: null,
                projectId: null,
                agreementId: '',
                agreementCode: '',
            }
            this.resetForm('queryForm')
            this.handleQuery()
        }, 
        //结算申请
        handleApply(row) {
            let arr = row
            // console.log(arr)
            // console.log(this.ids)
            // console.log(JSON.stringify(arr))
            // this.$tab.closeOpenPage({
            //     path: '/cost/costApplyDetail',
            //     query: {
            //         rowData: JSON.stringify(arr),
            //     },
            // })
            this.$emit("goDetail",JSON.stringify(arr));
        },
        handleApplyList() {
            if (this.ids.length < 1) {
                this.$message.error('请候选需要结算的数据！')
                return
            }
            if (this.ids.length > 0) {
                let arr = this.ids
                this.$tab.closeOpenPage({
                    path: '/cost/cost/costApplyAdd',
                    query: {
                        rowData: JSON.stringify(arr),
                    },
                })
            }
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        openPrintDialog(){
            this.openPrint = true
        },
        //维修任务单打印
        print() {
          this.$refs.remarksPrintRef.print();
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            // const agreementId = row.agreementId;
            // let param = {
            //   agreementId:row.agreementId+''
            // }
            // this.$modal.confirm('是否确认删除该数据项？').then(function() {
            //   return removeAgreement(param);
            // }).then(() => {
            //   this.getList();
            //   this.$modal.msgSuccess("删除成功");
            // }).catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
            // this.download('material/agreementInfo/export', {
            //   ...this.queryParams
            // }, `协议_${new Date().getTime()}.xlsx`)
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
    width: 80px !important;
    margin-bottom: 10px;
}
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.tabelColumn {
    width:1000px;
    height: 50px;
    display: flex;
    align-items: center;
    border: 1px solid #9c9c9c;
    // margin-bottom: 1px; 
    border-bottom: none;
}
.columnLabel {
    height: 50px;
    line-height: 50px;
    text-align: center; 
    border-left: none;
}
.columnContent {
    height: 50px;
    line-height: 50px;
    text-align: center; 
    border-left: 1px solid #9c9c9c;
} 
</style>
