<template>
  <div class="app-container">
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      size="small"
      :inline="true"
      label-width="120px"
    >
      <el-form-item :label="$t('关键词')">
        <el-input
          v-model.trim="queryParams.key"
          style="width: 300px"
          :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-select
          v-model="queryParams.country"
          :placeholder="$t('请选择国家')"
          clearable
          size="small"
        >
          <el-option
            v-for="nodeItem in countryList"
            :key="nodeItem.id"
            :label="isChinese ? nodeItem.titleZh : nodeItem.titleEn"
            :value="nodeItem.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('当前积分')">
        <el-row :gutter="10" style="width: 300px">
          <el-col :span="10">
            <dict-selector
              v-model="queryParams.holdScoreOperate"
              clearable
              :type="DICT_TYPE.QUANTITATIVE_RELATION_SYMBOL"
              @change="handleQuery"
            />
          </el-col>
          <el-col :span="14">
            <el-input
              v-model.trim="queryParams.holdScore"
              :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-row :gutter="10" style="width: 300px">
          <el-col :span="10">
            <dict-selector
              v-model="queryParams.usedScoreOperate"
              clearable
              :type="DICT_TYPE.QUANTITATIVE_RELATION_SYMBOL"
              @change="handleQuery"
            />
          </el-col>
          <el-col :span="14">
            <el-input
              v-model.trim="queryParams.usedScore"
              :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
        type="success"
        size="mini"
        icon="el-icon-plus"
        @click="handleScore"
        >{{ $t("操作积分") }}</el-button
      >
      <right-toolbar
        :show-search.sync="showSearch"
        @queryTable="handleQueryPagination"
      />
    </el-row>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="memberList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        width="140"
        :label="$t('会员编号')"
        align="center"
        prop="memberCode"
      ></el-table-column>
      <el-table-column :label="$t('会员名称')" align="center">
        <template #default="{ row }">
          <el-button
            type="text"
            @click="$router.push('/member/member/member-details/' + row.id)"
            >{{ isChinese ? row.memberNameZh : row.memberNameEn }}</el-button
          >
        </template></el-table-column
      >

      <el-table-column
        width="140"
        :label="$t('联系方式')"
        align="center"
        prop="mobile"
      />
      <el-table-column
        width="140"
        align="center"
        :label="$t('国家')"
        :prop="isChinese ? 'countryNameZh' : 'countryNameEn'"
      />
      <el-table-column :label="$t('当前积分')" align="center">
        <template #default="{ row }">
          <el-button
            type="text"
            @click="$router.push(
              {path:'/member/memberManagement/integralRecord',
              query: {memberCode:row.memberCode}
              })"
            >{{ row.holdScore }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column :label="$t('已兑换积分')" align="center">
        <template #default="{ row }">
          <el-button
            type="text"
            @click="$router.push({path:'/member/giftManagement/exchangeRecord',
              query: {memberCode:row.memberCode}
              })"
            >{{ row.usedScore }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('已失效积分')"
        align="center"
        prop="expiredScore"
      />
      <el-table-column :label="$t('会员注册时间')" align="center">
        <template #default="{ row }">
          {{ parseTime(row.createTime) || "/" }}</template
        >
      </el-table-column>
    </el-table>
    <!-- //分页列表 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="handleQueryPagination"
    />
    <el-dialog
      :title="$t('操作积分')"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="formQuery" label-width="80px">
        <el-form-item :label="$t('会员')">
          <el-select
            v-model="formQuery.memberIds"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in selectedMember"
              :key="item.id"
              :label="isChinese ? item.memberNameZh : item.memberNameEn"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('操作')">
          <el-radio-group v-model="formQuery.operateType">
            <el-radio
              v-for="dict in getDictDatas(DICT_TYPE.MEMBER_SCORE_OPERATE_TYPE)"
              :key="dict.value"
              :label="dict.value"
              >{{ $l(dict, "label") }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('积分')">
          <el-input
            v-model.number="formQuery.scoreCount"
            :placeholder="$t('请输入积分')"
            clearable
          />
        </el-form-item>
        <el-form-item :label="$t('备注')">
          <el-input v-model="formQuery.comment" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleScoreSubmit">{{
          $t("操作积分")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getDictDatas, DICT_TYPE } from "@/utils/dict";
import { getTradeCountryList, getMemberList } from "@/api/ecw/giftManagement";
import { operateMemberScore } from "@/api/ecw/memberManagement";

export default {
  name: "EcwMembermanagementMemberpointssummaryIndex",
  data() {
    return {
      selectedMember: [],
      countryList: [],
      cityList: [],
      dateRangeCreateTime: [],
      total: 0,
      // 显示搜索条件
      showSearch: true,
      loading: true,
      dialogVisible: false,
      memberList: [],
      formQuery: {
        comment: "",
        memberIds: [],
        operateType: null,
        scoreCount: null,
      },
      queryParams: {
        country: null,
        city: null,
        endTime: "",
        holdScore: null,
        holdScoreOperate: null,
        key: "",
        pageNo: 1,
        pageSize: 10,
        startTime: "",
        usedScore: null,
        usedScoreOperate: null,
      },
    };
  },
  computed: {
    isChinese() {
      return this.$i18n.locale === "zh_CN";
    },
  },
  created() {
    this.handleQuery();
    this.getCountryList();
  },
  activated() {
    this.handleQuery();
  },
  methods: {
    handleScore() {
      if (this.selectedMember.length > 0) {
        this.formQuery.memberIds = this.selectedMember.map((item) => item.id);
        this.dialogVisible = true;
      } else {
        this.$message({
          message: this.$t("请先选择会员再进行操作"),
          type: "warning",
        });
      }
    },
    handleScoreSubmit() {
      this.$confirm(this.$t("确认提交？"))
        .then((_) => {
          const params = { ...this.formQuery };
          operateMemberScore(params).then((res) => {
            this.dialogVisible = false;
            this.formQuery = {
              comment: "",
              memberIds: [],
              operateType: null,
              scoreCount: null,
            };
            this.$refs.multipleTable.clearSelection();
            this.selectedMember = [];
            this.$message.success(this.$t("操作成功"));
          });
        })
        .catch((_) => {});
    },
    handleClose(done) {
      this.$confirm(this.$t("确认关闭？"))
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleSelectionChange(val) {
      this.selectedMember = val;
    },
    dialogBeforeClose() {
      this.loading = true;
      this.queryParams = {
        country: null,
        city: null,
        endTime: null,
        holdScore: null,
        holdScoreOperate: null,
        key: null,
        pageNo: 1,
        pageSize: 10,
        startTime: null,
        usedScore: null,
        usedScoreOperate: null,
      };
    },
    getCountryList() {
      getTradeCountryList().then((res) => {
        this.countryList = res.data;
      });
    },
    handleQuery() {
      this.queryParams.pageNo = 1;
      const params = { ...this.queryParams };
      if (this.dateRangeCreateTime) {
        params.startTime = this.dateRangeCreateTime[0];
        params.endTime = this.dateRangeCreateTime[1];
      }
      getMemberList(params).then((res) => {
        this.loading = false;
        this.memberList = res.data.list;
        this.total = res.data.total;
      });
    },
    handleQueryPagination() {
      const params = { ...this.queryParams };
      if (this.dateRangeCreateTime) {
        params.startTime = this.dateRangeCreateTime[0];
        params.endTime = this.dateRangeCreateTime[1];
      }
      getMemberList(params).then((res) => {
        this.loading = false;
        this.memberList = res.data.list;
        this.total = res.data.total;
      });
    },
    resetQuery() {
      this.dateRangeCreateTime = [];
      this.loading = true;
      this.queryParams = {
        country: null,
        city: null,
        endTime: null,
        holdScore: null,
        holdScoreOperate: null,
        key: null,
        pageNo: 1,
        pageSize: 10,
        startTime: null,
        usedScore: null,
        usedScoreOperate: null,
      };
      this.handleQuery();
    },
  },
};
</script>
