<template>
    <div class="reimburseMy">
        <div class="reimburseMy-table">
            <el-table :data="data.tableData" style="width: 100%" border>
                <el-table-column :show-overflow-tooltip="true" type="index" width="50" />
                <el-table-column :show-overflow-tooltip="true" prop="date" label="ID" width="180" />
                <el-table-column :show-overflow-tooltip="true" prop="address" label="报销总金额" width="180" />
                <el-table-column :show-overflow-tooltip="true" prop="address" label="打款金额" width="180" />
                <el-table-column :show-overflow-tooltip="true" prop="date" label="状态" width="150">
                    <el-tag>已审核</el-tag>
                    <el-tag>已部分打款</el-tag>
                    <el-tag>已全部打款</el-tag>
                    <el-tag class="ml-2" type="warning">待审核</el-tag>
                    <el-tag class="ml-2" type="danger">未提交审核</el-tag>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="name" label="提交日期" width="220" />
                <el-table-column label="操作" fixed="right" min-width="320">
                    <template #default="scope">
                        <el-button @click="showDrawer('det')">详情</el-button>
                        <el-button @click="showDrawer('edi')">编辑</el-button>
                        <el-button @click="showDrawer('sub')">提交审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="data.currentPage4" layout="total, sizes, prev, pager, next, jumper"
                :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                style="margin-top: 20px;" />
        </div>
        <el-drawer v-model="data.drawer" :title="data.drawerTiti" direction="rtl" :before-close="handleClose" size="95%">
            <el-form :model="data.formData" label-position="top"> 
                <el-form-item label="报销总金额">
                    <div style="display: flex;">
                        <el-input v-model="data.formData.name" style="flex: 1;" /><span style="padding-left: 20px;">元</span>
                    </div>
                </el-form-item>
                <el-form-item label="报销明细">
                    <el-table :data="data.tableData" style="width: 100%">
                        <el-table-column type="index" label="序号" width="70" />
                        <el-table-column label="出差地点">
                            <el-table-column label="起" width="150">
                                <template #default="scope">
                                    <el-input v-model="data.value1" placeholder="起点"
                                        :disabled="data.disabledNum == scope.$index ? false : true" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="city" label="止" width="150">
                                <template #default="scope">
                                    <el-input v-model="data.value1" placeholder="起点"
                                        :disabled="data.disabledNum == scope.$index ? false : true" />
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="address" label="出差时间起止时间" width="250">
                            <template #default="scope">
                                <el-date-picker v-model="data.value1" type="daterange" style="width: 220px;"
                                    :disabled="data.disabledNum == scope.$index ? false : true" />
                            </template>

                        </el-table-column>

                        <el-table-column prop="address" label="费用类型" width="150">

                            <template #default="scope">
                                <el-select v-model="data.value1" class="m-2" placeholder="费用类型" size="large"
                                    :disabled="data.disabledNum == scope.$index ? false : true">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="费用明细" width="150">
                            <template #default="scope">
                                <el-select v-model="data.value1" class="m-2" placeholder="费用明细" size="large"
                                    :disabled="data.disabledNum == scope.$index ? false : true">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="费用金额" width="150">
                            <template #default="scope">
                                <el-input v-model="data.value1" placeholder="费用金额"
                                    :disabled="data.disabledNum == scope.$index ? false : true" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="费用事由" width="150">
                            <template #default="scope">
                                <el-input v-model="data.value1" placeholder="费用事由"
                                    :disabled="data.disabledNum == scope.$index ? false : true" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="涉及项目" width="150">

                            <template #default="scope">
                                <el-input v-model="data.value1" placeholder="涉及项目"
                                    :disabled="data.disabledNum == scope.$index ? false : true" />
                            </template>
                        </el-table-column>

                        <el-table-column prop="address" label="附件" width="80">
                            <el-upload v-model:file-list="data.fileList" style="width: 50px;height: 50px;"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                <el-icon>
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </el-table-column>
                        <el-table-column prop="address" fixed="right" min-width="300">
                            <template #default="scope">
                                <el-button type="primary" @click="EditFun(scope)">编辑</el-button>
                                <el-button @click="newDel(scope)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="newMingxi" @click="newAdd">
                        <el-icon color="#409EFC" class="no-inherit">
                        <Plus />
                        </el-icon>
                        <span style="padding-left: 5px;">新增明细</span>
                    </div>
                </el-form-item>
                <el-form-item label="打款明细">
                    <el-table :data="data.tableData" :header-cell-style="{background:'#f5f7fa'}" border>
                        <el-table-column type="index" label="序号" fixed width="70" />
                        <el-table-column prop="address" label="打款时间" width="300" />
                        <el-table-column prop="address" label="打款金额" />
                    </el-table>
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer" v-if="data.drawerTiti=='编辑'">
                <el-button type="primary">立即提交</el-button>
                <el-button @click="data.drawer = false">取消</el-button>
            </div>
        </el-drawer>
        <el-dialog v-model="dialogVisible" :draggable="true" style="width: 500px;max-height: 700px;">
            <img :src="dialogImageUrl" style="width: 100%;height: auto;object-fit: contain;"/>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]
const data = reactive({
    fileList: [],
    disabledNum: 0,
    value1: null,
    formData: {
        name: ''
    },
    drawer: false,
    drawerTiti: '',
    currentPage4: 4,
    tableData: [
        {
            date: '2016-05-03',
            name: '2016-05-03 12:13:00',
            address: '3000',
        },
        {
            date: '2016-05-02',
            name: '2016-05-03 12:13:00',
            address: '6000',
        },
        {
            date: '2016-05-04',
            name: '2016-05-03 12:13:00',
            address: '99999999',
        },
        {
            date: '2016-05-01',
            name: '2016-05-03 12:13:00',
            address: '10',
        },
    ]
})

const handleRemove = (r: any) => {
    console.log('删除', r)
}

const handlePictureCardPreview = (uploadFile: any) => {
    console.log('查看', uploadFile)
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}


const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
//显示弹窗
const showDrawer = (e: string) => {
    switch (e) {
        case 'det':
            data.drawer = true
            data.drawerTiti = '详情'
            break;
        case 'edi':
            data.drawer = true
            data.drawerTiti = '编辑'
            break;
        default:
            console.log('提交审核')
            break;
    }

}
//关闭弹窗
const handleClose = () => {
    data.drawer = false
}
//点击了编辑
const EditFun = (e: any) => {
    data.disabledNum = e.$index
}
//添加任务
const newAdd = () => {
    data.tableData.push({
        date: '',
        name: '',
        address: '',
    })
    data.disabledNum = data.tableData.length - 1
}
//删除任务
const newDel = (e: any) => {

    data.tableData.splice(e.$index, 1)
    console.log('e', data.tableData)
}
</script>
<style lang="scss">
.newMingxi {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #409EFC;
  cursor: pointer;
  line-height: 0;
  padding: 10px 0 2px 0;
  color: #409EFC;
  user-select: none;
}
.reimburseMy {
    &-table {
        padding: 20px;
        background: #fff;
        border: 1px solid var(--el-card-border-color);
        box-shadow: var(--el-box-shadow-light);
        border-radius: 5px;
    }
}

// 上传图片框样式

.el-upload--picture-card {
    width: 50px;
    height: 50px;
    font-size: 16px !important;
}

.el-upload {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}

.el-upload-list--picture-card .el-upload-list__item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}

.el-upload-list--picture-card .el-upload-list__item-actions:hover {
    opacity: 1;
    font-size: 16px;
}

.el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}

</style>