<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <div v-if="topList[8].changed==true">
      <div class="thetopbox">
        <div class="title">
          <div class="lines" />
          <div class="title-style">{{ '分红资金池配置' }}</div>
        </div>
        <el-form style="margin-top: 15px;margin-left: 22px" label-width="100px">
          <el-row>
            <el-col :span="6">
              <el-form-item :label="'选择日期'" prop="memberName">
                <el-date-picker
                  v-model="tableData.settleMonth"
                  type="month"
                  placeholder=""
                  value-format="yyyy-MM"
                  @change="changeTimes"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item :label="'预计发放总数'" prop="memberName">
                <el-input
                  v-model="tableData.expectShareTotal"
                  disabled="disabled"
                  clearable
                  placeholder=""
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item :label="'实际发放总数'" prop="memberName">
                <el-input
                  v-model="tableData.realShareTotal"
                  disabled="disabled"
                  clearable
                  placeholder=""
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!--      </el-form>-->
          <!--          </div>-->
          <!--        </el-collapse-transition>-->
          <!--        <el-row style="margin-left: 20px">-->
          <!--          <el-col :span="4">-->
          <!--            <div class="searchbox">-->
          <!--              <el-button-->
          <!--                class="searchbtn"-->
          <!--                @click="getMemberList"-->
          <!--              > {{ '搜索' }}</el-button>-->
          <!--              <el-button @click="reChongzhi"> {{ '重置' }}</el-button>-->
          <!--            </div>-->
          <!--          </el-col>-->
          <!--          <div class="openClose" @click="changeActive">-->
          <!--            <i-->
          <!--              :class="isActive ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"-->
          <!--            />-->
          <!--            <div>{{ isActive ? '点击收起' : '点击展开' }}</div>-->
          <!--          </div>-->
          <!--        </el-row>-->
        </el-form>
      </div>
      <div class="main">
        <div class="title" style="margin-bottom: 20px">
          <div class="lines" />
          <div class="title-style">{{ '分红实发配置' }}</div>
        </div>
        <div class="maintable">
          <el-table
            ref="table"
            :data="tableData.cuMemberShareDetailList"
            height="445px"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" />
            <!-- <template>
              <el-table-column
                v-for="(col, index) in colums"
                align="center"
                :prop="col"
                :label="col"
                :key="index"
              />
            </template> -->
            <el-table-column
              align="center"
              width="100"
              prop="pkAwardsVal"
              :label="'真实奖衔'"
            />
            <el-table-column
              align="center"
              prop="promoteTotal"
              :label="'晋升总数'"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.promoteTotal" class="inputs" disabled="disabled" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="reachTotal"
              :label="'达标人数'"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.reachTotal" class="inputs" disabled="disabled" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="expectShareIncome"
              :label="'预发金额'+`(${isOther()})`"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.expectShareIncome" class="inputs" disabled="disabled" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="expectShareSubtotal"
              :label="'预发合计'+`(${isOther()})`"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.expectShareSubtotal" class="inputs" disabled="disabled" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="realShareIncome"
              :label="'实发金额'+'($)'"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.realShareIncome" class="inputs" type="number" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="realShareSubtotal"
              :label="'实发合计'+`(${isOther()})`"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.realShareSubtotal" class="inputs" disabled="disabled" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="footer">
          <div style="margin: 0 auto">
            <el-button
              v-hasButtons="['bonusConfigReset']"
              class="thebtn"
              style="background-color: #ccc;color: #fff"
              @click="cancelCz"
            > {{ '重置' }}</el-button>
            <el-button
              v-hasButtons="['bonusConfigConfirm']"
              type="primary"
              style="margin-left: 40px"
              class="thebtn"
              @click="saveSubmit"
            > {{ '确认' }}</el-button>
          </div>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getMemberList"
      />
      <policyMoneyDetails
        ref="policyMoneyDetails"
        :is-policy="isPolicy"
        @handleClose="handleClose"
      />
    </div>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import policyMoneyDetails from '@/views/information/policyMoney/policyMoneyDetails'
import {
  getvertexValue,
  getmemberTeamList,
  getaccountStatus,
  getsalletStatus,
  getattestation,
  getYesnouploadsList,
  getorderStatus
} from '@/api/member'
import {
  getgradeRanglist,
  getAwardsListChiose,
  getRegistration, getCardType, getSex
} from '@/api/level'
import { findAllArea } from '@/api/product'
import { areaList } from '@/api/site'
import { getEnableStatus, getEYesNoList } from '@/api/configManage'
import { policyList, queryShareBonus, saveShareBonus } from '@/api/specialBusiness'
import { Message } from 'element-ui'
import { getRouters } from '@/api/settle'
import { isOther } from '@/utils/numberToCurrency'
export default {
  name: 'Jcyw',
  components: {
    topBar,
    policyMoneyDetails
  },
  data() {
    return {
      isPolicy: false,
      areaData: [],
      regionParams: {
        label: 'name',
        value: 'id',
        children: 'children',
        expandTrigger: 'hover'
      },
      moren: 'bonusConfig',
      topList: [
        {
          name: '空单注册',
          path: 'emptyOrder',
          changed: false
        },
        {
          name: '修改直推',
          path: 'modifyDirectpush',
          changed: false
        },
        {
          name: '修改安置',
          path: 'modifyPlacement',
          changed: false
        },
        {
          name: '注水业绩',
          path: 'waterPv',
          changed: false
        },
        {
          name: '修改编号',
          path: 'modifyCode',
          changed: false
        },
        {
          name: '真实奖衔控制',
          path: 'awardControl',
          changed: false
        },
        {
          name: '修改结算国家',
          path: 'modifySettleCountry',
          changed: false
        },
        {
          name: '政策币业务',
          path: 'policyMoney',
          changed: false
        }, {
          name: '分红配置',
          path: 'bonusConfig',
          changed: false
        }
      ],
      colums: [],
      checkLabels: [],
      checkList: [],
      rzsj: '', // 认证时间

      cjsj: '', // 创建时间
      zfsj: '', // 支付时间
      multipleSelection: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        settleMonth: ''
      },
      address: '',
      tableData: [],
      // 折叠搜索框
      isActive: false,
      total: 0,
      gradeRangList: [], // 注册等级
      awardsList: [], // 真实奖衔
      vertexList: [], // 隶属体系
      memberteamList: [], // 隶属团队
      registerList: [], // 注册权限
      accountStatus: [], // 账户状态
      salletStatus: [], // 钱包状态
      tattestation: [], // 实名认证 是否认证
      yesnouploadsList: [], // 营业执照 是否上传
      orderStatusList: [], // 订单状态
      agentGradeList: [], // 代理等级
      directPushNumber: '', // 修改直推次数

      sexList: [],
      cardList: [],
      getStatusList: [],
      agreeList: [],
      creationTime: ''
    }
  },
  computed: {
    canDo() {
      return this.checkList.length > 0
    }
  },
  created() {
    var date = new Date()
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    month = (month < 10 ? '0' + month : month)
    const dates = year + '-' + month
    this.queryParams.settleMonth = dates
    // 查询会员信息
    this.getMemberList()
    this.getUserRoute()
  },
  methods: {
    isOther,
    getUserRoute() {
      getRouters().then((res) => {
        res.data.forEach((item) => {
          this.topList.forEach((items) => {
            if (item.path == items.url) {
              items.changed = true
            }
          })
        })
      })
    },
    cancelCz() {
      this.tableData.cuMemberShareDetailList.forEach((item) => {
        item.realShareIncome = 0.00
      })
      this.tableData.settleMonth = ''
      this.$forceUpdate()
    },
    saveSubmit() {
      const data = this.tableData
      const arr = JSON.parse(JSON.stringify(this.tableData))
      delete arr.expectShareTotal
      delete arr.realShareTotal
      saveShareBonus(arr).then((res) => {
        if (res.code == '200') {
          Message({
            message: res.msg,
            type: 'success'
          })
        } else {
          Message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    handleClose() {
      this.isPolicy = false
    },
    getEnable_status() {
      getEnableStatus().then((res) => {
        this.getStatusList = res.data
      })
    },
    getEYesNoList() {
      getEYesNoList().then((res) => {
        this.agreeList = res.data
      })
    },
    hrefs() {
      // console.error('11')
      this.isPolicy = true
      // this.$router.push({
      //   name: 'policyMoneyDetails',
      //   query: {
      //     addAwards: 0,
      //   },
      // })
    },
    // 商品分类赋值
    flChange(value) {
      this.queryParams.pkCounty = ''
      this.queryParams.pkProvince = ''
      this.queryParams.pkCity = ''

      this.queryParams.pkProvince = value[0]
      this.queryParams.pkCity = value[1]
      this.queryParams.pkCounty = value[2]
    },
    changeTime(val) {
      if (val) {
        this.queryParams.startDate = val[0]
        this.queryParams.endDate = val[1]
      }
    },
    changeTime1(val) {
      this.queryParams.startCreationTime = val[0]
      this.queryParams.endCreationTime = val[1]
    },
    changeTime2(val) {
      this.queryParams.startPayTime = val[0]
      this.queryParams.endPayTime = val[1]
    },
    // 性别
    getSexs() {
      getSex().then((res) => {
        this.sexList = res.data
      })
    },
    // 身份类型
    getCardTypes() {
      getCardType().then((res) => {
        this.cardList = res.data
      })
    },
    getAllArea() {
      areaList().then((res) => {
        this.areaData = res.data
      })
    },
    exports() {
      this.download(
        '/member/manage/update-policy-currency/export',
        { ...this.params },
        `${'政策币业务'}-${new Date().getTime()}.xlsx`
      )
    },
    getMenu(e, id) {
      if (e && id == 0) {
        this.menuList.forEach((item) => {
          this.$set(item, 'checked', true)
        })
      } else if (!e && id == 0) {
        this.menuList.forEach((item) => {
          this.$set(item, 'checked', false)
        })
      }
    },
    // 查询会员信息
    getMemberList() {
      queryShareBonus(this.queryParams).then((res) => {
        // this.total = res.total
        this.tableData = res.data
      })
    },
    changeTimes(val) {
      this.queryParams.settleMonth = val
      this.getMemberList()
    },
    // 订单状态
    getorderStatus() {
      getorderStatus().then((res) => {
        this.orderStatusList = res.data
      })
    },
    // 营业执照-是否上传
    getYesnouploadsList() {
      getYesnouploadsList().then((res) => {
        this.yesnouploadsList = res.data
      })
    },
    // 认证下拉选
    getattestation() {
      getattestation().then((res) => {
        this.tattestation = res.data
      })
    },
    // 钱包状态下拉选
    getsalletStatus() {
      getsalletStatus().then((res) => {
        this.salletStatus = res.data
      })
    },
    // 账户状态下拉选
    getaccountStatus() {
      getaccountStatus().then((res) => {
        this.accountStatus = res.data
      })
    },
    // 注册权限下拉选
    getRegistration() {
      getRegistration().then((res) => {
        this.registerList = res.data
      })
    },
    // 隶属团队下拉选
    getmemberTeamList() {
      getmemberTeamList().then((res) => {
        this.memberteamList = res.rows
      })
    },
    // 隶属体系下拉选 取pkid和name
    getvertexValue() {
      getvertexValue().then((res) => {
        this.vertexList = res.data
      })
    },
    // 真实奖衔下拉选
    getAwardsListChiose() {
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
    },
    // 注册等级下拉
    getgradeRanglist() {
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data
      })
    },

    // 展开折叠
    changeActive() {
      this.isActive = !this.isActive
    },
    // 重置
    reChongzhi() {
      this.cjsj = []
      this.zfsj = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        memberCode: '', // 会员编号
        memberName: '', // 会员姓名
        phone: '' // 联系方式
      }
      // this.$refs.form.clearValidate()
      // this.$refs.form.resetFields()
      this.getMemberList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input .el-input__inner{
  text-align: center;
}
::v-deep .inputs .el-input__inner{
  height: 28px;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #CCCCCC;
  line-height: 28px;
  //padding: 0px;
  width: auto;
  text-align: center;
  padding: 0 10px;
}
.footer {
  box-shadow: 0px -3px 20px 0px rgba(204,204,204,0.5);
  border-radius: 0px 0px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding: 15px 0;
  background: #fff;
  .thebtn {
    width: 120px;
    height: 38px;
  }
}
.title-style{
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
}
.lines{
  width: 5px;
  height: 19px;
  background: #c8161d;
  margin-right: 10px;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}
.title{
  padding:10px 0 10px 0;
  display: flex;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
::v-deep .el-cascader{
  width: 100%;
}
::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 100%;
}
::v-deep .lefts .el-form-item__content{
  margin-left: 34px!important;
}
::v-deep .el-select{
  width: 100%;
}
.kuang {
  padding: 5px 20px;
  background: rgba(255, 255, 255, 0);
  border-radius: 4px;
  border: 1px solid #cccccc;
}
.heji {
  margin-top: 10px;
  .dis {
    display: flex;
    justify-content: right;
    padding: 5px 10px;
    font-size: 14px;
    color: #333333;
    :nth-child(1) {
      font-size: 14px;
      font-weight: bold;
      color: #333333;
      margin-right: 20px;
    }
  }
}
::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}
::v-deep .el-date-editor .el-range__close-icon {
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range-separator {
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range__icon {
  margin-top: -10px;
}
::v-deep .el-button {
  padding: 8px 20px;
}
::v-deep .el-form-item {
  margin-bottom: 10px;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
.openClose {
  margin-top: 10px;
  margin-right: 10px;
  color: #666666;
  text-align: center;
}
.page {
  padding: 10px 20px 0 20px;
  background: #f9f9f9;
  font-size: 14px;
  .thetopbox {
    padding: 10px 0;
    background: #ffffff;
    border-radius: 8px 8px 0 0 ;
    .searchbox {
      display: flex;
      align-items: center;
      margin-left: 35px;
      .searchtitle {
        margin-right: 10px;
      }
      .searchbtn {
        width: 68px;
        background: #c8161d;
        color: #ffffff;
      }
    }
  }
  .maintop {
    display: flex;
    padding: 10px 0;
    justify-content: space-between;
    align-items: center;
    .mainbtn {
      width: 100%;
      .thebtn1 {
        color: #ffffff;
        background: #48B2FD;
      }
      .thebtn2 {
        color: #ffffff;
        background: #ffad41;
      }
    }
  }
  .main {
    // margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    //box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    .maintable {
      overflow: auto;
    }
  }
}
</style>
