<template>
  <div class="app-container" id="acceptDetail">
    <el-row :gutter="20">
      <el-col :span="19" :offset="0">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="90px"
        >
          <el-form-item label="类型规格：" prop="typeId">
            <el-select
              v-model="queryParams.typeId"
              placeholder="请选择类型规格"
              clearable
              filterable
              style="width: 240px"
            >
              <el-option v-for="dict in materialModelList" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="机具厂家："  prop="supplierId">
              <el-select v-model="queryParams.supplierId" placeholder="请选择机具厂家" clearable>
                <el-option
                  v-for="dict in supplierList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item> -->
          <el-form-item label="出厂日期：" prop="productionTime">
            <el-date-picker
              v-model="queryParams.productionTime"
              placeholder="请选择出厂日期"
              value-format="yyyy-MM-dd"
              type="date"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8" style="display: flex; align-items: center">
          <el-col :span="1.5">
            <el-button type="primary" size="mini" icon="el-icon-back" @click="jumpList">新购到货验收</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
          </el-col>

          <el-col :span="1.5">
            <el-button type="success" icon="el-icon-check" size="mini" @click="batchPass" v-show="!isView">
              合格
            </el-button>
          </el-col>

          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-close" size="mini" @click="batchReject" v-show="!isView">
              不合格
            </el-button>
          </el-col>
          <!-- <el-col :span="1.5">
            <span>验收人：{{ checkUser }}</span>
          </el-col> -->
        </el-row>

        <el-table
          v-loading="loading"
          :data="tableList"
          ref="multipleTable"
          row-key="typeId"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column
            type="selection"
            width="55"
            align="center"
            :selectable="selectable"
            :reserve-selection="true"
            v-if="!isView"
          /> -->
          <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
          <el-table-column label="物资名称" align="center" prop="maTypeName" :show-overflow-tooltip="true" />
          <el-table-column label="规格型号" align="center" prop="typeName" :show-overflow-tooltip="true" />
          <el-table-column label="单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
          <el-table-column label="采购数量" align="center" prop="purchaseNum" :show-overflow-tooltip="true" />
          <el-table-column label="验收数量" align="center" prop="checkNum" :show-overflow-tooltip="true" />
          <el-table-column
            label="购置单价(元含税)"
            align="center"
            prop="purchaseTaxPrice"
            :show-overflow-tooltip="true"
          />
          <!-- <el-table-column
            label="购置单价（元不含税）"
            align="center"
            prop="purchasePrice"
            :show-overflow-tooltip="true"
          /> -->
          <!-- <el-table-column label="供应商" align="center" prop="supplierName" /> -->
          <el-table-column label="是否未固定资产" align="center" prop="fixCodeStr" :show-overflow-tooltip="true" />
          <el-table-column label="出厂日期" align="center" prop="productionTime" :show-overflow-tooltip="true" />
          <el-table-column label="相关配套资料" align="center" prop="" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div
                style="color: #02a7f0; cursor: pointer"
                @click="openFileDialog(scope.row)"
                v-if="scope.row.isExitFile == 1"
              >
                报告管理
              </div>
              <div
                style="color: red; cursor: pointer"
                @click="openFileDialog(scope.row)"
                v-if="scope.row.isExitFile == 0"
              >
                报告管理
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.purchase_task_status" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="验收结论" align="center" prop="checkResult" :show-overflow-tooltip="true" />
          <!-- <el-table-column label="操作" align="center" width="180" v-if="!isView">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="pass(scope.row)" v-if="scope.row.status==2||scope.row.status==13||scope.row.status==14">
                合格
              </el-button>
              <el-button size="mini" type="danger" @click="reject(scope.row)" v-if="scope.row.status==2||scope.row.status==13||scope.row.status==14">
                不合格
              </el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </el-col>
      <el-col :span="5" :offset="0">
        <div class="right-container">
          <div class="right-title">
            <div></div>
            <div></div>
            <div>流程记录</div>
          </div>

          <div class="process-record">
            <el-steps :space="120" direction="vertical">
              <el-step v-for="(step, index) in auditingList" :key="index" :title="step.deptName">
                <template slot="description">
                  <div class="custom-description">
                    审核结果:
                    <el-tag size="mini" type="primary" v-if="step.auditStatus == 0">待审核</el-tag>
                    <el-tag size="mini" type="success" v-if="step.auditStatus == 1">审核通过</el-tag>
                    <el-tag size="mini" type="danger" v-if="step.auditStatus == 2">审核驳回</el-tag>
                  </div>

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

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

                  <div class="node-info" v-if="step.auditRemark">
                    审核意见:
                    {{ step.auditRemark }}
                  </div>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      /> -->

    <el-dialog title="报告管理" :visible.sync="open" width="900px" append-to-body>
      <el-table v-loading="dialogLoading" :data="fileDataList" width="100%" height="350px">
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="报告类型" align="center" prop="dictLabel" :show-overflow-tooltip="true" />
        <el-table-column label="文件名称" align="center" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="类型名称" align="center" :show-overflow-tooltip="true">
          <template>
            <div>{{ this.rowData.maTypeName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="规格型号" align="center" :show-overflow-tooltip="true">
          <template>
            <div>{{ this.rowData.typeName }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="报告日期" align="center" prop="orgName" :show-overflow-tooltip="true"/>
            <el-table-column label="截止有效期" align="center" prop="orgName" :show-overflow-tooltip="true"/> -->
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <div style="display: flex; align-items: center; justify-content: center">
              <el-upload
                ref="upload"
                :limit="3"
                :headers="upload.headers"
                :action="upload.url"
                :show-file-list="false"
                accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
                :on-success="handleFileSuccess"
                :auto-upload="true"
              >
                <el-button size="mini" type="text" @click="beforeFileUpload(scope.row)" v-if="!isView">上传</el-button>
              </el-upload>

              <el-button
                size="mini"
                type="text"
                @click="picturePreviewFile(scope.row)"
                v-if="scope.row.fileListTemp != 0"
                style="margin-left: 10px"
              >
                查看
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 图片查看弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="500px" height="500px">
      <img width="100%" height="500px" :src="dialogImageUrl" />
    </el-dialog>



    <!-- 文件查看列表 -->
    <el-dialog title="文件列表" :visible.sync="dialogVisibleFile" width="500px" height="500px">
        <el-table :data="fileListInfo" width="100%" height="350px">
            <el-table-column label="序号" type="index" width="55" align="center" />
            <el-table-column label="文件名称" align="center" prop="name" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="picturePreview(scope.row)" v-if="scope.row.url">
                        查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>

    <!-- 验收弹窗 -->
    <el-dialog title="验收" :visible.sync="confirmShow" width="600px" height="300px">
      <div style="width: 100%; height: 80%; display: flex; margin-bottom: 10px">
        <div style="width: 15%">验收结论：</div>
        <el-input
          type="textarea"
          :rows="3"
          style="width: 80%"
          placeholder="请输入结论"
          v-model="checkResult"
          maxlength="100"
        ></el-input>
      </div>
      <div style="width: 100%; height: 20%; display: flex; justify-content: flex-end; align-items: center">
        <el-button type="primary" @click="confirmCheck">确认</el-button>
        <el-button size="mini" @click="confirmShow = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDeviceType } from '@/api/ma/device'
import { getManufacturerSelect } from '@/api/ma/supplier'
import {
  getPurchaseDetailsList,
  acceptInnerVerifyer,
  getPurchaseFileList,
  uploadPurchaseFile,
  getCheckUserList,
  getSignListApi
} from '@/api/purchase/goodsAccept'
import { downloadFile } from '@/utils/download'
import { getToken } from '@/utils/auth'
export default {
  name: 'AcceptDetail',
  dicts: ['purchase_task_status'],
  data() {
    return {
      Id: '',
      taskId: '',
      // 遮罩层
      loading: false,
      dialogLoading: false,
      isView: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      showHouse: false,
      materialModelList: [], //规格型号下拉
      supplierList: [], //厂家下拉
      ids: [],
      checkList: [],
      // 总条数
      total: 0,
      //表格数据
      tableList: [],
      fixCodeList: ['否', '是'],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      rowData: {},
      fileDataList: [
        { dictLabel: '合格证', fileType: '0', name: '', url: '' },
        { dictLabel: '型式试验报告', fileType: '1', name: '', url: '' },
        { dictLabel: '出厂检测报告', fileType: '2', name: '', url: '' },
        { dictLabel: '第三方检测报告', fileType: '3', name: '', url: '' },
        { dictLabel: '其他', fileType: '4', name: '', url: '' }
      ],
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        typeId: undefined,
        supplierId: undefined,
        productionTime: undefined
      },
      //确认弹窗
      confirmShow: false,
      taskStatus: '', //3合格、1不合格
      checkResult: '',
      verifyPass: true, //true合格、false不合格

      fileListInfo: [],
      fileId: '',
      //图片查看弹窗
      dialogImageUrl: '',
      dialogVisible: false,
      dialogVisibleFile: false,
      //上传
      upload: {
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/file/upload'
      },
      checkUserList: [], // 验收人列表
      checkUser: '', // 验收人
      auditingList: []
    }
  },
  mounted() {
    const taskId = this.$route.query && this.$route.query.taskId
    const Id = this.$route.query && this.$route.query.Id
    const isView = this.$route.query && this.$route.query.isView
    this.taskId = taskId
    this.Id = Id
    if (isView == 'true') {
      this.isView = true
    } else {
      this.isView = false
    }
    this.getDeviceType()
    // this.getSupplierList()
    console.log(this.isView)
    this.getList()
    this.getCheckUser()
    this.getSignList()
  },
  methods: {
    // 流程图
    async getSignList() {
      try {
        const res = await getSignListApi({ taskId: this.taskId })
        console.log('🚀 ~ getSignList ~ res:', res)
        // 合并auditingList
        if (res.code === 200 && res.data && res.data.length > 0) {
          const length = res.data.length
          this.auditingList = res.data.map((item, index) => {
            return {
              ...item,
              deptName: index == 0 ? '供应科' : item.deptName || '',
              auditStatus: index == 0 ? 1 : item.auditStatus || 0
            }
          })
          const list = [
            { deptName: '安全/技术科', auditStatus: 0 },
            { deptName: '库管班', auditStatus: 0 }
          ]
          if (length == 1) {
            this.auditingList.push(...list)
          } else if (length == 2) {
            this.auditingList.push(list[1])
          }
          console.log('🚀 ~ getSignList ~ this.审核:', this.auditingList)
          // const kuGuanOrder = ['库管一班', '库管二班', '库管三班']
          // // 用 deptName 去重
          // const map = new Map()
          // res.data.forEach(item => map.set(item.deptName, { ...item }))
          // // 查找有数据的库管班
          // const kuGuanItem = kuGuanOrder.map(name => map.get(name)).find(Boolean)
          // 组装最终列表
          // this.auditingList = [
          //   // 第一层：供应科，userName 没有值时默认 '姚士超'
          //   (() => {
          //     const item = map.get('供应科') || { deptName: '供应科', auditStatus: 1 }
          //     return { ...item, userName: '姚士超' }
          //   })(),
          //   // 第二层：技术科
          //   map.get('技术科') || { deptName: '技术科', auditStatus: 0 },
          //   // 第三层：库管班
          //   kuGuanItem || { deptName: '库管班', auditStatus: 0 }
          // ]
        }
      } catch (error) {
        console.log('🚀 ~ getSignList ~ error:', error)
      }
    },
    // 获取验收人
    async getCheckUser() {
      try {
        const res = await getCheckUserList({ taskId: this.taskId })
        console.log('🚀 ~ getCheckUser ~ res:', res)
        if (res.data) {
          res.data.forEach(item => {
            if (item.checkUser) {
              this.checkUserList.push(item.checkUser)
            }
          })
        }
        this.$nextTick(() => {
          this.checkUser = this.checkUserList.join(', ')
        })
      } catch (error) {
        console.log('🚀 ~ getCheckUser ~ error:', error)
      }
    },
    //是否可用勾选框
    selectable(row) {
      console.log(row)
      if (row.status == 2 || row.status == 13 || row.status == 14) {
        return true
      } else {
        return false
      }
    },
    // 返回列表页
    jumpList() {
      const obj = { path: '/purchase/goodsAccept' }
      this.$tab.closeOpenPage(obj)
    },
    getDeviceType() {
      getDeviceType({ level: 4, skipPermission: 1 }).then(response => {
        let matModelRes = response.data
        this.materialModelList = matModelRes.map(item => {
          return {
            label: item.typeName,
            value: item.typeId
          }
        })
      })
    },
    getSupplierList() {
      getManufacturerSelect().then(response => {
        let arrRes = response.rows
        this.supplierList = arrRes.map(item => {
          return {
            label: item.supplier,
            value: item.supplierId
          }
        })
      })
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      this.queryParams.id = this.Id
      this.queryParams.taskId = this.taskId
      this.queryParams.taskStage = 2
      getPurchaseDetailsList(this.queryParams).then(response => {
        this.tableList = response.data.purchaseCheckDetailsList
        this.tableList.forEach(item => {
          item.fixCodeStr = this.fixCodeList[Number(item.fixCode)]
        })
        // this.total = response.total;
        this.loading = false
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.keyWord = null
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    //合格
    pass(row) {
      this.taskStatus = '3'
      this.checkResult = '合格'
      this.verifyPass = true
      let obj = {
        taskId: row.taskId,
        typeId: row.typeId,
        status: this.taskStatus,
        checkResult: this.checkResult,
        manageType: row.manageType
      }
      this.checkList = []
      this.checkList.push(obj)
      this.confirmShow = true
    },
    //不合格
    reject(row) {
      this.taskStatus = '1'
      this.checkResult = '不合格'
      this.verifyPass = false
      let obj = {
        taskId: row.taskId,
        typeId: row.typeId,
        status: this.taskStatus,
        checkResult: this.checkResult,
        manageType: row.manageType
      }
      this.checkList = []
      this.checkList.push(obj)
      this.confirmShow = true
    },
    //批量合格
    batchPass() {
      this.taskStatus = '3'
      this.checkResult = '合格'
      this.verifyPass = true
      this.checkList = []
      this.checkList = this.tableList.map(item => {
        let obj = {
          taskId: item.taskId,
          typeId: item.typeId,
          status: this.taskStatus,
          checkResult: this.checkResult,
          manageType: item.manageType
        }
        return obj
      })
      this.confirmShow = true
    },
    //批量不合格
    batchReject() {
      this.taskStatus = '1'
      this.checkResult = '不合格'
      this.verifyPass = false
      this.checkList = []
      this.checkList = this.tableList.map(item => {
        let obj = {
          taskId: item.taskId,
          typeId: item.typeId,
          status: this.taskStatus,
          checkResult: this.checkResult,
          manageType: item.manageType
        }
        return obj
      })
      this.confirmShow = true
    },
    //验收确认请求
    confirmCheck() {
      this.checkList.forEach(item => {
        item.checkResult = this.checkResult
      })
      let param = {
        purchaseCheckDetailsList: this.checkList,
        verifyPass: this.verifyPass
      }
      console.log(param)
      acceptInnerVerifyer(param).then(response => {
        if (response.code == 200) {
          this.$modal.msgSuccess(response.msg)
          this.confirmShow = false
          this.getList()
          this.getSignList()
          this.$refs.multipleTable.clearSelection()
          // this.jumpList()
          //关闭页面
          this.$router.push({ name: 'GoodsAccept', params: { isReset: 'true' }}).then(res => {
            this.$tab.closePage({ path: '/purchase/goodsAcceptDetail'})
          })
        }
      })
    },
    //文件管理
    async openFileDialog(row) {
      this.rowData = row
      this.fileDataList = [
          { dictLabel: '合格证', fileType: '0', name: '', url: '', fileList: [], fileListTemp: [] },
          { dictLabel: '型式试验报告', fileType: '1', name: '', url: '', fileList: [], fileListTemp: [] },
          { dictLabel: '出厂检测报告', fileType: '2', name: '', url: '', fileList: [], fileListTemp: [] },
          { dictLabel: '第三方检测报告', fileType: '3', name: '', url: '', fileList: [], fileListTemp: [] },
          { dictLabel: '其他', fileType: '4', name: '', url: '', fileList: [], fileListTemp: [] }
      ]
      if (this.rowData.bmFileInfos == null) {
          await this.getFileData()

          if (this.rowData.bmFileInfos.length > 0) {
              this.rowData.bmFileInfos.forEach(item => {
                  let index = this.fileDataList.findIndex(v => v.fileType == item.fileType)
                  this.fileDataList[index].name = item.name
                  this.fileDataList[index].url = item.url
                  this.fileDataList[index].fileList.push({
                      name: item.name,
                      url: item.url
                  })
                  this.fileDataList[index].fileListTemp.push({
                      name: item.name,
                      url: item.url
                  })
              })
          }
      } else {
          if (this.rowData.bmFileInfos.length > 0) {
              this.rowData.bmFileInfos.forEach(item => {
                  let index = this.fileDataList.findIndex(v => v.fileType == item.fileType)
                  this.fileDataList[index].name = item.name
                  this.fileDataList[index].url = item.url
                  this.fileDataList[index].fileList.push({
                      name: item.name,
                      url: item.url
                  })
                  this.fileDataList[index].fileListTemp.push({
                      name: item.name,
                      url: item.url
                  })
              })
          }
      }
      // this.fileDataList = [
      //   { dictLabel: '合格证', fileType: '0', name: '', url: '' },
      //   { dictLabel: '型式试验报告', fileType: '1', name: '', url: '' },
      //   { dictLabel: '出厂检测报告', fileType: '2', name: '', url: '' },
      //   { dictLabel: '第三方检测报告', fileType: '3', name: '', url: '' },
      //   { dictLabel: '其他', fileType: '4', name: '', url: '' }
      // ]
      // this.getFileData()
      this.open = true
    },
    //获取已上传文件
    async getFileData() {
      let param = {
        modelId: this.rowData.typeId,
        taskType: 0,
        taskId: this.rowData.taskId
      }
      this.rowData.bmFileInfos = []
      await getPurchaseFileList(param)
          .then(response => {
              if (response.rows.length > 0) {
                  response.rows.forEach(item => {
                      let index = this.fileDataList.findIndex(v => v.fileType == item.fileType)
                      item.fileDetailList.forEach(item2 => {
                          // this.fileDataList[index].fileList.push({
                          //     name:item2.name,
                          //     url:item2.url
                          // })
                          // this.fileDataList[index].fileListTemp.push({
                          //     name:item2.name,
                          //     url:item2.url
                          // })
                          const obj = {
                              taskId: this.taskId,
                              taskType: '0',
                              name: item2.name,
                              url: item2.url,
                              modelId: this.rowData.partId,
                              fileType: item2.fileType
                          }
                          this.rowData.bmFileInfos.push(obj)
                          console.log('77777777', this.rowData)
                      })
                  })
              }
          })
          .catch(() => {})
    },
    //上传
    beforeFileUpload(row) {
      this.rowData.fileType = row.fileType
      // this.rowData.dictLabel=row.dictLabel;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      if (response.code == 200) {
        let param = {
          taskId: this.taskId,
          taskType: '0',
          name: response.data.name,
          url: response.data.url,
          modelId: this.rowData.typeId,
          fileType: this.rowData.fileType
        }
        console.log(param)
        uploadPurchaseFile(param)
          .then(response => {
            this.$modal.msgSuccess('上传成功')
            this.getFileData()
          })
          .catch(() => {
            this.$modal.msgError('上传失败')
          })
      }
    },

  
    picturePreviewFile(row) {
        row.fileList = []
        row.fileListTemp.forEach(item => {
            row.fileList.push({
                name: item.name,
                url: item.url
            })
        })
        this.fileId = row.fileType
        this.fileListInfo = row.fileListTemp

        this.dialogVisibleFile = true
    },

    //图片查看
    picturePreview(file) {
      this.dialogImageUrl = file.url.replaceAll('#', '%23')
      const parts = file.name.split('.')
      const extension = parts.pop()
      if (
        extension === 'doc' ||
        extension === 'DOC' ||
        extension === 'docx' ||
        extension === 'DOCX' ||
        extension === 'pdf' ||
        extension === 'PDF'
      ) {
        const windowName = file.name
        window.open(file.url, windowName)
      } else {
        this.dialogVisible = true
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      const formatTime = date => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}${month}${day}_${hours}${minutes}${seconds}`
      }

      const currentTime = formatTime(new Date())
      this.download(
        '/material/purchase_check_info/exportDetails',
        { taskId: this.taskId, taskStage: 2, id: this.Id },
        `新购到货详情_${currentTime}.xlsx`
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.uploadImg {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.deviceCode {
  margin-top: 10px;
  padding-bottom: 20px;
  font-size: 18px;
}
::v-deep.el-table .fixed-width .el-button--mini {
  width: 60px !important;
  margin-bottom: 10px;
}
//隐藏图片上传框的css
::v-deep.disabled {
  .el-upload--picture-card {
    display: none;
  }
}
.right-container {
  padding: 0 20px;
  .right-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    & div:first-child {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #19a4a0;
      z-index: 9;
    }
    & div:nth-child(2) {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #b2e1e0;
      transform: translateX(-50%);
    }
  }
  .process-record {
    margin-top: 20px;
    //   height: 60vh;
    .node-info {
      word-break: break-all;
      white-space: pre-wrap;
    }
  }
}

.btn-container {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}

::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;
}
// 居中
.cont-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
