<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item prop="startTime">
        <el-date-picker
          v-model="queryParams.startTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="开始日期"
          @change="() => queryParams.endTime = ''"
          style="width: 130px"
        />
      </el-form-item>
      <el-form-item>-</el-form-item>
      <el-form-item prop="endTime">
        <el-date-picker
          v-model="queryParams.endTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="结束日期"
          style="width: 130px"
          :picker-options="{ disabledDate: (t) => t.getTime() < new Date(queryParams.startTime).getTime() - 86400000}"
        />
      </el-form-item>
        <el-form-item  prop="keyWord">
            <el-input
                v-model="queryParams.keyWord"
                placeholder="请输入关键词"
                clearable
                @keyup.enter.native="handleQuery"
                maxlength="20"
            />
        </el-form-item>
        <el-form-item  prop="taskStatus">
            <el-select
                clearable
                filterable
                style="width: 240px"
                placeholder="状态筛选"
                v-model="queryParams.taskStatus"
            >
                <el-option
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                    v-for="dict in taskStatusList"
                />
            </el-select>
        </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="warning" plain
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                >导出数据</el-button>
            </el-col>
        </el-row>


      <el-table v-loading="loading" :data="tableList" ref="multipleTable" row-key="taskId" @selection-change="handleSelectionChange" border>
        <el-table-column label="序号" align="center" width="80" type="index">
          <template slot-scope="scope">
            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到货时间" align="center" prop="arrivalTime" width="200" :show-overflow-tooltip="true"/>
        <el-table-column label="采购单号" align="center" prop="code" width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="采购配件" align="center" prop="purchaseMaTypeName" :show-overflow-tooltip="true"/>
        <el-table-column label="采购数量" align="center" prop="purchaseMaNumber"  :show-overflow-tooltip="true"/>
        <el-table-column label="物资厂家" align="center" prop="supplier" :show-overflow-tooltip="true"/>
        <el-table-column label="创建人" align="center" prop="createBy" :show-overflow-tooltip="true"/>
        <el-table-column label="创建时间" align="center" prop="createTime" width="200" :show-overflow-tooltip="true"/>
        <el-table-column label="状态" align="center" prop="taskStatusName" :show-overflow-tooltip="true">
<!--            <template slot-scope="scope">-->
<!--                <dict-tag :options="dict.type.purchase_task_status" :value="scope.row.taskStatus"/>-->
<!--            </template>-->
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" width="230">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                @click="handleView(scope.row)"
                            >
                                查看
                            </el-button>
                            <el-button
                                size="mini"
                                type="primary" v-if="scope.row.taskStatusName == '未完成' && deptName.includes(signLevelDeptMap[scope.row.signLevel])"
                                @click="handleUpdate(scope.row)"
                            >
                                验收
                            </el-button>
                            <el-button
                                size="mini"
                                type="warning"
                                @click="handlePrint(scope.row)"
                            >
                                验收单
                            </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="title"
      :visible.sync="openPrint"
      width="1090px"
      append-to-body
    >
      <div style="height: 500px; overflow-y: scroll">
        <!-- <vue-easy-print tableShow ref="remarksPrintRef" class="print"> -->
        <div id="checkId5">
          <div
            class="title"
            style="text-align: center; font-weight: 600; font-size: 16px"
          >
            到货验收单
          </div>
          <div
            class="info"
            style="margin-top: 10px; display: flex; flex-wrap: wrap"
          >
            <div
              class="item"
              style="
                width: 40%;
                flex-shrink: 0;
                margin-bottom: 5px;
                font-size: 14px;
              "
            >
              <span>生产厂家（供应商）：{{printData.supplier}}</span>
            </div>

            <div
              class="item"
              style="
                width: 30%;
                flex-shrink: 0;
                margin-bottom: 5px;
                font-size: 14px;
              "
            >
              <span>到货日期：{{printData.arrivalTime}}</span>
            </div>
            <div
              class="item"
              style="
                width: 30%;
                flex-shrink: 0;
                margin-bottom: 5px;
                font-size: 14px;
              "
            >
              <span>单据编号：{{printData.code}}</span>
            </div>
          </div>
          <el-table
            :data="printTableData"
            class="table"
            style="margin-top: 20px; width: 1000px; "
            border
          >
            <!--          <el-table-column type="selection" width="55" align="center" />-->
            <el-table-column label="序号" align="center" type="index" row="2" width="60px"/>
            <el-table-column
              label="配件类型"
              align="center"
              prop="maName"
            />
            <el-table-column
              label="配件名称"
              align="center"
              prop="maTypeName"
            />
            <el-table-column
              label="规格型号"
              align="center"
              prop="partName"
            />
            <el-table-column label="单位" align="center" prop="unitName" />
            <!-- <el-table-column label="采购数量" align="center" prop="purchaseNum" /> -->
            <el-table-column label="验收情况" align="center">
              <el-table-column
                label="到货数量"
                align="center"
                prop="purchaseNum"
              />
              <el-table-column
                label="验收结论"
                align="center"
                prop="checkResult"
              />
            </el-table-column>
          </el-table>

          <div class="fillIn" style="margin-top: 20px;display: flex;justify-content: space-between;" >
              <div class="item" style="width: 33%;display: flex;align-items: center;">
                  <div style="width: 25%;">供应科：</div>
                  <div style="width: 75%;display: flex;align-items: center;flex-wrap: wrap;" v-if="printDataSign.gySignUrl">
                      <div v-for="(sign, index) in printDataSign.gySignUrl" :key="index" style="width: 35%;margin-left: 5px;">
                          <img :src="sign.signUrl" :class="sign.signType=='0' ? 'image-type':'sign-type'" alt="">
                      </div>
                  </div>
              </div>

              <div class="item" style="width: 33%;display: flex;align-items: center;">
                  <div style="width: 30%;">生产技术科：</div>
                  <div style="width: 70%;display: flex;align-items: center;flex-wrap: wrap;" v-if="printDataSign.scSignUrl">
                      <div v-for="(sign, index) in printDataSign.scSignUrl" :key="index" style="width: 35%;margin-left: 5px;">
                          <img :src="sign.signUrl" :class="sign.signType=='0' ? 'image-type':'sign-type'" alt="">
                      </div>
                  </div>
              </div>
              <div class="item" style="width: 33%;display: flex;align-items: center;">
                  <div style="width: 25%;">库管班：</div>
                  <div style="width: 75%;display: flex;align-items: center;flex-wrap: wrap;" v-if="printDataSign.kgSignUrl">
                      <div v-for="(sign, index) in printDataSign.kgSignUrl" :key="index" style="width: 35%;margin-left: 5px;">
                          <img :src="sign.signUrl" :class="sign.signType=='0' ? 'image-type':'sign-type'" alt="">
                      </div>
                  </div>
                  <!-- <div>
                      <span>库管班：{{printData.warehouseTeam}}</span>
                  </div> -->
              </div>
          </div>
          </div>
        <!-- </vue-easy-print> -->
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="print">打 印</el-button>
        <el-button @click="openPrint = false">关 闭</el-button>
      </div>
    </el-dialog>

    </div>
  </template>

  <script>
import { getListNewBuy,getInBoundForm } from '@/api/part/partArrived';
import { passAll, rejectAll } from '@/api/part/partAccept';
import vueEasyPrint from "vue-easy-print";
import printJS from 'print-js'
import { downloadFile } from '@/utils/download'
import { getToken } from '@/utils/auth'
  export default {
    name: "PartAcceptTwo",
    dicts: ['part_task_status'],
    components: { vueEasyPrint },
    data() {
      return {
        // 遮罩层
        loading: false,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        showHouse: false,
        dateRange:[],
        taskStatusList:[{id:'0',name:'未完成'},{id:'1',name:'已完成'}],
        ids: [],
        infos: [],
        // 总条数
        total: 0,
        //表格数据
        tableList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          keyWord:undefined,
          taskStatus:undefined,
          startTime: undefined,
          endTime: undefined,
        },
        openPrint: false,
        printData: {},
        printDataSign: {},
        printTableData: [],
        productionTechDeptOptions: [
              { value: '0', label: '张三' },
              { value: '1', label: '李四' },
              { value: '2', label: '王五' },
        ],
        deptName: sessionStorage.getItem("deptName"),
        signLevelDeptMap: {
          '2': '技术科',
          '3': '库管'
        }
      };
    },
    // 激活
    activated() {
      console.log('🚀 ~ this.$route.params:', this.$route.params)
      if (this.$route.params.isReset) {
        this.resetQuery()
      }
    },
    created() {
      this.getList();
    },
    methods: {
        //是否可用勾选框
        selectable(row) {
            console.log(row)
            if (row.taskStatusName == '未完成') {
                return true
            } else {
                return false
            }
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            this.queryParams.taskStage = 2;
            // if(this.dateRange.length>0){
            //     this.queryParams.startTime=this.dateRange[0]
            //     this.queryParams.endTime=this.dateRange[1]
            // }else{
            //     this.queryParams.startTime=undefined
            //     this.queryParams.endTime=undefined
            // }
            getListNewBuy(this.queryParams).then(response => {
                this.tableList = response.data.rows;
                this.total = response.data.total;
                this.loading = false;
            });
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.dateRange=[]
            this.queryParams.keyWord=null;
            this.handleQuery();
        },
        /** 搜索按钮操作 */
        handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.taskId)
            this.infos = [];
            selection.forEach((item) => {
                this.infos.push({taskId:item.taskId});
            });
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        handleUpdate(row){
            console.log(row)
            let query = { Id:row.id,taskId: row.taskId,isView:"false" }
            this.$router.push({
                path: '/part/partAcceptDetailTwo',
                query,
            })
        },
        //查看
        handleView(row){
            console.log(row)
            let query = { Id:row.id,taskId: row.taskId,isView:"true" }
            this.$router.push({
                path: '/part/partAcceptDetailTwo',
                query,
            })
        },
        //批量入库
        passAll(){
            passAll(this.infos).then((response) => {
                if(response.code==200){
                    this.$modal.msgSuccess('入库成功')
                }else{
                    this.$modal.msgSuccess('入库失败')
                }
                this.getList()
                this.$refs.multipleTable.clearSelection()
          }).catch(() => {
                this.$modal.msgError('入库失败')
          })
        },
        //批量驳回
        rejectAll(){
            rejectAll(this.infos).then((response) => {
                if(response.code==200){
                    this.$modal.msgSuccess('驳回成功')
                }else{
                    this.$modal.msgSuccess('驳回失败')
                }
                this.getList()
                this.$refs.multipleTable.clearSelection()
            }).catch(() => {
                this.$modal.msgError('驳回失败')
            })
        },
        //查看入库单
        handlePrint(row) {
        // this.query.taskId = row.taskId
        this.openPrint = true;
        this.title = "到货验收单";
        let params = {
            id: row.id,
            taskId: row.taskId,
        };
        this.getPrintTable(params)
        },
        //获取入库单数据
        getPrintTable(params) {
        getInBoundForm({ id: params.id,taskId:params.taskId }).then((response) => {
            this.printDataSign = response.data;
            this.printData = response.data.partTypeCheckInfo;
            this.printTableData = response.data.partTypeCheckDetailsList;

        });
        },
        //打印
        print() {
          // this.$refs.remarksPrintRef.print()
          printJS({
            printable: 'checkId5',
            type: 'html',
            targetStyles: ['*'],
            maxWidth:'1400'
            // 其他配置选项
          });
        },
        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/part_arrived/export",
                { ...this.queryParams, taskStage: 2},
                `配件新购到货_${currentTime}.xlsx`
            );
        },


    }
  };
  </script>
  <style lang="scss" scoped>
  .image-type {
    /* 旋转图片 */
    transform: rotate(-90deg);
    /* 确保旋转后的图片不会超出容器 */
    max-width: 100%;
    /* 保持图片的宽高比 */
    width: 40px;
    height: 80px;
  }
  .sign-type{
    width: 80px;
    height: 40px;
  }
  .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>
