<template>
  <div v-loading="loading">
    <div class="white-box">
      <calc-qy-filter :filter="handleFilter"></calc-qy-filter>
      <el-form label-position="left" inline class="table-box" v-show="showData.REAL_NAME !== null" label-width="150px">
        <el-form-item label="会员姓名" style="display: block;">
          <span>{{showData.REAL_NAME}}</span>
        </el-form-item>
        <el-form-item label="结算时状态">
          <span>{{showData.LAST_STATUS_NAME}}</span>
        </el-form-item>
        <el-form-item label="结算时会员级别">
          <span>{{showData.LAST_DEC_LV_NAME}}</span>
        </el-form-item>
        <el-form-item label="结算时会员聘级" style="display: block;">
          <span>{{showData.LAST_EMP_LV_NAME}}</span>
        </el-form-item>
        <el-form-item label="一市场区域业绩">
          <span>{{showData.QY_1L}}</span>
        </el-form-item>
        <el-form-item label="一市场结余业绩">
          <span>{{showData.SURPLUS_1L}}</span>
        </el-form-item>
        <el-form-item label="二市场区域业绩">
          <span>{{showData.QY_2L}}</span>
        </el-form-item>
        <el-form-item label="二市场结余业绩">
          <span>{{showData.SURPLUS_2L}}</span>
        </el-form-item>
        <el-form-item label="三市场区域业绩">
          <span>{{showData.QY_3L}}</span>
        </el-form-item>
        <el-form-item label="三市场结余业绩">
          <span>{{showData.SURPLUS_3L}}</span>
        </el-form-item>
        <el-form-item label="四市场区域业绩">
          <span>{{showData.QY_4L}}</span>
        </el-form-item>
        <el-form-item label="四市场结余业绩">
          <span>{{showData.SURPLUS_4L}}</span>
        </el-form-item>
        <el-form-item label="五市场区域业绩">
          <span>{{showData.QY_5L}}</span>
        </el-form-item>
        <el-form-item label="五市场结余业绩">
          <span>{{showData.SURPLUS_5L}}</span>
        </el-form-item>
        <el-form-item label="虚拟零售区区域业绩">
          <span>{{showData.QY_LS}}</span>
        </el-form-item>
        <el-form-item label="虚拟零售区结余业绩">
          <span>{{showData.SURPLUS_LS}}</span>
        </el-form-item>
        <el-form-item label="应发区域津贴">
          <span>{{showData.SHOULD_QY}}</span>
          <el-button type="primary" size="mini" v-if="false" @click="handleResendShow">补发
                     <!--v-if="!showData.ON_AUDIT && (showData.BONUS_QY <= 0 && showData.SHOULD_QY > 0) && permission.hasPermission(`bonus/resend-qy`)"-->
          </el-button>
          <el-button type="info" size="mini" v-if="showData.ON_AUDIT==='0'">正在审核中</el-button>
        </el-form-item>
        <el-form-item label="实发区域津贴">
          <span>{{showData.BONUS_QY}}</span>
        </el-form-item>
      </el-form>
      <el-dialog title="补发区域津贴" v-if="false" :visible.sync="resendDialogShow" v-loading="resendDialogLoading">
        <el-form :model="resendModel">
          <el-form-item label="用户编号">
            <span>{{filterData.userName}}</span>
          </el-form-item>
          <el-form-item label="补发金额">
            <span>{{showData.SHOULD_QY}}</span>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="resendModel.remark"></el-input>
          </el-form-item>
          <el-button type="primary" @click="handleResend">补发</el-button>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import network from '@/utils/network'
  import tool from '@/utils/tool'
  import CalcQyFilter from './calc-qy-filter'
  import baseInfo from '@/utils/baseInfo'
  import permission from '@/utils/permission'

  export default {
    name: 'bonus_calc-qy',
    components: {CalcQyFilter},
    mounted() {
      this.loading = false
    },
    data() {
      return {
        showData: {
          REAL_NAME: null,
        },
        filterData: {
          userName: '',
          periodNum: 0,
        },
        resendModel: {
          userName: '',
          periodNum: 0,
          remark: '',
        },
        loading: true,
        permission: permission,
        baseDecLevels: baseInfo.decLevels(),
        baseEmpLevels: baseInfo.empLevels(),
        resendDialogShow: false,
        resendDialogLoading: false,
      }
    },
    methods: {
      handleFilter(model) {
        this.loading = true
        this.filterData = model
        this.getData()
      },
      handleResendShow() {
        this.resendDialogShow = true
      },
      /*handleResend() {
        this.$message({
          message: '正在申请发放请稍后',
          type: 'info'
        })
        this.resendDialogLoading = true
        this.resendModel.userName = this.filterData.userName
        this.resendModel.periodNum = this.filterData.periodNum
        network.postData(`bonus/resend-qy`, this.resendModel).then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
          this.resendDialogShow = false
          this.resendDialogLoading = false
          this.getData()
        }).catch(error => {
          this.resendDialogShow = false
          this.resendDialogLoading = false
        })
      },*/
      getData() {
        network.getData(`bonus/calc-qy`, this.filterData).then(response => {
          if (response) {
            this.showData = response
          }
          this.loading = false
        }).catch(error => {
          this.loading = false
        })
      },
    }
  }

</script>

<style scoped>
  .table-box .el-form-item__label {
    width: 100px;
    color: #99a9bf;
  }

  .table-box .el-form-item {
    width: 45%;
    padding: 5px 15px;
    margin-right: 0;
    margin-bottom: 0;
  }

  .table-box .el-form-item:hover {
    background: #f5f5f5;
  }
</style>