<template>
  <el-dialog
    :title="$t('选择会员')"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="dialogBeforeClose"
  >
    <div class="app-container">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        v-show="showSearch"
        :inline="true"
        label-width="120px"
      >
        <el-form-item :label="$t('当前积分')">
          <el-row :gutter="10">
            <el-col :span="8">
              <dict-selector
                clearable
                :type="DICT_TYPE.QUANTITATIVE_RELATION_SYMBOL"
                v-model="queryParams.holdScoreOperate"
                @change="handleQuery"
              >
              </dict-selector>
            </el-col>
            <el-col :span="16">
              <el-input
                v-model.trim="queryParams.holdScore"
                :placeholder="$t('请输入数字')"
                clearable
                @keyup.enter.native="handleQuery"
                onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item :label="$t('关键词')">
          <el-input
            style="width: 300px"
            v-model.trim="queryParams.key"
            :placeholder="$t('请输入会员名称/会员编号/手机号')"
            clearable
            @keyup.enter.native="handleQuery"
            onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"
          />
        </el-form-item>
        <el-form-item :label="$t('国家')">
          <el-select
            v-model="queryParams.country"
            :placeholder="$t('请选择国家')"
            clearable
            @change="handleGetCityList($event)"
            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-select
            v-model="queryParams.city"
            :placeholder="$t('请选择城市')"
            clearable
            size="small"
          >
            <el-option
              v-for="nodeItem in cityList"
              :key="nodeItem.id"
              :label="isChinese ? nodeItem.titleZh : nodeItem.titleEn"
              :value="nodeItem.id"
            />
          </el-select>
        </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">
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="handleQueryPagination"
        ></right-toolbar>
      </el-row>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        :data="memberList"
      >
        <el-table-column type="selection" width="55" :selectable="selectable">
        </el-table-column>
        <el-table-column
          :label="$t('会员名称')"
          align="center"
          :prop="isChinese ? 'memberNameZh' : 'memberNameEn'"
        ></el-table-column>
        <el-table-column
          width="140"
          :label="$t('会员编号')"
          align="center"
          prop="id"
        ></el-table-column>
        <el-table-column
          width="140"
          :label="$t('手机号')"
          align="center"
          prop="mobile"
        ></el-table-column>
        <el-table-column
          width="140"
          align="center"
          :label="$t('国家')"
          :prop="isChinese ? 'countryNameZh' : 'countryNameEn'"
        ></el-table-column>
        <el-table-column
          :label="$t('城市')"
          align="center"
          :prop="isChinese ? 'cityNameZh' : 'cityNameEn'"
        ></el-table-column>
        <el-table-column
          :label="$t('当前积分')"
          align="center"
          prop="holdScore"
        ></el-table-column>
      </el-table>
      <!-- //分页列表 -->
      <span v-show="selectedMember.memberList.length > 0"
        >{{ $t("已选择:") }} {{ selectedMember.memberName }} {{ $t("共") }}
        <span style="color: red"> {{ selectedMember.memberList.length }} </span>
        {{ $t("人") }}</span
      >
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="handleQueryPagination"
      />
    </div>
    <div slot="footer">
      <el-button @click="dialogBeforeClose">取 消</el-button>
      <el-button type="primary" @click="transferSelectMember">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getDictDatas, DICT_TYPE } from "@/utils/dict";
import {
  getCityList,
  getTradeCountryList,
  getMemberList,
} from "@/api/ecw/giftManagement";
import { color } from "echarts/lib/export";

export default {
  name: "chooseMember",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    memberSelectList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    dialogVisible(val) {
      if (val == true) {
        this.handleQuery();
      }
    },
    memberSelectList(val) {
      this.selectedMember.memberList = val;
    },
  },
  data() {
    return {
      selectedMember: { memberList: [], memberName: "" },
      countryList: [],
      cityList: [],
      total: 0,
      loading: true,
      memberList: [],
      // 显示搜索条件
      showSearch: true,
      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: {
    selectable(row, index) {
      if (this.memberSelectList.length > 0) {
        return this.memberSelectList.some((item) => {
          return item.id != row.id;
        });
      } else {
        return true;
      }
    },
    handleSelectionChange(val) {
      this.selectedMember.memberList = val;
      let arraryMemberName = [];
      if (val) {
        this.selectedMember.memberList.forEach((element) => {
          if (this.isChinese) {
            arraryMemberName.push(element.memberNameZh);
          } else {
            arraryMemberName.push(element.memberNameEn);
          }
        });
      }
      this.selectedMember.memberName = arraryMemberName.join("、");
    },
    transferSelectMember() {
      this.dialogBeforeClose();
      this.$emit("transferSelectMemberInfo", this.selectedMember.memberList);
    },
    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,
      };
      // this.dialogVisible = false;
      this.$emit("update:dialogVisible", false);
    },
    getCountryList() {
      getTradeCountryList().then((res) => {
        this.countryList = res.data;
      });
    },
    handleGetCityList(id) {
      if (id) {
        let params = {
          id: id,
        };
        getCityList(params).then((res) => {
          this.cityList = res.data;
        });
      } else {
        this.cityList = [];
      }
    },
    handleQuery() {
      this.queryParams.pageNo = 1;
      let params = { ...this.queryParams };
      getMemberList(params).then((res) => {
        this.loading = false;
        this.memberList = res.data.list;
        this.total = res.data.total;
      });
    },
    handleQueryPagination() {
      let params = { ...this.queryParams };
      getMemberList(params).then((res) => {
        this.loading = false;
        this.memberList = res.data.list;
        this.total = res.data.total;
      });
    },
    resetQuery() {
      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>
