<template>
  <div class="app-container">
    <h3 class="page-title"><i class="el-icon-coin"></i> 零件成本查询</h3>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="物料编码" prop="materialCode">
        <el-input
          v-model="queryParams.materialCode"
          placeholder="请输入物料编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料名称" prop="materialName">
        <el-input
          v-model="queryParams.materialName"
          placeholder="请输入物料名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="成本价" prop="costPrice">
        <el-input
          v-model="queryParams.costPrice"
          placeholder="请输入成本价"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建日期" prop="createDate">
        <el-date-picker clearable
          v-model="queryParams.createDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择创建日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="车间" prop="workshop">
        <el-input
          v-model="queryParams.workshop"
          placeholder="请输入车间"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="单位" prop="unit">
        <el-input
          v-model="queryParams.unit"
          placeholder="请输入单位"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="仓库" prop="warehouse">
        <el-input
          v-model="queryParams.warehouse"
          placeholder="请输入仓库"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </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-card class="quote-card" shadow="never">
      <div class="quote-row">
        <div class="quote-field">
          <label class="quote-label">物料搜索</label>
          <!-- 搜索模式切换：按编码/按名称 -->
          <el-radio-group v-model="searchMode" size="mini">
            <el-radio-button label="code">按编码</el-radio-button>
            <el-radio-button label="name">按名称</el-radio-button>
          </el-radio-group>

          <el-select v-model="selectedMaterials" multiple filterable remote reserve-keyword :placeholder="searchMode === 'code' ? '按编码搜索' : '按名称搜索'"
                     :remote-method="remoteSearchMaterial" :loading="materialLoading" value-key="materialCode" style="min-width: 420px;">
            <el-option
              v-for="item in materialOptions"
              :key="item.materialCode"
              :label="item.materialCode + ' - ' + item.materialName"
              :value="item"
            />
          </el-select>
        </div>
        <div class="quote-field">
          <label class="quote-label">系数</label>
          <el-input-number v-model="coefficient" :min="0" :step="0.01" controls-position="right" />
        </div>
        <div class="quote-actions">
          <el-button type="primary" size="mini" icon="el-icon-document" @click="handleGenerateQuote">生成售后报价单</el-button>
          <span class="quote-total">总计：{{ formattedTotal }}</span>
        </div>
      </div>
      <div v-if="selectedMaterials.length" class="selected-tags">
        <el-tag
          v-for="m in selectedMaterials"
          :key="m.materialCode"
          type="info"
          closable
          @close="removeSelected(m)"
        >{{ m.materialCode }} - {{ m.materialName }}</el-tag>
      </div>
    </el-card>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:cost:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="costList"
      stripe
      border
      size="mini"
      highlight-current-row
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
    >
      <el-table-column label="物料编码" align="center" prop="materialCode" />
      <el-table-column label="物料名称" align="center" prop="materialName" />
      <el-table-column label="成本价" align="right" prop="costPrice" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.costPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" align="center" prop="createDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车间" align="center" prop="workshop" />
      <el-table-column label="单位" align="center" prop="unit" />
      <el-table-column label="仓库" align="center" prop="warehouse" />
      <el-table-column label="规格型号" align="center" prop="specificationModel" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 售后报价单预览/导出 -->
    <el-dialog title="售后报价单" :visible.sync="quoteDialogVisible" width="720px">
      <el-table :data="selectedMaterials" size="mini" border style="margin-bottom: 8px;">
        <el-table-column label="物料编码" prop="materialCode" align="center" />
        <el-table-column label="物料名称" prop="materialName" />
        <el-table-column label="成本价" prop="costPrice" align="right" width="140">
          <template slot-scope="scope">
            <span>{{ scope.row.costPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="系数" align="center" width="100">
          <template>
            <span>{{ coefficient }}</span>
          </template>
        </el-table-column>
        <el-table-column label="小计" align="right" width="140">
          <template slot-scope="scope">
            <span>{{ (toNumber(scope.row.costPrice) * toNumber(coefficient)).toString() }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="quote-summary">
        <span>合计：</span>
        <strong>{{ formattedTotal }}</strong>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quoteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="exportQuoteCSV">导出CSV</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listCost } from "@/api/system/cost";

export default {
  name: "Cost",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 零件成本表格数据
      costList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        materialCode: undefined,
        materialName: undefined,
        costPrice: undefined,
        createDate: undefined,
        workshop: undefined,
        unit: undefined,
        warehouse: undefined,
        specificationModel: undefined
      },
      // 物料选择
      selectedMaterials: [],
      materialOptions: [],
      materialLoading: false,
      // 搜索模式：code 按编码，name 按名称
      searchMode: 'code',
      // 系数
      coefficient: 1,
      // 报价单对话框
      quoteDialogVisible: false
    };
  },
  computed: {
    selectedTotal() {
      const sum = this.selectedMaterials.reduce((acc, cur) => acc + this.toNumber(cur.costPrice), 0);
      return sum * this.toNumber(this.coefficient);
    },
    formattedTotal() {
      return this.selectedTotal.toString();
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询零件成本列表 */
    getList() {
      this.loading = true;
      listCost(this.queryParams).then(response => {
        this.costList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/cost/export', {
        ...this.queryParams
      }, `cost_${new Date().getTime()}.xlsx`)
    },
    headerCellStyle() {
      return { background: '#f7f8fa', color: '#606266', fontWeight: 600 };
    },
    cellStyle({ column }) {
      if (column && column.property === 'costPrice') {
        return { textAlign: 'right' };
      }
      return {};
    },
    // --- 物料搜索与选择 ---
    remoteSearchMaterial(query) {
      if (!query) {
        this.materialOptions = [];
        return;
      }
      this.materialLoading = true;
      // 根据搜索模式仅传一个字段：materialCode 或 materialName
      const params = { pageNum: 1, pageSize: 20 };
      if (this.searchMode === 'code') {
        params.materialCode = query;
      } else {
        params.materialName = query;
      }
      listCost(params).then(res => {
        this.materialOptions = res.rows || [];
      }).finally(() => {
        this.materialLoading = false;
      })
    },
    removeSelected(item) {
      this.selectedMaterials = this.selectedMaterials.filter(m => m.materialCode !== item.materialCode);
    },
    toNumber(v) {
      const n = Number(v);
      return isNaN(n) ? 0 : n;
    },
    // --- 生成售后报价单 ---
    handleGenerateQuote() {
      if (!this.selectedMaterials.length) {
        this.$message.warning('请先选择至少一个物料');
        return;
      }
      if (this.toNumber(this.coefficient) < 0) {
        this.$message.warning('系数不能为负数');
        return;
      }
      this.quoteDialogVisible = true;
    },
    exportQuoteCSV() {
      const rows = [];
      rows.push(['物料编码', '物料名称', '成本价', '系数', '小计']);
      this.selectedMaterials.forEach(m => {
        const subtotal = this.toNumber(m.costPrice) * this.toNumber(this.coefficient);
        rows.push([m.materialCode, m.materialName, m.costPrice, this.coefficient, subtotal]);
      });
      rows.push(['总计', '', '', this.coefficient, this.selectedTotal]);
      const csv = rows.map(r => r.map(v => '"' + String(v).replace(/"/g, '""') + '"').join(',')).join('\r\n');
      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = `售后报价单_${new Date().toISOString().slice(0,19).replace(/[:T]/g,'-')}.csv`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(link.href);
      this.$message.success('CSV 已导出');
      this.quoteDialogVisible = false;
    }
  }
};
</script>

<style scoped>
.page-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.page-title .el-icon-coin {
  margin-right: 8px;
  color: #409EFF;
}
.mb8 {
  margin-bottom: 8px;
}
.el-table .cell {
  padding: 6px 8px;
}
.quote-card {
  margin-bottom: 12px;
}
.quote-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.quote-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.quote-label {
  font-size: 12px;
  color: #666;
}
.quote-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.quote-total {
  font-weight: 600;
  color: #333;
}
.selected-tags {
  margin-top: 8px;
}
.selected-tags .el-tag {
  margin-right: 6px;
  margin-bottom: 6px;
}
</style>
