<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">
                <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="部门">
                                        <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>
                                    </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">提交</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" style="margin-bottom: 15px"
                            >新增费用信息</a-button
                        >
                        <div v-if="lookData" style="display: flex">
                            <h2 style="margin-right: 50px">报销金额：{{ lookData.amount }}</h2>
                            <h2>发票总数： {{ lookData.invoices }}</h2>
                        </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">
                                    <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' || $route.query.type == 'add')
                                        "
                                        >编辑</a
                                    >
                                    <a-divider type="vertical" />
                                    <a-popconfirm title="确定删除吗?" @confirm="() => deleteProject(record)">
                                        <a
                                            :disabled="
                                                !!$route.query.type &&
                                                ($route.query.type == 'look' || $route.query.type == 'add')
                                            "
                                            >删除</a
                                        >
                                    </a-popconfirm>
                                </span>
                                <span v-else>
                                    <a
                                        @click="editStatusOpen(record)"
                                        :disabled="
                                            !!$route.query.person &&
                                            ($route.query.person == '1' || $route.query.person == '3')
                                        "
                                        >驳回</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'"
            >
                <a-button type="primary" @click="bfOk" :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" :disabled="disabledJudge||$route.query.person == '3'">审核通过</a-button>
            </div>
        </div>

        <a-modal v-if="showFile" title="查看附件" :visible="showFile" :footer="null" @cancel="showFile = false">
            <div v-if="fileList">
                <img :src="item" v-for="(item, index) in JSON.parse(fileList)" alt="" style="width: 150px" />
            </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"
                                uploadType="image"
                            />
                        </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" 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 {
            form: this.$form.createForm(this),
            showFile: false,
            fileList: 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,
        }
    },
    components: {
        JTreeSelect,
        uploadFile,
        JCodeEditor,
    },
    created() {
        this.getCompanyList()
        this.getProjectList()
        let editRecordId = this.$route.query.id
        let editRecordType = this.$route.query.type
        if (editRecordId) {
            this.getDetail(editRecordId)
        } else {
        }
    },
    computed: {
        disabledJudge() {
            var index = this.expenseList.findIndex((item) => {
                return item.status == '0'
            })
            return index > -1 ? true : false
        },
    },
    mounted() {},
    methods: {
        ...mapGetters(['userInfo']),
        moment,
        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 = item.fileUrls
        },
        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),
                        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)
            this.$refs.policyOperationForm.validate((valid) => {
                if (valid) {
                    this.confirmLoading = true
                    if (this.addType === 'add') {
                        this.handleAddSureBtn(paramsData, '/reimburse/project/add')
                    } else {
                        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 = values.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) {
                            }
                        })
                    } else {
                        this.postDataAction('/reimburse/apply/add', params).then((res) => {
                            if (res.success) {
                            }
                        })
                    }
                }
            })
        },

        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.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
            this.postDataAction('/reimburse/apply/edit', params).then((res) => {
                if (res.success) {
                    this.$message.error(res.message)
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        bfOk() {
            var params ={}
            params.loginId = this.userInfo().id
            params.userId = this.lookData.userId
            params.id = this.$route.query.id
            params.status = 5
            this.postDataAction('/reimburse/apply/edit', params).then((res) => {
                if (res.success) {
                    this.$message.error(res.message)
                } 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 = 2
            this.postDataAction('/reimburse/apply/edit', params).then((res) => {
                if (res.success) {
                    this.$message.error(res.message)
                } else {
                    this.$message.error(res.message)
                }
            })
        },
    },
}
</script>
<style lang="less" scoped>
@import 'policy-management';
</style>
