<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" width="60%">
      <div v-if="dialogVisible" id="printId">
        <vue-easy-print tableShow ref="remarksPrintRef">
          <h2 style="text-align: center; font-size: 25px; font-weight: 800">直转单</h2>
          <el-row :gutter="20" v-if="dialogType != 1">
            <el-col :span="12" :offset="0">
              <span>转出单位: {{ formData.backUnitName }}</span>
            </el-col>
            <el-col :span="12" :offset="0">
              <span>转入单位: {{ formData.leaseUnitName }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <span>转出工程: {{ formData.backProName }}</span>
            </el-col>
            <el-col :span="12" :offset="0">
              <span>转入工程: {{ formData.leaseProName }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="dialogType == 1">
            <el-col :span="12" :offset="0">
              <span>转出班组: {{ formData.backTeamName }}</span>
            </el-col>
            <el-col :span="12" :offset="0">
              <span>转入班组: {{ formData.leaseTeamName }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <span>转出人: {{ formData.backMan }}</span>
            </el-col>
            <el-col :span="12" :offset="0">
              <span>转入人: {{ formData.leaseMan }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <span>联系电话: {{ formData.backPhone }}</span>
            </el-col>
            <el-col :span="12" :offset="0">
              <span>联系电话: {{ formData.leasePhone }}</span>
            </el-col>
          </el-row>

          <table class="native-table" style="border: 1.5px solid #333">
            <thead>
              <tr>
                <th style="width: 55px; border: 1.5px solid #333">序号</th>
                <th v-for="column in tableColumns" :key="column.prop" style="border: 1.5px solid #333">
                  {{ column.label }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableList" :key="index">
                <td style="border: 1.5px solid #333">{{ index + 1 }}</td>
                <td v-for="column in tableColumns" :key="column.prop" style="border: 1.5px solid #333">
                  {{ item[column.prop] || '-' }}
                </td>
              </tr>
            </tbody>
          </table>

          <!-- 签名展示部分 -->
          <div class="fillIn" style="margin-top: 50px; display: flex; justify-content: space-between">
            <!-- 发起方签名 -->
            <div class="item" style="width: 33.3%; display: flex; align-items: flex-start">
              <div style="width: 25%">发起：</div>
              <div v-if=" launchSignList && launchSignList.length > 0" style="width: 75%; display: flex; align-items: center; flex-wrap: wrap">
                <div
                  v-for="(item, index) in launchSignList"
                  :key="index"
                  style="width: 80%; margin-left: 20px; height: 40px; transform: translateY(-30px)"
                >
                  <img
                    :src="item.outSignUrl"
                    style="width: 40px; height: 90px; max-width: 100%"
                    :style="{ transform: item.outSignType == 0 ? 'rotate(-90deg)' : '' }"
                    alt="审核签名"
                  />
                </div>
              </div>
              <div v-else style="width: 75%; margin-left: 20px; transform: translateY(-30px)">-</div>
            </div>

            <!-- 审核签名 -->
            <div class="item" style="width: 33.3%; display: flex; align-items: flex-start; flex-wrap: wrap">
              <div style="width: 25%">审核：</div>
              <div v-if="approveSignList && approveSignList.length > 0" style="width: 75%; display: flex; align-items: center; flex-wrap: wrap">
                <div
                  v-for="(item, index) in approveSignList"
                  :key="index"
                  style="width: 80%; margin-left: 20px; height: 40px; transform: translateY(-30px)"
                >
                  <img
                    :src="item.outSignUrl"
                    style="width: 40px; height: 90px; max-width: 100%"
                    :style="{ transform: item.outSignType == 0 ? 'rotate(-90deg)' : '' }"
                    alt="审核签名"
                  />
                </div>
              </div>
              <div v-else style="width: 75%; margin-left: 20px; height: 40px; transform: translateY(-30px)">-</div>
            </div>

            <!-- 接收方签名 -->
            <div class="item" style="width: 33.3%; display: flex; align-items: flex-start">
              <div style="width: 25%">接收：</div>
              <div v-if="receiveSignList && receiveSignList.length > 0" style="width: 75%; display: flex; align-items: center; flex-wrap: wrap">
                <div
                  v-for="(item, index) in receiveSignList"
                  :key="index"
                  style="width: 80%; margin-left: 20px; height: 40px; transform: translateY(-30px)"
                >
                  <img
                    :src="item.outSignUrl"
                    style="width: 40px; height: 90px; max-width: 100%"
                    :style="{ transform: item.outSignType == 0 ? 'rotate(-90deg)' : '' }"
                    alt="审核签名"
                  />
                </div>
              </div>
              <div v-else style="width: 75%; margin-left: 20px; transform: translateY(-30px)">-</div>
            </div>
          </div>



          <!-- 流程 -->
          <!-- <div v-if="auditingList.length > 0" style="margin-top: 20px">
            <div>流程记录</div>
            <div class="process-record">
              <el-steps>
                <el-step v-for="(step, index) in auditingList" :key="index" :title="step.nodeName">
                  <template slot="description">
                    <div class="custom-description">
                      审核结果:
                      <el-tag size="mini" type="primary" v-if="step.isAccept === 0">待审批</el-tag>
                      <el-tag size="mini" type="success" v-if="step.isAccept === 1">已通过</el-tag>
                      <el-tag size="mini" type="danger" v-if="step.isAccept === 2">已驳回</el-tag>
                    </div>

                    <div class="node-info" v-if="step.auditBy">
                      审核人:
                      {{ step.auditBy }}
                    </div>

                    <div class="node-info" v-if="step.createTime">
                      审核时间:
                      {{ step.createTime }}
                    </div>

                    <div class="node-info" v-if="step.remark">
                      审核意见:
                      {{ step.remark }}
                    </div>
                  </template>
                </el-step>
              </el-steps>
            </div>
          </div> -->
        </vue-easy-print>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="print">打 印</el-button>
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { receiveDetail } from '@/api/business/index.js'
import {getInfoApi, getApproveListApi, getSignatureList} from '@/api/materialsStation/index'
import { getAuditingDetailsApi } from '@/api/receive-apply/index.js'
import vueEasyPrint from 'vue-easy-print'
import printJS from 'print-js'

export default {
  components: { vueEasyPrint },
  data() {
    return {
      dialogType: 1,
      dialogVisible: false,
      rowId: null,
      formData: {},
      tableColumns: [
        { label: '类型名称', prop: 'typeName' },
        { label: '规格型号', prop: 'typeModelName' },
        { label: '机具编号', prop: 'maCode' },
        { label: '计量单位', prop: 'unitName' },
        { label: '直转数量', prop: 'directNum' },
        { label: '领料人', prop: 'leasePerson' },
        { label: '领料日期', prop: 'startTime' }
      ],
      tableList: [],
      auditingList: [], // 流程记录
      leaseApplyData: {},
      launchSignList: [],
      approveSignList: [], // 审核签名
      receiveSignList:[]
    }
  },
  methods: {
    openDialog(id, type) {
      this.dialogType = type || 1
      this.rowId = id
      this.dialogVisible = true
      setTimeout(() => {
        this.getTaskInfo()
        // this.getLeaseTaskDetailFun()
        this.getSignList()
      }, 100)
    },
    print() {
      this.$refs.remarksPrintRef.print()
    },
    // 获取详情
    async getTaskInfo() {
      const loading = this.$loading()
      try {
        let res = null
        if (this.dialogType == 1) {
          res = await getInfoApi({ id: this.rowId })
          this.formData = res.data.directApplyInfo || {}
          this.tableList = res.data.directApplyInfoDetails || []
        } else {
          res = await receiveDetail({ id: this.rowId })
          this.formData = res.data || {}
          this.tableList = res.data.directApplyDetails || []
        }
        console.log('🚀 ~ getTaskInfo ~ res:', res)
        loading.close()
      } catch (error) {
        console.log('🚀 ~ error:', error)
        loading.close()
      }
    },
    // 获取数据详情 和 审核记录详情
    async getLeaseTaskDetailFun() {
      const taskType = this.dialogType == 1 ? 25 : 16
      const result = await getAuditingDetailsApi({ taskId: this.rowId, taskType })
      console.log('result', result)
      this.auditingList = result.rows
    },
    // 获取签名
    async getSignList() {
      try {
        const res = await getSignatureList({ id: this.rowId })
        console.log('🚀 ~ getSignList ~ res:', res)
        if (res.data && res.data.length > 0) {
          this.launchSignList = res.data[0].approveSignList
          this.approveSignList=res.data[1].approveSignList
          this.receiveSignList=res.data[2].approveSignList
        }

        // if (res.data.approveSignList && res.data.approveSignList.length > 0) {
        //   this.leaseApplyData = res.data.approveSignList[0]
        //   console.log('🚀 ~ getSignList ~ this.leaseApplyData:', this.leaseApplyData)
        //   this.approveSignList = res.data.approveSignList.slice(1).filter(item => item != null && item !== '')
        //   console.log('🚀 ~ getSignList ~ this.approveSignList:', this.approveSignList)
        // }
      } catch (error) {
        console.log('🚀 ~ getSignList ~ error:', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.native-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;

  th,
  td {
    padding: 8px 12px;
    text-align: center;
  }

  thead {
    background-color: #f5f7fa;
    font-weight: bold;
    color: #303133;
  }

  tbody tr:nth-child(even) {
    background-color: #fafafa;
  }

  tbody tr:hover {
    background-color: #f0f9eb;
  }
}
.process-record {
  margin-top: 20px;
}
::v-deep .el-step__icon.is-text {
  background-color: #19a4a0;
  color: #19a4a0;
  border: none;
  width: 16px;
  height: 16px;
}

::v-deep .el-step.is-vertical .el-step__line {
  width: 2px;
  top: 26px;
  bottom: 8px;
  left: 7px;
}

::v-deep .el-step__title.is-finish {
  font-weight: bold;
  color: #303133;
  font-size: 16px;
}

::v-deep .el-step__title.is-wait {
  font-weight: bold;
  color: #303133;
  font-size: 16px;
}
</style>
