<template>
  <div class="main" v-loading="loading">
    <div class="">
      <div class="">
        <el-card style="">
          <el-row>
            <div>
              <h1>差旅费报销申请单</h1>
            </div>
            <el-button  type="primary">
              <i class="el-icon-check" @click="addTripClaim">提交</i>
            </el-button>
          </el-row>
        </el-card>
        <el-card>
          <div class="header">
            基本信息
          </div>
          <el-divider></el-divider>
            <div>
              <el-form :form="form" label-width="100px" :rules="rules">
                <el-form-item label="报销描述：" prop="remark">
                  <el-input type="textarea" v-model="form.remark"  :rows="5"></el-input>
                </el-form-item>

                <el-row>
                  <el-col :span="8">
                    <el-form-item label="开始时间：" prop="startTime">
                      <el-date-picker
                        v-model="form.startTime"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                       >
                      </el-date-picker>
                    </el-form-item>

                    <el-form-item label="出差天数：" prop="tripDays">
                      <el-input type="number" v-model="form.tripDays"placeholder="请输入出差天数" ></el-input>
                    </el-form-item>

                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="结束时间：" prop="endTime" >
                      <el-date-picker
                        v-model="form.endTime"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="报销总额：" prop="cost">
                      <el-input  v-model="form.cost" placeholder="请输入报销总额">
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>

                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="关联项目：" prop="projectId">
                      <el-select v-model="form.projectId" filterable placeholder="请选择">
                        <el-option
                          v-for="item in projectList"
                          :key="item.projectId"
                          :label="item.projectName"
                          :value="item.projectId">
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="票据总数：" prop="detailNumber">
                      <el-input  v-model="form.detailNumber" placeholder="请输入票据总数">
                        <template slot="append">张</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>

              <el-divider></el-divider>
              <div style="font-weight: 900;display: flex;">
                <div style="width: 50%">
                  最终报销金额：
                  <span style="color: red">{{form.cost===""?'请输入金额':form.cost}}</span>
                </div>

                <div>
                  大写：<span style="color: red">{{numberToCNY(form.cost)}}</span>
                </div>
              </div>
            </div>
        </el-card>

        <el-card>
          报销明细补充
          <el-divider></el-divider>
          <div>
           <div style="margin-bottom: 10px">
             <el-button @click="addRow" type="primary">添加</el-button>
             <el-button @click="deleteRows" type="danger" :disabled="selectedRows.length === 0">删除</el-button>
             <el-button @click="co" type="danger">打印</el-button>
           </div>
            <el-table
              :data="form.claimDetailList"
              style="width: 100%"
              border
              stripe
              v-loading="loading"
              highlight-current-row
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="序号" width="80" type="index"></el-table-column>
              <el-table-column label="报销类型">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.claimType" placeholder="请选择报销类型">
                  <el-option
                    v-for="dict in dict.type.claim_detail_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="parseInt(dict.value)"
                  ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="开始时间">
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.beginTime"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column label="结束时间">
                <template slot-scope="scope">

                  <el-date-picker
                    v-model="scope.row.endTime"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </template>
              </el-table-column>

              <el-table-column label="入住地点">
                <template slot-scope="scope">
                 <el-input v-model="scope.row.lodgingAddress" placeholder="请输入入住地点" :disabled="scope.row.claimType!==1"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="款项金额">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.cost" size="small" placeholder="请输入" >
                    <template slot="append">元</template>
                  </el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
        <el-card>
          票据留存
          <el-divider></el-divider>
          <div style="display: flex">
          <div style="margin-right: 20px">
            上传票据:
          </div>
            <div>
              <fileUpload v-model="files"/>
            </div>
          </div>


        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {addUser, deptTreeSelect, listUser} from "@/api/system/user";
import {addOnboarding} from "@/api/oa/onboarding";
import {listProject} from "../../../api/oa/project";
import {numberToCNY} from "../../../utils/currencyFormatter";
import {startClaim} from "../../../api/workflow/process";
import {addOaClaim} from "../../../api/oa/claim";

export default {
  dicts: ['claim_detail_type'],
  data() {
    return {
      loading: false,
      // 表单参数
      form: {
        claimDetailList: [],
        fileList:[]
      },
      // 表单校验
      rules: {

        startTime: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
        endTime: [
          { required: true, message: "结束时间不能为空", trigger: "blur" }
        ],
        tripDays: [
          { required: true, message: "出差天数不能为空", trigger: "blur" }
        ],
        cost: [
          { required: true, message: "报销金额不能为空", trigger: "blur" }
        ],
        detailNumber: [
          { required: true, message: "票据总数不能为空", trigger: "blur" }
        ]
      },
      // 项目列表
      projectList: [],
      selectedRows: [],
      files:[]

    };

  },

  created() {
    this.getProjectList();
  },
  methods: {
    // 提交报销表单
    addTripClaim(){
      this.loading = true
      // 将文件列表进行处理
      this.form.fileList = this.files.split(',').map(file=>({fileUrl:file.trim()}))
      startClaim().then(res=>{
        this.form.procInsId = res.data
        addOaClaim(this.form).then(res => {
          this.loading = false
          this.$modal.msgSuccess("新增成功");
          this.goBack()
        })
      })
    },
    co(){
      console.log(this.files)
    },

    // 添加新的一行
    addRow() {
      this.form.claimDetailList.push({
        claimType: '',
        beginTime: '',
        endTime: '',
        cost: '',
        lodgingAddress:''
      });
    },
    // 删除勾选的行
    deleteRows() {
      this.form.claimDetailList = this.form.claimDetailList.filter(row => !this.selectedRows.includes(row));
      this.selectedRows = []; // 清空选中的行
    },
    // 处理表格头部的序号显示
    renderHeader(h, { column }) {
      return h('span', column.label);
    },

    getProjectList(){
      let query = {
        pageSize:9999,
        pageNum:1,
      }
      listProject(query).then(res => {
        this.projectList = res.rows
      })
    },
    /** 返回页面 */
    goBack() {
      // 关闭当前标签页并返回上个页面
      this.$tab.closePage(this.$route)
      this.$router.back()
    },
    numberToCNY,
    // 处理表格选择变化，更新选中的行
    handleSelectionChange(val) {
      this.selectedRows = val;
    }
  },

};
</script>

<style scoped>
.main {
  padding: 10px;
  background-color: #f6f6f6;
}

.container {
  margin: 10px;
  padding: 10px;
  background-color: white;
  border-radius: 10px;
}
</style>
