<template>
  <div class="ReimburseFrom">
    <el-card class="b-r m-b-3">
      <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>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="data.currentPage" layout="total, sizes, prev, pager, next, jumper" :total="400"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top: 20px;" />
    </el-card>

    <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="cuntData" disabled 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">

                </template>
              </el-table-column>
              <el-table-column prop="city" label="止" width="150">
                <template #default="scope">

                </template>
              </el-table-column>
            </el-table-column>

            <el-table-column label="出差地点">
              <el-table-column label="起" width="150">
                <template #default="scope">

                </template>
              </el-table-column>
              <el-table-column prop="city" label="止" width="150">
                <template #default="scope">

                </template>
              </el-table-column>
            </el-table-column>


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

              </template>
            </el-table-column>
            <el-table-column prop="address" label="费用明细" width="150">
              <template #default="scope">

              </template>
            </el-table-column>
            <el-table-column prop="address" label="费用金额" width="150">
              <template #default="scope">

              </template>
            </el-table-column>
            <el-table-column prop="address" label="费用事由" width="150">
              <template #default="scope">

              </template>
            </el-table-column>
            <el-table-column prop="address" label="涉及项目" width="150">
              <template #default="scope">

              </template>
            </el-table-column>

            <el-table-column prop="address" label="附件" min-width="80">

            </el-table-column>
          </el-table>
        </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-column prop="address" fixed="right" min-width="300">
              <template #default="scope">
                <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>
      <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>

  </div>
</template>
<script lang="ts" setup>
import { reactive,computed ,watch} from "vue";
const data = reactive({
  currentPage: 1,
  drawer: false,
  drawerTiti: '',
  formData: {
    name: ''
  },
  tableData: [
    {
      date: '2016-05-03',
      name: 'Tom',
      address:30.5,
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 45,
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 72,
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address:62,
    },
  ]
})
//删除任务
const newDel = (e: any) => {
  data.tableData.splice(e.$index, 1)
}
watch(() => data.formData.name,cur => {
    console.log('监听变化',cur)
  }
)
const cuntData = computed(()=>{
  let newData:any = []
  data.tableData.forEach(item=>{
    newData.push(item.address)
  })
  let sum = newData.reduce((a: any,b: any)=>a+b)
  console.log('计算',newData,sum)
  return sum
})

//添加任务
const newAdd = () => {
  data.tableData.push({
    date: '',
    name: '',
    address:0,
  })
}
//显示弹窗
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 = (e: any) => {
  data.drawer = false
}
//跳转页
const handleCurrentChange = (e: any) => {
  console.log('跳转页', e);
}

//每页多少条
const handleSizeChange = (e: any) => {
  console.log('每页多少条', e);
}
</script>
<style scoped 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;
}

// 上传图片框样式
.el-upload--picture-card {
  border: 1px dashed #13C3C7;
}

.el-upload--picture-card:hover {
  border-color: #13C3C7;
  color: #13C3C7;
}

.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;
}

.avatar {
  width: 50px;
  height: 50px;
}
</style>
