<template>
  <div id="publicCarForm" class="printTableWrap">
    <div class="tableTitle">成都师范学院公务用车审批表</div>
    <div class="printTable">
      <div class="tableRow">
        <div :span="4" class="tableCell tabelCol-4">用车部门</div>
        <div :span="10" class="tableCell tabelCol-10">{{selected.department}}</div>
        <div :span="6" class="tableCell tabelCol-4">用车申请时间</div>
        <div :span="4" class="tableCell tabelCol-6">{{selected.createDate}}</div>
      </div>
      <div class="tableRow">
        <div :span="4" class="tableCell tabelCol-4">申请人</div>
        <div :span="10" class="tableCell tabelCol-10">{{selected.name}}</div>
        <div :span="6" class="tableCell tabelCol-4">用车人数</div>
        <div :span="4" class="tableCell tabelCol-6">{{selected.userCount}}人</div>
      </div>
      <div class="tableRow tableMinHeightBig">
        <div :span="4" class="tableCell tabelCol-4">
          <span>用车类型<br>（勾选）</span>
        </div>
        <div :span="20" class="tableCell tabelCol-20 tal mtel">{{selected.categoryName}}</div>
      </div>
      <div class="tableRow">
        <div :span="4" class="tableCell tabelCol-4">用车起始时间</div>
        <div :span="20" class="tableCell tabelCol-20 tal">{{selected.beginDate}} - {{selected.endDate}}（共 {{day}} 天）</div>
      </div>
      <div class="tableRow tableMinHeightBig">
        <div :span="4" class="tableCell tabelCol-4">
          <span>用车详细路线</span>
        </div>
        <div :span="20" class="tableCell tabelCol-20 tal mtel">{{selected.lineDescription}}</div>
      </div>
      <div class="tableRow">
        <div :span="4" class="tableCell tabelCol-4">部门负责人<br>签字（盖章）</div>
        <div :span="4" class="tableCell tabelCol-4"></div>
        <div :span="4" class="tableCell tabelCol-4 directCol">
          <div>派车人</div>
          <div>派车车牌</div>
        </div>
        <div :span="4" class="tableCell tabelCol-12 directCol">
          <span class="carPlate">
            {{selected.dealName}}
          </span>
          <div class="carPlate">
            <template v-for="(rowIndex) in carPlateArrRow">
              <div :key="rowIndex">{{carPlateArr.slice((rowIndex-1) * 3, 3 * rowIndex).join(',')}}</div>
            </template>
          </div>
        </div>

      </div>
      <div class="tableRow">
        <div :span="4" class="tableCell tabelCol-4">出车公里数</div>
        <div :span="4" class="tableCell tabelCol-4">{{selected.startKilometers?selected.startKilometers:''}}</div>
        <div :span="4" class="tableCell tabelCol-4">收车公里数</div>
        <div :span="4" class="tableCell tabelCol-4">{{selected.stopKilometers?selected.stopKilometers:''}}</div>
        <div :span="4" class="tableCell tabelCol-4">实际公里数</div>
        <div :span="4" class="tableCell tabelCol-4">{{selected.trueKilometers?selected.trueKilometers:''}}</div>
      </div>
      <div class="tableRow">
        <div :span="4" class="tableCell tabelCol-4">资金来源</div>
        <div :span="4" class="tableCell tabelCol-4">{{selected.priceSource}}</div>
        <div :span="4" class="tableCell tabelCol-4">用车单价</div>
        <div :span="4" class="tableCell tabelCol-4">{{selected.price?selected.price:''}}</div>
        <div :span="4" class="tableCell tabelCol-4">用车金额</div>
        <div :span="4" class="tableCell tabelCol-4">{{selected.totalPrice?selected.totalPrice:''}}</div>
      </div>
      <div class="tableRow">
        <div :span="4" class="tableCell tabelCol-4">驾驶员签字</div>
        <div :span="8" class="tableCell tabelCol-8"></div>
        <div :span="4" class="tableCell tabelCol-4">用车人签字</div>
        <div :span="8" class="tableCell tabelCol-8"></div>
      </div>
    </div>
    <div class="tableBottm">
      本表一式两份交车队北区体育场204或205办公室
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const {
      query: { data },
    } = this.$route;
    console.log(data);
    return {
      selected: JSON.parse(data),
    };
  },
  computed: {
    day() {
      let sub =
        (new Date(this.selected.endDate).getTime() / 1000 / 60 / 60 -
          new Date(this.selected.beginDate).getTime() / 1000 / 60 / 60) %
        24 >
        1
          ? 1
          : 0;
      let sed =
        Math.floor(
          (new Date(this.selected.endDate).getTime() / 1000 / 60 / 60 -
            new Date(this.selected.beginDate).getTime() / 1000 / 60 / 60) /
            24
        ) + sub;

      return sed;
    },
    carPlateArr() {
      return this.selected.carPlate.split(',');
    },
    carPlateArrRow() {
      const length = this.carPlateArr.length;
      return Math.ceil(length / 3);
    },
  },
  created() {
    window.vmPrint = this.printHandle;
  },
  methods: {
    printHandle() {
      // window.print();
      document.execCommand('print', false, null);
    },
  },
};
</script>

<style lang="scss">
.printTableWrap {
  color: #000;
  border-collapse: collapse;
  text-align: center;
  width: 649px;
  height: 978px;
  text-align: center;
  margin: 0 auto;
  line-height: 48px;
  .tableTitle {
    font-size: 20px;
    line-height: 80px;
  }
  .printTable {
    border: 1px solid #000;
    .tableRow {
      display: flex;
    }
    .tableCell {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      word-break: break-all;
    }
    .tableCell:last-child {
      border-right: none;
    }
    .tableRow:last-child .tableCell {
      border-bottom: none;
    }
    .tal {
      text-indent: 10px;
      text-align: left;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .mtel {
      text-indent: 0;
      line-height: 30px;
      padding: 15px 10px;
    }
    .carPlate {
      width: 100%;
      padding: 0 20px;
      text-align: left;
      line-height: 30px;
    }
    .directCol {
      flex-direction: column;
      line-height: 36px;
    }
    .tabelCol-4 {
      width: 16.66667%;
    }
    .tabelCol-10 {
      width: 41.66667%;
    }
    .tabelCol-6 {
      width: 25%;
    }
    .tabelCol-8 {
      width: 33.33333%;
    }
    .tabelCol-20 {
      width: 83.33333%;
    }
    .tabelCol-12 {
      width: 50%;
    }
  }
  .tableBottm {
    text-align: left;
  }
}
</style>
