<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2023-02-23 15:59:57
-->
<template>
  <div class="">
    <div class="tit">{{ '规则设置' }}</div>
    <div class="xian"></div>
    <div class="tabList"></div>
    <div class="table">
      <!-- 批量操作 -->
      <table>
        <tr>
          <th colspan="5" class="tableLeft">
            <el-button type="primary" @click="addNewGoods" size="mini"
              >{{ '添加' }}
            </el-button>
          </th>
          <th colspan="7" style="padding-bottom: 0">
            <div class="tableFlex">
              <div class="tableFlex_i"></div>
              <div class="tableFlex_i"></div>
              <div class="tableFlex_i">
                <el-input
                  :placeholder="'赠送数量'"
                  v-model="plcz.quantity"
                ></el-input>
              </div>
              <div class="tableAdd"></div>
            </div>
          </th>
          <th colspan="2" style="padding-bottom: 0">
            <div class="tableFlex">
              <div class="tableFlex_i">
                <el-button type="primary" @click="toPlcz" size="mini">{{
                  '批量操作'
                }}</el-button>
              </div>
              <div class="tableFlex_i">
                <el-button size="mini" @click="reset">
                  {{ '重置' }}</el-button
                >
              </div>
            </div>
          </th>
        </tr>
      </table>
      <table class="table_b">
        <tr style="border-top: 0">
          <td style="border: 0"></td>
          <td colspan="2">{{ $t("会员点位") }}</td>
          <td colspan="2">{{ $t("会员等级") }}</td>
          <td colspan="7" style="padding-bottom: 0">
            <div class="tableFlex">
              <div class="tableFlex_i">{{ '赠送产品' }}</div>
              <div class="tableFlex_i">{{ '产品规格' }}</div>
              <div class="tableFlex_i">{{ '赠送数量' }}</div>
              <div class="tableAdd"></div>
            </div>
          </td>
          <td colspan="2" style="border: 0"></td>
        </tr>
        <tr v-for="(item, index) in mcrList" :key="index">
          <td style="border: 0"></td>
          <td colspan="2">
            <el-input
              placeholder="会员点位"
              size="medium"
              v-model="item.memberPoint"
            ></el-input>
          </td>
          <td colspan="2">
            <el-select
              v-model="item.pkGrade"
              placeholder="会员等级"
              size="medium"
              clearable
            >
              <el-option
                v-for="items in gradeList"
                :key="items.pkId"
                :label="items.gradeName"
                :value="items.pkId"
              >
              </el-option>
            </el-select>
          </td>
          <td colspan="7" style="padding-bottom: 0">
            <div
              class="tableFlex"
              v-show="item.wgcList.length > 0"
              v-for="(stem, sndex) in item.wgcList"
              :key="sndex"
            >
              <div class="tableFlex_i">
                <el-input
                  :placeholder="'请选择赠送产品'"
                  v-model="stem.productName"
                  @focus="getProduct(index, sndex)"
                ></el-input>
              </div>
              <div class="tableFlex_i">
                <el-input disabled v-model="stem.specsName"></el-input>
              </div>
              <div class="tableFlex_i">
                <el-input v-model="stem.quantity"></el-input>
              </div>
              <div class="tableAdd">
                <img
                  src="@/assets/images/iconpop.png"
                  @click="reduceProduct(index, sndex)"
                  alt=""
                />
                <img
                  src="@/assets/images/iconadd.png"
                  @click="addProduct(index)"
                  alt=""
                />
              </div>
            </div>
            <div class="tableAddPro" v-show="item.wgcList.length == 0">
              {{ '添加产品' }}
              <img
                src="@/assets/images/iconadd.png"
                @click="addProduct(index)"
                alt=""
              />
            </div>
          </td>
          <td colspan="2" style="border: 0">
            <div class="tableAdd">
              <img
                src="@/assets/images/iconpop.png"
                @click="reduceRow(index)"
                alt=""
              />
            </div>
          </td>
        </tr>
      </table>
    </div>
    <el-dialog
      :title="'添加'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="40%"
      center
      :before-close="handleClose"
    >
      <div class="cpHeight">
        <el-row>
          <el-col :span="22">
            <el-input
              v-model="select.queryInfo"
              clearable
              :placeholder="'请输入'"
              @keyup.enter.native="getDataList"
              prefix-icon="el-icon-search"
            ></el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" size="small" @click="getDataList">
              {{ '搜索' }}</el-button
            >
          </el-col>
        </el-row>
        <div style="height: 10px"></div>
        <el-table
          :data="dialogList"
          ref="multipleTable"
          style="width: 100%"
          @select-all="onSelectAll"
          @select="selected"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            align="center"
            prop="productName"
            :label="'产品名称'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="productCode"
            :label="'产品编号'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="productName"
            :label="'规格'"
          >
            <template slot-scope="scope">
              <div
                class="blueCor"
                v-show="
                  scope.row.selSkuNameList == '' ||
                  scope.row.selSkuNameList == undefined
                "
                @click="selSku(scope.row.pkId, scope.$index)"
              >
                {{ '选择规格' }}
              </div>
              <div
                class="blueCor"
                v-show="
                  scope.row.selSkuNameList != '' &&
                  scope.row.selSkuNameList != undefined
                "
                @click="selSku(scope.row.pkId, scope.$index)"
              >
                {{ scope.row.selSkuNameList }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="productName"
            :label="'商品数量'"
          >
            <template slot-scope="scope">
              <el-input-number
                size="mini"
                v-model="scope.row.quantity"
                :min="1"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getDataList"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{ '取消' }}</el-button>
        <el-button type="primary" @click="sureProduct">{{
          '确认'
        }}</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="'规格'"
      :visible.sync="ggVisible"
      :close-on-click-modal="false"
      width="40%"
      center
      :before-close="handleCloseGg"
    >
      <div>
        <el-form>
          <el-form-item
            :label="item.typeName"
            v-for="(item, index) in skuList"
            :key="index"
          >
            <el-radio-group v-model="item.pkProductSku">
              <el-radio
                v-for="(ctem, cndex) in item.specsList"
                @change="getCheckBox(item.pkId, item.specsName)"
                :key="ctem.pkId"
                :label="ctem.pkId"
                >{{ ctem.specsName }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseGg">{{ '取消' }}</el-button>
        <el-button type="primary" @click="sureSku">{{
          '确认'
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/giftGoods.js";
import topBar from "@/components/topBar";
import ImageUpload from "@/components/ImageUpload";
import { isLocals } from "../../../utils/numberToCurrency";
export default {
  components: {
    topBar,
    ImageUpload,
  },
  data() {
    return {
      dialogVisible: false,
      ggVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      total: 0,
      moren: "setGiftGoodsInfo",
      topList: [
        {
          name: '基本信息',
          path: "addGiftGoodsInfo",
        },
        {
          name: '规则设置',
          path: "setGiftGoodsInfo",
        },
      ],
      allData: [], //全部数据
      areaList: [], //全部专区
      allGoods: [], //全部商品
      isArea: "",
      plcz: {},
      select: {}, //产品筛选
      dialogList: [], //产品数组
      selectData: [], //选中
      skuList: [], //规格数组
      selSkuList: "",
      selSkuNameList: "",
      selIndex: "",
      showCndex: "",
      showIndex: "",
      pageData: {},
      queryData: [],
      gradeList: [],
      mcrList: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    isLocals,
    getPage(allData) {
      if (allData != "") {
        console.log(allData);
        this.mcrList = allData;
        // this.allData.forEach((item) => {
        //   allData.forEach((ctem) => {
        //     if (ctem.orderType == item.orderType) {
        //       item.mcrList = ctem.mcrList;
        //     }
        //   });
        // });
      }
    },

    getData() {
      api.gradeList().then((res) => {
        this.gradeList = res.rows;
      });
    },
    sureSku() {
      this.$set(this.dialogList[this.selIndex], "selSkuList", this.selSkuList);
      this.$set(
        this.dialogList[this.selIndex],
        "selSkuNameList",
        this.selSkuNameList
      );
      this.ggVisible = false;
    },
    sureProduct() {
      if (this.selectData.length == 0) {
        this.$message({
          message: '请选择产品',
          type: "warning",
        });
        return false;
      }

      // 只更新当前选中的行和列
      const currentRow = this.mcrList[this.currentRowIndex];
      const currentProduct = currentRow.wgcList[this.currentColumnIndex];

      currentProduct.pkProduct = this.selectData.pkId;
      currentProduct.productName = this.selectData.productName;
      currentProduct.specsName = this.selectData.selSkuNameList;
      currentProduct.specsNameId = this.selectData.selSkuList;
      currentProduct.quantity = this.selectData.quantity;

      this.handleClose();
      this.$forceUpdate();
    },
    toPlcz() {
      this.mcrList.forEach((ctem) => {
        ctem.wgcList.forEach((stem) => {
          stem.quantity = this.plcz.quantity;
        });
      });
    },
    reset() {
      this.plcz = {};
    },
    getCheckBox() {
      let arr1 = [],
        arr2 = [];
      this.skuList.forEach((item) => {
        item.specsList.forEach((ctem) => {
          if (ctem.pkId == item.pkProductSku) {
            arr1.push(ctem.pkId);
            arr2.push(ctem.specsName);
          }
        });
      });
      this.selSkuList = arr1.join(",");
      this.selSkuNameList = arr2.join(",");
    },
    setArea(val) {
      this.isArea = val;
    },
    handleClose() {
      this.selectData = [];
      this.dialogVisible = false;
    },
    handleCloseGg() {
      this.ggVisible = false;
    },
    getProduct(rowIndex, columnIndex) {
      this.currentRowIndex = rowIndex; // 当前行索引
      this.currentColumnIndex = columnIndex; // 当前列索引
      this.getDataList();
      this.dialogVisible = true;
    },
    addProduct(rowIndex) {
      this.mcrList[rowIndex].wgcList.push({
        pkProduct: "",
        productName: "",
        specsName: "",
        specsNameId: "",
        quantity: 1,
      });
    },
    reduceProduct(cndex, sndex) {
      this.mcrList[cndex].wgcList.splice(sndex, 1);
    },
    addNewGoods() {
      this.mcrList.push({
        memberPoint: "",
        pkGrade: "",
        wgcList: [
          {
            pkProduct: "",
            productName: "",
            specsName: "",
            specsNameId: "",
            quantity: 1,
          },
        ],
      });
    },
    reduceRow(index) {
      this.mcrList.splice(index, 1);
    },
    selSku(pkId, index) {
      this.selIndex = index;
      api
        .getProductSpecs({
          pkProduct: pkId,
        })
        .then((res) => {
          let arr1 = [],
            arr2 = [];
          res.data.forEach((item) => {
            item.pkProductSku = item.specsList[0].pkId;
            arr1.push(item.specsList[0].pkId);
            arr2.push(item.specsList[0].specsName);
          });
          this.selSkuList = arr1.join(",");
          this.selSkuNameList = arr2.join(",");

          this.skuList = res.data;
          this.ggVisible = true;
        });
    },
    getDataList() {
      api
        .getProductAll(
          Object.assign({ isPutOn: 0 }, this.queryParams, this.select, {
            isExistSpecs: 1,
          })
        )
        .then((res) => {
          res.rows.forEach((item) => {
            item.quantity = 1;
          });
          this.dialogList = res.rows;
          this.total = res.total;
        });
    },
    onSelectAll() {
      this.$refs.multipleTable.clearSelection();
    },
    selected(selection, row) {
      // 清除 所有勾选项
      this.$refs.multipleTable.clearSelection();
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return;
      this.$refs.multipleTable.toggleRowSelection(row, true);
      this.selectData = { ...row };
    },
    // 表格的选中 可以获得当前选中的数据
    selectionChange(val) {
      // 将选中的数据存储起来
      this.selectData = val;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>

<style lang="scss" scoped>
// .page {
//   padding: 20px;
//   background: #f9f9f9;
//   font-size: 14px;
.main_a {
  // height: calc(100vh - 124px);
  // display: flex;
  // flex-direction: column;
  // height: calc(100vh - 164px);
  // height: 100%;
}
.main {
  background: #ffffff;
  border-radius: 8px;
  height: calc(100vh - 164px);
  padding-bottom: 20px;
  box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
}
::v-deep .el-select {
  width: 100%;
}
// }
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
.tit {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  padding: 0 20px;
  border-left: 5px solid #c8161d;
  margin: 20px 0 10px 0;
}
.xian {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.demo-ruleForm {
  padding: 20px 0;
}
::v-deep .el-date-editor--datetimerange {
  width: auto !important;
}
.flexed {
  display: flex;
}
.flexed_l {
  margin-right: 20px;
}
.table {
  padding: 0 20px;
  margin-top: 1px;
}

table {
  width: 100%;
  background: #fff;
  border-collapse: collapse;
  border: 1px solid #cccccc;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse: collapse;
  //   合并内外边距
  // (去除表格单元格默认的2个像素内外边距*/
}
.table_b {
  border-top: 0;
}
th {
  padding: 10px 10px;
  text-align: center;
  border: 1px solid #cccccc;
  overflow: hidden;
  border-top: 0;
}
td {
  padding: 10px 10px;
  text-align: center;
  border: 1px solid #cccccc;
  border-top: 0;
  overflow: hidden;
}
.tableFlex {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .tableFlex_i {
    flex: 1;
    ::v-deep .el-input__inner {
      width: 90%;
    }
  }
}
.tableAdd {
  width: 50px;
  img {
    width: 19px;
    height: 19px;
  }
}
.tableAddPro {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 19px;
    height: 19px;
    margin-left: 10px;
  }
}
.tableLeft {
  text-align: left;
}
.tabList {
  display: flex;
  align-items: center;
  padding: 20px 0px 0 20px;
  .tabList_i {
    padding: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
  }
  .tabAct {
    background: #108ee9;
    color: #fff;
  }
}
.clearBtm {
  border-bottom: 0;
}
.cpHeight {
  height: 50vh;
  overflow-y: auto;
}
.blueCor {
  color: #589ff8;
  cursor: pointer;
}
::v-deep .el-input__icon {
  line-height: 33px;
}
::v-deep .el-button {
  margin-top: 0;
}
</style>
