<template>
  <div class="custom_page">
    <div class="content">
      <!-- 顶部搜索 -->
      <div class="toolbar">
        <!-- 顶部搜索 -->
        <el-form :inline="true" :model="formParams">
          <el-form-item label="客户昵称">
            <el-input v-model="formParams.name" maxlength="20" placeholder="请输入客户昵称" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="formParams.phone" maxlength="11" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="标签">
            <el-select v-model="formParams.labelId" placeholder="请选择">
              <el-option
                v-for="(item, index) in tipsList"
                :key="index"
                :label="item.labelName"
                :value="item.buyerLabelId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="最近消费时间">
            <el-date-picker
              v-model="formParams.dates"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item>
            <el-form-item label="累计消费金额">
              <el-input v-model="formParams.minMoney" maxlength="9" placeholder="请输入最小值" />
            </el-form-item>
            <el-form-item label="-">
              <el-input v-model="formParams.maxMoney" maxlength="9" placeholder="请输入最大值" />
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-form-item label="购买次数">
              <el-input v-model="formParams.minBuyers" maxlength="9" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入最小值" />
            </el-form-item>
            <el-form-item label="-">
              <el-input v-model="formParams.maxBuyers" maxlength="9" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入最大值" />
            </el-form-item>
          </el-form-item>

          <el-form-item label-width="0">
            <el-button type="primary" plain @click="search">查询</el-button>
            <el-button  type="info" plain @click="clear">重置</el-button>
            <el-button type="primary" plain @click="handleExport">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--  表格 -->
      <div class="content_table">
        <div class="table">
          <el-table
            :data="tableData"
            border
            :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
            style="width: 100%"
          >
            <el-table-column prop="name" label="客户昵称" />
            <el-table-column prop="phone" label="手机号" />
            <el-table-column prop="memberLevelName" label="会员等级" />
            <el-table-column prop="total" label="消费总额" />
            <el-table-column prop="buyers" label="购买次数" />
            <el-table-column prop="credit" label="剩余积分" />
            <el-table-column prop="time" label="最近消费时间" />
            <el-table-column prop="createTime" label="注册时间" show-overflow-tooltip/>
            <el-table-column :formatter="row=>row.registerIp?row.registerIp:'-'" label="注册IP" show-overflow-tooltip />
            <el-table-column :formatter="row=>row.lastLoginIp?row.lastLoginIp:'-'" prop="time" label="最后登录IP" show-overflow-tooltip />
            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click.native.prevent="details(scope.row)">详情</el-button>
                <el-button type="text" @click.native.prevent="setIntegral(scope.row)">设置积分</el-button>
                <el-button type="text" @click.native.prevent="makeTag(scope.row.buyerUserId)">打标签</el-button>
                <el-button type="text" size="small" @click.native.prevent="addBlackList(scope.row)">
                  {{ scope.row.ifBlack ? "取消黑名单" : "加入黑名单" }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- *************对话框开始************* -->
    <!-- 打标签 -->
    <el-dialog
      title="选择标签"
      :visible.sync="addFormDialog"
      width="30%"
      center
      :close-on-click-modal="false"
    >
      <div>
        <!-- 表单搜索 -->
        <el-form :inline="true" :model="tipsForm" class="demo-form-inline">
          <el-form-item label="标签名称">
            <el-input v-model="tipsForm.labelName" maxlength="20" placeholder="请输入标签名称" />
          </el-form-item>
          <el-form-item>
            <el-button @click="searchTips">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="text" @click="runTips">管理标签</el-button>
          </el-form-item>
        </el-form>
        <!-- 多选 -->
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="(item,index) in tipsList"
            :key="index"
            class="checkBoxStyle"
            :label="item.buyerLabelId"
          >{{ item.labelName }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addFormDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveTips">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改会员积分"
      :visible.sync="editIntegral"
      width="30%"
      center
      :close-on-click-modal="false"
      @close="credit = 0"
    >
      <el-form label-width="100px">
        <el-form-item label="修改积分">
          <el-radio-group v-model="updateWay" @change="changeWayRadio">
            <el-radio :label="true">增加</el-radio>
            <el-radio :label="false">减少</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="积分">
          <el-input-number v-if="updateWay" v-model="credit" :min="0" :max="9999999" />
          <el-input-number v-if="!updateWay" v-model="credit" :max="0" />
        </el-form-item>
        <el-form-item style="margin-top:-18px;color:#999999">
          <span>提示 : 在原有积分上增加或减少</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editIntegral = false">取 消</el-button>
        <el-button type="primary" @click="saveIntegral">确定</el-button>
      </span>
    </el-dialog>
    <member-details ref="memberDetails" @reset="reset" />
  </div>
</template>

<script>
import {
  customerMageGetAll,
  getLabels,
  customerSaveUserLabel,
  customerBlacklist,
  updateBuyerCredit,
  exportBuyerUser
} from '@/api/customerMage'
// import { getSelect } from '../../../api/renovation'
import memberDetails from './details'
// import { constants } from 'fs';
export default {
  components: { memberDetails },
  data () {
    return {
      showMore: false,
      formParams: {
        name: '', // 用户昵称
        phone: '', // 手机号
        labelId: '', // 标签id
        dates: [], // 最近消费时间日期数组
        minMoney: '', // 累计消费金额最小值
        maxMoney: '', // 累计消费金额最大值
        minBuyers: '', // 购买次数最小值
        maxBuyers: '', // 购买次数最大值
        startTime: '', // 申请开始时间
        endTime: '', // 申请结束时间
        page: 1,
        pageSize: 10
      },
      tipsForm: {
        labelName: ''
      },
      date: [],
      total: 1,
      tableData: [],
      currentPage: 1,
      dialog: {},
      tipsList: [],
      checkList: [],
      addFormDialog: false,
      editIntegral: false,
      buyerUserId: '', // 用户id
      credit: '', // 积分值 扣减积分则传负数
      updateWay: true, // 修改积分单选绑定
    }
  },
  created () {
    this.getAll(this.formParams)
    this.getSelect({ labelName: '' })
  },
  methods: {
    /**
     * 导出
     */
    async handleExport () {
      this.$message({
        message: '数据导出中，请勿重复操作！',
        type: 'success'
      })
      console.log(this.formParams, 'this.formParams')
      const res = await exportBuyerUser(this.formParams)
      if (!res) {
        return
      }
      const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
      const fileName = '用户列表.xls'
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.href = URL.createObjectURL(blob)
        elink.style.display = 'none'
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    },
    handleSizeChange (val) {
      this.formParams.pageSize = val
      this.getAll(this.formParams)
    },
    handleCurrentChange (val) {
      this.formParams.page = val
      this.getAll(this.formParams)
    },
    // 查询
    search () {
      this.total = 1
      this.formParams.page = 1
      this.getAll(this.formParams)
    },
    // 查询标签
    searchTips () {
      console.log(this.tipsForm)
      this.getSelect({ labelName: this.tipsForm.labelName })
    },
    changeWayRadio (val) {
      this.updateWay = val
    },
    // 设置积分（更新积分）
    setIntegral (row) {
      this.editIntegral = true
      this.buyerUserId = row.buyerUserId
    },
    async saveIntegral () {
      if (this.credit === '' || this.credit === undefined) {
        return this.$message('积分不能为空！')
      } else if (this.credit === 0) {
        this.editIntegral = false
      } else {
        const res = await updateBuyerCredit({
          buyerUserId: this.buyerUserId,
          credit: this.credit
        })
        if (res.code === '') {
          this.getAll(this.formParams)
          this.editIntegral = false
          this.$message.success('修改积分成功')
        }
      }
    },
    // 打标签
    async saveTips (row) {
      console.log(this.checkList)
      const res = await customerSaveUserLabel({
        buyerUserId: this.buyerUserId,
        buyerLabelIds: this.checkList
      })
      if (res.code === '') {
        this.$message({
          message: '成功',
          type: 'success'
        })
        this.checkList = []
        this.tipsForm.labelName = ''
        this.addFormDialog = false
      }
    },
    // 加入黑名单
    addBlackList (row) {
      //  "ifBlack": "是否加入黑名单 1-是 0-否"
      console.log(row.ifBlack)
      this.$confirm(
        `${
          row.ifBlack
            ? '确认是否取消黑名单'
            : '加入黑名单后，对方将无法登录商城'
        }`,
        `${row.ifBlack ? '取消黑名单' : '加入黑名单'}`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          if (!row.ifBlack) {
            customerBlacklist({
              buyerUserId: row.buyerUserId,
              ifBlack: 1
            }).then(res => {
              if (res.code === '') {
                this.$message({
                  type: 'success',
                  message: '成功!'
                })
                this.getAll(this.formParams)
              }
            })
          } else {
            customerBlacklist({
              buyerUserId: row.buyerUserId,
              ifBlack: 0
            }).then(res => {
              if (res.code === '') {
                this.$message({
                  type: 'success',
                  message: '成功!'
                })
                this.getAll(this.formParams)
              }
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 跳转标签页面
    runTips () {
      this.$router.push({
        path: '/member/tips'
      })
    },
    // 清除
    clear () {
      this.formParams = {
        name: '', // 用户昵称
        phone: '', // 手机号
        labelId: '', // 标签id
        dates: [], // 最近消费时间日期数组
        minMoney: '', // 累计消费金额最小值
        maxMoney: '', // 累计消费金额最大值
        minBuyers: '', // 购买次数最小值
        maxBuyers: '', // 购买次数最大值
        page: 1,
        pageSize: 10
      }
      this.getAll(this.formParams)
    },
    // 打标签
    makeTag (buyerUserId) {
      this.checkList = []
      this.tipsForm.labelName = ''
      this.addFormDialog = true
      this.buyerUserId = buyerUserId
    },
    details (row) {
      // this.$router.push({
      //   name: 'customerDetails',
      //   params: { buyerUserId: row.buyerUserId, orderFormid: row.orderFormid }
      // })
      this.$refs.memberDetails.getUser({ buyerUserId: row.buyerUserId, orderFormid: row.orderFormid })
    },
    // 初始化查询所有数据
    async getAll (formParams) {
      const res = await customerMageGetAll(formParams)
      this.tableData = res.data.list
      this.total = res.data.total
    },
    // 初始化查询所有标签
    async getSelect (name) {
      const res = await getLabels(name)
      this.tipsList = res.data
    },
    reset () {
      this.getAll(this.formParams)
    }
  }
}
</script>

<style lang='scss' scoped>
@import url("../../../styles/elDialog.scss");
.custom_page {
  padding: 20px;
  background: #FFFFFF;
  border-radius: 10px;
}
.checkBoxStyle {
  margin-bottom: 20px;
}
</style>

