<template>
  <div class="page">
    <topBar v-if="topList.length > 0" :top-list="topList" :moren="moren" />
    <div v-if="topList[7].changed == true">
      <div class="thetopbox">
        <el-form label-width="100px">
          <el-row>
            <el-col :span="4">
              <el-form-item :label="'会员编号'" prop="memberCode">
                <el-input
                  v-model="queryParams.memberCode"
                  clearable
                  placeholder=""
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'会员姓名'" prop="memberName">
                <el-input
                  v-model="queryParams.memberName"
                  clearable
                  placeholder=""
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'联系方式'" prop="phone">
                <el-input
                  v-model="queryParams.phone"
                  clearable
                  placeholder=""
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'真实奖衔'" prop="pkAwards">
                <el-select
                  v-model="queryParams.pkAwards"
                  clearable
                  placeholder=""
                >
                  <el-option
                    v-for="item in awardsList"
                    :key="item.awardsValue"
                    :label="item.awardsName"
                    :value="item.awardsValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item :label="'隶属体系'" prop="pkRegisterGrade">
                <el-select
                  v-model="queryParams.pkBdVertex"
                  clearable
                  placeholder=""
                >
                  <el-option
                    v-for="item in vertexList"
                    :key="item.pkId"
                    :label="item.vertexName"
                    :value="item.pkId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'隶属团队'" prop="pkSettleGrade">
                <el-select
                  v-model="queryParams.pkTeamCode"
                  clearable
                  placeholder=""
                >
                  <el-option
                    v-for="item in memberteamList"
                    :key="item.pkId"
                    :label="item.teamName"
                    :value="item.pkId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item :label="'政策币业务'" prop="pkSettleGrade">
                <el-select
                  v-model="queryParams.enableStatus"
                  clearable
                  placeholder=""
                >
                  <el-option
                    v-for="item in getStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="政策币转账" prop="vertexId">
                <el-select
                  v-model="queryParams.transfer"
                  clearable
                  placeholder=""
                >
                  <el-option
                    v-for="item in agreeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="'创建日期'">
                <el-date-picker
                  v-model="creationTime"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  type="datetimerange"
                  :range-separator="'至'"
                  :start-placeholder="'开始日期'"
                  :end-placeholder="'结束日期'"
                  @change="changeTime"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <div class="searchbox">
                <el-button class="searchbtn" @click="getMemberList">
                  {{ '搜索' }}</el-button>
                <el-button @click="reChongzhi"> {{ '重置' }}</el-button>
              </div>
            </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="maintop">
        <div class="mainbtn">
          <el-button
            v-hasButtons="['policyMoneyAdd']"
            size="small"
            class="thebtn1"
            @click="hrefs()"
          >{{ '政策币业务' }}</el-button>
          <el-button
            v-hasButtons="['policyMoneyExport']"
            size="small"
            class="thebtn2"
            @click="exports()"
          >
            {{ '导出' }}</el-button>
          <el-button
            v-hasButtons="['policyMoneyDelete']"
            size="small"
            class="thebtn2"
            style="background-color: #c73030"
            @click="handleDelete()"
          >
            {{ '删除' }}</el-button>
        </div>
      </div>
      <div class="main">
        <div class="maintable">
          <el-table
            ref="table"
            v-loading="loading"
            :data="tableData"
            height="685px"
            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"
              prop="memberCode"
              :label="'会员编号'"
            />
            <el-table-column
              align="center"
              prop="memberName"
              :label="'会员姓名'"
            />
            <el-table-column
              align="center"
              prop="pkAwardsVal"
              :label="'真实奖衔'"
            />
            <el-table-column
              align="center"
              prop="vertexName"
              :label="'隶属体系'"
            />
            <el-table-column
              align="center"
              prop="teamName"
              :label="'隶属团队'"
            />
            <el-table-column
              align="center"
              prop="phone"
              :label="'联系方式'"
            />
            <el-table-column
              align="center"
              prop="enableStatusVal"
              :label="'政策币业务'"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.enableStatus == 0" style="color: #009b58">
                  {{ scope.row.enableStatusVal }}
                </div>
                <div v-if="scope.row.enableStatus == 1" style="color: #c8161d">
                  {{ scope.row.enableStatusVal }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="deductMoney"
              label="政策币扣款比例(%)"
            />
            <el-table-column
              align="center"
              prop="transferVal"
              label="政策币转账"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.transfer == 1" style="color: #009b58">
                  {{ scope.row.transferVal }}
                </div>
                <div v-if="scope.row.transfer == 2" style="color: #c8161d">
                  {{ scope.row.transferVal }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="businessScopeVal"
              label="业务范围"
            />
            <el-table-column
              align="center"
              prop="creationTime"
              :label="'创建日期'"
              width="200"
            />
          </el-table>
        </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"
        @getMemberList="getMemberList()"
      />
      <delPplicyDetail
        v-if="deldataLoad"
        ref="delPplicyDetail"
        :is-delete="isDelete"
        :del-list="delList"
        @handleClose2="handleClose2"
        @getMemberList="getMemberList()"
      />
    </div>
    <el-dialog
      :title="'会员信息错误'"
      :close-on-click-modal="false"
      :visible.sync="errorShow"
      width="600px"
      append-to-body
    >
      <div>
        <el-table
          :data="errorData"
          height="400px"
          style="width: 100%"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            align="center"
            prop="memberCode"
            :label="'会员编号'"
          />
          <el-table-column
            align="center"
            prop="errorMsg"
            :label="'报错信息'"
          />
        </el-table>
      </div>
      <div class="footer" style="text-align: center">
        <div style="margin: 0 auto">
          <el-button class="thebtn" @click="errorShow = false">
            {{ '取消' }}</el-button>
          <el-button type="primary" class="thebtn" @click="errorShow = false">
            {{ '确认' }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import policyMoneyDetails from '@/views/information/policyMoney/policyMoneyDetails'
import delPplicyDetail from '@/views/information/policyMoney/delPplicyDetail'

import {
  getMemberList,
  getvertexValue,
  getmemberTeamList,
  getaccountStatus,
  getsalletStatus,
  getattestation,
  getYesnouploadsList,
  getorderStatus,
  getDealerYesno,
  memberRealInfo
} 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, delPolicyConfirm } from '@/api/specialBusiness'
import { getRouters } from '@/api/settle'
export default {
  name: 'Jcyw',
  components: {
    topBar,
    policyMoneyDetails,
    delPplicyDetail
  },
  data() {
    return {
      isPolicy: false,
      areaData: [],
      regionParams: {
        label: 'name',
        value: 'id',
        children: 'children',
        expandTrigger: 'hover'
      },
      moren: 'policyMoney',
      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,
        creationTime: []
      },
      address: '',
      tableData: [],
      loading: false,
      // 折叠搜索框
      isActive: false,
      total: 0,
      gradeRangList: [], // 注册等级
      awardsList: [], // 真实奖衔
      vertexList: [], // 隶属体系
      memberteamList: [], // 隶属团队
      registerList: [], // 注册权限
      accountStatus: [], // 账户状态
      salletStatus: [], // 钱包状态
      tattestation: [], // 实名认证 是否认证
      yesnouploadsList: [], // 营业执照 是否上传
      orderStatusList: [], // 订单状态
      agentGradeList: [], // 代理等级
      directPushNumber: '', // 修改直推次数

      sexList: [],
      cardList: [],
      getStatusList: [],
      agreeList: [],
      creationTime: '',
      isDelete: false,
      delList: [],
      deldataLoad: false,
      errorData: [],
      errorShow: false
    }
  },
  computed: {
    canDo() {
      return this.checkList.length > 0
    }
  },
  created() {
    // 查询会员信息
    this.getMemberList()
    this.getAllArea()
    this.getUserRoute()
    this.getOthers()
    // this.getRegistration();
    // this.getaccountStatus();
    // this.getsalletStatus();
    // this.getattestation();
    // this.getYesnouploadsList();
    // this.getorderStatus();
    // this.getDealerYesno();
    // 初始化表头
    // this.checkLabels = JSON.parse(
    //   JSON.stringify(Object.keys(this.tableData[0]))
    // );
    // this.colums = JSON.parse(JSON.stringify(Object.keys(this.tableData[0])));
  },
  methods: {
    handleDelete() {
      this.delList = []
      this.$forceUpdate()
      const pkIdList = this.multipleSelection.map((item) => {
        return item.pkId
      })
      if (pkIdList.length > 0) {
        const pkIdStr = pkIdList.join()
        delPolicyConfirm({ pkIdStr: pkIdStr }).then((res) => {
          if (res.code == 200) {
            this.delList = res.data
            this.$forceUpdate()
            this.deldataLoad = true
            this.isDelete = true
          } else if (res.code == 504) {
            this.errorShow = true
            this.errorData = res.data
          } else {
            this.$message({
              type: 'warning',
              message: res.msg
            })
          }
        })
      }
    },
    getOthers() {
      // 订单状态
      // getorderStatus().then((res) => {
      //   this.orderStatusList = res.data;
      // });
      // 营业执照-是否上传
      // getYesnouploadsList().then((res) => {
      //   this.yesnouploadsList = res.data;
      // });
      // 认证下拉选
      // getattestation().then((res) => {
      //   this.tattestation = res.data;
      // });
      // 钱包状态下拉选
      // getsalletStatus().then((res) => {
      //   this.salletStatus = res.data;
      // });
      // 账户状态下拉选
      // getaccountStatus().then((res) => {
      //   this.accountStatus = res.data;
      // });
      // 注册权限下拉选
      // getRegistration().then((res) => {
      //   this.registerList = res.data;
      // });
      // 隶属团队下拉选
      getmemberTeamList().then((res) => {
        this.memberteamList = res.rows
      })
      // 隶属体系下拉选 取pkid和name
      getvertexValue().then((res) => {
        this.vertexList = res.data
      })
      // 真实奖衔下拉选
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
      // 注册等级下拉
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data
      })
      // 性别
      getSex().then((res) => {
        this.sexList = res.data
      })
      // 身份类型
      getCardType().then((res) => {
        this.cardList = res.data
      })
      getEnableStatus().then((res) => {
        this.getStatusList = res.data
      })
      getEYesNoList().then((res) => {
        this.agreeList = res.data
      })
    },
    getUserRoute() {
      getRouters().then((res) => {
        res.data.forEach((item) => {
          this.topList.forEach((items) => {
            if (item.path == items.url) {
              items.changed = true
            }
          })
        })
      })
    },
    handleClose() {
      this.isPolicy = false
    },
    handleClose2() {
      this.isDelete = false
    },
    hrefs() {
      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]
    },

    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() {
      this.loading = true
      if (this.creationTime == '' || this.creationTime == null) {
        this.queryParams.startDate = ''
        this.queryParams.endDate = ''
      }
      policyList(this.queryParams).then((res) => {
        this.loading = false
        this.total = res.total
        this.tableData = res.rows
      })
      this.isPolicy = false
    },

    // 展开折叠
    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-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;
    .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>
