<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <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.pkId"
                  :label="item.awardsName"
                  :value="item.pkId"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item :label="'注册等级'" prop="pkRegisterGrade">
              <el-select
                v-model="queryParams.pkRegisterGrade"
                clearable
                placeholder=""
              >
                <el-option
                  v-for="item in gradeRangList"
                  :key="item.pkId"
                  :label="item.gradeName"
                  :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.pkSettleGrade"
                clearable
                placeholder=""
              >
                <el-option
                  v-for="item in gradeRangList"
                  :key="item.pkId"
                  :label="item.gradeName"
                  :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.idType"
                clearable
                placeholder=""
              >
                <el-option
                  v-for="item in cardList"
                  :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-input
                v-model="queryParams.idCard"
                clearable
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'出生日期'" prop="teamId">
              <el-date-picker
                v-model="queryParams.birthDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="datetime"
                :range-separator="'至'"
                :start-placeholder="'开始日期'"
                :end-placeholder="'结束日期'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'详细地址'" prop="accountStatus">
              <el-cascader
                v-model="address"
                class="area"
                :options="areaData"
                :placeholder="'请选择省市区'"
                :props="regionParams"
                @change="flChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="lefts" prop="parMemberCode">
              <el-input
                v-model="queryParams.address"
                clearable
                placeholder=""
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-collapse-transition>
          <div v-show="isActive">
            <el-row>
              <el-col :span="4">
                <el-form-item :label="'性别'" prop="isMakerSpace">
                  <el-select
                    v-model="queryParams.sex"
                    clearable
                    placeholder=""
                  >
                    <el-option
                      v-for="item in sexList"
                      :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="isMakerSpace">
                  <el-input
                    v-model="queryParams.bankName"
                    clearable
                    placeholder=""
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item :label="'支行名称'" prop="parMemberCode">
                  <el-input
                    v-model="queryParams.subBankName"
                    clearable
                    placeholder=""
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item :label="'银行卡号'" prop="parMemberCode">
                  <el-input
                    v-model="queryParams.cardNumber"
                    clearable
                    placeholder=""
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'认证日期'" prop="code">
                  <el-date-picker
                    v-model="queryParams.rzsj"
                    format="yyyy-MM-dd"
                    type="datetimerange"
                    range-separator="——"
                    :start-placeholder="'开始日期'"
                    :end-placeholder="'结束日期'"
                    value-format="yyyy-MM-dd"
                    :unlink-panels="true"
                    @change="changeTime3"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>

              <el-col :span="8">
                <el-form-item :label="'创建日期'" prop="code">
                  <el-date-picker
                    v-model="queryParams.cjsj"
                    type="datetimerange"
                    range-separator="——"
                    format="yyyy-MM-dd"
                    :start-placeholder="'开始日期'"
                    :end-placeholder="'结束日期'"
                    value-format="yyyy-MM-dd"
                    :unlink-panels="true"
                    @change="changeTime1"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'支付日期'" prop="code">
                  <el-date-picker
                    v-model="queryParams.zfsj"
                    type="datetimerange"
                    range-separator="——"
                    format="yyyy-MM-dd"
                    :start-placeholder="'开始日期'"
                    :end-placeholder="'结束日期'"
                    value-format="yyyy-MM-dd"
                    :unlink-panels="true"
                    @change="changeTime2"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </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="['realInfoExport']"
          size="small"
          class="thebtn2"
          @click="exports"
        > {{ '导出' }}</el-button>
      </div>
      <div style="padding-right: 0px">
        <el-dropdown :hide-on-click="false" style="width: 120px">
          <span class="el-dropdown-link kuang">
            {{ '筛选字段' }}<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown" style="">
            <el-dropdown-item v-for="item in menuList" :key="item.id">
              <el-checkbox
                v-model="item.checked"
                @change="getMenu($event, item.id)"
              >{{ item.text }}</el-checkbox></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="main">
      <div class="maintable">
        <el-table
          ref="table"
          v-loading="loading"
          :data="tableData"
          height="615px"
          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
            v-if="allTxt.memberCode"
            align="center"
            prop="memberCode"
            :label="'会员编号'"
            width="240"
          />
          <el-table-column
            v-if="allTxt.memberName"
            align="center"
            prop="memberName"
            :label="'会员姓名'"
            width="240"
          />
          <el-table-column
            v-if="allTxt.phone"
            align="center"
            prop="phone"
            :label="'联系方式'"
            width="180"
          />
          <el-table-column
            v-if="menuList[1].checked==true&&allTxt.registerGradeVal"
            align="center"
            prop="registerGradeVal"
            :label="'注册等级'"
            width="180"
          />
          <el-table-column
            v-if="menuList[2].checked==true&&allTxt.settleGradeVal"
            align="center"
            prop="settleGradeVal"
            :label="'结算等级'"
            width="180"
          />
          <el-table-column
            v-if="menuList[3].checked==true&&allTxt.awardsVal"
            align="center"
            prop="awardsVal"
            :label="'真实奖衔'"
            width="180"
          />
          <el-table-column
            v-if="allTxt.pkMaxAwardsVal"
            align="center"
            prop="pkMaxAwardsVal"
            :label="'荣誉奖衔'"
            width="180"
          />
          <el-table-column
            v-if="menuList[4].checked==true&&allTxt.sexVal"
            align="center"
            prop="sexVal"
            :label="'性别'"
            width="180"
          />
          <el-table-column
            v-if="menuList[5].checked==true&&allTxt.birthDate"
            align="center"
            prop="birthDate"
            :label="'出生日期'"
            width="180"
          />
          <el-table-column
            v-if="menuList[6].checked==true&&allTxt.cardTypeVal"
            align="center"
            prop="cardTypeVal"
            :label="'证件类型'"
            width="180"
          />
          <el-table-column
            v-if="menuList[7].checked==true&&allTxt.idCard"
            align="center"
            prop="idCard"
            :label="'证件号码'"
            width="180"
          />
          <el-table-column v-if="menuList[8].checked==true&&allTxt.idFront" align="center" prop="idFront" :label="'证件(正面)'" width="200">
            <template slot-scope="scope">
              <img :src="scope.row.idFront" style="width: 44px;height: 44px;border-radius: 4px">
            </template>
          </el-table-column>
          <el-table-column v-if="menuList[9].checked==true&&allTxt.idBack" align="center" prop="idBack" :label="'证件(反面)'" width="200">
            <template slot-scope="scope">
              <img :src="scope.row.idBack" style="width: 44px;height: 44px;border-radius: 4px">
            </template>
          </el-table-column>
          <el-table-column
            v-for="item in menuList"
            v-if="item.checked && item.id != 0 && item.id < 19&allTxt[item.prop]"
            :key="item.id"
            align="center"
            width="200"
            :prop="item.prop"
            :label="item.text"
          />
          <el-table-column
            v-if="allTxt.certificationTime"
            align="center"
            prop="certificationTime"
            :label="'认证日期'"
            width="200"
          />
          <el-table-column
            v-if="allTxt.creationTime"
            align="center"
            prop="creationTime"
            :label="'创建日期'"
            width="200"
          />
          <el-table-column
            v-if="allTxt.payTime"
            align="center"
            prop="payTime"
            :label="'支付日期'"
            width="200"
          />
          <el-table-column
            v-if="allTxt.directPushNumber"
            align="center"
            prop="directPushNumber"
            :label="'修改直推次数'"
            width="180"
          />
        </el-table>
      </div>
    </div>
    <pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getMemberList"
    />
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import {
  getMemberList,
  getvertexValue,
  getmemberTeamList,
  getaccountStatus,
  getsalletStatus,
  getattestation,
  getYesnouploadsList,
  getorderStatus,
  getAgentGrade,
  memberRealInfo
} from '@/api/member'
import {
  getgradeRanglist,
  getAwardsListChiose,
  getRegistration, getCardType, getSex
} from '@/api/level'
import { findAllArea } from '@/api/product'
import { areaList } from '@/api/site'
import { getRoleMenu } from '@/api/notice'

export default {
  name: 'Jcyw',
  components: {
    topBar
  },
  data() {
    return {
      loading: false,
      areaData: [],
      regionParams: {
        label: 'name',
        value: 'id',
        children: 'children',
        expandTrigger: 'hover'
      },
      menuList: [
        {
          id: 0,
          text: '全选',
          checked: false
        },
        {
          id: 31,
          text: '注册等级',
          checked: true,
          prop: 'pkRegisterGrade'
        },
        {
          id: 32,
          text: '结算等级',
          checked: true,
          prop: 'pkSettleGrade'
        },
        {
          id: 42,
          text: '真实奖衔',
          checked: true,
          prop: 'pkAwards'
        },
        {
          id: 33,
          text: '性别',
          checked: true,
          prop: 'sexVal'
        },
        {
          id: 34,
          text: '出生日期',
          checked: true,
          prop: 'birthDate'
        },
        {
          id: 35,
          text: '证件类型',
          checked: true,
          prop: 'cardTypeVal'
        },
        {
          id: 36,
          text: '证件号码',
          checked: true,
          prop: 'idCard'
        },
        {
          id: 37,
          text: '证件(正面)',
          checked: true,
          prop: 'idCardJust'
        },
        {
          id: 38,
          text: '证件(反面)',
          checked: true,
          prop: 'idCardBack'
        },
        {
          id: 9,
          text: '省',
          checked: true,
          prop: 'provinceName'
        },
        {
          id: 10,
          text: '市',
          checked: true,
          prop: 'cityName'
        },
        {
          id: 11,
          text: '区/县',
          checked: true,
          prop: 'countyName'
        },
        {
          id: 12,
          text: '详细地址',
          checked: true,
          prop: 'address'
        },
        {
          id: 13,
          text: '银行名称',
          checked: true,
          prop: 'bankName'
        },
        {
          id: 14,
          text: '支行名称',
          checked: true,
          prop: 'subBankName'
        },
        {
          id: 15,
          text: '开户姓名',
          checked: true,
          prop: 'accountName'
        },
        {
          id: 16,
          text: '预留电话',
          checked: true,
          prop: 'reservedPhone'
        },
        {
          id: 17,
          text: '银行卡号',
          checked: true,
          prop: 'cardNumber'
        }

      ],
      moren: 'RealInfo',
      topList: [
        {
          name: '真实信息',
          path: 'RealInfo'
        }
        // {
        //   name: '订单业务',
        //   path: "ddyw",
        // },
        // {
        //   name: "审核业务",
        //   path: "shyw",
        // },
        // {
        //   name: "在线签呈",
        //   path: "zxqc",
        // },
      ],
      colums: [],
      checkLabels: [],
      checkList: [],
      multipleSelection: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50
      },
      address: '',
      tableData: [],
      // 折叠搜索框
      isActive: false,
      total: 0,
      gradeRangList: [], // 注册等级
      awardsList: [], // 真实奖衔
      vertexList: [], // 隶属体系
      memberteamList: [], // 隶属团队
      registerList: [], // 注册权限
      accountStatus: [], // 账户状态
      salletStatus: [], // 钱包状态
      tattestation: [], // 实名认证 是否认证
      yesnouploadsList: [], // 营业执照 是否上传
      orderStatusList: [], // 订单状态
      agentGradeList: [], // 代理等级
      directPushNumber: '', // 修改直推次数

      sexList: [],
      cardList: [],
      creationTime: '',
      allTxt: {}
    }
  },
  computed: {
    canDo() {
      return this.checkList.length > 0
    }
  },
  created() {
    // 查询会员信息
    this.getMemberList()
    this.getgradeRanglist()

    this.getAwardsListChiose()
    this.getSexs()
    this.getCardTypes()
    this.getAllArea()
    // this.getvertexValue();
    // this.getmemberTeamList();
    // this.getRegistration();
    // this.getaccountStatus();
    // this.getsalletStatus();
    // this.getattestation();
    // this.getYesnouploadsList();
    // this.getorderStatus();
    // this.getAgentGrade();
    // this.getDealerYesno();
    // 初始化表头
    // this.checkLabels = JSON.parse(
    //   JSON.stringify(Object.keys(this.tableData[0]))
    // );
    // this.colums = JSON.parse(JSON.stringify(Object.keys(this.tableData[0])));
  },
  mounted() {
    this.getUserRole()
  },
  methods: {
    getUserRole() {
      getRoleMenu('RealInfo').then((res) => {
        const obj = {}
        res.data.forEach(item => {
          obj[item] = 1
        })
        this.allTxt = obj
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      })
    },
    // 商品分类赋值
    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]
    },
    changeTime3(val) {
      this.queryParams.startCertificationTime = val[0]
      this.queryParams.endCertificationTime = 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.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((_) => {
        this.download(
          '/member/manager/member/real-info-export',
          { ...this.queryParams },
          `${'真实信息'}${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)
        })
      }
    },

    // 代理等级
    getAgentGrade() {
      getAgentGrade().then((res) => {
        this.agentGradeList = res.data
      })
    },
    // 查询会员信息
    getMemberList() {
      this.loading = true
      memberRealInfo(this.queryParams).then((res) => {
        this.loading = false
        this.total = res.total
        this.tableData = res.rows
      })
    },
    // 订单状态
    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.queryParams = {
        pageNum: 1,
        pageSize: 50,
        memberCode: '', // 会员编号
        memberName: '', // 会员姓名
        phone: '' // 联系方式
      }
      this.address = ''
      // 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__inner{
  width: 100%;
}
::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;
      .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 {
      display: flex;
      justify-content: space-between;
      align-content: center;
      width: 100%;
      .thebtn1 {
        color: #ffffff;
        background: #3181e5;
      }
      .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>
