<template>
  <div class="page">
    <div>
      <div class="tit">支付设置</div>
      <div class="xian"></div>
      <div>
        <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="4">
              <el-form-item label="支付金额(￥)">
                <el-input clearable v-model="payMoney"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="tit">{{'规则设置'}}</div>
      <div class="xian"></div>
      <div class="table">
        <!-- 批量操作 -->
        <table>
          <tr>
            <th colspan="10" class="tableLeft">
              <el-button type="primary" @click="addNewGoods" size="mini"
                >{{'添加'}}
              </el-button>
            </th>
          </tr>
        </table>
        <table class="table_b">
          <tr>
            <td>{{ '奖品图片' }}</td>

            <td colspan="8" style="padding-bottom: 0">
              <div class="tableFlex">
                <!-- <div class="tableFlex_i">结算等级</div> -->
                <div class="tableFlex_i">奖品名称</div>
                <div class="tableFlex_i">奖品总数</div>
                <!-- <div class="tableFlex_i">奖品类型</div> -->
                <div class="tableFlex_i">最小中奖数量</div>
              </div>
            </td>
            <td colspan="2">{{ '发放方式' }}</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="tableFlex_i">{{ '产品数量' }}</div>
                <div class="tableAdd"></div>
              </div>
            </td>
          </tr>
          <tr v-for="(item, index) in drawGiftConfigList" :key="index">
            <td>
              <div class="tableFlex">
                <div class="tableFlex_i">
                  <imageUpload
                    :ifdisabled="lookOver"
                    class="theimg"
                    v-model="item.giftCover"
                  />
                </div>
              </div>
            </td>

            <td colspan="8" style="padding-bottom: 0">
              <div class="tableFlex">
                <div class="tableFlex_i">
                  <el-input
                    :placeholder="'奖品名称'"
                    size="medium"
                    v-model="item.giftName"
                  ></el-input>
                </div>
                <div class="tableFlex_i">
                  <el-input
                    :placeholder="'奖品总数'"
                    size="medium"
                    v-model="item.giftNumber"
                  ></el-input>
                </div>
                <div class="tableFlex_i">
                  <el-input
                    :placeholder="'最小中奖数量'"
                    size="medium"
                    v-model="item.minNumber"
                  ></el-input>
                </div>
              </div>
            </td>
            <td colspan="2" style="padding-bottom: 0">
              <div class="tableFlex">
                <div class="tableFlex_i">
                  <el-select
                    v-model="item.grantWay"
                    size="medium"
                    :placeholder="'发放方式'"
                  >
                    <el-option
                      v-for="item in grantWayList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
            </td>
            <td colspan="7" style="padding-bottom: 0">
              <div
                class="tableFlex"
                v-for="(ctem, cndex) in item.giftConfigList"
                :key="cndex"
              >
                <div class="tableFlex_i">
                  <el-input
                    :placeholder="'请选择赠送产品'"
                    v-model="ctem.productName"
                    @focus="getProduct(index, cndex)"
                  ></el-input>
                </div>
                <div class="tableFlex_i">
                  <el-input
                    disabled
                    size="medium"
                    v-model="ctem.specsName"
                  ></el-input>
                </div>
                <div class="tableFlex_i">
                  <el-input size="medium" v-model="ctem.quantity"></el-input>
                </div>
                <div class="tableAdd">
                  <img
                    src="@/assets/images/iconpop.png"
                    @click="reduceProduct(index, cndex)"
                    alt=""
                  />
                  <img
                    v-if="cndex == item.giftConfigList.length - 1"
                    src="@/assets/images/iconadd.png"
                    @click="addProduct(index, cndex)"
                    alt=""
                  />
                </div>
              </div>
              <div class="tableAddPro" v-show="item.giftConfigList.length == 0">
                {{'添加产品'}}
                <img
                  src="@/assets/images/iconadd.png"
                  @click="addProduct(index, cndex)"
                  alt=""
                />
              </div>
            </td>
          </tr>
        </table>
      </div>

      <!-- <div class="footer">
    <el-button size="small"
               class="thebtn2"> {{ '取消' }}</el-button>
    <el-button size="small"
               @click="submit"
               class="thebtn1"> {{ '确认' }}</el-button>
  </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>
  </div>
</template>

    <script>
import * as api from "@/api/giftGoods.js";
import * as gif from "@/api/newgift";
import ImageUpload from "@/components/ImageUpload";
export default {
  name: "NewgiftRules",
  components: {
    ImageUpload,
  },
  props: {
    lookOver: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: false,
      ggVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      total: 0,
      allData: [], //全部数据
      areaList: [], //全部专区
      isArea: "",
      plcz: {},
      select: {}, //产品筛选
      dialogList: [], //产品数组
      selectData: [], //选中
      skuList: [], //规格数组
      grantWayList: [], //发放方式
      selSkuList: "",
      selSkuNameList: "",
      selIndex: "",
      showCndex: "",
      showIndex: "",
      pageData: {},
      drawGiftConfigList: [
        {
          giftCover: "", //奖品图片
          giftName: "", //奖品名称
          giftNumber: "", //奖品总数
          minNumber: "", //最小中奖数量
          grantWay: "", //发放方式
          giftConfigList: [
            {
              pkProduct: "",
              specsName: "",
              specsNameId: "",
              quantity: "",
            },
          ],
        },
      ],
      payMoney: "",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getPage(allData, money) {
      this.payMoney = money;
      this.drawGiftConfigList = allData;
      console.log("🌈 this.drawGiftConfigList", this.drawGiftConfigList);
    },
    getData() {
      // api.gradeList().then((res) => {
      //   this.gradeList = res.rows;
      // });
      // console.log("🌈22", this.drawGiftConfigList);
      gif.getGrantWay().then((res) => {
        this.grantWayList = res.data;
      });
    },
    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;
      } else {
        this.drawGiftConfigList[this.showIndex].giftConfigList[
          this.showCndex
        ].pkProduct = this.selectData.pkId;

        this.drawGiftConfigList[this.showIndex].giftConfigList[
          this.showCndex
        ].productName = this.selectData.productName;

        this.drawGiftConfigList[this.showIndex].giftConfigList[
          this.showCndex
        ].specsName = this.selectData.selSkuNameList;

        this.drawGiftConfigList[this.showIndex].giftConfigList[
          this.showCndex
        ].specsNameId = this.selectData.selSkuList;

        this.drawGiftConfigList[this.showIndex].giftConfigList[
          this.showCndex
        ].quantity = this.selectData.quantity;
        this.handleClose();
        this.$forceUpdate();
      }
    },
    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(index, cndex) {
      this.showIndex = index;
      this.showCndex = cndex;
      this.getDataList();
      this.dialogVisible = true;
    },
    addProduct(index, sndex) {
      if (!this.lookOver) {
        this.drawGiftConfigList[index].giftConfigList.push({
          pkProduct: "",
          specsName: "",
          specsNameId: "",
          quantity: "",
        });
      }
    },
    reduceProduct(index, cndex) {
      if (!this.lookOver) {
        this.drawGiftConfigList[index].giftConfigList.splice(cndex, 1);
      }
    },
    addNewGoods() {
      if (!this.lookOver) {
        this.drawGiftConfigList.push({
          giftCover: "", //奖品图片
          giftName: "", //奖品名称
          giftNumber: "", //奖品总数
          minNumber: "", //最小中奖数量
          grantWay: "", //发放方式
          giftConfigList: [
            {
              pkProduct: "",
              specsName: "",
              specsNameId: "",
              quantity: "",
            },
          ],
        });
      }
    },
    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;
    },
    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 .theimg .el-image {
  width: 48px !important;
  height: 48px !important;
}
::v-deep .el-upload--picture-card {
  width: 37px !important;
  height: 37px !important;
  min-width: 37px !important;
  min-height: 37px !important;
}
.page {
  padding: 10px 20px;
  background: #f9f9f9;
  font-size: 14px;
}
.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: 20px;
}

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%;
    }
    ::v-deep .el-input__suffix {
      right: 15px;
    }
  }
}
.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>
