<template>
  <div>
    <el-dialog title="产品详情" :visible.sync="dialogVisible" width="90%">
      <el-table
        ref="productListTable"
        :data="productList"
        tooltip-effect="dark"
        border
        :height="500"
        :header-cell-style="rowClass"
      >
        <el-table-column label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column
          label="编码"
          prop="categoryCode"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="名称"
          align="center"
          prop="categoryName"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="级别" prop="level" align="center">
        </el-table-column>
        <el-table-column
          label="型号"
          align="center"
          prop="categoryModel"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="规格"
          align="center"
          prop="specification"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="牌号"
          align="center"
          prop="brandNum"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          v-for="(item, index) in newColumns"
          :label="item.label"
          :align="item.align"
          :prop="item.prop"
          :show-overflow-tooltip="item.showOverflowTooltip"
        ></el-table-column>
        <el-table-column
          label="批次号"
          prop="batchNo"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="供应商"
          prop="supplierName"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="最小包装单元"
          align="center"
          width="120"
          prop="minPackingQuantity"
        >
          <template slot-scope="{ row, $index }">
            {{ row.minPackingQuantity }} {{ row.measureUnit }} /{{
              row.packingUnit
            }}
          </template>
        </el-table-column>

        <el-table-column label="包装数量" prop="packingQuantity" align="center">
          <template slot-scope="{ row, $index }">
            {{ row.packingQuantity }} {{ row.packingUnit }}
          </template>
        </el-table-column>
        <el-table-column
          label="计量数量"
          prop="measureQuantity"
          width="100"
          align="center"
        >
          <template slot-scope="{ row, $index }">
            <template>
              {{
                $math.format(row.minPackingQuantity * row.packingQuantity, 14)
              }}
            </template>
          </template>
        </el-table-column>
        <el-table-column label="计量单位" prop="measureUnit" align="center">
          <template slot-scope="{ row, $index }">
            <template>
              {{ row.measureUnit }}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="重量"
          prop="weight"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="重量单位"
          prop="weightUnit"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="单价"
          prop="unitPrice"
          align="center"
          width="200"
        >
          <template slot-scope="{ row }">
            <el-input
              type="number"
              v-model.number="row.unitPrice"
              placeholder="非必填"
              @input="
                (value) => (row.unitPrice = value.replace(/[^0-9.]+/g, ''))
              "
            >
              <template slot="append"> 元/{{ row.measureUnit }} </template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="总价"
          align="center"
          prop="totalPrice"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="{ row, $index }">
            {{
              $math.format(
                (row.measureQuantity || 0) * (row.unitPrice || 0),
                14
              )
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="采购原因"
          align="center"
          prop="purpose"
          :show-overflow-tooltip="true"
        ></el-table-column> -->
        <el-table-column
          label="仓库"
          prop="warehouseName"
          :show-overflow-tooltip="true"
          width="200"
        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import storageApi from '@/api/warehouseManagement';
  export default {
    data() {
      return {
        newColumns: [],
        dialogVisible: false,
        productList: []
      };
    },
    created() {
      this.getFieldModel();
    },
    methods: {
      // 表格样式
      rowClass({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 1) {
          return {
            display: 'none',
            background: '#EEEEEE'
          };
        }
        return { background: '#0000' };
      },
      // 获取动态表头
      getFieldModel() {
        storageApi.fieldModel({ fieldModel: 't_main_category' }).then((res) => {
          let newRes = res.map((m) => {
            return {
              prop: 'extField.' + m.prop,
              label: m.label,
              align: 'center',
              showOverflowTooltip: true
            };
          });
          this.newColumns = [...newRes];
        });
      },
      confirm() {
        let params = this.productList.map((item) => {
          return {
            outInDetailId: item.id,
            unitPrice: item.unitPrice
          };
        });
        storageApi.unitPriceMaintenance(params).then((data) => {
          console.log(data);
          if (data.code == 0) {
            this.$message.success('修改成功');
            this.dialogVisible = false;
          } else {
            this.$message.error('修改失败');
          }
        });
      },
      async open(id) {
        const res = await storageApi.getInboundDetailsById(id);
        this.productList = res.outInDetailList;
        this.dialogVisible = true;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .el-row {
    margin-bottom: 15px;
    font-size: 14px;
  }
</style>
