<template>
  <div style="page-break-after:always;padding: 0px 20px;box-sizing: border-box;" class="print-html-wrap" id="printDiv">
    <div class="print-title">{{dialogTitle}}</div>
    <table border="1px" class="table-write">
      <tr>
        <td class="keep">单号</td>
        <td class="tx-lf" colspan="5">{{infoForm.applyNo}}</td>
      </tr>
      <tr>
        <td class="keep">公司名称</td>
        <td class="tx-lf">{{cn}}</td>
        <td class="keep">项目名称</td>
        <td class="tx-lf" colspan="3">{{infoForm.projectName}}</td>
      </tr>
      <tr>
        <td class="keep">申请人</td>
        <td class="tx-lf">{{$store.getters.userInfo.nickname}}</td>
        <td class="keep">申请部门</td>
        <td class="tx-lf max200">{{$store.getters.userInfo.dept.name}}
        </td>
      </tr>
      <tr>
        <td class="keep">申请事由</td>
        <td class="tx-lf" colspan="5">{{infoForm.reason}}</td>
      </tr>
      <tr>
        <td class="keep">预计费用</td>
        <td class="tx-lf" colspan="5">{{infoForm.amount}}</td>
      </tr>
      <tr>
        <td class="keep">备注信息</td>
        <td class="tx-lf" colspan="5">{{infoForm.remark}}</td>
      </tr>
      <tr v-if="['business'].includes($route.query.typeStr)">
        <td class="keep">行程信息</td>
        <td colspan="5">
          <table class="bottom-table-write">
            <tr>
              <td>行程时间</td>
              <td>出差天数</td>
              <td>出差类型</td>
              <td>出发地</td>
              <td>目的地</td>
              <td>同行人</td>
              <td>行程预计费用</td>
            </tr>
            <tr v-for="(item,index) in infoForm.expenseApplyTrips" :key="index">
              <td>{{dayjs(item.startTime).format('YYYY/MM/DD')}} ~ {{dayjs(item.endTime).format('YYYY/MM/DD')}}</td>
              <td>{{item.tripDay}}</td>
              <td>{{ handleFilterStr(item.tripType)}}</td>
              <td>{{ handleFindTitle(item.departureLocation)}}</td>
              <td>{{ handleFindTitle(item.destinationLocation)}}</td>
              <td>{{ handleTripPartners(item.tripPartners)}}</td>
              <td>{{ item.amount }}</td>
            </tr>
          </table>
        </td>
      <tr>
        <td class="keep">申请人信息</td>
        <td>
          姓名：{{tasks.startUserObj && tasks.startUserObj.nickname || '-'}}
        </td>
        <td>
          所属部门：{{tasks.startUserObj && tasks.startUserObj.deptName  || '-'}}
        </td>
        <td>
          创建时间：{{tasks.startUserObj && tasks.startUserObj.createTime  || '-'}}
        </td>
      </tr>
      <tr>
        <td class="keep">审批流程</td>
        <td colspan="5">
          <table class="bottom-table-write">
            <tr>
              <td>审批人员</td>
              <td>所属部门</td>
              <td>审批意见</td>
              <td>审批状态</td>
              <td>审批时间</td>
            </tr>
            <tr v-for="(item,index) in tasks.tasks" :key="index">
              <td>{{item.assigneeUser&& item.assigneeUser.nickname|| '-'}}</td>
              <td>{{item.assigneeUser&& item.assigneeUser.deptName || '-'}}</td>
              <td>{{item.reason  || '-'}}</td>
              <td>{{item.result || '-'}}</td>
              <td>{{item.endTime || '-' }}</td>
            </tr>
          </table>
        </td>
      </tr>

    </table>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { findAreaIdName } from '@/utils';
export default {
  props: {
    userList: Array,
    tripTypeList: Array,
    infoForm: {
      type: Object
    },
    dialogTitle: {
      type: String
    },
    tasks: Object
  },
  computed: {
    cn() {
      return window.localStorage.getItem('cn')
    }
  },
  methods: {
    dayjs,
    handleFilterStr(val) {
      const { label } = this.tripTypeList.find((item) => item.id == val) || {}
      return label
    },
    handleTripPartners(list) {
      let nameArr = this.userList.map((item) => {
        // item.id
        if (Array.isArray(list)) {
          if (list.includes(item.id)) {
            return item.username
          } else {
            return ''
          }
        }
      })
      return nameArr.filter((item => item !== '')).join('、')
    },
    handleFindTitle(val) {
      return (findAreaIdName(this.$store.getters.areaTree, val) || {}).name
      // return (findAreaIdName(this.$store.getters.areaTree, val) || {}).name
    },
  },
  data() {
    return {
      // defaultImg: require('@/assets/Images/defaultHeader.png')
    }
  },
  filters: {

  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/index.scss';
</style>
<style media="print" scoped>
/*去除页眉页脚*/
@page {
  size: auto; /* auto is the initial value */
  margin: 3mm; /* this affects the margin in the printer settings */
}
html {
  background-color: #ffffff;
  margin: 0; /* this affects the margin on the html before sending to printer */
}
body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
/*去除页眉页脚*/
</style>
