<template>
    <div class="box">
      <div class="condition">
              <div class="inquire">
          <span>用户上线列表</span>
          <!-- @input="handleInput" -->
          <el-input
            v-model="inquire.followErbanNoList"
            placeholder=""
            class="input"
            disabled
          ></el-input>
          <el-button
            class="primary"
            type="primary"
            @click="
              editDialog = true;
              butClick = false;
              type = 11;
              editDialogTitle = '用户上线列表';
              value = inquire.followErbanNoList;
            "
          >
            编辑</el-button
          >
        </div>
        <div class="inquire">
          <span>用户W级列表</span>
          <!-- @input="handleInput" -->
          <!-- <el-input
            v-model="inquire.whiteErbanNoProductionRatioMap"
            placeholder=""
            class="input"
            disabled
          ></el-input> -->
          <el-button class="primary" type="primary" @click="detailsClick">
            查看详情</el-button
          >
        </div>
        <div class="inquire">
          <span>用户B级列表</span>
          <!-- @input="handleInput" -->
          <el-input
            v-model="inquire.blackErbanNoList"
            placeholder=""
            class="input"
            disabled
          ></el-input>
          <el-button
            class="primary"
            type="primary"
            @click="
              editDialog = true;
              butClick = false;
              type = 13;
              editDialogTitle = '用户B级列表';
              value = inquire.blackErbanNoList;
            "
          >
            编辑</el-button
          >
        </div>
        <!-- 分区 -->
        <div class="inquire">
          <span>分区</span>
          <partition-select v-model:partition-id="inquire.value" v-model:partition-infos="inquire.options" v-model:after-init="getData" @update:partitionId="handleChange"/>
        </div>
  
        <div class="inquire">
          <span>对比值N</span>
          <!-- @input="handleInput" -->
          <el-input
            v-model="inquire.comparisonValue"
            placeholder=""
            class="input"
            disabled
          ></el-input>
          <el-button
            class="primary"
            type="primary"
            @click="
              editDialog = true;
              butClick = false;
              type = 1;
              editDialogTitle = '对比值N';
              value = inquire.comparisonValue;
            "
          >
            编辑</el-button
          >
        </div>
  
        <div class="inquire">
          <span>Bravo金币库存</span>
          <el-input
            v-model="inquire.goldInventory"
            placeholder=""
            class="input"
            disabled
          ></el-input>
          <el-button
            class="primary"
            type="primary"
            @click="
              editDialog = true;
              butClick = false;
              type = 2;
              editDialogTitle = '幸运24金币库存';
              value = inquire.goldInventory;
            "
            >编辑</el-button
          >
        </div>
  
        <!-- <div class="inquire">  
          <span>幸运礼物ID</span>
          <el-input
            v-model="inquire.x"
            placeholder=""
            class="input"
            disabled
          ></el-input>
          <el-button
            class="primary"
            type="primary"
            @click="
              editDialog = true;
              butClick = false;
              type = 8;
              editDialogTitle = '幸运礼物ID';
              value = inquire.x;
            "
          >
            编辑</el-button
          >
        </div> -->
  
        <div class="inquire">
          <span>平台抽成</span>
          <el-input
            v-model="inquire.platformCommission"
            placeholder=""
            class="input"
            disabled
          ></el-input>
          <el-button
            class="primary"
            type="primary"
            @click="
              editDialog = true;
              butClick = false;
              type = 3;
              editDialogTitle = '平台抽成';
              value = inquire.platformCommission;
            "
            >编辑</el-button
          >
        </div>
  
        <div class="inquire">
          <span>用户收益比例</span>
          <el-input
            v-model="inquire.userRevenueRatio"
            placeholder=""
            class="input"
            disabled
          ></el-input>
          <el-button
            class="primary"
            type="primary"
            @click="
              editDialog = true;
              butClick = false;
              type = 4;
              editDialogTitle = '用户收益比例';
              value = inquire.userRevenueRatio;
            "
            >编辑</el-button
          >
        </div>
  
        <div class="inquire">
          <span>通知制定金额</span>
          <!-- @input="handleInput" -->
          <el-input
            v-model="inquire.warnMulti"
            placeholder=""
            class="input"
            disabled
          ></el-input>
          <el-button
            class="primary"
            type="primary"
            @click="
              editDialog = true;
              butClick = false;
              type = 9;
              editDialogTitle = '通知制定金额';
              value = inquire.warnMulti;
            "
          >
            编辑</el-button
          >
        </div>
  
        <!-- <div class="inquire">
          <span>库存告急通知</span>
          <el-input
            v-model="inquire.x"
            placeholder=""
            class="input"
            disabled
          ></el-input>
          <el-button
            class="primary"
            type="primary"
            @click="
              editDialog = true;
              butClick = false;
              type = 10;
              editDialogTitle = '库存告急通知';
              value = inquire.x;
            "
          >
            编辑</el-button
          >
        </div> -->
  
  
        <div class="inquire">
          <span>赠送1000倍奖励</span>
          <el-button
            class="primary"
            type="primary"
            :disabled="butClick"
            @click="
              editDialog = true;
              type = 12;
              editDialogTitle = '赠送1000倍奖励';
              value = inquire.x;
            "
          >
            赠送</el-button
          >
        </div>
      </div>
      <!-- 编辑弹窗 -->
      <el-dialog v-model="editDialog" :title="editDialogTitle" width="36%" center>
        <div style="margin-bottom: 25px; margin-top: 10px">
          <span
            style="display: inline-block; margin-right: 20px"
            class="col-sm-2 control-label"
            >{{ editDialogTitle }}</span
          >
          <el-input
            v-model="value"
            style="width: 75%"
            class="input"
            placeholder="请输入"
          ></el-input>
        </div>
  
        <template #footer>
          <span class="dialog-footer">
            <el-button
              @click="
                editDialog = false;
                butClick = false;
              "
              >取消</el-button
            >
            <el-button
              type="primary"
              :disabled="butClick"
              @click="editDialogClick()"
            >
              保存
            </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 详情弹窗 -->
      <el-dialog v-model="detailsDialog" title="用户W级列表" width="36%" center>
        <el-button class="primary" type="primary" @click="addDetail">
          新增</el-button
        >
        <el-table :data="detailsTable" style="width: 100%">
          <el-table-column label="用户ID">
            <template v-slot="scope">
              <el-input
                v-model="scope.row.userId"
                type="number"
                @blur="handleEdit(scope.$index, scope.row)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="值">
            <template v-slot="scope">
              <el-input
                v-model="scope.row.val"
                type="number"
                @blur="handleEdit(scope.$index, scope.row)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                class="danger"
                type="danger"
                @click="delDetail(scope.$index, scope.row)"
              >
                删除</el-button
              >
            </template>
          </el-table-column>
          <!-- 其他列 -->
        </el-table>
  
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="detailsDialog = false">取消</el-button>
            <el-button type="primary" :disabled="butClick" @click="sevaDetail()">
              保存
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  <script>
  import { getConfig, updateSet, updateUserMulti } from "@/api/bravoGift/bravoGift";
  import { ElMessage } from "element-plus";
  import moment from "moment-timezone";
  import PartitionSelect from "../common/partitionSelect.vue";
  export default {
    name: "bravoGiftSet",
    components: {PartitionSelect},
    data() {
      return {
        loading: false,
        butClick: false,
        butClickTime: null,
        //查询所需条件对象
        inquire: {
          value: 1,
          options: [
            // {
            //   name: "阿拉伯区",
            //   type: 2,
            // },
            // {
            //   name: "英语区",
            //   type: 1,
            // },
            // {
            //   name: "华语区",
            //   type: 4,
            // },
            // {
            //   name: "土耳其区",
            //   type: 8,
            // },
          ],
          comparisonValue: "",
          goldInventory: "",
          giftId: "",
          platformCommission: "",
          userRevenueRatio: "",
          warnMulti: "",
          followErbanNoList: "",
          whiteErbanNoProductionRatioMap: "",
          blackErbanNoList: "",
        },
        editDialog: false,
        editDialogTitle: "",
        detailsDialog: false,
        value: "",
        type: null,
        // 详情
        detailsTable: [],
        whiteErbanNoProductionRatioMap: null,
      };
    },
    methods: {
      // 查询接口
      getData() {
        getConfig({ partitionId: this.inquire.value }).then((res) => {
          this.inquire.comparisonValue = res.data.productionRatio;
          this.inquire.goldInventory = res.data.stock;
          this.inquire.platformCommission = res.data.platformRatio;
          this.inquire.userRevenueRatio = res.data.receiverRatio;
          this.inquire.warnMulti = res.data.warnMulti;
          this.inquire.followErbanNoList = res.data.followErbanNoList.join();
          // this.inquire.whiteErbanNoProductionRatioMap = res.data.whiteErbanNoProductionRatioMap.join();
          this.inquire.blackErbanNoList = res.data.blackErbanNoList.join();
          var newArr = [];
          var obj = res.data.whiteErbanNoProductionRatioMap;
          var arr = Object.keys(obj).map((key) => ({
            userId: key,
            val: obj[key],
          }));
          arr.forEach((res, i) => {
            newArr[i] = res;
          });
          this.detailsTable = newArr;
        });
      },
      // 查看详情按钮
      detailsClick() {
        this.getData();
        this.detailsDialog = true;
        this.type = 14;
        // this.value = inquire.whiteErbanNoProductionRatioMap;
      },
      // 详情新增按钮
      addDetail() {
        this.detailsTable.unshift([]);
      },
      // 详情删除按钮
      delDetail(index, val) {
        this.detailsTable.splice(index, 1);
      },
      // 详情确认保存按钮
      sevaDetail() {
        var map = {};
        var lock = true;
        this.detailsTable.forEach((res) => {
          if (res.userId == (undefined || "") || res.val == undefined || "") {
            lock = false;
          }
          map[res.userId] = res.val;
        });
        console.log(map);
        this.whiteErbanNoProductionRatioMap = map;
        if (lock) {
          this.editDialogClick();
        } else {
          ElMessage({
            showClose: true,
            message: "用户ID和值不能为空",
            type: "error",
          });
        }
      },
      // 详情编辑监听
      handleEdit(index, row) {
        // 这里可以添加保存逻辑，例如调用API更新服务器数据等。
        console.log(index, "保存行数据", row);
        // 示例：更新本地数据或其他操作...
      },
      // 确认保存
      editDialogClick() {
        var obj = {};
        obj.partitionId = this.inquire.value;
        if (this.type == 12) {
          this.butClick = true;
          updateUserMulti({ erbanNo: this.value }).then((res) => {
            if (res.code == 200) {
              ElMessage({
                showClose: true,
                message: "赠送成功",
                type: "success",
              });
              setTimeout(() => {
                this.butClick = false;
              }, 3000);
              this.editDialog = false;
              this.getData();
            } else {
              this.butClick = false;
              ElMessage({
                showClose: true,
                message: res.message,
                type: "error",
              });
            }
          });
        } else {
          if (this.type == 1) {
            obj.productionRatio = this.value;
          } else if (this.type == 2) {
            obj.stock = this.value;
          } else if (this.type == 3) {
            obj.platformRatio = this.value;
          } else if (this.type == 4) {
            obj.receiverRatio = this.value;
          } else if (this.type == 9) {
            obj.warnMulti = this.value;
          } else if (this.type == 11) {
            obj.followErbanNoList = this.value.split(",");
          } else if (this.type == 14) {
            obj.whiteErbanNoProductionRatioMap =
              this.whiteErbanNoProductionRatioMap;
          } else if (this.type == 13) {
            obj.blackErbanNoList = this.value.split(",");
          }
          updateSet(obj).then((res) => {
            if (res.code == 200) {
              ElMessage({
                showClose: true,
                message: "保存成功",
                type: "success",
              });
              this.editDialog = false;
              // this.detailsDialog = false;
              this.getData();
            } else {
              ElMessage({
                showClose: true,
                message: res.message,
                type: "error",
              });
            }
          });
        }
      },
      // 监听类型
      handleChange(value) {
        this.inquire.value = value;
        this.getData();
      },
    },
  };
  </script>
  <style lang="less" scoped>
  .box {
    padding-top: 20px;
    background: #ecf0f5;
    .condition {
      margin-bottom: 20px;
      .inquire {
        margin-right: 20px;
        margin-bottom: 20px;
        span {
          display: inline-block;
          width: 110px;
          margin-right: 10px;
          // text-align: right;
        }
        .input {
          width: 180px;
          margin-right: 10px;
        }
      }
    }
    .but {
      margin-bottom: 20px;
    }
  }
  </style>
  