<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-11-04 15:13:34
-->
<template>
  <div class="jcpz">
    <div class="tit">{{ '级差配置' }}</div>
    <div class="maintop"></div>
    <div class="maintable">
      <el-table
        :data="tableList"
        style="width: 100%"
        :header-cell-style="{ background: '#EEEEEE' }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          align="center"
          prop="rangeName"
          :label="'级差等级'"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="productCover"
          :label="'产品主图'"
        >
          <template slot-scope="scope">
            <img class="bgImg" :src="scope.row.productCover" alt="" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="productCode"
          :label="'产品编号'"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="productName"
          :label="'产品名称'"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="specsNames"
          :label="'产品规格'"
        >
        </el-table-column>
        <el-table-column align="center" prop="price" :label="'产品金额'">
          <template slot-scope="scope">
            <el-input
              clearable
              v-model="scope.row.price"
              :placeholder="'产品金额'"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="achieve"
          :label="`${'产品业绩'}` + `($)`"
        >
          <template slot-scope="scope">
            <el-input
              clearable
              v-model="scope.row.achieve"
              :placeholder="'产品业绩'"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import * as api from "@/api/product.js";
import { isLocals } from "@/utils/numberToCurrency";
export default {
  name: "jcpz",
  data() {
    return {
      form: {
        selProduct: "",
        selCheck: [],
      },
      dialogVisible: false,
      goodList: [],
      tableList: [],
      smallTableList: [],
      levelList: [
        { pkRange: 1, rangeName: '嗨粉级' },
        { pkRange: 2, rangeName: '会员级' },
        { pkRange: 3, rangeName: 'VIP级' },
        { pkRange: 4, rangeName: '经理级' },
        { pkRange: 5, rangeName: '总监级' },
        { pkRange: 6, rangeName: '董事级' },
      ],
      selList: [],
      newSelList: [],
      specialArea: "",
    };
  },
  watch: {
    tableList: {
      handler(n) {
        this.$emit("getRangList", n);
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    isLocals,
    getAllData(data, ggData, specialArea) {
      console.log(
        "%c [ data ]-296",
        "font-size:13px; background:#d3a147; color:#ffe58b;",
        data,
        ggData
      );
      this.specialArea = specialArea;
      let arr = [];
      data.forEach((item) => {
        item.showList.forEach((ctem) => {
          arr.push({
            specsIds: ctem.specsIdList,
            productPrice: ctem.productPrice,
            productPv: ctem.productAchieve,
            assAchieve: ctem.assAchieve,
            productCode: item.productCode,
            productName: item.productName,
            pkProduct: item.productId,
            isGift: item.isGift,
            productCover: item.productCover,
          });
        });
      });
      this.getPrice(arr);
    },
    getPrice(data) {
      api
        .computePrice({
          computeWaresPriceList: data,
          specialArea: this.specialArea,
        })
        .then((res) => {
          let allArr = res.data;
          let arr = [];
          allArr.forEach((item) => {
            item.rangePriceVoList.forEach((ctem) => {
              arr.push(ctem);
            });
          });
          this.tableList = arr;
        });
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog__body {
  height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
}
::v-deep .el-form-item {
  margin-bottom: 0;
}
.jcpz {
  margin-left: -20px;
  .tit {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    padding: 0 20px;
    border-left: 5px solid #4391fd;
    margin: 15px 0;
    margin-right: -20px;
  }
  .maintop {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-right: -20px;
    margin-top: 10px;
    .maintitle {
      font-size: 10px;
      font-family: MicrosoftYaHei;
      color: #999999;
    }
  }
}
.bgImg {
  width: 48px;
  height: 48px;
}
.th {
  margin-top: 20px;
}
.xian {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}
</style>
