<template>
  <div class="log-table-container">
    <!-- 筛选条件 -->
    <el-form :inline="true" :model="logParams" class="demo-form-inline mb20">
      <el-form-item label="开始时间">
        <el-date-picker v-model="logParams.startTime" type="datetime" placeholder="选择开始时间" format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss" />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker v-model="logParams.endTime" type="datetime" placeholder="选择结束时间" format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss" />
      </el-form-item>
      <el-form-item label="业务类型">
        <el-select v-model="logParams.operationType" clearable placeholder="请选择业务类型">
          <el-option label="收货" value="1" />
          <el-option label="加工" value="2" />
          <el-option label="调拨" value="3" />
          <el-option label="发货" value="4" />
        </el-select>
      </el-form-item>
       <el-form-item label="出入库类型">
        <el-select v-model="logParams.inOutType" clearable placeholder="请选择出入库类型">
          <el-option label="入库" value="1" />
          <el-option label="出库" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getLogList">查询</el-button>
        <el-button @click="resetParams">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="logLoading" :data="logList" style="width: 100%" border stripe>
      <el-table-column prop="createTime" label="操作时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column prop="operationType" label="操作类型" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.operationType === 1">收货</span>
          <span v-else-if="scope.row.operationType === 2">加工</span>
          <span v-else-if="scope.row.operationType === 3">调拨</span>
          <span v-else-if="scope.row.operationType === 4">发货</span>
          <!-- {{ scope.row.operationType === 1 ? '入库' : '出库' }} -->
        </template>
      </el-table-column>
      <el-table-column prop="inOutType" label="出入库类型" width="100">
        <template slot-scope="scope">
          {{ scope.row.inOutType === 1 ? '入库' : '出库' }}
        </template>
      </el-table-column>
      <el-table-column prop="coil.enterCoilNo" label="卷号" width="150">
        <template slot-scope="scope">
          {{ scope.row.coil && scope.row.coil.enterCoilNo ? scope.row.coil.enterCoilNo : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="coil.weight" label="重量" width="120">
        <template slot-scope="scope">
          {{ scope.row.coil && scope.row.coil.netWeight ? scope.row.coil.netWeight : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="coil.specification" label="规格" width="220">
        <template slot-scope="scope">
          <ProductInfo v-if="scope.row.coil.itemType == 'product'" :product="scope.row.coil.product" />
          <RawMaterialInfo v-else-if="scope.row.coil.itemType === 'raw_material'"
            :material="scope.row.coil.rawMaterial" />
        </template>
      </el-table-column>
      <el-table-column prop="warehouse.actualWarehouseName" label="库位" width="150">
        <template slot-scope="scope">
          {{ scope.row.warehouse && scope.row.warehouse.actualWarehouseName ? scope.row.warehouse.actualWarehouseName :
            '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" min-width="150">
        <template slot-scope="scope">
          {{ scope.row.remark || '-' }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button :loading="buttonLoading" type="danger" size="mini" icon="el-icon-delete"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="logParams.pageNum" :limit.sync="logParams.pageSize"
      @pagination="getLogList" />
  </div>
</template>

<script>
import { getCoilWarehouseOperationLogByWarehouseId, delCoilWarehouseOperationLog, getCoilWarehouseOperationLogByCoilId } from "@/api/wms/coilWarehouseOperationLog";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";

export default {
  name: "LogTable",
  props: {
    warehouseId: {
      type: String,
      default: ""
    },
    coilId: {
      type: String,
      default: ""
    },
  },
  components: {
    ProductInfo,
    RawMaterialInfo,
  },
  data() {
    return {
      logList: [],
      total: 0,
      logParams: {
        coilId: null,
        startTime: "",
        endTime: "",
        operationType: null,
        inOutType: null,
        pageNum: 1,
        pageSize: 10,
      },
      logLoading: false,
      buttonLoading: false,
    };
  },
  watch: {
    warehouseId: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal && newVal !== "") {
          this.logParams.secondWarehouseId = newVal;
          this.getLogListByWarehouseId();
        }
      },
      immediate: true
    },
    coilId: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal && newVal !== "") {
          this.logParams.coilId = newVal;
          this.getLogListByCoilId();
        }
      },
      immediate: true
    }
  },
  methods: {
    getLogList() {
      if (this.coilId) {
        this.getLogListByCoilId();
      } else {
        this.getLogListByWarehouseId();
      }
    },
    // 获取日志列表
    getLogListByWarehouseId() {
      this.logLoading = true;
      getCoilWarehouseOperationLogByWarehouseId(this.logParams)
        .then((res) => {
          this.logList = res.data || [];
          this.total = res.total || 0;
        })
        .catch((err) => { this.$message.error("获取日志列表失败：" + err.message); })
        .finally(() => { this.logLoading = false; });
    },
    // 获取日志列表
    getLogListByCoilId() {
      this.logLoading = true;
      getCoilWarehouseOperationLogByCoilId(this.logParams)
        .then((res) => {
          this.logList = res.data || [];
          this.total = res.total || 0;
        })
        .catch((err) => { this.$message.error("获取日志列表失败：" + err.message); })
        .finally(() => { this.logLoading = false; });
    },
    // 删除日志
    handleDelete(row) {
      this.$modal.confirm("确认删除该日志吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 确认删除
        this.buttonLoading = true;
        delCoilWarehouseOperationLog(row.logId)
          .then((res) => {
            this.$message.success("删除成功");
            this.getLogList();
          })
          .finally(() => {
            this.buttonLoading = false;
          })
          .catch((err) => { this.$message.error("删除失败：" + err.message); });
      })
    },
    // 重置筛选条件
    resetParams() {
      this.logParams = {
        startTime: "",
        endTime: "",
        operationType: null,
        inOutType: null,
        pageNum: 1,
        pageSize: 10,
        secondWarehouseId: this.warehouseId
      };
      this.getLogList();
    },
  },
};
</script>

<style scoped>
.mb20 {
  margin-bottom: 20px;
}
</style>