<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="用户ID">
              <j-input placeholder="请输入用户ID" v-model="queryParam.ownerId"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="手机号">
              <j-input placeholder="请输入手机号" v-model="queryParam.ownerPhone"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="用户昵称">
              <j-input placeholder="请输入用户昵称" v-model="queryParam.nickName"></j-input>
            </a-form-item>
          </a-col>
          <!-- <a-col :md="6" :sm="8">
            <a-form-item label="会员等级">
              <a-select style="width: 100%" v-model="queryParam.chargeTypeId" placeholder="请选择状态">
                <a-select-option value="1">白银</a-select-option>
                <a-select-option value="2">黄金</a-select-option>
                <a-select-option value="5">钻石</a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" :disabled="selectedRowKeys.length === 0" icon="edit" @click="onBatchEdit">批量修改</a-button>
      <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="onReconciliation()"><a-icon type="audit" /></a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown> -->
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
        selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" v-if="selectedRowKeys.length > 0" @click="onClearSelected">清空</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      >
        <span slot="freezeIntegral" slot-scope="text, record">
          <span>{{(record.manualFreezeIntegral + record.systemFreezeIntegral).toFixed(2).replace('.00', '')}}</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <a href="javascript:;" @click="propertyDetails(record)">积分明细</a>

          <a-divider type="vertical" />
          <a href="javascript:;" @click="onEditScore(record.id)">修改数值</a>
          <a-divider type="vertical" />
          <a href="javascript:;" @click="onFreezeScore(record)">{{record.manualFreezeIntegral > 0 ? '解冻积分' : '冻结积分'}}</a>
        </span>
      </a-table>

    </div>
    <!-- table区域-end -->
    <a-modal v-model="scoreVisible" title="修改积分" @ok="submitHandleOk">
      <a-form-model ref="form" :model="scoreModel">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="调整积分：" :labelCol="{ xs: { span: 24 },sm: { span: 4 } }" :wrapperCol="{ xs: { span: 24 }, sm: { span: 20 } }" prop="score">
              <!-- <a-input-number id="inputNumber" v-model="scoreModel.score" :min="0" /> -->
              <a-radio-group v-model="scoreModel.type" @change="onCleatValue">
                <div style="display:flex;margin-bottom:10px">
                  <a-radio :style="radioStyle" value="plus">增加</a-radio>
                  <a-input-number :disabled="scoreModel.type !== 'plus'" v-model="scoreModel.plusScore" id="inputNumber" :min="1" />
                </div>
                <div style="display:flex;margin-bottom:10px">
                  <a-radio :style="radioStyle" value="minus">减少</a-radio>
                  <a-input-number :disabled="scoreModel.type !== 'minus'" v-model="scoreModel.minusScore" id="inputNumber" :min="1" />
                </div>
                <!-- <div style="display:flex">
                  <a-radio :style="radioStyle" value="equal">等于</a-radio>
                  <a-input-number :disabled="scoreModel.type !== 'equal'" v-model="scoreModel.equalScore" id="inputNumber" :min="1" />
                </div> -->
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
import { editIntegralApi, freezeIntegral } from '@/api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

const columns = [
  {
    title: '用户ID',
    dataIndex: 'ownerId',
    key: 'ownerId',
    align: 'center',
  },
  {
    title: '手机号',
    dataIndex: 'ownerPhone',
    key: 'ownerPhone',
    align: 'center',
  },
  {
    title: '用户昵称',
    dataIndex: 'nickName',
    key: 'nickName',
    align: 'center',
  },
  {
    title: '所属物业集团',
    dataIndex: 'propertyName',
    key: 'propertyName',
    align: 'center',
  },
  {
    title: '所属小区',
    dataIndex: 'platformName',
    key: 'platformName',
    align: 'center',
  },
  {
    title: '可用积分',
    dataIndex: 'availableIntegral',
    key: 'availableIntegral',
    align: 'center',
  },
  {
    title: '历史总积分',
    dataIndex: 'historyIntegral',
    key: 'historyIntegral',
    align: 'center',
  },
  {
    title: '系统冻结积分',
    dataIndex: 'systemFreezeIntegral',
    key: 'systemFreezeIntegral',
    align: 'center'
  },
  {
    title: '手动冻结积分',
    dataIndex: 'manualFreezeIntegral',
    key: 'manualFreezeIntegral',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center',
    fixed: 'right',
    width: 180,
  },
]

export default {
  name: 'PermissionListAsync',
  mixins: [JeecgListMixin],
  data() {
    return {
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      // 表头
      columns: columns,
      url: {
        list: '/property-central/integral/ownerIntegral/list',
        delete: '/property-central/property/communityReconciliation/delete',
        deleteBatch: '/property-central/property/communityReconciliation/deleteBatch',
      },
      scoreVisible: false,
      scoreModel: {
        id: '',
        type: 'plus',
        plusScore: '',
        minusScore: '',
        // equalScore: ''
      }
    }
  },
  methods: {
    onCleatValue() {
      this.scoreModel.plusScore = ''
      this.scoreModel.minusScore = ''
      // this.scoreModel.equalScore = ''
    },
    propertyDetails(row) {
      this.$router.push({
        path: `/integral/IntegralDetails?id=${row.id}&phone=${row.ownerPhone}&platformCode=${row.platformCode}`
      })
    },
    onBatchEdit() {
      this.scoreModel.id = this.selectedRowKeys.join(',')
      this.scoreVisible = true
    },
    onEditScore(id) {
      this.onClearSelected()
      this.scoreModel.id = id
      this.scoreVisible = true
    },
    submitHandleOk() {
      let score = 1
      if(this.scoreModel.type === 'plus') {
        if(this.scoreModel.plusScore) {
          score = this.scoreModel.plusScore
        } else {
          this.$message.warning('请输入增加的积分！');
          return
        }
      }
      if(this.scoreModel.type === 'minus') {
        if(this.scoreModel.minusScore) {
          score = this.scoreModel.minusScore
        } else {
          this.$message.warning('请输入减少的积分！');
          return
        }
      }
      // if(this.scoreModel.type === 'equal') {
      //   if(this.scoreModel.equalScore) {
      //     score = this.scoreModel.equalScore
      //   } else {
      //     this.$message.warning('请输入等于的积分！');
      //     return
      //   }
      // }
      editIntegralApi({
        ids: this.scoreModel.id,
        type: this.scoreModel.type,
        score
      }).then(res=> {
        this.scoreVisible = false
        this.$message.success(res.message);
        this.loadData();
        this.onCleatValue()
      })
    },
    onFreezeScore(row) {
      let _this = this
      this.$confirm({
        title: `${row.manualFreezeIntegral > 0 ? '解冻' : '冻结'}积分`,
        content: `是否确认${row.manualFreezeIntegral > 0 ? '解冻' : '冻结'}此用户积分?`,
        onOk: function () {
          freezeIntegral({id: row.id, status: row.manualFreezeIntegral > 0 ? 'normal' : 'freeze'}).then(res=> {
            _this.$message.success(res.message);
            _this.loadData();
          })
        }
      });
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>