<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="content-detail">
        <header-title title="产品详情" size="16px"></header-title>
        <div class="mt20">
          <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="storageTime"
              align="center"
              :show-overflow-tooltip="true"
            ></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>
        </div>
      </div>
      <div class="submit">
        <el-button type="primary" @click="confirm">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  import storageApi from '@/api/warehouseManagement';

  export default {
    props: {},
    data() {
      return {
        newColumns: [],
        dialogVisible: false,
        productList: []
      };
    },
    created() {
      this.getFieldModel();
      console.log(this.$route.query.ids);
      if (this.$route.query.ids) {
        this.getInboundDetail();
      }
    },
    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) => {
          if (data.code == 0) {
            this.$message.success('修改成功');
            this.$router.push({
              path: '/warehouseManagement/stockManagement'
            });
            /*   this.dialogVisible = false; */
          } else {
            this.$message.error('修改失败');
          }
        });
      },
      async getInboundDetail() {
        const res = await storageApi.getInboundDetailsById(
          this.$route.query.ids
        );
        this.productList = res.outInDetailList.map((item) => {
          return {
            ...item,
            storageTime: res.storageTime
          };
        });
        console.log(this.productList, 'this.productList');
        this.dialogVisible = true;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .submit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
  }
  ::v-deep .warning-row {
    color: red;
  }
  ::v-deep .page-title {
    border-bottom: none;
  }
  ::v-deep .page-title-div {
    width: 100%;
  }
  .stepsStatus {
    width: 40%;
    margin: 0 auto;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .p20 {
    padding: 20px;
  }
  .flex {
    display: flex;
  }
  .title {
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    span {
      font-size: 16px;
    }
    .col {
      padding-left: 40px;
      font-size: 14px;
      color: #aaaaaa;
    }
  }
  .degree {
    margin-right: 10px;
    padding: 0px 15px;
    color: #fff;
    font-size: 13px;
    line-height: 23px;
    border-radius: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      width: 5px;
      height: 5px;
      border-radius: 100%;
      margin-right: 6px;
      background-color: #fff;
    }
  }
  .red {
    background-color: rgb(163, 0, 20);
  }
  .blue {
    background-color: #1989fa;
  }
  .createdInfo {
    justify-content: space-around;
    margin-top: 10px;
    font-size: 14px;
    .col {
      color: #6e6e6e;
      padding-right: 10px;
    }
  }
  .mt40 {
    margin-top: 40px;
  }

  .custSteps {
    margin-top: 20px;
    margin-left: 70px;
    .box {
      width: 158px;
      border: 1px solid #ccc;
      padding: 10px;
      flex-direction: row;
      flex-wrap: wrap;
      // justify-content: space-between;
      font-size: 12px;
      color: #9e9e9e;
      .x {
        width: 20px;
        height: 15px;
        margin-right: 5px;
      }
      .q {
        background-color: #d0e4d5;
      }
      .b {
        background-color: #1989fa;
      }
      .g {
        background-color: #157a2c;
      }
      .r {
        background-color: #a30014;
      }
      .a {
        align-items: center;
        margin-bottom: 10px;
      }
      .mr10 {
        margin-right: 10px;
      }
      .mb0 {
        margin-bottom: 0;
      }
    }
    .stepsInfo {
      // flex: 1;
      width: 483px;
    }
  }
  .mt20 {
    margin-top: 20px;
  }
  .content-detail {
    overflow: hidden;
  }
  .executor {
    font-size: 14px;
    .col {
      color: #6e6e6e;
      padding-right: 10px;
    }
  }
  .result {
    justify-content: space-around;
  }
  .mr20 {
    margin-right: 20px;
  }
  .details {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .customSteps {
    margin-top: 40px;
    font-size: 14px;
    margin-left: 80px;
    .time {
      font-size: 12px;
      color: #6e6e6e;
      margin-right: 20px;
      position: relative;
      &::after {
        content: '';
        width: 1px;
        height: 100%;
        background-color: #157a2c;
        position: absolute;
        right: -26px;
      }
    }
    .flex:last-child {
      .time {
        &::after {
          display: none;
        }
      }
    }
    .round {
      margin-right: 20px;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background-color: #157a2c;
      position: relative;
      span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        background-color: #fff;
        border-radius: 100%;
        transform: translate(-2px, -2px);
      }
    }
    .text {
      .info {
        margin-top: 10px;
        width: 955px;
        background-color: #f0f3f3;
        overflow: hidden;
        padding: 10px;
        margin-bottom: 10px;
      }
    }
  }
  .switch_left li {
    border-right: 1px solid rgba(222, 222, 222, 1);
    border-left: 1px solid rgba(222, 222, 222, 1);
  }
</style>
