<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="结束日期"
          :picker-options="{ disabledDate: (t) => t.getTime() < new Date(queryParams.startTime).getTime() - 86400000}"
          style="width: 130px"
        />
      </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="isFinish">
        <el-select clearable filterable style="width: 240px" placeholder="状态筛选" v-model="queryParams.isFinish">
          <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="success"
                    plain
                    size="mini"
                    :disabled="multiple"
                    @click="acceptancePurchase"
                >
                    入库
                </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-row>

    <el-table
      v-loading="loading"
      :data="tableList"
      ref="multipleTable"
      row-key="teamId"
      @selection-change="handleSelectionChange"
      border
    >
      <!-- <el-table-column
                type="selection"
                width="55"
                align="center"
                :reserve-selection="true"
            /> -->
      <el-table-column label="序号" align="center" width="50" 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="110" :show-overflow-tooltip="true" />
      <el-table-column label="采购单号" align="center" prop="code" width="150" :show-overflow-tooltip="true" />
      <el-table-column
        label="采购物资"
        align="center"
        min-width="150"
        prop="purchaseMaTypeName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="采购数量"
        align="center"
        width="80"
        prop="purchaseMaNumber"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="采购价格(元含税)"
        align="center"
        prop="purchaseTaxPrice"
        width="100"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="采购价格（元不含税）"
        align="center"
        prop="purchasePrice"
        width="100"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="税率" align="center" prop="taxRate" width="60" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.taxRate }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="物资厂家" align="center" prop="supplier" min-width="120" :show-overflow-tooltip="true" />
      <el-table-column label="操作人" align="center" prop="createBy" width="100" :show-overflow-tooltip="true" />
      <el-table-column label="操作时间" align="center" prop="createTime" width="110" :show-overflow-tooltip="true" />
      <el-table-column label="状态" align="center" prop="taskStatusName" width="80" :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" />
      <el-table-column label="操作" align="center" width="230" fixed="right">
        <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 == '未完成'"
            @click="handleUpdate(scope.row)"
          >
            入库
          </el-button>
          <el-button size="mini" type="warning" v-if="scope.row.inputMaNumber!=0" @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="800px" append-to-body>
      <div style="height: 500px; overflow-y: scroll">
        <vue-easy-print tableShow ref="remarksPrintRef" class="print" style="margin: 0 20px">
          <div style="text-align: center;font-size: 21px;margin-bottom: 15px">新购入库单</div>
          <div style="margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; width: 95%">
            <!-- <div style="flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
              <span>单据编号：{{ printData.code }}</span>
            </div> -->
            <!-- <div class="item" style="  flex-shrink: 0; margin-bottom: 5px; font-size: 14px;">
                            <span>生产厂家（供应商）：{{printData.supplierName}}</span>
                        </div> -->
            <div class="item" style="flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
              <span>单据编号：{{ printData.code }}</span>
            </div>
          </div>
          <!-- <el-table :data="printTableData" class="table" border style="margin-top: 20px; padding: 1px">
            <el-table-column label="序号" align="center" type="index" row="2" />
            <el-table-column label="物资名称" align="center" prop="maTypeName" />
            <el-table-column label="规格型号" align="center" prop="typeName" />
            <el-table-column label="单位" align="center" prop="unitName" />
            <el-table-column label="入库数量" align="center" prop="inputNum" />
            <el-table-column label="入库时间" align="center" prop="inputTime" />
            <el-table-column label="备注" align="center" prop="remark" />
          </el-table> -->
          <table border="1" cellspacing="0" cellpadding="4" style="margin-top: 20px; width: 99%; border-collapse: collapse;">
            <thead>
              <tr>
                <th style="width: 60px;">序号</th>
                <th>物资名称</th>
                <th>规格型号</th>
                <th>单位</th>
                <th>入库数量</th>
                <th>入库时间</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(row, index) in printTableData" :key="index">
                <td align="center">{{ index + 1 }}</td>
                <td align="center">{{ row.maTypeName }}</td>
                <td align="center">{{ row.typeName }}</td>
                <td align="center">{{ row.unitName }}</td>
                <td align="center">{{ row.inputNum }}</td>
                <td align="center">{{ row.inputTime }}</td>
                <td align="center">{{ row.remark }}</td>
              </tr>
            </tbody>
          </table>

          <div class="fillIn" style="margin-top: 50px; display: flex; justify-content: space-between">
<!--            <div class="item" style="width: 33%">-->
<!--              <div>-->
<!--                <span>审核：{{ printData.reviewer }}</span>-->
<!--              </div>-->
<!--            </div>-->

            <div class="item" style="width: 33%; display: flex; align-items: flex-start">
              <div style="width: 25%">审核：</div>
              <div
                style="width: 75%; margin-left: 20px; transform: translateY(-30px)"
                v-if="printData.signUrl"
              >
                <img
                  :src="printData.signUrl"
                  style="width: 40px; height: 90px; max-width: 100%"
                  :style="{ transform: printData.signType == 0 ? 'rotate(-90deg)' : '' }"
                  alt=""
                />
              </div>
            </div>


<!--            <div class="item" style="width: 33%">-->
<!--              <div>-->
<!--                <span>库管员：{{ printData.warehouseTeam }}</span>-->
<!--              </div>-->
<!--            </div>-->

            <div class="item" style="width: 33%; display: flex; align-items: flex-start">
              <div style="width: 35%">库管员：</div>
              <div
                style="width: 65%; margin-left: 20px; transform: translateY(-30px)"
                v-if="printData.signUrlKg"
              >
                <img
                  :src="printData.signUrlKg"
                  style="width: 40px; height: 90px; max-width: 100%"
                  :style="{ transform: printData.signTypeKg == 0 ? 'rotate(-90deg)' : '' }"
                  alt=""
                />
              </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 { getPurchaseList, acceptancePurchase, getPurchaseCheckFormByTaskId } from '@/api/purchase/goodsAccept'
import { downloadFile } from '@/utils/download'
import { getToken } from '@/utils/auth'
import vueEasyPrint from 'vue-easy-print'
export default {
  name: 'GoodsEntry',
  dicts: ['purchase_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: [],
      // 总条数
      total: 0,
      //表格数据
      tableList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyWord: undefined,
        isFinish: undefined,
        startTime: undefined,
        endTime: undefined,
        // taskStatus: 4,
      },
      openPrint: false,
      printData: {},
      printTableData: []
    }
  },
  activated() {
    if (this.$route.params.isReset) {
      this.resetQuery()
    }
  },
  created() {
    if (this.$route.query.code) {
      this.queryParams.keyWord = this.$route.query.code
    }
    if (this.$route.query.buyTask) {
      this.queryParams.keyWord = this.$route.query.buyTask
    }
    // 设置默认状态为第一个选项（未完成）
    if (this.taskStatusList.length > 0) {
      this.queryParams.isFinish = this.taskStatusList[0].id
    }
    this.initDefaultDate()
    this.getList()
  },
  methods: {
    initDefaultDate() {
      const now = new Date();
      this.queryParams.endTime=this.formatDate(now);
      const oneMonthAgo =new Date(now);
      oneMonthAgo.setMonth(oneMonthAgo.getMonth()-1);
      this.queryParams.startTime=this.formatDate(oneMonthAgo);
    },

    formatDate(date) {
      const year =date.getFullYear();
      const month = String(date.getMonth()+1).padStart(2,'0');
      const day =String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      // this.queryParams.startTime= this.dateRange ? this.dateRange[0] : ''
      // this.queryParams.endTime= this.dateRange ? this.dateRange[1] : ''
      // this.queryParams.statusList=[3,13,4,14,19]
      this.queryParams.taskStage = 4
      //   this.queryParams.modelName="新购验收"
      getPurchaseList(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.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    handleUpdate(row) {
      console.log(row)
      let query = { Id: row.id, taskId: row.taskId, isView: 'false', path: 'goodsEntry' }
      // this.$tab.closeOpenPage({
      //   path: '/purchase/goodsEntryDetail',
      //   query
      // })
      this.$router.push({
        path: '/purchase/goodsEntryDetail',
        query
      })
    },
    //查看
    handleView(row) {
      console.log(row)
      let query = { Id: row.id, taskId: row.taskId, isView: 'true', path: 'goodsEntry' }
      // this.$tab.closeOpenPage({
      //   path: '/purchase/goodsEntryDetail',
      //   query
      // })
      this.$router.push({
        path: '/purchase/goodsEntryDetail',
        query
      })
    },
    //批量合格
    acceptancePurchase() {
      acceptancePurchase(this.ids)
        .then(response => {
          this.$modal.msgSuccess('操作成功')
          this.getList()
        })
        .catch(() => {
          this.$modal.msgError('操作失败')
        })
    },
    //查看验收单
    handlePrint(row) {
      // this.query.taskId = row.taskId
      this.getPrintTable(row.taskId)
      this.openPrint = true
      this.title = '新购入库单'
    },
    //获取验收单数据
    getPrintTable(taskId) {
      getPurchaseCheckFormByTaskId(taskId).then(response => {
        console.log("112233:",response.data)
        this.printData = response.data
        this.printTableData = response.data.materialList
        // let supplierList = []
        // this.printTableData.forEach((e) => {
        //     if (e.supplier) {
        //         supplierList.push(e.supplier)
        //     }
        // })
        // supplierList = [...new Set(supplierList)]
        // this.supplierStr = supplierList.join(',')
      })
    },
    //打印
    print() {
      console.log('打印')
      this.$refs.remarksPrintRef.print()
    },

    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/export',
        { ...this.queryParams, taskStage: 4 },
        `新购到货入库_${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>
