<template>
  <div class="box">
    <!-- 查询按钮 -->
    <el-button class="primary" type="primary" @click="add()">新增</el-button>
  </div>

  <!-- 表格 -->
  <el-table
    v-loading="loading"
    :data="tableData"
    border
    style="width: 100%; margin-top: 25px"
  >
    <el-table-column prop="partitionDesc" align="center" label="地区" />
    <el-table-column prop="destGiftId" align="center" label="礼物id" />
    <el-table-column prop="luckyBagName" align="center" label="福袋名称" />
    <el-table-column
      align="center"
      prop="giftInfo"
      label="福袋图片"
      width="120"
    >
      <template v-slot="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.luckyBagPic"
          :zoom-rate="1.1"
          :preview-src-list="[scope.row.luckyBagPic]"
          fit="scale-down"
          preview-teleported="true"
          hide-on-click-modal="true"
        />
      </template>
    </el-table-column>
    <el-table-column prop="createTime" align="center" label="添加时间" />
    <el-table-column prop="destGiftName" align="center" label="礼物名称" />
    <el-table-column
      align="center"
      prop="giftInfo"
      label="礼物图片"
      width="120"
    >
      <template v-slot="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.destGiftPic"
          :zoom-rate="1.1"
          :preview-src-list="[scope.row.destGiftPic]"
          fit="scale-down"
          preview-teleported="true"
          hide-on-click-modal="true"
        />
      </template>
    </el-table-column>
    <el-table-column prop="destGiftPrice" align="center" label="礼物价值" />
    <el-table-column
      prop="rewardGiftName"
      align="center"
      label="奖励礼物昵称"
    />
    <el-table-column
      align="center"
      prop="giftInfo"
      label="奖励礼物图片"
      width="120"
    >
      <template v-slot="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.rewardGiftPic"
          :zoom-rate="1.1"
          :preview-src-list="[scope.row.rewardGiftPic]"
          fit="scale-down"
          preview-teleported="true"
          hide-on-click-modal="true"
        />
      </template>
    </el-table-column>
    <el-table-column
      prop="rewardGiftPrice"
      align="center"
      label="奖励礼物价值"
    />
    <el-table-column prop="dayLimit" align="center" label="每日库存" />
    <el-table-column prop="totalLimit" align="center" label="总库存" />
    <el-table-column
      prop="todayResideStock"
      align="center"
      label="今日剩余库存"
    />
    <el-table-column prop="grantStock" align="center" label="已发放库存数量" />
    <el-table-column prop="seqNo" align="center" label="排序" />

    <el-table-column align="center" label="操作" width="240px">
      <template v-slot="scope">
        <el-button
          @click="eid(scope)"
          class="primary"
          type="primary"
          size="default"
          >编辑</el-button
        >
        <el-button
          @click="
            delDialog = true;
            delDialogObj = scope.row;
          "
          :class="scope.row.isEnabled == 1 ? 'danger' : 'primary'"
          :type="scope.row.isEnabled == 1 ? 'danger' : 'primary'"
          size="default"
          >{{ scope.row.isEnabled == 1 ? "下线" : "上线" }}
        </el-button>
        <el-button
          @click="
            deriveDialog = true;
            deriveObjNew = scope.row;
          "
          class="primary"
          type="primary"
          size="default"
          >导出</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination
    style="margin-top: 10px"
    class="paginationClass"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
    layout="sizes, prev, pager, next"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

  <!-- 导出弹窗 -->
  <el-dialog v-model="deriveDialog" title="导出" width="28%" center>
    <!-- 榜单数据 -->
    <!-- <div style="margin-bottom: 25px; margin-top: 10px">
      <span
        style="display: inline-block; margin-right: 20px"
        class="col-sm-2 control-label"
        >地区选择</span
      >
      <el-select v-model="deriveObj.value" placeholder="请选择">
        <el-option
          v-for="item in deriveObj.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div> -->
    <!-- 选择时间 -->
    <div style="margin-bottom: 25px; margin-top: 10px">
      <span
        style="display: inline-block; margin-right: 20px"
        class="col-sm-2 control-label"
        >选择时间</span
      >
      <div class="inquire">
        <el-date-picker
          v-model="deriveObj.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 60%"
        >
        </el-date-picker>
      </div>
    </div>
    <!-- 弹窗按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deriveDialog = false">取消</el-button>
        <el-button type="primary" @click="deriveOut()"> 确认导出 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 新增&编辑弹窗 -->
  <el-dialog
    class="pub"
    v-model="controlsDialog"
    :title="controlsTitle"
    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"
        >地区选择</span
      >
      <el-select filterable v-model="controlsObj.value" placeholder="请选择">
        <el-option
          v-for="item in controlsObj.options"
          :key="item.id"
          :label="item.desc"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 福袋礼物选择 -->
    <div style="margin-bottom: 25px; margin-top: 10px">
      <span
        style="display: inline-block; margin-right: 20px"
        class="col-sm-2 control-label"
        >福袋礼物选择</span
      >
      <el-select filterable v-model="controlsObj.value2" placeholder="请选择">
        <el-option
          v-for="item in controlsObj.options2"
          :key="item.giftId"
          :label="JsonFunc(item.giftName)"
          :value="item.giftId"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 福袋价值 -->
    <div style="margin-bottom: 25px; margin-top: 10px">
      <span
        style="display: inline-block; margin-right: 20px"
        class="col-sm-2 control-label"
        >福袋价值</span
      >
      <el-input
        v-model="controlsObj.cost"
        placeholder=""
        class="input"
        disabled
      ></el-input>
    </div>
    <!-- 礼物昵称 -->
    <div style="margin-bottom: 25px; margin-top: 10px">
      <span
        style="display: inline-block; margin-right: 20px"
        class="col-sm-2 control-label"
        >礼物昵称</span
      >
      <el-select filterable v-model="controlsObj.value3" placeholder="请选择">
        <el-option
          v-for="item in controlsObj.options3"
          :key="item.giftId"
          :label="item.giftName"
          :value="item.giftId"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 礼物价值 -->
    <div style="margin-bottom: 25px; margin-top: 10px">
      <span
        style="display: inline-block; margin-right: 20px"
        class="col-sm-2 control-label"
        >礼物价值</span
      >
      <el-input
        v-model="controlsObj.cost2"
        placeholder=""
        class="input"
        disabled
      ></el-input>
    </div>
    <!-- 奖励礼物昵称 -->
    <div style="margin-bottom: 25px; margin-top: 10px">
      <span
        style="display: inline-block; margin-right: 20px"
        class="col-sm-2 control-label"
        >奖励礼物昵称</span
      >
      <el-select filterable v-model="controlsObj.value4" placeholder="请选择">
        <el-option
          v-for="item in controlsObj.options4"
          :key="item.giftId"
          :label="JsonFunc(item.giftName)"
          :value="item.giftId"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 奖励礼物价值 -->
    <div style="margin-bottom: 25px; margin-top: 10px">
      <span
        style="display: inline-block; margin-right: 20px"
        class="col-sm-2 control-label"
        >奖励礼物价值</span
      >
      <el-input
        v-model="controlsObj.cost3"
        placeholder=""
        class="input"
        disabled
      ></el-input>
    </div>
    <!-- 每日库存 -->
    <div style="margin-bottom: 25px; margin-top: 10px">
      <span
        style="display: inline-block; margin-right: 20px"
        class="col-sm-2 control-label"
        >每日库存</span
      >
      <el-input
        v-model="controlsObj.inventory"
        placeholder=""
        class="input"
      ></el-input>
    </div>
    <!-- 总库存 -->
    <div style="margin-bottom: 25px; margin-top: 10px">
      <span
        style="display: inline-block; margin-right: 20px"
        class="col-sm-2 control-label"
        >总库存</span
      >
      <el-input
        v-model="controlsObj.inventoryAll"
        placeholder=""
        class="input"
      ></el-input>
    </div>
    <!-- 排序 -->
    <div style="margin-bottom: 25px; margin-top: 10px">
      <span
        style="display: inline-block; margin-right: 20px"
        class="col-sm-2 control-label"
        >排序</span
      >
      <el-input
        v-model="controlsObj.sort"
        placeholder=""
        class="input"
      ></el-input>
    </div>
    <!-- 是否可见 -->
    <div style="margin-bottom: 25px; margin-top: 10px">
      <span
        style="display: inline-block; margin-right: 20px"
        class="col-sm-2 control-label"
        >是否可见</span
      >
      <el-select filterable v-model="controlsObj.value5" placeholder="请选择">
        <el-option
          v-for="item in controlsObj.options5"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 选择时间 -->
    <div style="margin-bottom: 25px; margin-top: 10px">
      <span
        style="display: inline-block; margin-right: 20px"
        class="col-sm-2 control-label"
        >选择时间</span
      >
      <div class="inquire">
        <el-date-picker
          v-model="controlsObj.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 66%"
        >
        </el-date-picker>
      </div>
    </div>
    <!-- 弹窗按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="controlsDialog = false">取消</el-button>
        <el-button type="primary" @click="controlsDialogOut()">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 二次确认弹窗 -->
  <el-dialog v-model="delDialog" title="提示" width="30%" center>
    <span> 确定要进行该操作吗?</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="delDialog = false">取消</el-button>
        <el-button type="primary" @click="delClick()"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import {
  listPartitionInfo,
  listLuckyBagLinearGift,
  luckyBagFortunatePage,
  getPrizeGroupsInfo,
  getAll,
  luckyBagFortunateExport,
  luckyBagFortunateSave,
  luckyBagFortunateUpdateEnabled,
} from "@/api/luckyTycoon/luckyTycoon";
// @ts-ignore
import { dateFormat } from "@/utils/system-helper";
// @ts-ignore
import { ElMessage } from "element-plus";
export default {
  name: "luckyTycoonOnePlusOne",
  created() {
    listPartitionInfo().then((res) => {
      this.controlsObj.options = res.data;
    });
    listLuckyBagLinearGift({
      giftTypes: "3,15",
    }).then((res) => {
      this.controlsObj.options2 = res.data;
    });
    this.getData();
  },
  data() {
    return {
      delDialog: false,
      delDialogObj: {},
      foundIndexFunVal: "",
      loading: false,
      // 表格数据
      tableData: [],
      // 分页
      total: 10, //总页数
      currentPage: 1, //页码
      pageSize: 10, //条数//导出
      deriveDialog: false,
      deriveObjNew: {},
      deriveObj: {
        value: "",
        time: "",
        options: [
          {
            value: "1",
            label: "英语区",
          },
          {
            value: "2",
            label: "阿拉伯区",
          },
          {
            value: "4",
            label: "华语区",
          },
        ],
      },
      controlsDialog: false,
      controlsDialogType: 1, //1新增 2编辑
      controlsTitle: "编辑&新增",
      controlsObj: {
        // 地区选择
        value: "",
        options: [],
        // 福袋礼物选择
        value2: "",
        options2: [],
        cost: "",
        value3: "",
        options3: [],
        cost2: "",
        value4: "",
        options4: [],
        cost3: "",
        inventory: "",
        inventoryAll: "",
        sort: "",
        value5: 1,
        options5: [
          {
            value: 1,
            label: "是",
          },
          {
            value: 0,
            label: "否",
          },
        ],
        time: [],
      },
    };
  },
  watch: {
    "controlsObj.value2": function (newValue, oldValue) {
      this.controlsObj.cost = this.foundIndexFun(
        newValue,
        this.controlsObj.options2,
        1
      );
      getPrizeGroupsInfo({ luckyBagId: this.controlsObj.value2 }).then(
        (res) => {
          var newArr = [];
          res.data.highPrizeGroup.forEach((val) => {
            newArr.push(val);
          });
          res.data.normalPrizeGroup.forEach((val) => {
            newArr.push(val);
          });
          this.controlsObj.options3 = newArr;
        }
      );
    },
    "controlsObj.value3": function (newValue, oldValue) {
      if (this.watchType) {
        return;
      }
      this.controlsObj.cost2 = this.foundIndexFun(
        newValue,
        this.controlsObj.options3,
        2
      );
    },
    "controlsObj.value4": function (newValue, oldValue) {
      if (this.watchType) {
        return;
      }
      this.controlsObj.cost3 = this.foundIndexFun(
        newValue,
        this.controlsObj.options4,
        1
      );
    },
  },
  methods: {
    getData() {
      this.loading = true;
      luckyBagFortunatePage({
        page: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
      getAll().then((res) => {
        this.controlsObj.options4 = res.data;
        this.loading = false;
      });
    },
    add() {
      this.controlsDialog = true;
      this.controlsTitle = "新增";
      this.controlsDialogType = 1;
      // this.controlsObj = {
      //   // 地区选择
      //   value: "",
      //   options: [],
      //   // 福袋礼物选择
      //   value2: "",
      //   options2: [],
      //   cost: "",
      //   value3: "",
      //   options3: [],
      //   cost2: "",
      //   value4: "",
      //   options4: [],
      //   cost3: "",
      //   inventory: "",
      //   inventoryAll: "",
      //   sort: "",
      //   value5: 1,
      //   options5: [
      //     {
      //       value: 1,
      //       label: "是",
      //     },
      //     {
      //       value: 2,
      //       label: "否",
      //     },
      //   ],
      //   time: "",
      // };
    },
    eid(scope) {
      var res = scope.row;
      this.deriveObjNew = scope.row;
      this.controlsTitle = "编辑";
      this.controlsDialogType = 2;
      this.foundIndexFunVal = res.rewardGiftId;
      this.controlsObj.value = res.partitionId;
      this.controlsObj.value2 = res.luckyBagId;
      getPrizeGroupsInfo({ luckyBagId: this.controlsObj.value2 }).then(
        (resArr) => {
          var newArr = [];
          resArr.data.highPrizeGroup.forEach((val) => {
            newArr.push(val);
          });
          resArr.data.normalPrizeGroup.forEach((val) => {
            newArr.push(val);
          });
          this.controlsObj.options3 = newArr;
          this.controlsObj.value3 = res.destGiftId;
          // this.controlsObj.cost = res.luckyBagPrice;
          // this.controlsObj.cost2 = res.destGiftId;
          this.controlsObj.value4 = res.rewardGiftId;
          // this.controlsObj.cost3 = res.rewardGiftPrice;
          this.controlsObj.inventory = res.dayLimit;
          this.controlsObj.inventoryAll = res.totalLimit;
          this.controlsObj.sort = res.seqNo;
          this.controlsObj.value5 = res.isEnabled;
          this.controlsObj.time[0] = res.startTime;
          this.controlsObj.time[1] = res.endTime;
          this.controlsDialog = true;
        }
      );
    },
    // 保存
    controlsDialogOut() {
      let startTime = "";
      let endTime = "";
      if (this.controlsObj.time && this.controlsObj.time.length > 0) {
        startTime = dateFormat(this.controlsObj.time[0], "yyyy-MM-dd hh:mm:ss");
        endTime = dateFormat(this.controlsObj.time[1], "yyyy-MM-dd hh:mm:ss");
      }
      if (this.controlsDialogType == 1) {
        luckyBagFortunateSave({
          partitionId: this.controlsObj.value,
          luckyBagId: this.controlsObj.value2,
          destGiftId: this.controlsObj.value3,
          rewardGiftId: this.controlsObj.value4,
          dayLimit: this.controlsObj.inventory,
          totalLimit: this.controlsObj.inventoryAll,
          seqNo: this.controlsObj.sort,
          isEnabled: this.controlsObj.value5,
          startTime,
          endTime,
        }).then((res) => {
          if (res.code == 200) {
            this.controlsDialog = false;
            this.getData();
          } else {
            ElMessage({
              showClose: true,
              message: res.message,
              type: "error",
            });
          }
        });
      } else {
        luckyBagFortunateSave({
          partitionId: this.controlsObj.value,
          luckyBagId: this.controlsObj.value2,
          destGiftId: this.controlsObj.value3,
          rewardGiftId: this.controlsObj.value4,
          dayLimit: this.controlsObj.inventory,
          totalLimit: this.controlsObj.inventoryAll,
          seqNo: this.controlsObj.sort,
          isEnabled: this.controlsObj.value5,
          id: this.deriveObjNew.id,
          startTime,
          endTime,
        }).then((res) => {
          if (res.code == 200) {
            this.controlsDialog = false;
            this.getData();
          } else {
            ElMessage({
              showClose: true,
              message: res.message,
              type: "error",
            });
          }
        });
      }
    },
    // 导出
    deriveOut() {
      let startTime = "";
      let endTime = "";
      if (this.deriveObj.time && this.deriveObj.time.length > 0) {
        startTime = dateFormat(this.deriveObj.time[0], "yyyy-MM-dd hh:mm:ss");
        endTime = dateFormat(this.deriveObj.time[1], "yyyy-MM-dd hh:mm:ss");
      }
      luckyBagFortunateExport({
        fortunateId: this.deriveObjNew.id,
        partitionId: this.deriveObjNew.partitionId,
        startTime,
        endTime,
      }).then((res) => {});
    },
    // 上下线
    delClick() {
      luckyBagFortunateUpdateEnabled({
        fortunateId: this.delDialogObj.id,
        isEnabled: this.delDialogObj.isEnabled == 1 ? 0 : 1,
      }).then((res) => {
        if (res.code == 200) {
          this.delDialog = false;
          this.getData();
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 分页导航
    handleSizeChange() {
      this.getData();
    },
    handleCurrentChange() {
      this.getData();
    },
    foundIndexFun(val, arr, type) {
      var i;
      i = arr.findIndex((item) => item.giftId === val);
      return type == 1 ? arr[i].goldPrice : arr[i].platformValue;
    },
    JsonFunc(val) {
      var res = JSON.parse(val);
      return res.zh;
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  padding-top: 20px;
  background: #ecf0f5;
  .inquire {
    display: inline-block;
    margin-right: 20px;
    span {
      margin-right: 10px;
    }
    .input {
      width: 180px;
      margin-right: 10px;
    }
  }
  .dialogTableVisibleBut {
    display: block;
    margin: 30px 0 0 830px;
  }
  .paginationClass {
    margin: 15px 0 5px 0px;
  }
}
.pub {
  .input {
    width: 55%;
    display: inline-block;
  }
}
</style>
