<template>
  <div class="box">
    <div class="condition">
      <!-- 分区 -->
      <div class="inquire">
        <span>分区</span>
        <el-select
          v-model="inquire.value"
          placeholder="请选择"
          @change="handleChange"
        >
          <el-option
            v-for="item in inquire.options"
            :key="item.type"
            :label="item.name"
            :value="item.type"
          >
          </el-option>
        </el-select>
      </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;
            type = 1;
            editDialogTitle = '对比值N';
            value = inquire.comparisonValue;
          "
        >
          编辑</el-button
        >
      </div>

      <div class="inquire">
        <span>幸运24金币库存</span>
        <el-input
          v-model="inquire.goldInventory"
          placeholder=""
          class="input"
          disabled
        ></el-input>
        <el-button
          class="primary"
          type="primary"
          @click="
            editDialog = true;
            type = 2;
            editDialogTitle = '幸运24金币库存';
            value = inquire.goldInventory;
          "
          >编辑</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;
            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;
            type = 4;
            editDialogTitle = '用户收益比例';
            value = inquire.userRevenueRatio;
          "
          >编辑</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">取消</el-button>
          <el-button type="primary" @click="editDialogClick()">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { getConfig, updateSet } from "@/api/luckGift/luckGift";
// @ts-ignore
import { dateFormat } from "@/utils/system-helper";
// @ts-ignore
import { ElMessage } from "element-plus";
import moment from "moment-timezone";
export default {
  name: "luckGiftSet",
  data() {
    return {
      loading: false,
      //查询所需条件对象
      inquire: {
        value: 2,
        options: [
          {
            name: "阿拉伯区",
            type: 2,
          },
          {
            name: "英语区",
            type: 1,
          },
          {
            name: "华语区",
            type: 4,
          },
        ],
        comparisonValue: "",
        goldInventory: "",
        giftId: "",
        platformCommission: "",
        userRevenueRatio: "",
      },
      editDialog: false,
      editDialogTitle: "",
      value: "",
      type: null,
    };
  },
  created() {
    this.getData();
  },
  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;
      });
    },
    // 确认保存
    editDialogClick() {
      var obj = {};
      obj.partitionId = this.inquire.value;
      if (this.type == 1) {
        obj.productionRatio = this.value;
      } else if (this.type == 2) {
        console.log(1111);
        obj.stock = this.value;
      } else if (this.type == 3) {
        obj.platformRatio = this.value;
      } else if (this.type == 4) {
        obj.receiverRatio = this.value;
      }
      updateSet(obj).then((res) => {
        if (res.code == 200) {
          ElMessage({
            showClose: true,
            message: "保存成功",
            type: "success",
          });
          this.editDialog = 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>
