<style scoped>
::v-deep .ant-steps-dot .ant-steps-item-content {
    width: auto;
}
::v-deep .ant-steps-dot .ant-steps-item-active .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
    background: rgb(11, 190, 135);
    width: 15px;
    height: 15px;
    /* margin-top: 5px; */
    margin-left: 2px;
}
::v-deep .endStatus .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
    background: #1890ff !important;
    width: 15px;
    height: 15px;
    /* margin-top: 5px; */
    /* margin-left: 2px; */
}
::v-deep .ant-steps-dot .ant-steps-item-icon {
    width: 15px;
    height: 15px;
    margin-top: 5px;
    margin-left: -4px;
}
::v-deep .ant-form-item {
    width: 100%;
}
::v-deep .look-show .ant-form-item-label {
    font-size: 20px;
}
::v-deep .look-show .ant-form-item-control-wrapper {
    font-size: 16px;
}
</style>
<template>
    <div class="reimbursement">
        <div class="chartBox">
            <a-row :gutter="20" id="printContent">
                <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
                    <a-card
                        class="search-box step-jump"
                        title="个人信息"
                        v-if="!!$route.query.type && ($route.query.type == 'add' || $route.query.type == 'edit')"
                    >
                        <a-form
                            ref="formRef"
                            name="advanced_search"
                            class="ant-advanced-search-form"
                            :form="form"
                            layout="inline"
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol"
                        >
                            <a-row :gutter="24">
                                <a-col :span="6">
                                    <a-form-item label="申请人">
                                        {{ userInfo().realname }}
                                    </a-form-item>
                                </a-col>
                                <a-col :span="6">
                                    <a-form-item label="申请日期">
                                        <a-month-picker
                                            v-decorator="[
                                                'statDate',
                                                {
                                                    rules: [{ required: true, message: '请选择申请日期' }],
                                                    initialValue: moment().format('YYYY-MM'),
                                                },
                                            ]"
                                            format="YYYY-MM"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="6">
                                    <a-form-item label="部门">
                                        {{departName}}
                                        <!-- <j-tree-select
                                            v-decorator="[
                                                'departId',
                                                {
                                                    rules: [{ required: true, message: '请选择部门' }],
                                                },
                                            ]"
                                            placeholder="请选择部门"
                                            dict="sys_depart,depart_name,id"
                                            pidField="parent_id"
                                            style="width: 200px"
                                        >
                                        </j-tree-select> -->
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="24">
                                <a-col :span="6">
                                    <a-form-item label="公司主体">
                                        <a-select
                                            v-decorator="[
                                                'companyId',
                                                {
                                                    rules: [{ required: true, message: '请选择公司' }],
                                                },
                                            ]"
                                            style="width: 200px"
                                            :filterOption="filterOption"
                                            showSearch
                                            allowClear
                                            labelInValue
                                        >
                                            <a-select-option
                                                v-for="(item, index) in dataDimensionList"
                                                :key="index + 1"
                                                :value="item.companyId"
                                            >
                                                {{ item.companyName }}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="6">
                                    <a-form-item label="媒体">
                                        <a-select
                                            v-decorator="[
                                                'media',
                                                {
                                                    rules: [{ required: true, message: '请选择媒体' }],
                                                },
                                            ]"
                                            style="width: 200px"
                                            :filterOption="filterOption"
                                            showSearch
                                            allowClear
                                            placeholder="请选择媒体"
                                        >
                                            <a-select-option value="快手"> 快手 </a-select-option>
                                            <a-select-option value="聚星"> 聚星 </a-select-option>
                                            <a-select-option value="磁力金牛"> 磁力金牛 </a-select-option>
                                            <a-select-option value="头条"> 头条 </a-select-option>
                                            <a-select-option value="头条千川"> 头条千川 </a-select-option>
                                            <a-select-option value="公共费用"> 公共费用 </a-select-option>

                                            <a-select-option value="快手服务商"> 快手服务商 </a-select-option>
                                            <a-select-option value="货盘"> 货盘 </a-select-option>
                                            <a-select-option value="素造"> 素造 </a-select-option>
                                            <a-select-option value="管理职能"> 管理职能 </a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="6" v-if="expenseList.length > 0">
                                    <a-form-item v-bind="tailFormItemLayout">
                                        <a-button type="primary" @click="handleSubmit" :disabled="disabledJudge"
                                            >提交</a-button
                                        >
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </a-card>
                    <a-card class="search-box step-jump look-show" title="个人信息" v-else>
                        <a-form layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-row :gutter="24" v-if="lookData">
                                <a-col :span="9">
                                    <a-form-item label="公司主体"> {{ lookData.companyName }}</a-form-item>
                                </a-col>
                                <a-col :span="9">
                                    <a-form-item label="媒体"> {{ lookData.media }}</a-form-item>
                                </a-col>
                                <a-col :span="9">
                                    <a-form-item label="申请时间"> {{ lookData.statDate }}</a-form-item>
                                </a-col>
                                <a-col :span="9">
                                    <a-form-item label="部门"> {{ lookData.departName }}</a-form-item>
                                </a-col>
                                <a-col :span="9">
                                    <a-form-item label="申请人"> {{ lookData.userName }}</a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </a-card>
                </a-col>
                <a-col :sm="24" style="margin-bottom: 20px">
                    <a-card class="search-box step-jump" title="费用信息">
                        <a-button
                            type="primary"
                            @click="
                                policyOperationStatus = true
                                addType = 'add'
                            "
                            v-if="(!$route.query.person || $route.query.person == 1) && $route.query.type != 'look'"
                            style="margin-bottom: 15px"
                            >新增费用信息</a-button
                        >
                        <div v-if="lookData" style="display: flex; justify-content: space-between">
                            <div style="display: flex">
                                <h2 style="margin-right: 50px">报销金额：{{ (+lookData.amount).toFixed(2) }}</h2>
                                <h2>发票总数： {{ lookData.invoices }}</h2>
                            </div>

                            <a-button
                                type="primary"
                                v-if="$route.query.status == 2"
                                style="margin-left: 15px"
                                @click="showPrintDetail"
                                >打印</a-button
                            >
                        </div>
                        <a-table
                            :columns="expenseColumns"
                            :data-source="expenseList"
                            bordered
                            tableLayout="auto"
                            :pagination="false"
                            :loading="expenseLoading"
                            style="word-break: break-all"
                        >
                            <span slot="project" slot-scope="text, record">
                                {{ projectName(text) }}
                            </span>
                            <span slot="fileUrls" slot-scope="text, record">
                                <div v-if="!!text || !!record.excelUrls">
                                    <a @click="showFileOk(record)">查看</a>
                                </div>
                                <div v-else>-</div>
                            </span>
                            <span slot="auditDescription" slot-scope="text, record">
                                <div v-if="!!text">
                                    <a @click="reasonReject(record)">查看</a>
                                    <!-- <div v-html="refuseReasonImage" style="width: 100%"></div> -->
                                </div>
                                <div v-else>-</div>
                            </span>

                            <div slot="action" slot-scope="text, record">
                                <span v-if="!$route.query.person || $route.query.person == 1">
                                    <a
                                        @click="editProject(record)"
                                        :disabled="
                                            (!!$route.query.type && $route.query.type == 'look') || record.status == '1'
                                        "
                                        >编辑</a
                                    >
                                    <a-divider type="vertical" />
                                    <a-popconfirm title="确定删除吗?" @confirm="() => deleteProject(record)">
                                        <a
                                            :disabled="
                                                (!!$route.query.type && $route.query.type == 'look') ||
                                                record.status == '1'
                                            "
                                            >删除</a
                                        >
                                    </a-popconfirm>
                                </span>
                                <span v-else>
                                    <a
                                        @click="editStatusOpen(record)"
                                        :disabled="
                                            (!!$route.query.person &&
                                                ($route.query.person == '1' || $route.query.person == '3')) ||
                                            record.status == '0' ||
                                            record.status == '1' ||
                                            $route.query.status == '2'
                                        "
                                        >驳回</a
                                    >
                                </span>
                            </div>
                        </a-table>
                    </a-card>
                </a-col>
            </a-row>
            <!--  -->
            <div
                style="width: 100%; display: flex; justify-content: flex-end"
                v-if="!!$route.query.person && $route.query.person != '1' && $route.query.status != '2'"
            >
                <!--  -->
                <a-button
                    type="primary"
                    @click="bfOk"
                    :loading="bfLoading"
                    :disabled="!disabledJudge || $route.query.person == '3'"
                    >部分通过</a-button
                >
                <a-button type="primary" @click="refuse" style="margin: 0 15px" :disabled="$route.query.person == '3'"
                    >审核拒绝</a-button
                >
                <a-button
                    type="primary"
                    @click="allOk"
                    :loading="allLoading"
                    :disabled="disabledJudge || $route.query.person == '3'"
                    >审核通过</a-button
                >
            </div>
        </div>

        <a-modal
            v-if="printMain"
            title="打印内容"
            :visible="printMain"
            :footer="null"
            @cancel="printMain = false"
            v-dialog-drag
            width="50%"
        >
            <div id="printId">
                <div class="title" style="text-align: center">汇创报销</div>
                <div class="cont">
                    <!-- 第一行表格 五列 -->
                    <div class="table">
                        <div class="lump2" v-for="(item, index) in tableArr" :key="index">
                            <div class="box">
                                <div class="content1">{{ item.key }}</div>
                                <el-tooltip
                                    v-if="item.value.length > 11"
                                    class="item"
                                    :content="item.value"
                                    placement="top"
                                >
                                    <div :class="item.border !== 'none' ? 'content2' : 'content_border'">
                                        {{ item.value }}
                                    </div>
                                </el-tooltip>
                                <div v-else :class="item.border !== 'none' ? 'content2' : 'content_border'">
                                    {{ item.value }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 第二行表格 三列 2-4 -->
                    <div class="table">
                        <div class="lump2" v-for="(item, index) in tableArr2" :key="index">
                            <div class="box">
                                <div class="content1" :style="'width:' + item.width">{{ item.key }}</div>
                                <el-tooltip
                                    v-if="item.value.length > 11"
                                    class="item"
                                    :content="item.value"
                                    placement="top"
                                >
                                    <div
                                        :class="item.border !== 'none' ? 'content2' : 'content_border'"
                                        :style="'width:' + item._width"
                                    >
                                        {{ item.value }}
                                    </div>
                                </el-tooltip>
                                <div
                                    v-else
                                    :class="item.border !== 'none' ? 'content2' : 'content_border'"
                                    :style="'width:' + item._width"
                                >
                                    {{ item.value }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 第三行表格 一列-->
                    <div class="table">
                        <div class="content3">申请内容</div>
                    </div>
                    <div class="table">
                        <div class="lump4" v-for="(item, index) in tableArr3" :key="index">
                            <div class="box">
                                <div class="content1" style="width: 48.6%">{{ item.key }}</div>
                                <el-tooltip
                                    v-if="item.value.length > 11"
                                    class="item"
                                    :content="item.value"
                                    placement="top"
                                >
                                    <div
                                        :class="item.border !== 'none' ? 'content2' : 'content_border'"
                                        :style="'width:' + item._width"
                                    >
                                        {{ item.value }}
                                    </div>
                                </el-tooltip>
                                <div
                                    v-else
                                    :class="item.border !== 'none' ? 'content2' : 'content_border'"
                                    :style="'width:' + item._width"
                                >
                                    {{ item.value }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table" v-for="(items, indexs) in expenseList">
                        <!-- {{ items }} -->
                        <div class="lump2" v-for="(item, index) in tableArr4" :key="index">
                            <div class="box">
                                <div class="content1" :style="'width:' + item.width">{{ item.key }}</div>
                                <el-tooltip
                                    v-if="item.value.length > 11"
                                    class="item"
                                    :content="item.value"
                                    placement="top"
                                >
                                    <div
                                        :class="item.border !== 'none' ? 'content2' : 'content_border'"
                                        :style="'width:' + item._width"
                                    >
                                        {{
                                            index == 0
                                                ? projectName(items.project)
                                                : index == 1
                                                ? items.amount
                                                : index == 2
                                                ? items.invoices
                                                : '-'
                                        }}
                                    </div>
                                </el-tooltip>
                                <div
                                    v-else
                                    :class="item.border !== 'none' ? 'content2' : 'content_border'"
                                    :style="'width:' + item._width"
                                >
                                    {{
                                        index == 0
                                            ? projectName(items.project)
                                            : index == 1
                                            ? items.amount
                                            : index == 2
                                            ? items.invoices
                                            : '-'
                                    }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table">
                        <div class="lump2" v-for="(item, index) in tableArr5" :key="index">
                            <div class="box">
                                <div class="content1" :style="'width:' + item.width">{{ item.key }}</div>
                                <el-tooltip
                                    v-if="item.value.length > 11"
                                    class="item"
                                    :content="item.value"
                                    placement="top"
                                >
                                    <div
                                        :class="item.border !== 'none' ? 'content2' : 'content_border'"
                                        :style="'width:' + item._width"
                                    >
                                        {{ item.value }}
                                    </div>
                                </el-tooltip>
                                <div
                                    v-else
                                    :class="item.border !== 'none' ? 'content2' : 'content_border'"
                                    :style="'width:' + item._width"
                                >
                                    {{ item.value }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table">
                        <div class="content3">审批流程</div>
                    </div>

                    <a-table
                        :data-source="logList"
                        bordered
                        tableLayout="auto"
                        :pagination="false"
                        :loading="expenseLoading"
                        style="word-break: break-all; width: 100%"
                    >
                        <a-table-column title="审批节点" data-index="state" align="center">
                            <template slot-scope="item, r, i">
                                <span>{{
                                    item == '0'
                                        ? '创建'
                                        : item == '1'
                                        ? '通过'
                                        : item == '2'
                                        ? '拒绝'
                                        : item == '3'
                                        ? '待审核'
                                        : item == '4'
                                        ? '未审核'
                                        : item == '5'
                                        ? '修改'
                                        : '-'
                                }}</span>
                            </template>
                        </a-table-column>
                        <a-table-column title="审批人" data-index="userName" align="center">
                            <template slot-scope="t, r, i">
                                <span>{{ t }}</span>
                            </template>
                        </a-table-column>
                        <a-table-column title="操作记录" data-index="statTime" align="center">
                            <template slot-scope="item, r, i">
                                <span>{{ item }}</span>
                                <span>{{
                                    r.state == '0'
                                        ? '创建'
                                        : r.state == '1'
                                        ? '通过'
                                        : r.state == '2'
                                        ? '拒绝'
                                        : r.state == '3'
                                        ? '待审核'
                                        : r.state == '4'
                                        ? '未审核'
                                        : r.state == '5'
                                        ? '修改'
                                        : '-'
                                }}</span>
                            </template>
                        </a-table-column>
                    </a-table>
                </div>
            </div>
            <div style="display: flex; justify-content: flex-end; margin-top: 15px">
                <a-button type="primary" v-print="printObj">打印</a-button>
            </div>
        </a-modal>
        <a-modal
            v-if="showFile"
            title="查看图片"
            :visible="showFile"
            :footer="null"
            @cancel="showFile = false"
            v-dialog-drag
            width="30%"
        >
            <!-- <div v-if="fileList">
                <img :src="item" v-for="(item, index) in JSON.parse(fileList)" alt="" style="width: 150px" />
            </div> -->
            <div>
                <a-carousel
                    arrows
                    v-if="(fileList && fileList != 'null') || (!!excelUrlList && excelUrlList != 'null')"
                >
                    <div class="content" v-if="!!excelUrlList && excelUrlList != 'null'">
                        <div style="display: flex !important; justify-content: space-around">
                            <div style="display: flex; flex-direction: column; align-items: center; width: 100%">
                                <iframe id="iframeData" style="width: 100%; height: 500px"></iframe>
                            </div>
                        </div>
                    </div>
                    <div v-for="(item, index) in fileList" :key="index" class="content">
                        <div style="display: flex !important; justify-content: space-around">
                            <div style="display: flex; flex-direction: column; align-items: center; width: 100%">
                                <img :src="item" style="width: 100%" />
                            </div>
                        </div>
                    </div>

                    <a-icon
                        type="left-circle"
                        slot="prevArrow"
                        slot-scope
                        style="left: 10px; z-index: 100; font-size: 30px; color: black"
                    />
                    <a-icon
                        type="right-circle"
                        slot="nextArrow"
                        slot-scope
                        style="right: 10px; z-index: 100; font-size: 30px; color: black"
                    />
                </a-carousel>
                <!-- <div v-if="!!excelUrlList && excelUrlList != 'null'">
                    <iframe id="iframeData" style="width: 100%; height: 500px"></iframe>
                </div> -->
            </div>
        </a-modal>

        <a-modal
            v-if="reasonRejectVisible"
            title="驳回原因"
            :visible="reasonRejectVisible"
            :footer="null"
            @cancel="reasonRejectVisible = false"
        >
            <div v-if="reasonRejectData">
                <div v-html="reasonRejectData" style="width: 100%"></div>
            </div>
        </a-modal>
        <!-- 新增、编辑政策 -->
        <a-modal
            v-if="policyOperationStatus"
            dialog-class="policy-operation-class"
            :title="addType === 'add' ? '新增费用' : '编辑费用'"
            :visible="policyOperationStatus"
            :confirmLoading="confirmLoading"
            @ok="handlePolicyOperationSure"
            @cancel="handlePolicyOperationCancel"
        >
            <div>
                <a-form-model
                    class="policy-operation-form"
                    ref="policyOperationForm"
                    :model="policyOperationForm"
                    :rules="policyOperationRules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                >
                    <a-row class="policy-operation-form-left">
                        <a-form-model-item label="报销项目" prop="project">
                            <a-select v-model="policyOperationForm.project" placeholder="请选择报销项目" allow-clear>
                                <a-select-option
                                    :value="item.dcode"
                                    v-for="(item, index) in projectList"
                                    :key="index"
                                    >{{ item.dname }}</a-select-option
                                >
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item
                            label="费用"
                            prop="amount"
                            :rules="{
                                required: true,
                                message: '请输入报销费用',
                                trigger: 'blur',
                            }"
                        >
                            <a-input-number v-model="policyOperationForm.amount" :step="0.01" :precision="2" />
                        </a-form-model-item>
                        <a-form-model-item
                            label="费用产生日期"
                            prop="statDate"
                            :rules="{
                                required: true,
                                message: '费用产生日期必填',
                                trigger: 'change',
                            }"
                        >
                            <a-month-picker v-model="policyOperationForm.statDate" format="YYYY-MM" />
                        </a-form-model-item>
                        <a-form-model-item label="图片">
                            <uploadFile
                                :value.sync="policyOperationForm.fileUrls"
                                :multiple="true"
                                @overUpload="overUpload"
                                :fileCount="10"
                                :size="10240"
                                uploadType="image"
                            />
                        </a-form-model-item>
                        <a-form-model-item label="文件">
                            <uploadFile
                                :value.sync="policyOperationForm.excelUrls"
                                :multiple="true"
                                @overUpload="overUpload"
                                :fileCount="1"
                                uploadType="script"
                            />
                        </a-form-model-item>
                    </a-row>
                    <a-row class="policy-operation-form-right">
                        <a-form-model-item
                            label="报销类别"
                            prop="type"
                            :rules="{
                                required: true,
                                message: '报销类别必选',
                                trigger: 'change',
                            }"
                        >
                            <a-select v-model="policyOperationForm.type" placeholder="请选择报销类别" allow-clear>
                                <a-select-option value="报销">报销</a-select-option>
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item
                            label="发票张数"
                            prop="invoices"
                            :rules="{
                                required: true,
                                message: '发票张数必填',
                                trigger: 'blur',
                            }"
                        >
                            <a-input-number v-model="policyOperationForm.invoices" :step="1" :precision="0" />
                        </a-form-model-item>

                        <a-form-model-item label="备注" prop="remarks">
                            <a-input v-model="policyOperationForm.remarks" placeholder="请输入备注" allow-clear />
                        </a-form-model-item>
                    </a-row>
                </a-form-model>
            </div>
        </a-modal>

        <!-- 驳回原因 -->

        <a-modal
            v-if="rejectVisible"
            title="驳回原因"
            :visible="rejectVisible"
            @cancel="rejectVisible = false"
            @ok="auditDescriptionOk"
        >
            <j-code-editor
                language="javascript"
                v-model="auditDescription"
                v-if="rejectVisible"
                style="min-height: 100px"
            />
        </a-modal>
    </div>
</template>
<script>
import moment from 'moment'

import { getAction, postAction, downFile } from '@/api/manage'
import { mapGetters } from 'vuex'
import { urlAcount } from './policy-management-server.js'
import pick from 'lodash.pick'
import JTreeSelect from '@/components/jeecg/JTreeSelect'
import uploadFile from '@/components/uploadFile.vue'
import { defineComponent, ref } from 'vue'
import JCodeEditor from '@/components/jeecg/JEditor'
export default {
    name: 'policy-management-reimbursement-add',
    data() {
        return {
            printObj: {
                id: 'printId',
                popTitle: '报销内容',
            },
            printMain: false,
            tableArr: [],
            tableArr2: [],
            tableArr3: [],
            tableArr4: [],
            tableArr5: [],
            logList: [],
            form: this.$form.createForm(this),
            showFile: false,
            fileList: null,
            excelUrlList: null,
            labelCol: {
                span: 8,
            },
            wrapperCol: {
                span: 16,
            },
            tailFormItemLayout: {
                wrapperCol: {
                    sm: {
                        span: 24,
                        offset: 8,
                    },
                },
            },
            dataDimensionList: [],
            expenseColumns: [
                {
                    title: '报销项目',
                    align: 'center',
                    dataIndex: 'project',
                    scopedSlots: { customRender: 'project' },
                },
                {
                    title: '报销类别',
                    align: 'center',
                    dataIndex: 'type',
                },
                {
                    title: '费用金额',
                    align: 'center',
                    dataIndex: 'amount',
                    scopedSlots: { customRender: 'amount' },
                },
                {
                    title: '产生日期',
                    align: 'center',
                    dataIndex: 'statDate',
                    scopedSlots: { customRender: 'statDate' },
                },
                {
                    title: '发票张数',
                    align: 'center',
                    dataIndex: 'invoices',
                    scopedSlots: { customRender: 'invoices' },
                },
                {
                    title: '备注',
                    align: 'center',
                    ellipsis: true,
                    dataIndex: 'remarks',
                    scopedSlots: { customRender: 'remarks' },
                    width: 120,
                },
                {
                    title: '附件',
                    align: 'center',
                    dataIndex: 'fileUrls',
                    scopedSlots: { customRender: 'fileUrls' },
                },
                {
                    title: '驳回原因',
                    align: 'center',
                    dataIndex: 'auditDescription',
                    scopedSlots: { customRender: 'auditDescription' },
                },

                {
                    title: '操作',
                    align: 'center',
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' },
                },
            ],
            expenseList: [],
            expenseLoading: false,

            addType: 'add',
            projectList: [],
            policyOperationStatus: false,
            confirmLoading: false,
            policyOperationRules: {
                project: [{ required: true, message: '请选择报销项目', trigger: 'change' }],
            },
            policyOperationForm: {},

            expenseIds: [],
            lookData: null,

            rejectVisible: false,
            auditDescription: null,
            rejectId: null,

            reasonRejectVisible: false,
            reasonRejectData: null,

            bfLoading: false,
            allLoading: false,
            departName:null,
        }
    },
    components: {
        JTreeSelect,
        uploadFile,
        JCodeEditor,
    },
    created() {},
    computed: {
        disabledJudge() {
            var index = this.expenseList.findIndex((item) => {
                return item.status == '0'
            })
            return index > -1 ? true : false
        },
    },
    mounted() {
        this.getCompanyList()
        this.getProjectList()
        let editRecordId = this.$route.query.id
        let editRecordType = this.$route.query.type
        if (editRecordId) {
            this.getDetail(editRecordId)
        } else {
            this.form.setFieldsValue(pick(this.userInfo(), 'departId'))
            this.getAction('/sys/dict/loadDictItem/ctop_reimburse_depart,depart_name,id', {key:this.userInfo().departId}).then(res=>{
                if(res.success){
                    this.departName = res.result[0]
                }
            })
        }
    },
    methods: {
        ...mapGetters(['userInfo']),
        moment,
        showPrintDetail() {
            this.printMain = true
            this.showLog({ id: this.$route.query.id })
            this.tableArr = [
                {
                    key: '申请人',
                    value: this.lookData.userName,
                    border: 'none',
                },
                {
                    key: '申请人部门',
                    value: this.lookData.departName,
                    border: 'none',
                },
                {
                    key: '媒体线',
                    value: this.lookData.media,
                    border: 'none',
                },
            ]
            this.tableArr2 = [
                {
                    key: '提交时间',
                    value: this.lookData.statDate,
                    border: 'none',
                },
                {
                    key: '当前审批状态',
                    value: '已通过',
                    border: 'none',
                },
                {
                    key: '主体',
                    value:
                        this.lookData.companyName.indexOf('数') > -1
                            ? this.lookData.companyName.substr(0, this.lookData.companyName.indexOf('数'))
                            : this.lookData.companyName.substr(0, this.lookData.companyName.indexOf('广')),
                    border: 'none',
                },
            ]
            this.tableArr3 = [
                {
                    key: '报销类别',
                    value: '报销',
                    border: 'none',
                },
            ]
            this.tableArr4 = [
                {
                    key: '报销项目',
                    value: '',
                    border: 'none',
                },
                {
                    key: '报销金额',
                    value: '',
                    border: 'none',
                },
                {
                    key: '报销张数',
                    value: '',
                    border: 'none',
                },
            ]
            this.tableArr5 = [
                {
                    key: '费用产生时间',
                    value: '',
                    border: 'none',
                },
                {
                    key: '金额合计',
                    value: (+this.lookData.amount).toFixed(2),
                    border: 'none',
                },
                {
                    key: '张数合计',
                    value: this.lookData.invoices,
                    border: 'none',
                },
            ]
        },
        showLog(item) {
            this.getAction('/reimburse/apply/queryProcess', { id: item.id })
                .then((result) => {
                    if (result.code === 200) {
                        this.logList = result.result
                    } else {
                        this.$message.error(result.message)
                    }
                })
                .catch((error) => {
                    console.log(error, 'eeee')
                })
                .finally(() => {})
        },
        getDetail(id) {
            this.getAction('/reimburse/apply/queryById', { id: id }).then((res) => {
                if (res.success) {
                    this.expenseIds = JSON.parse(res.result.ids)
                    if (this.$route.query.type == 'look') {
                        this.lookData = res.result
                    } else {
                        var data = res.result
                        data.statDate = moment(data.statDate)
                        data.companyId = { key: data.companyId, label: data.companyName }
                        this.form.setFieldsValue(pick(res.result, 'departId', 'media', 'statDate', 'companyId'))
                    }

                    this.getExpenseList(this.expenseIds)
                }
            })
        },
        showFileOk(item) {
            this.showFile = true
            this.fileList = JSON.parse(item.fileUrls)
            this.excelUrlList = item.excelUrls

            this.$nextTick(() => {
                if (!!item.excelUrls && item.excelUrls != 'null') {
                    document.querySelector('#iframeData').src = JSON.parse(item.excelUrls)[0]
                }
            })
        },
        reasonReject(item) {
            this.reasonRejectVisible = true
            this.reasonRejectData = item.auditDescription
        },
        projectName(theme) {
            if (this.projectList.length > 0) {
                var data = this.projectList.find((item) => {
                    return item.dcode == theme
                })
                return data.dname
            }
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
        disabledDate(current) {
            return current > moment().subtract(1, 'day')
        },
        getFormData(form, className) {
            return this[form].getFieldValue(className)
        },
        //获取公司列表
        getCompanyList() {
            return new Promise((resolve, reject) => {
                this.getAction('/reimburse/apply/getCompanyList').then((res) => {
                    if (res.success) {
                        this.dataDimensionList = res.result
                        resolve(res.result)
                    } else {
                        reject(res.message)
                    }
                })
            })
        },
        //获取报销项目
        getProjectList() {
            return new Promise((resolve, reject) => {
                this.getAction('/reimburse/dict/list').then((res) => {
                    if (res.success) {
                        this.projectList = res.result
                        resolve(res.result)
                    } else {
                        reject(res.message)
                    }
                })
            })
        },
        //获取费用信息
        getExpenseList(ids) {
            return new Promise((resolve, reject) => {
                this.expenseLoading = true
                this.postDataAction('/reimburse/project/queryByIds', ids).then((res) => {
                    if (res.success) {
                        this.expenseLoading = false
                        this.expenseList = res.result
                        resolve(res.result)
                    } else {
                        this.expenseLoading = false
                        reject(res.message)
                    }
                })
            })
        },
        overUpload(urlAll) {
            console.log(urlAll)
        },
        editProject(item) {
            this.getAction('/reimburse/project/queryById', { id: item.id }).then((res) => {
                if (res.success) {
                    this.addType = 'edit'
                    this.policyOperationStatus = true
                    var data = res.result
                    this.policyOperationForm = {
                        amount: +data.amount,
                        fileUrls: JSON.parse(data.fileUrls),
                        excelUrls: JSON.parse(data.excelUrls),
                        id: data.id,
                        invoices: data.invoices,
                        project: data.project,
                        remarks: data.remarks,
                        statDate: moment(data.statDate),
                        type: data.type,
                    }
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        deleteProject(item) {
            this.getAction('/reimburse/project/delete', { id: item.id }).then((res) => {
                if (res.success) {
                    let index = this.expenseIds.indexOf(item.id)
                    this.expenseIds.splice(index, 1)
                    this.getExpenseList(this.expenseIds)
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        // 新增费用确定按钮
        handlePolicyOperationSure() {
            console.log(this.policyOperationForm)

            var paramsData = { ...this.policyOperationForm }
            paramsData.statDate = moment(paramsData.statDate).format('YYYY-MM')
            paramsData.fileUrls = JSON.stringify(paramsData.fileUrls)
            paramsData.excelUrls = JSON.stringify(paramsData.excelUrls)

            this.$refs.policyOperationForm.validate((valid) => {
                if (valid) {
                    this.confirmLoading = true
                    if (this.addType === 'add') {
                        this.handleAddSureBtn(paramsData, '/reimburse/project/add')
                    } else {
                        paramsData.status = ''
                        this.handleAddSureBtn(paramsData, '/reimburse/project/edit')
                    }
                } else {
                    return false
                }
            })
        },
        handleAddSureBtn(data, url) {
            postAction(url, data)
                .then((result) => {
                    if (result.code === 200) {
                        this.$message.success(result.message)
                        this.handlePolicyOperationCancel()
                        this.expenseIds.push(result.result)
                        this.getExpenseList(this.expenseIds)
                    } else {
                        this.$message.error(result.message)
                    }
                })
                .catch((error) => {
                    console.log(error, 'eeee')
                })
                .finally(() => {
                    this.confirmLoading = false
                })
        },
        // 新增费用取消按钮
        handlePolicyOperationCancel() {
            this.policyOperationForm = {}
            this.policyOperationStatus = false
        },
        handleSubmit() {
            this.form.validateFields((err, values) => {
                if (!err) {
                    console.log(values)
                    let params = {}

                    params.userId = this.userInfo().id
                    params.departId = this.userInfo().departId
                    params.media = values.media
                    params.statDate = moment(values.statDate).format('YYYY-MM')
                    params.companyId = values.companyId.key
                    params.companyName = values.companyId.label.replace(/[\r\n]/g, '').trim()
                    params.ids = JSON.stringify(this.expenseIds)

                    if (this.$route.query.type == 'edit') {
                        params.loginId = this.userInfo().id
                        params.id = this.$route.query.id
                        this.postDataAction('/reimburse/apply/edit', params).then((res) => {
                            if (res.success) {
                                this.$nextTick(() => {
                                    this.$bus.$emit(
                                        'remove',
                                        `/policy-management/reimbursementAdd?type=${this.$route.query.type}&id=${this.$route.query.id}`
                                    )
                                })
                                this.$router.replace('/policy-management/reimbursement')
                                this.$message.success(res.message)
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    } else {
                        this.postDataAction('/reimburse/apply/add', params).then((res) => {
                            if (res.success) {
                                this.$bus.$emit('remove', '/policy-management/reimbursementAdd?type=add')
                                this.$router.replace('/policy-management/reimbursement')
                                this.$message.success(res.message)
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    }
                }
            })
        },

        editStatusOpen(item) {
            this.rejectVisible = true
            this.rejectId = item.id
        },
        auditDescriptionOk() {
            if (!!this.auditDescription) {
                var params = {}
                params.id = this.rejectId
                params.auditDescription = this.auditDescription
                params.status = 0
                this.postDataAction('/reimburse/project/edit', params).then((res) => {
                    if (res.success) {
                        this.rejectVisible = false
                        this.getExpenseList(this.expenseIds)
                    } else {
                        this.$message.error(res.message)
                    }
                })
            } else {
                this.$message.error('请填写驳回理由')
            }
        },

        refuse() {
            var params = {}
            params.loginId = this.userInfo().id
            params.userId = this.lookData.userId
            params.id = this.$route.query.id
            params.status = 3

            var data = this.expenseList.map((item) => {
                return item.id
            })

            this.editStatusToStr(data, '0')
            setTimeout(() => {
                this.postDataAction('/reimburse/apply/edit', params).then((res) => {
                    if (res.success) {
                        this.$bus.$emit(
                            'remove',
                            `/policy-management/reimbursementAdd?type=${this.$route.query.type}&person=${this.$route.query.person}&id=${this.$route.query.id}&status=${this.$route.query.status}`
                        )
                        this.$router.replace('/policy-management/reimbursement')
                        this.$message.success(res.message)
                    } else {
                        this.$message.error(res.message)
                    }
                })
            }, 1000)
        },
        bfOk() {
            var params = {}
            params.loginId = this.userInfo().id
            params.userId = this.lookData.userId
            params.id = this.$route.query.id
            params.status = 5
            this.bfLoading = true
            // var statusArr = this.expenseList.filter((item) => {
            //     return item.status != '0'
            // })
            var statusArr = this.expenseList.map((item) => {
                if (item.status != '0') {
                    return item.id
                }
            })
            this.editStatusToStr(statusArr, '1')
            setTimeout(() => {
                this.postDataAction('/reimburse/apply/edit', params).then((res) => {
                    this.bfLoading = false
                    if (res.success) {
                        this.$bus.$emit(
                            'remove',
                            `/policy-management/reimbursementAdd?type=${this.$route.query.type}&person=${this.$route.query.person}&id=${this.$route.query.id}&status=${this.$route.query.status}`
                        )
                        this.$router.replace('/policy-management/reimbursement')
                        this.$message.success(res.message)
                    } else {
                        this.$message.error(res.message)
                    }
                })
            }, 1000)
        },
        // expenseList
        editStatus(id) {
            var params = {}
            params.id = id
            params.status = 1
            this.postDataAction('/reimburse/project/edit', params).then((res) => {
                if (res.success) {
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        editStatusToStr(ids, type) {
            var params = {}
            params.ids = ids
            params.status = type
            this.postDataAction('/reimburse/project/editMoreStatus', params).then((res) => {
                if (res.success) {
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        allOk() {
            var params = {}
            params.loginId = this.userInfo().id
            params.userId = this.lookData.userId
            params.id = this.$route.query.id
            params.status = 4
            this.allLoading = true
            var data = this.expenseList.map((item) => {
                return item.id
            })

            this.editStatusToStr(data, '')

            setTimeout(() => {
                this.postDataAction('/reimburse/apply/edit', params).then((res) => {
                    this.allLoading = false
                    if (res.success) {
                        this.$bus.$emit(
                            'remove',
                            `/policy-management/reimbursementAdd?type=${this.$route.query.type}&person=${this.$route.query.person}&id=${this.$route.query.id}&status=${this.$route.query.status}`
                        )
                        this.$router.replace('/policy-management/reimbursement')
                        this.$message.success(res.message)
                    } else {
                        this.$message.error(res.message)
                    }
                })
            }, 1000)
        },
    },
}
</script>
<style lang="less" scoped>
@import 'policy-management';
</style>
<style>
@media print {
    #printId .ant-table-bordered .ant-table-thead > tr > th {
        border-color: black !important;
    }
    #printId .ant-table-bordered .ant-table-tbody > tr > td {
        border-color: black !important;
    }
    #printId .ant-table-bordered .ant-table-header > table {
        border-color: black !important;
    }
    #printId .ant-table-bordered .ant-table-body > table {
        border-color: black !important;
    }
    #printId .ant-table-bordered .ant-table-fixed-left table {
        border-color: black !important;
    }
}
</style>
<style scoped lang="scss">
// ::v-deep #printId .ant-table-bordered .ant-table-tbody > tr > td {
//     border-color: black;
// }

// ,
// ,
// .ant-table-bordered .ant-table-fixed-left table,
//  .ant-table-bordered .ant-table-fixed-right table
::v-deep #printId .ant-table-bordered .ant-table-thead > tr > th {
    border-color: black !important;
}
::v-deep #printId .ant-table-bordered .ant-table-tbody > tr > td {
    border-color: black !important;
}
::v-deep #printId .ant-table-bordered .ant-table-header > table {
    border-color: black !important;
}
::v-deep #printId .ant-table-bordered .ant-table-body > table {
    border-color: black !important;
}
::v-deep #printId .ant-table-bordered .ant-table-fixed-left table {
    border-color: black !important;
}
$titleColor: rgb(117, 117, 117);
$borderColor: 1px solid black;
.title {
    width: 100%; // 1200px
    margin: 0 auto;
    padding: 20px 0;
    font-size: 18px;
    font-weight: 600;
    background-color: #e1e1e1;
    border-bottom: $borderColor;
}
.cont {
    border: $borderColor;
}
.table {
    width: 100%; // 1200px
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.lump {
    width: 20%;
}
.lump2 {
    width: 32%;
}
.lump2:nth-child(3),
.lump2:nth-child(6),
.lump2:last-child {
    width: 36%;
}
.box {
    width: 100%;
    height: 40px;
    display: flex;
    border-top: $borderColor;
    .content1 {
        width: 40%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #fafafa;
        border: $borderColor;
        border: $borderColor;
        color: $titleColor;
        font-size: 14px;
    }
    .content2 {
        width: 60%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #fff;
        border: $borderColor;
        border: $borderColor;
        color: 000;
        font-size: 14px;
        cursor: pointer;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
    }
    // .content2:last-child {
    //   border-right: $borderColor;
    // }
    .content_border {
        width: 60%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #fff;
        border: $borderColor;
        border: $borderColor;
        color: 000;
        font-size: 14px;
        cursor: pointer;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
    }
}
// 三列样式
.content3 {
    width: 100%;
    height: 40px;
    display: inline-block;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border: $borderColor;
    border-top: 2px solid black;
    // border-right: none;
    color: 000;
    font-size: 14px;
    font-weight: 600;
}
// 四列样式
.lump4 {
    width: 100%;
    display: flex;
    // align-items: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    // border: $borderColor;
    border-top: none;
    border-right: none;
    .conttent4 {
        display: flex;
        align-items: center;
        width: calc(48% - 1px);
        height: 40px;
        line-height: 40px;
        border-right: $borderColor;
        background-color: #fff;
        text-align: left;
        cursor: pointer;
        white-space: nowrap; //溢出不换行
        &-title {
            color: $titleColor;
            padding-left: 12px;
        }
        &-txt {
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap; //溢出不换行
        }
    }
    .conttent5 {
        display: flex;
        align-items: center;
        width: 52%;
        height: 40px;
        line-height: 40px;
        text-align: left;
        background-color: #fff;
        cursor: pointer;
        white-space: nowrap;
        &-title {
            padding-left: 12px;
            color: $titleColor;
        }
        &-txt {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .conttent6 {
        width: calc(48% - 1px);
        min-height: 100px;
        text-align: left;
        // border-right: $borderColor;
        background: #fff;
        border-top: none;
        cursor: pointer;
        // white-space: nowrap;
        &-title {
            color: $titleColor;
            padding: 12px;
        }
        &-txt {
            padding: 0 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        // 评价
        &-score {
            padding: 12px;
            &-title {
                color: $titleColor;
            }
            &-affirm {
                padding: 12px;
                padding-left: 0;
                ::v-deep .el-col {
                    padding-bottom: 12px;
                }
                ::v-deep .el-col:last-child {
                    padding-bottom: 0;
                }
            }
        }
    }
    .conttent7 {
        width: calc(52% - 30px);
        min-height: 100px;
        text-align: left;
        background: #fff;
        border-left: $borderColor;
        cursor: pointer;
        &-title {
            color: $titleColor;
            padding: 12px;
        }
        &-txt {
            padding: 0 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        // 签名
        &-sign {
            display: flex;
            align-items: center;
            padding: 12px;
            &-title {
                color: $titleColor;
            }
        }
    }
}
</style>
