<template>
  <div class="app-container" id="entryDetail">
    <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">
      <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" v-show="!isView"
                  size="mini" :disabled="multiple"
              >入库</el-button>
          </el-col>

          <el-col :span="1.5">
              <el-button
                  type="danger"
                  icon="el-icon-close" v-show="!isView"
                  size="mini" :disabled="multiple"
              >驳回</el-button>
          </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" :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="inputNum" :show-overflow-tooltip="true"/>
      <el-table-column label="待入库" align="center" prop="inputNum" :show-overflow-tooltip="true">
        <template slot-scope="scope">
                <div>
                  {{scope.row.manageType === 0 ? scope.row.bindNum - scope.row.inputNum : scope.row.checkNum - scope.row.inputNum }}
                </div>
          </template>
      </el-table-column>
      <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="manageType">
          <template slot-scope="scope">
              <!-- 0编码1数量 -->
                <div v-if="scope.row.manageType==0">编码管理</div>
                <div v-if="scope.row.manageType==1">数量管理</div>
          </template>
      </el-table-column>
      <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="checkResult" :show-overflow-tooltip="true"/>
      <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" width="180" v-if="!isView">
          <template slot-scope="scope">
              <el-button size="mini" type="success" @click="pass(scope.row)" v-if="scope.row.status!=14&&scope.row.status!=19">
                入库
              </el-button>
              <!-- <el-button size="mini" type="danger" @click="reject(scope.row)" v-if="scope.row.status!=14&&scope.row.status!=19">
                驳回
              </el-button> -->
          </template>
      </el-table-column>
    </el-table>

    <!-- <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" v-if="!isView"
                :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)">
                      上传
                </el-button>
              </el-upload>

              <el-button size="mini" type="text" @click="picturePreviewFile(scope.row)" v-if="scope.row.url" 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="openCode" width="1000px" append-to-body>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" size="mini" @click="codeWarehouse">入库</el-button>
            </el-col>
        </el-row>
        <el-table :data="codeTableData" width="100%" height="450px" row-key="id" @selection-change="codeSelection">
            <el-table-column type="selection" width="55" align="center"   v-if="!isView"/>
            <el-table-column label="序号" type="index" width="55" align="center"/>
            <el-table-column label="类型名称" prop="typeName" align="center" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                   <span>{{ codeRowData.maTypeName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="规格型号" prop="type" align="center" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                   <span>{{ codeRowData.typeName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设备编码" prop="maCode" align="center" :show-overflow-tooltip="true"></el-table-column>
            <!-- <el-table-column label="操作" align="center"  width="300px">
              <template slot-scope="scope">
                  <el-button size="mini" type="warning" @click="openInnerDialog(scope.row)">内部维修</el-button>
                  <el-button size="mini" type="danger" @click="openScrapDialog(scope.row)">待报废</el-button>
              </template>
            </el-table-column> -->
        </el-table>
        <!-- <div style="width: 100%;height: 50px;display: flex;justify-content: flex-end;align-items: center;">
            <el-button type="primary" size="mini" >保存</el-button>
            <el-button type="normal" size="mini" @click="openCode=false">取消</el-button>
        </div> -->
    </el-dialog>


  </div>
</template>

<script>
import { getDeviceType} from "@/api/ma/device";
import { getManufacturerSelect} from "@/api/ma/supplier";
import { getPurchaseDetailsList,getPurchaseFileList,uploadPurchaseFile } from "@/api/purchase/goodsAccept";
import { purchaseWarehouse,getMachineById,rejectPurchaseWarehouse } from "@/api/purchase/goodsEntry";
import { downloadFile } from '@/utils/download'
import { getToken } from '@/utils/auth'
export default {
  name: "EntryDetail",
  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:[],
      // 总条数
      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,
      },
      fileListInfo: [],
      fileId: '',
       //图片查看弹窗
      dialogImageUrl: '',
      dialogVisible: false,
      dialogVisibleFile: false,
      //上传
      upload: {
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/file/upload'
      },
      //编码入库
      openCode:false,
      codeRowData:{},
      codeTableData:[],
      inPutList:[],
    };
  },
  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()
  },
  methods: {
      // 返回列表页
      jumpList() {
          const obj = { path: '/purchase/goodsEntry' }
          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=4
          // this.queryParams.statusList=[3,13,4,14,19]
          getPurchaseDetailsList(this.queryParams).then(response => {
              this.tableList = response.data.purchaseCheckDetailsList;
              this.tableList.forEach((item) => {
                  item.fixCodeStr = this.fixCodeList[Number(item.fixCode)]
              })
              console.log(this.tableList)
              // 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.map(item => item.id)
          this.single = selection.length != 1
          this.multiple = !selection.length
      },
      //入库
      pass(row) {
        if(row.manageType==0){//编码
          this.codeRowData=row
          let param={
            taskId:this.taskId,
            typeId:this.codeRowData.typeId
          }
          getMachineById(param).then((res)=>{
            this.codeTableData=res.data
            this.inPutList=[]
            this.openCode=true
          })
        }else{
            let obj = {
              taskId: this.taskId,
              typeId:row.typeId,
              purchaseId: row.id,
              typeName: row.maTypeName,
              typeModelName: row.typeName,
              manageType: row.manageType
            };
            this.$modal.confirm('是否确认新购入库该物资类型？')
            .then(function() {
              console.log(obj)
              return purchaseWarehouse(obj)
            }).then(() => {
                  this.$modal.msgSuccess('入库成功')
                  this.getList()
            }).catch(() => {});
        }
      },
      //编码勾选
      codeSelection(selection){
        console.log(selection)
        this.inPutList = selection.map(item => {return {'maCode':item.maCode}})
      },
      //编码入库
      codeWarehouse(){
        if(this.inPutList.length>0){
          let obj = {
            taskId: this.taskId,
            typeId:this.codeRowData.typeId,
            purchaseId: this.codeRowData.id,
            inPutList: this.inPutList,
            typeName: this.codeRowData.maTypeName,
            typeModelName: this.codeRowData.typeName,
            manageType: this.codeRowData.manageType
          };
          console.log(obj)
          this.$modal.confirm('是否确认新购入库勾选的编码？')
          .then(function() {
            return purchaseWarehouse(obj)
          }).then(() => {
              // let param={
              //   taskId:this.taskId,
              //   typeId:this.codeRowData.typeId
              // }
              // getMachineById(param).then((res)=>{
              //   this.codeTableData=res.data
              // })
              this.openCode=false
              this.getList()
              this.$modal.msgSuccess('入库成功')
          }).catch(() => {});
        }else{
          this.$modal.msgError('请先勾选入库编码！')
        }

      },
      //驳回
      reject(row) {
        let obj = {
            taskId: this.taskId,
            typeId:row.typeId,
            purchaseId: row.id
        };
        this.$modal.confirm('是否确认驳回该物资类型？')
        .then(function() {
          console.log(obj)
          return rejectPurchaseWarehouse(obj)
        }).then(() => {
              this.$modal.msgSuccess('驳回成功')
              this.getList()
        }).catch(() => {});
      },
      //文件管理
      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:4,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;
    }
}
</style>
