<template>
  <div class="custom_page">
    <div class="content">
      <div class="toolbar">
        <el-form :model="formParams" label-width="120px">
          <el-row>
            <el-col :span="20">
              <el-row>
                <el-col :span="5">
                  <el-form-item label="客户昵称">
                    <el-input v-model="formParams.model.nickname" size="mini" />
                  </el-form-item>
                </el-col>

                <el-col :span="5">
                  <el-form-item label="手机号">
                    <el-input v-model="formParams.model.phone" size="mini" />
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="5">
                  <el-form-item label="标签">
                    <el-input v-model="formParams.model.tagId" size="mini" />
                  </el-form-item>
                </el-col> -->
                <el-col :span="8">
                  <el-form-item label="最近消费时间">
                    <el-date-picker
                      v-model="date"
                      size="mini"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      value-format="yyyy-MM-dd"
                      @change="handleChange"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-show="showMore">
                <el-col :span="5">
                  <el-form-item label="累计金额">
                    <el-col :span="11">
                      <el-input
                        v-model="formParams.model.totalConsumAmountStart"
                        size="mini"
                      />
                    </el-col>
                    <el-col
                      :span="2"
                      style="text-align: center; color: #dcdfe6"
                    >
                      -
                    </el-col>
                    <el-col :span="11">
                      <el-input
                        v-model="formParams.model.totalConsumAmountEnd"
                        size="mini"
                      />
                    </el-col>
                  </el-form-item>
                </el-col>

                <el-col :span="5">
                  <el-form-item label="购买次数">
                    <el-col :span="11">
                      <el-input
                        v-model="formParams.model.buyTimesStart"
                        size="mini"
                      />
                    </el-col>
                    <el-col
                      :span="2"
                      style="text-align: center; color: #dcdfe6"
                    >
                      -
                    </el-col>
                    <el-col :span="11">
                      <el-input
                        v-model="formParams.model.buyTimesEnd"
                        size="mini"
                      />
                    </el-col>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-form-item label-width="0">
                <el-button type="primary" size="mini" @click="query">
                  查询
                </el-button>
                <el-button plain size="mini" @click="reset"> 重置 </el-button>
                <span
                  style="
                    margin-left: 10px;
                    dispaly: inline-block;
                    font-size: 16px;
                  "
                  @click="dispalyMore"
                >
                  <i
                    :class="[
                      showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
                    ]"
                  ></i>
                </span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="content_table">
        <div class="table">
          <el-table :data="tableData.records" border style="width: 100%">
            <el-table-column prop="nickname" label="客户昵称" />
            <el-table-column prop="phone" label="手机号" />
            <el-table-column
             
              label="消费总额(元)"
              
            >
            <template slot-scope="scope">
              <span>{{'￥'}}{{scope.row.expendAmount /100 }}</span>
            </template>
            </el-table-column>
            <el-table-column prop="buyTimes" label="购买次数" />
            <el-table-column  label="余额(元)" >
              <template slot-scope="scope">
                <span>{{'￥'}}{{scope.row.money}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="lastBuyTime" label="最近消费时间" />
            <el-table-column prop="createTime" label="注册时间" />
            <el-table-column label="操作" width="300px">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="Balance(scope.row)"
                >
                  修改余额
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="details(scope.row.id)"
                >
                  详情
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="makeTag(scope.row.id)"
                >
                  打标签
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="addBlackList(scope.row)"
                >
                  {{ scope.row.status ? '取消黑名单' : '加入黑名单' }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          v-show="tableData.total > 0"
          :limit.sync="formParams.size"
          :page.sync="formParams.current"
          :total="Number(tableData.total)"
          @pagination="fetch"
        />
      </div>
      <el-dialog title="修改余额" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
  <el-form :model="form">
    <el-form-item label="余额" :label-width="formLabelWidth" >
      <el-input v-model="form.money" autocomplete="off" :disabled = true onkeyup="value=value.replace(/[^\d]/g,'')" ></el-input>
    </el-form-item>
    <el-form-item label="修改余额" :label-width="formLabelWidth" >
      <el-input v-model="form.moneys" autocomplete="off" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisiblemo">确 定</el-button>
  </div>
</el-dialog>

    </div>
    <labels
      v-if="dialog.visible"
      :dialog="dialog"
      @close="close"
      @confirm="confirm"
    />
  </div>
</template>

<script>
import Member from '@/api/Member'
import Pagination from '@/components/Pagination'
import labels from './custom-info/component/label/index'
export default {
  inject:['reload'],
  components: {
    Pagination,
    labels,
  },
  data() {
    return {
      form:{
        moneys:'',
        money:'',
        id:''
      },
      formLabelWidth: '120px',
      dialogVisible:false,
      showMore: false,
      formParams: {
        size: 10,
        current: 1,
        model: {
          buyTimesStart: '',
          buyTimesEnd: '',
          totalConsumAmountStart: '',
          totalConsumAmountEnd: '',
          nickname: '',
          tagId: '',
          lastConsumTimeStart: '',
          lastConsumTimeEnd: '',
          phone: '',
        },
      },
      date: [],
      tableData: {},
      dialog: {},
    }
  },
  created() {
    this.getList()
  },
  methods: {
    
    Balance(row) {
      console.log(row, 'uiuoiuio')
      this.dialogVisible = true
      this.form.money = row.money
      this.form.id = row.id
      console.log(this.form,'修改的数据')
    },
  async  dialogVisiblemo(){
    let plame = {
      id:this.form.id,
      money:this.form.moneys
    }
      this.dialogVisible = false
    const res = await Member.editMemberBill(plame)
    console.log(res,'resres')
    if(res.data.msg == 'ok'){
            this.$message({
              message: '修改成功',
              type: 'success'
         });
         this.reload()
        }
      
    },
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.reload()
          })
          .catch(_ => {});
      },
    async getList() {
      const res = await Member.getMemberList(this.formParams)
      const resData = res.data
      console.log(res.data.data.records, 'resresres')
      if (resData.code === 0) {
        this.tableData = resData.data
      }
    },
    getPrice(row, item, value) {
      return value / 100
    },
    query() {
      this.getList()
    },
    details(id) {
      console.log(id)
      this.$router.push({ path: '/customer-manage/custom-info', query: { id } })
    },
    makeTag(id) {
      this.dialog = {
        title: '选择标签',
        visible: true,
        id,
      }
    },
    confirm(ids) {
      const params = {
        mid: this.dialog.id,
        tagIds: ids,
      }
      const _ = this
      Member.addTag(params).then((res) => {
        if (res.data.code === 0) {
          _.$message.success('操作成功')
          _.getList()
          _.close()
        }
      })
    },
    addBlackList(item) {
      const _ = this
      _.$confirm(
        `${
          item.status
            ? '确认是否取消黑名单'
            : '加入黑名单后，对方将无法登录商城'
        }`,
        `${item.status ? '取消黑名单' : '加入黑名单'}`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        Member.forbiddenMember({ mid: item.id, status: !item.status }).then(
          (res) => {
            if (res.data.code === 0) {
              _.getList()
              _.$message.success(`成功${item.status ? '取消' : '加入'}黑名单`)
            }
          }
        )
      })
    },
    close() {
      this.dialog = {}
    },
    reset() {
      this.reload()
      this.formParams = {
        size: 10,
        current: 1,
        model: {
          buyTimesStart: '',
          buyTimesEnd: '',
          totalConsumAmountStart: '',
          totalConsumAmountEnd: '',
          nickname: '',
          tagId: '',
          lastConsumTimeStart: '',
          lastConsumTimeEnd: '',
        },
      }
    },
    fetch() {
      this.getList()
    },
    selectItem() {
      this.getList()
    },
    handleChange(value) {
      this.formParams.model.lastConsumTimeStart = (value && value[0]) || ''
      this.formParams.model.lastConsumTimeEnd = (value && value[1]) || ''
    },
    dispalyMore() {
      this.showMore = !this.showMore
    },
  },
}
</script>

<style lang='less' scoped>
.custom_page {
  padding: 10px 20px;
  box-sizing: border-box;
  .content {
    background-color: #fff;
    padding: 20px;
    .toolbar {
      padding: 10px;
    }
  }
}

/deep/ .el-table {
  th {
    background: #eef3ff;
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    border-color: #e0e5eb;
    text-align: center;
  }
  td {
    font-size: 14px;
    text-align: center;
    color: #666666;
  }
}

/deep/ .el-dialog__wrapper {
  .el-dialog__header {
    height: 70px;
    background-color: #3a68f2;
    .el-dialog__title {
      font-size: 24px;
      color: #fff;
    }
  }
}

/deep/ .el-message-box__btns .el-button {
  margin-right: 10px !important;
}
</style>

