<template>
  <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: flex-start;">
    <div
      style="width: 22px;font-size: 0.7rem;text-align: center;font-weight: bolder;line-height: 20px;margin-left: 2px;display: flex;justify-content: center;align-items: center;">
      <span style="color: #13227a">功能</span>
    </div>
    <div id="formatPdf" class="functionButton" @click="getImgCheckDirectFileList">
      <img :src="require('@/assets/image/Pdf.png')" width="28px" />
      <div>
        <span>工艺</span>
        <span>文件</span>
      </div>
    </div>
    <!-- <div id="orderINOUT" class="functionButton" @click="showProductOut">
      <img :src="require('@/assets/image/orderINOUT.png')" width="26px"/>
      <div>
        <span>产品</span>
        <span>拉出</span>
      </div>
    </div> -->
    <div id="materialBatch" class="functionButton" @click="showBatchManager">
      <img :src="require('@/assets/image/materialBatch.png')" width="26px" />
      <div>
        <span>物料</span>
        <span>批次</span>
      </div>
    </div>
    <div id="CmaasCall" class="functionButton">
      <img :src="require('@/assets/image/cmaasCall.png')" width="26px" />
      <div>
        <span>CMaaS</span>
        <span>叫料</span>
      </div>
    </div>
    <!--    <div id="partFinish" class="functionButton">-->
    <!--      <img :src="require('@/assets/image/partFinish.png')" width="26px"/>-->
    <!--      <div style="line-height: 1;">-->
    <!--        <span>装配</span>-->
    <!--        <span>完成</span>-->
    <!--      </div>-->
    <!--    </div>-->
    <el-dialog :append-to-body="true" :visible.sync="dialogFormVisible_batch" center style="text-align: center"
      title="物料批次" width="850px">
      <batch-manager v-if="dialogFormVisible_batch" />
      <div slot="footer" class="dialog-footer">
        <el-button class="el-icon-close" type="info" size="mini" @click="dialogFormVisible_batch = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :append-to-body="true" :visible.sync="dialogFormVisible_out" center style="text-align: center"
      title="产品拉出" width="450px">
      <el-form ref="form1" :model="form" label-width="80px" style="width: 100%;">
        <el-form-item label="工位号" prop="materialCode">
          <el-input v-model="form.opInfo" style="width:300px;" readonly />
        </el-form-item>
        <el-form-item label="产品编号" prop="productCode">
          <el-input v-model="form.productCode" style="width:300px;" readonly />
        </el-form-item>
        <el-form-item label="工单号" prop="orderCode">
          <el-input v-model="form.orderCode" style="width:300px;" readonly />
        </el-form-item>
        <el-form-item label="操作者" prop="personCode">
          <el-input v-model="form.personCode" style="width:300px;" readonly />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" class="el-icon-check" @click="submitProductOut('form1')">确认拉出</el-button>
        <el-button class="el-icon-close" type="info" size="mini" @click="dialogFormVisible_out = false">关闭</el-button>
        <div
          style="display: flex;align-items: center;justify-content: flex-start;font-size: 1.3rem;background-color: #13227a;margin-top: 10px">
          <i v-if="productOutStatus === 0" class="el-icon-info" style="color: #ffcc00" />
          <i v-else-if="productOutStatus === 2" class="el-icon-info" style="color: #ff0000" />
          <i v-else-if="productOutStatus === 1" class="el-icon-info" style="color: #00893d" />
          <i v-else />
          <span v-if="productOutStatus === 0" style="color: #ffcc00">{{ productOutStatus_info }}</span>
          <span v-if="productOutStatus === 2" style="color: #ff0000">{{ productOutStatus_info }}</span>
          <span v-if="productOutStatus === 1" style="color: #00893d">{{ productOutStatus_info }}</span>
        </div>
      </div>
    </el-dialog>
    <el-dialog :append-to-body="true" :visible.sync="imgCheckDialogFormVisible" center style="text-align: center"
      title="指导文件列表" width="550px">
      <el-table :data="imgCheckDirectFileList"
        :header-cell-style="{ background: '#f9fbfe', padding: '3px 0', color: '#0b4db0' }" max-height="365px"
        size="small" style="width: 100%; height: 280px;">
        <el-table-column align="center" label="#" width="70px">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="文件名称">
          <template #default="scope">
            {{ scope.row.文件名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="查看" width="100">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="imgCheckDirectFile(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--底部按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button class="el-icon-close" type="info" size="mini"
          @click="imgCheckDialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BatchManager from '@/views/BatchManager/index.vue'
import { stationIsWorking } from '@/utils/tool'

export default {
  name: 'functionButton',
  components: {
    BatchManager
  },
  data() {
    return {
      imgCheckDialogFormVisible: false,
      dialogFormVisible_batch: false,
      dialogFormVisible_out: false,
      productOutStatus: 9, // 0初始 1成功 2失败
      productOutStatus_info: '',
      form: {
        opInfo: '',
        productCode: '',
        orderCode: '',
        personCode: ''
      },
      imgCheckDirectFileList: []
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    showBatchManager() {
      this.dialogFormVisible_batch = true
    },
    showProductOut() {
      if (!stationIsWorking(this.$store.state)) {
        this.$message.error('工位未在工作!')
        return
      }
      this.form.opInfo = `${this.$store.state.station.stationNumber}-${this.$store.state.station.stationName}`
      this.form.productCode = this.$store.state.station.engineValue.EngineID
      this.form.orderCode = this.$store.state.station.engineValue.OrderForm
      this.form.personCode = `${this.$store.state.user.name}【${this.$store.state.user.account}】`
      this.dialogFormVisible_out = true
    },
    submitProductOut(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.productOutStatus = 0
          this.productOutStatus_info = '正在向CMaaS申请拉出订单，请稍等！'
          setTimeout(() => {
            this.productOutStatus = 2
            this.productOutStatus_info = '订单拉出失败，未查询到相关订单信息！'
            setTimeout(() => {
              this.productOutStatus = 1
              this.productOutStatus_info = '订单拉出成功，界面将自动关闭！'
              setTimeout(() => {
                this.dialogFormVisible_out = false
                this.productOutStatus = 9
                this.productOutStatus_info = ''
              }, 2000)
            }, 2000)
          }, 2000)
        } else {
          return false
        }
      })
    },
    // 查询指导文件列表
    getImgCheckDirectFileList() {
      var param = []
      param[0] = ['工位号', this.$store.state.station.stationNumber]
      var Data = this.CreateData('11', '基础数据_操作指南指导文件_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.imgCheckDirectFileList = response.data
        }
        console.log(this.imgCheckDirectFileList)
        this.imgCheckDialogFormVisible = true
      })
    },
    // 预览指导文件按钮
    imgCheckDirectFile(row) {
      var param = []
      param[0] = ['ID', row.ID]
      var Data = this.CreateData('11', '基础数据_操作指南指导文件_查看文件', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response)
        if (response.data.length > 0) {
          this.pdfSrc = this.solvePdfUr1(response.data[0].指导文件)
          window.open(this.pdfSrc, '_blank')
          // this.imgCheckDialogFormVisible = true // 查看点检文件
          console.log(this.pdfSrc)
        } else {
          this.$message.error('该工位此点检项目无指导文件，请设置后查看')
        }
      })
    },
    // 处理pdf 二进制流
    solvePdfUr1(content, type, fileName) {
      const bstr = atob(content)
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      // 确定解析格式，可能可以变成img，没有深入研究
      const blob = new Blob([u8arr], { type: 'application/pdf;chartset=UTF-8' })
      return window.URL.createObjectURL(blob)
    }
  }
}
</script>

<style scoped>
.functionButton {
  width: 150px;
  height: 40px;
  margin: 0 5px 0 0;
  border-radius: 5px;
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #85abdf, #275bbf, #0036b0, #13227a);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #fff;
}
.functionButton img {
  margin-right: 5px;
}
.functionButton span {
  color: #ffffff;
  font-size: 1rem;
  font-weight: bolder;
}

.functionButton:hover {
  background-color: #2a3a9b;
  border: 1px solid #fff;
  color: #fff;
}

::v-deep.el-table .el-table__cell {
  padding: 3px 0;
}

::v-deep.el-table .el-table__row .cell {
  font-size: 0.8rem !important;
}

::v-deep.el-table th.el-table__cell>.cell {
  font-size: 0.9rem;
}
</style>
