<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="Id" label="ID" width="80" />
        <el-table-column :show-overflow-tooltip="true" prop="T_money" label="报销总金额" width="100" />
        <el-table-column :show-overflow-tooltip="true" prop="T_approval_money" label="审批总金额" width="100" />
        <el-table-column :show-overflow-tooltip="true" prop="T_remit" label="打款金额" width="100" />
        <el-table-column :show-overflow-tooltip="true" prop="T_State" label="状态" width="150">
          <template #default="scope">
            <el-dropdown trigger="click" size="small">
              <el-button type="primary" size="small" :disabled="scope.row.T_State === 5 || scope.row.T_State === 6 || scope.row.T_State === 3">
                {{ ['待审核', '审核通过', '审核不通过','已部分打款','已全部打款'][scope.row.T_State-2] }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in ReimburseFrom_F_State"
                    :key="item.T_State"
                    @click="changeState(item.T_State, scope.row)"
                    >{{ item.name }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="T_date" label="提交日期" width="220" />
        <el-table-column label="操作" fixed="right" min-width="100">
          <template #default="scope">
            <el-button @click="showDrawer('det',scope.row)">详情</el-button>
            <el-button @click="showDrawer('edi',scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="data.pages.page" layout="total, prev, pager, next, jumper" :total="data.total"
      v-model:page-size="data.pages.page_z" @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="100%">
      <el-form :model="data.formData" label-position="top">
        <el-form-item label="报销明细">
          <el-table :data="data.formData.T_reimburse_details" style="width: 100%">
            <el-table-column show-overflow-tooltip type="index" label="序号" width="70" />
            <el-table-column show-overflow-tooltip label="出差时间">
              <el-table-column label="起" width="120">
                <template #default="scope">
                  {{ scope.row.T_trip_start_time }}
                </template>
              </el-table-column>
              <el-table-column show-overflow-tooltip prop="city" label="止" width="120">
                <template #default="scope">
                  {{ scope.row.T_trip_end_time }}
                </template>
              </el-table-column>
            </el-table-column>

            <el-table-column show-overflow-tooltip label="出差地点">
              <el-table-column show-overflow-tooltip label="起" width="150">
                <template #default="scope">
                  {{ scope.row.T_trip_terminus }}
                </template>
              </el-table-column>
              <el-table-column show-overflow-tooltip prop="city" label="止" width="150">
                <template #default="scope">
                  {{ scope.row.T_trip_origin }}
                </template>
              </el-table-column>
            </el-table-column>


            <el-table-column show-overflow-tooltip label="费用类型" width="150">
              <template #default="scope">
                {{ scope.row.T_fee_type_name }}
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="费用明细" width="150">
              <template #default="scope">
                {{ scope.row.T_fee_details_name }}
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="费用金额" width="100">
              <template #default="scope">
                {{ scope.row.T_money }}
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="审批金额" width="100">
              <template #default="scope">
                <el-input v-model="scope.row.T_approval_money" :disabled="data.drawerTiti=='详情'?true:false" placeholder="审批金额" />
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="审批意见" width="100">
              <template #default="scope">
                <el-input v-model="scope.row.T_approval_opinion" v-if="data.drawerTiti!='详情'" placeholder="审批意见" />
                <div v-if="data.drawerTiti=='详情'" style="overflow:hidden; white-space: nowrap; text-overflow: ellipsis;">{{ scope.row.T_approval_opinion }}</div>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="费用事由" width="150">
              <template #default="scope">
                {{ scope.row.T_reasons }}
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="涉及项目" width="150">
              <template #default="scope">
                {{ scope.row.T_project }}
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="附件" min-width="80">
              <template #default="scope">
                <upImg v-model:upImg="scope.row.T_img" :imgData="scope.row.T_img" :disabled="true"></upImg>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="报销总金额">
          <div style="display: flex;">
            <el-input v-model="data.formData.T_money" disabled style="flex: 1;" /><span style="padding-left: 20px;">元</span>
          </div>
        </el-form-item>
        <el-form-item label="审批总金额">
          <div style="display: flex;">
            <el-input v-model="data.formData.T_approval_money" :disabled="data.drawerTiti=='详情'?true:false" style="flex: 1;" /><span style="padding-left: 20px;">元</span>
          </div>
        </el-form-item>
        <el-form-item label="打款明细">
          <el-table :data="data.formData.T_remit_detail" :header-cell-style="{ background: '#f5f7fa' }" border>
            <el-table-column show-overflow-tooltip type="index" label="序号" fixed width="70" />
            <el-table-column show-overflow-tooltip label="打款时间" :width="data.drawerTiti == '编辑'?'300':''">
              <template #default="scope">
                <el-date-picker v-model="scope.row.T_time" type="date" value-format="YYYY-MM-DD" placeholder="打款时间" :disabled="data.drawerTiti == '详情'?true:false"/>
              </template>
           </el-table-column>
           <el-table-column show-overflow-tooltip label="打款金额" :width="data.drawerTiti == '编辑'?'300':''">
              <template #default="scope">
                <el-input v-model="scope.row.T_money" placeholder="打款金额" :disabled="data.drawerTiti == '详情'?true:false" />
              </template>
           </el-table-column>
            <el-table-column show-overflow-tooltip fixed="right" min-width="300" v-if="data.drawerTiti == '编辑'">
              <template #default="scope">
                <el-popconfirm title="删除当前明细，确定删除吗?" @confirm="newDel" width="235" 
                confirm-button-text="立即删除" cancel-button-text="取消">
                    <template #reference>
                      <el-button>删除</el-button>
                    </template>
                  </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div class="newMingxi" @click="newAdd" v-if="data.drawerTiti == '编辑'">
            <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" @click="subFun">立即提交</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";
import { Reimburse_Get,Reimburse_List ,Reimburse_Edit,Reimburse_Audit} from '@/api/Reimburse/index'
import { ElMessage } from 'element-plus'
import { ReimburseFrom_F_State } from '@/hooks/useTablePublic'
import upImg from '@/components/upImg/upimg.vue'
// 接受父组件参数，配置默认值
const props = defineProps<{
  fromDatas:{
    T_uuid:string
  },
}>()

const data = reactive({
  Id:null,
  currentPage: 1,
  drawer: false,
  drawerTiti: '',
  formData: {
    Id:null,
    T_State:null,
    T_date:null,
    T_money:null,
    T_approval_money:0,
    T_reimburse_details:[{
      Id:null,
      T_State:null,
      T_fee_details:null,
      T_fee_details_name:null,
      T_approval_money:null,
      T_approval_opinion:null,
      T_fee_type:null,
      T_fee_type_name:null,
      T_img:null,
      T_money:null,
      T_project:null,
      T_reasons:null,
      T_reimburse_id:null,
      T_trip_end_time:null,
      T_trip_origin:null,
      T_trip_start_time:null,
      T_trip_terminus:null,
    }],
    T_remit:null,
    T_remit_detail:[{
      T_time:'',
      T_money:'',
    }],
    T_uid: null,
    T_user_name:null,
  },
  pages:{//列表请求参数
    page:1,
    page_z:10
  },
  total:0,
  tableData: []
})
watch(() => props.fromDatas,cur => {
  console.log('监听变化props.fromDatas',cur)
  Reimburse_GetApi()
},{deep:true})

watch(() => data.formData.T_reimburse_details,cur => {
  data.formData.T_approval_money = cur.reduce((sum, e) => sum + Number(e.T_approval_money || 0), 0)
},{deep:true})


const Reimburse_GetApi = async ()=>{
  const res:any = await Reimburse_List({
    T_uuid:props.fromDatas.T_uuid,
    ...data.pages
  })
  data.tableData = res.Data.Data
  data.total = res.Data.Num
}
//函数
const changeState = async (id: number, row: any) => {
  console.log('点击',id,row)
  const res: any = await Reimburse_Audit({T_id: row.Id, T_State: id })
  if (res.Code === 200) {
    ElMessage.success('ok，操作成功！')
    Reimburse_GetApi()
  }
}

//函数
const subFun = async ()=>{
  const arr = [...data.formData.T_remit_detail]
  const arrObj = [...data.formData.T_reimburse_details]

  
  const arrMap:any = []
  arr.forEach((item:any)=>{
    arrMap.push(item.T_time + ',' + item.T_money)
  })

  const arrObjMap:any = []
  arrObj.forEach((item:any)=>{
    arrObjMap.push(item.Id + ',' + item.T_approval_money + ','  +item.T_approval_opinion)
  })
  const resIt:any = await Reimburse_Edit({
    T_id:data.Id,
    T_approval_details:arrObjMap.length==0?'':arrObjMap.join('|')+'|',
    T_approval_money:data.formData.T_approval_money,
    T_remit_detials:arrMap.length==0?'':arrMap.join('|')+'|'
  }) 
  if (resIt.Code==200){
    ElMessage.success('ok，编辑成功')
    Reimburse_GetApi()
    ReimburseGet(data.Id)
    data.drawer = false
  }
}


//添加任务
const newAdd = () => {
  data.formData.T_remit_detail.push({
    T_time:'',
    T_money:'',
  })
}
//删除任务
const newDel = (e: any) => {
  data.formData.T_remit_detail.splice(e.$index, 1)
}

//详情api
const ReimburseGet = async (Id:any)=>{
  const resIt:any = await Reimburse_Get({T_id:Id})
  resIt.Data.T_remit_detail==null?resIt.Data.T_remit_detail=[]:resIt.Data.T_remit_detail=resIt.Data.T_remit_detail
  data.formData = resIt.Data
}

//显示弹窗
const showDrawer = (e: string,obj:any) => {
  console.log('obj',obj)
  data.Id = obj.Id
  switch (e) {
    case 'det':
      data.drawer = true
      data.drawerTiti = '详情'
      ReimburseGet(obj.Id)
      break;
    case 'edi':
      data.drawer = true
      data.drawerTiti = '编辑'
      ReimburseGet(obj.Id)
      break;
    default:
      console.log('提交审核')
      break;
  }
}
//关闭窗口
const handleClose = (e: any) => {
  data.drawer = false
}
//跳转页
const handleCurrentChange = (e: any) => {
  data.pages.page = e
  Reimburse_GetApi()
}

//每页多少条
const handleSizeChange = (e: any) => {
  data.pages.page_z = e
  Reimburse_GetApi()
}
</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>
