<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="68px">
      <el-form-item :label="$t('礼品名称')">
        <el-input v-model.trim="queryParams.title" :placeholder="$t('请输入礼品名称')" clearable onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('兑换积分')">
        <el-row :gutter="10">
          <el-col :span="8">
            <dict-selector v-model="queryParams.pointsRequireSymbol" clearable :type="DICT_TYPE.QUANTITATIVE_RELATION_SYMBOL" @change="handleQuery" />
          </el-col>
          <el-col :span="16">
            <el-input v-model.trim="queryParams.pointsRequire" :placeholder="$t('请输入数字')" clearable onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" @keyup.enter.native="handleQuery" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item :label="$t('领取方式')" prop="level">
        <dict-selector v-model="queryParams.pickMethod" clearable :type="DICT_TYPE.WAY_OF_RECEIVING" @change="handleQuery" />
      </el-form-item>

      <el-form-item :label="$t('提货点')" prop="level">
        <el-select v-model="queryParams.nodeId" :placeholder="$t('请选择提货点')" clearable size="small" @change="handleQuery">
          <el-option v-for="nodeItem in nodeList" :key="nodeItem.id" :label="isChinese ? nodeItem.titleZh : nodeItem.titleEn" :value="nodeItem.id" />
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('状态')" prop="level">
        <dict-selector v-model="queryParams.status" clearable :type="DICT_TYPE.GIFT_STATUS" @change="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('备注')" prop="level">
        <el-input v-model.trim="queryParams.remark" :placeholder="$t('请输入备注')" clearable onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('剩余数量')">
        <el-row :gutter="10">
          <el-col :span="8">
            <dict-selector v-model="queryParams.quantityRemainSymbol" clearable :type="DICT_TYPE.QUANTITATIVE_RELATION_SYMBOL" @change="handleQuery" />
          </el-col>
          <el-col :span="16">
            <el-input v-model.trim="queryParams.quantityRemain" :placeholder="$t('请输入数字')" clearable onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" @keyup.enter.native="handleQuery" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item :label="$t('创建时间')">
        <el-date-picker v-model="dateRangeCreateTime" type="datetimerange" clearable placement="bottom-start" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>
    <el-row class="mb8">
      <el-button v-hasPermi="['ecw:giftManagement:add']" type="success" size="mini" icon="el-icon-plus" @click="handleAddReward">{{ $t("添加礼品") }}</el-button>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>
    <!-- 礼品列表 -->
    <el-table ref="multipleTable" v-loading="loading" :data="list">
      <el-table-column width="140" :label="$t('礼品ID')" align="center" prop="code" />
      <el-table-column :label="$t('礼品名称')" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleView(scope.row)">{{ isChinese ? scope.row.titleZh : scope.row.titleEn }}</el-button>
        </template>
      </el-table-column>
      <el-table-column :label="$t('图片')">
        <template slot-scope="scope">
          <el-image :src="firstImg(isChinese ? scope.row.imgZh : scope.row.imgEn)" style="width: 50px; height: 50px">{{ $t("无") }}</el-image>
        </template>
      </el-table-column>
      <el-table-column width="100" :label="$t('开始日期')">
        <template #default="{ row }">
          {{ parseTime(row.startTime, "{y}-{m}-{d}") || "/" }}
        </template>
      </el-table-column>
      <el-table-column width="100" :label="$t('结束日期')">
        <template #default="{ row }">
          {{ parseTime(row.endTime, "{y}-{m}-{d}") || "/" }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('兑换积分')" prop="pointsRequire" />
      <el-table-column :label="$t('领取方式')" align="center" prop="pickMethod">
        <template #default="{ row }">
          {{ handlePickMethod(row.pickMethod) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('提货点')" align="center">
        <template #default="{ row }">
          {{ isChinese ? handleExchangeNodeId(row.nodeId).titleZh : handleExchangeNodeId(row.nodeId).titleEn }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('允许兑换次数')" align="center" prop="allowCount" />
      <el-table-column :label="$t('状态')">
        <template slot-scope="{ row }">
          {{ isChinese ? handleRewardsStatus(row.status).label : handleRewardsStatus(row.status).labelEn }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('备注')" align="center" width="200">
        <template slot-scope="{ row }">
          <el-tooltip popper-class="rewardstToolTip" :content="isChinese ? row.remarkZh : remarkEn" placement="top">
            <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
              {{ isChinese ? row.remarkZh : remarkEn }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column :label="$t('已兑换次数')" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="
              $router.push({
                path: '/member/giftManagement/exchangeRecord',
                query: { rewardCode: scope.row.code }
              })
            "
            >{{ scope.row.exchangeCount }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column :label="$t('剩余数量')" align="center" prop="quantityRemain" />
      <el-table-column width="220px" align="center" :label="$t('操作')" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-hasPermi="['ecw:giftManagement:check']" size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">{{ $t("查看") }}</el-button>
          <el-button v-hasPermi="['ecw:giftManagement:close']" size="mini" type="text" icon="el-icon-edit" :disabled="scope.row.status == '2' || scope.row.status == '3'" @click="handleCloseStatus(scope.row)">{{ $t("关闭") }}</el-button>
          <el-button v-hasPermi="['ecw:giftManagement:copy']" size="mini" type="text" icon="el-icon-edit" @click="copyRewards(scope.row)">{{ $t("复制") }}</el-button>
          <el-button v-hasPermi="['ecw:giftManagement:postpone']" size="mini" type="text" icon="el-icon-edit" :disabled="scope.row.status != '1'" @click="handlePostpone(scope.row)">{{ $t("延期") }}</el-button>
          <el-button v-hasPermi="['ecw:giftManagement:delete']" size="mini" type="text" icon="el-icon-delete" :disabled="scope.row.status != '2'" @click="handleDelete(scope.row)">{{ $t("删除") }}</el-button>
          <el-button v-has-permi="['ecw:giftManagement:edit']" size="mini" type="text" :disabled="scope.row.status != '2' && scope.row.status != '1'" icon="el-icon-collection" @click="editRewards(scope.row)">{{ $t("编辑") }}</el-button>
          <el-button v-has-permi="['ecw:giftManagement:enable']" size="mini" type="text" icon="el-icon-user" :disabled="scope.row.status == '1' || scope.row.status == '3' || scope.row.status == '4'" @click="handleLaunchRewards(scope.row)">{{ $t("启用") }}</el-button>
          <el-button v-has-permi="['ecw:giftManagement:exchange']" :disabled="scope.row.status == '3' || scope.row.status == '4'" size="mini" type="text" icon="el-icon-user" @click="handleExchange(scope.row)">{{ $t("兑换") }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- //分页列表 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows" @pagination="getList" />
    <!-- 查看 编辑 新增弹窗 -->
    <operating-gift ref="operatingGift" :title="operatingPagetitle" :rewards-details="rewardsItem" :show.sync="dialogVisible" :node-list="nodeList" />
    <el-dialog :title="$t('提示')" :visible.sync="dialogPostponeVisible" width="30%">
      <el-row class="mb8">{{ $t("请选择延期时间") }}</el-row>
      <el-date-picker v-model="postponeDatetime" type="datetime" clearable style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" :placeholder="$t('请选择时间')" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPostponeVisible = false">{{ $t("取 消") }}</el-button>
        <el-button type="primary" @click="confirmPostponeRewards">{{ $t("确 定") }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getGiftList, deleteRewards, copyRewardsAPI, changeRewardsStatus, delayRewards, getWarehouseList } from "@/api/ecw/giftManagement"
import { getDictDatas, DICT_TYPE } from "@/utils/dict"
import { parseTime } from "../../../utils/ruoyi"
import OperatingGift from "@/views/ecw/giftManagement/components/operatingGift.vue"
import { uploadFile } from "@/api/infra/file"
import ImageUpload from "@/components/ImageUpload"
export default {
  name: "EcwGiftmanagementIndex",
  components: {
    OperatingGift
  },
  data() {
    return {
      getDictDatas,
      env: process.env.NODE_ENV,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 礼品列表
      list: [],
      // 弹出层标题
      operatingPagetitle: "",
      // 是否显示弹出层
      dialogVisible: false,
      rewardsItem: {},
      dateRangeCreateTime: [],
      postponeDatetime: "",
      postponeRewardsID: "",
      dialogPostponeVisible: false,
      // 查询参数
      queryParams: {
        page: 1,
        rows: 10,
        title: null,
        pointsRequire: null,
        pointsRequireSymbol: null,
        pickMethod: null,
        nodeId: null,
        status: "1",
        remark: null,
        quantityRemainSymbol: null,
        quantityRemain: null,
        beginCreateTime: null,
        endCreateTime: null
      },
      // 网点
      nodeList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  computed: {
    isChinese() {
      return this.$i18n.locale === "zh_CN"
    }
  },
  created() {
    this.getList()
    this.getNodeList()
  },
  activated() {
    this.getList()
  },
  watch: {
    dialogVisible(val, old) {
      if (old && !val) {
        this.getList()
      }
    }
  },
  methods: {
    arraysEqual(arr1, arr2) {
      return arr1.filter((current) => {
        return !!arr2.find((item) => item == current.value.toString())
      })
    },
    handleRewardsStatus(status) {
      return this.getDictDatas(DICT_TYPE.GIFT_STATUS).filter((dicItem) => dicItem.value.toString() == status)[0]
    },
    firstImg(imgString) {
      if (!imgString || imgString == "") return imgString
      const imgs = imgString.split(",")
      return imgs.length ? imgs[0] : null
    },
    handlePickMethod(pickMethod) {
      const pickMethodLabel = []
      if (this.isChinese) {
        this.arraysEqual(this.getDictDatas(DICT_TYPE.WAY_OF_RECEIVING), pickMethod.split(",")).forEach((element) => {
          pickMethodLabel.push(element.label)
        })
      } else {
        this.arraysEqual(this.getDictDatas(DICT_TYPE.WAY_OF_RECEIVING), pickMethod.split(",")).forEach((element) => {
          pickMethodLabel.push(element.labelEn)
        })
      }
      return pickMethodLabel.join()
    },
    handleExchangeNodeId(nodeId) {
      return this.nodeList.filter((nodeItem) => nodeItem.id == nodeId)[0]
    },
    handleAddReward() {
      this.rewardsItem = {}
      this.dialogVisible = true
      this.operatingPagetitle = "3"
    },
    handleExchange(row) {
      this.$router.push({
        path: "/member/giftManagement/bulkExchange",
        query: { rewardsID: row.id }
      })
    },
    /** 延期按钮操作 */
    handlePostpone(row) {
      this.postponeRewardsID = row.id
      this.dialogPostponeVisible = true
    },
    confirmPostponeRewards() {
      this.dialogPostponeVisible = false
      delayRewards({
        id: this.postponeRewardsID,
        endTime: this.postponeDatetime
      }).then((res) => {
        this.getList()
        this.$message.success(this.$t("延期成功"))
      })
    },
    /** 关闭按钮操作 */
    handleCloseStatus(row) {
      this.$confirm(this.$t("是否关闭当前礼品？"), this.$t("提示"), {
        confirmButtonText: this.$t("确定"),
        cancelButtonText: this.$t("取消"),
        type: "warning"
      })
        .then((_) => {
          return changeRewardsStatus({ id: row.id, status: "3" })
        })
        .then((res) => {
          this.getList()
          this.$message.success(this.$t("关闭成功"))
        })
        .catch((_) => {
          // this.queryAllData();
        })
    },
    // 启用礼品状态
    handleLaunchRewards(row) {
      this.$confirm(this.$t("是否启用当前礼品？"), this.$t("提示"), {
        confirmButtonText: this.$t("确定"),
        cancelButtonText: this.$t("取消"),
        type: "warning"
      })
        .then(() => {
          changeRewardsStatus({ id: row.id, status: "1" }).then((r) => {
            this.$message.success(this.$t("启用成功"))
            this.getList()
          })
        })
        .catch(() => {})
    },
    getNodeList() {
      let params = { title: "" }
      getWarehouseList(params).then((res) => {
        this.nodeList = res.data
      })
    },
    getList() {
      this.loading = true
      // 处理查询参数
      const params = { ...this.queryParams }
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime", false)
      getGiftList(params).then((res) => {
        this.loading = false
        this.list = res.data.list
        this.total = res.data.total
      })
    },

    // 新增潜在客户
    handleAddPotential() {
      this.$refs.potentialCustom.dialogTableVisible = true
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm(this.$t("是否确认删除此礼品"))
        .then(function () {
          return deleteRewards({ id: row.id })
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess(this.$t("删除成功"))
        })
        .catch(() => {})
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$nextTick(() => {
        this.queryParams.page = 1
        this.getList()
      })
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.dialogVisible = true
      this.operatingPagetitle = "1"
      this.rewardsItem = row
    },
    /** 编辑按钮操作 */
    editRewards(row) {
      this.dialogVisible = true
      this.operatingPagetitle = "2"
      this.rewardsItem = row
    },

    /** 复制按钮操作 */
    copyRewards(row) {
      copyRewardsAPI(row.id).then((res) => {
        this.$modal.msgSuccess(this.$t("复制成功"))
        this.handleQuery()
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreateTime = []
      this.queryParams = {
        page: 1,
        rows: 10,
        number: null,
        name: null,
        level: null,
        source: null,
        customerService: null,
        status: "1",
        department: null,
        creditLevel: null,
        country: null,
        memberCode: null,
        memberName: null,
        memberMobile: null,
        memberAreaCode: null
      }
      this.handleQuery()
    }
  }
}
</script>
<style>
.rewardstToolTip {
  max-width: 90%;
}
</style>