<template>
  <div class="app-container calendar-list-container">
    <el-form  ref="addForm" :model="introducerInfo" label-position="left" label-width="100px"
      style='width:100%;margin-left:10px'>
    <div class = "userbox" style="width:100%;">
      <div class = "boxtitle">基本信息</div>
      <el-row :gutter="24" style="margin-top:25px;">
      <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
        <div class="grid-content bg-purple" >
          <el-form-item  :label="$t('dc.wv_phone')">
            <div class="block">
              <el-input v-model="introducerInfo.wv_phone" :disabled="true" style="width: 100%;" > </el-input>
            </div>
          </el-form-item>
        </div>
      </el-col>
      <el-col :xs="23" :sm="23" :md="11" :lg="6" :xl="6">
        <div class="grid-content bg-purple">
          <el-form-item  :label="$t('dc.wv_gradeid')">
            <div class="block">
              <el-input v-model="introducerInfo.wv_gradeid" :disabled="true" style="width: 100%;" > </el-input>
            </div>
          </el-form-item>
        </div>
      </el-col>
      <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
        <div class="grid-content bg-purple">
          <el-form-item  :label="$t('dc.wv_status')" prop="od_phone">
            <div class="block">
              <el-input v-model="introducerInfo.wv_status" :disabled="true"  style="width: 100%;" > </el-input>
            </div>
          </el-form-item>
        </div>
      </el-col>
        <el-col :xs="23" :sm="23" :md="11" :lg="5" :xl="5">
        <div class="grid-content bg-purple">
          <el-form-item  :label="$t('dc.wv_Introduction_total')" prop="od_phone">
            <div class="block">
              <el-input-number v-model="introducerInfo.wv_Introduction_total" :disabled="true" style="width: 100%;" :controls=false :precision="2" :max="9999999" > </el-input-number>
            </div>
          </el-form-item>
        </div>
      </el-col>
      </el-row>
      <el-row :gutter="24">
      <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
        <div class="grid-content bg-purple">
          <el-form-item  :label="$t('dc.wv_withdraw_total')" prop="od_user_name">
            <div class="block">
              <el-input-number v-model="introducerInfo.wv_withdraw_total" :disabled="true" style="width: 100%;" :controls=false :precision="2" :max="9999999" > </el-input-number>
            </div>
          </el-form-item>
        </div>
      </el-col>
      <el-col :xs="23" :sm="23" :md="11" :lg="6" :xl="6">
        <div class="grid-content bg-purple">
          <el-form-item  :label="$t('dc.wv_consultant')" prop="od_user_name">
            <div class="block">
              <el-input v-model="introducerInfo.wv_consultant" :disabled="true" style="width: 100%;"> </el-input>
            </div>
          </el-form-item>
        </div>
      </el-col>
      <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
        <div class="grid-content bg-purple">
          <el-form-item  :label="$t('dc.wv_account_number')" prop="od_user_name">
            <div class="block">
              <el-input v-model="introducerInfo.wv_account_number" :disabled="true" style="width: 100%;"> </el-input>
            </div>
          </el-form-item>
        </div>
      </el-col>
        <el-col :xs="23" :sm="23" :md="11" :lg="5" :xl="5">
        <div class="grid-content bg-purple">
          <el-form-item  :label="$t('dc.wv_account_bank')" prop="od_phone">
            <div class="block">
              <el-input v-model="introducerInfo.wv_account_bank" :disabled="true" style="width: 100%;"> </el-input>
            </div>
          </el-form-item>
        </div>
      </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-bottom:15px;">
      <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
      <div class="grid-content bg-purple" >
        <el-form-item  :label="$t('dc.dc_channel')">
          <div class="block">
            <el-input v-model="introducerInfo.dc_channel" :disabled="true" style="width: 100%;" > </el-input>
          </div>
        </el-form-item>
      </div>
    </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item   prop="od_phone">
            <div class="block">
              <a href="#"  @click="herfQrCodeShow(introducerInfo.wv_qrcode, 1)"><el-tag>点击查看小程序码</el-tag></a> 
              <a href="#"  @click="herfQrCodeShow(introducerInfo.wv_account_number_path, 2)"><el-tag>点击查看银行卡号</el-tag></a> 
            </div>
          </el-form-item>
        </div>
      </el-col>
      </el-row>
    </div>
    <div class = "userbox2" style="width:100%;">
    <div class = "boxtitle">已注册用户数</div>
    <el-table :key='registertableKey' :data="registerList" v-loading="registerLoading" element-loading-text="加载中......" border fit
                highlight-current-row
                style="width: 92%;margin-top:20px;margin-left:4%;margin-right:4%;">
        <el-table-column type="index" align="center" :label="$t('table.seq')" width="50">
        </el-table-column>
        <el-table-column align="center" :label="$t('equipment.eh_cmphone')">
          <template slot-scope="scope">
            <span>{{scope.row.xul_phone}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('userlog.date')">
          <template slot-scope="scope">
            <span>{{scope.row.xul_date}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container" style="margin-bottom:20px;text-align:center;">
        <!-- <el-pagination background @size-change="registeSizeChange" @current-change="registeCurrentChange"
                      :current-page="registerpage" :page-sizes="[10,20,30,50]" :page-size="registerlimit"
                      layout="total, sizes, prev, pager, next, jumper" :total="registertotal">
        </el-pagination> -->
        <el-pagination
          small
          layout="prev, pager, next"
          :total="registertotal"
          :page-size="registerlimit"
          @size-change="registeSizeChange" @current-change="registeCurrentChange"
          :current-page="registerpage">
        </el-pagination>
      </div>
  </div>
      <div class = "userbox2" style="width:100%;">
        <div class = "boxtitle">已签约用户数</div>
        <el-table :key='contracttableKey' :data="contractList" v-loading="contractLoading" element-loading-text="加载中......" border fit
                    highlight-current-row
                    style="width: 92%;margin-top:20px;margin-left:4%;margin-right:4%;">
            <el-table-column type="index" align="center" :label="$t('table.seq')" width="50">
            </el-table-column>
            <el-table-column align="center" :label="$t('equipment.eh_cmphone')">
              <template slot-scope="scope">
                <span>{{scope.row.xul_phone}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('userlog.date')">
              <template slot-scope="scope">
                <span>{{scope.row.xul_date}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('order.orderno')">
              <template slot-scope="scope">
                <span>{{scope.row.xul_orderno}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('order.amount')">
              <template slot-scope="scope">
                <span id="moeny">{{scope.row.od_order_amount|numFilter}}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container" style="margin-bottom:20px;text-align:center;">
            <!-- <el-pagination background @size-change="contractSizeChange" @current-change="contractCurrentChange"
                          :current-page="contractpage" :page-sizes="[10,20,30,50]" :page-size="contractlimit"
                          layout="total, sizes, prev, pager, next, jumper" :total="contracttotal">
            </el-pagination> -->
            <el-pagination
              small
              layout="prev, pager, next"
              :total="contracttotal"
              :page-size="contractlimit"
              @size-change="contractSizeChange" @current-change="contractCurrentChange"
              :current-page="contractpage">
            </el-pagination>
          </div>
      </div>

      <div class = "userbox2" style="width:100%;">
        <div class = "boxtitle">已完成用户数</div>
        <el-table :key='finishtableKey' :data="finishList" v-loading="finishLoading" element-loading-text="加载中......" border fit
                    highlight-current-row
                    style="width: 92%;margin-top:20px;margin-left:4%;margin-right:4%;">
            <el-table-column type="index" align="center" :label="$t('table.seq')" width="50">
            </el-table-column>
            <el-table-column align="center" :label="$t('equipment.eh_cmphone')">
              <template slot-scope="scope">
                <span>{{scope.row.xul_phone}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('userlog.date')">
              <template slot-scope="scope">
                <span>{{scope.row.xul_date}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('order.orderno')">
              <template slot-scope="scope">
                <span>{{scope.row.xul_orderno}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('order.amount')">
              <template slot-scope="scope">
                <span id="moeny">{{scope.row.od_order_amount|numFilter}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('dc.od_rebate_amount')">
              <template slot-scope="scope">
                <span id="moeny">{{scope.row.od_rebate_amount|numFilter}}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container" style="margin-bottom:20px;text-align:center;">
            <!-- <el-pagination background @size-change="finishSizeChange" @current-change="finishCurrentChange"
                          :current-page="finishpage" :page-sizes="[10,20,30,50]" :page-size="finishlimit"
                          layout="total, sizes, prev, pager, next, jumper" :total="finishtotal">
            </el-pagination> -->
            <el-pagination
              small
              layout="prev, pager, next"
              :total="finishtotal"
              :page-size="finishlimit"
              @size-change="finishSizeChange" @current-change="finishCurrentChange"
              :current-page="finishpage">
            </el-pagination>
          </div>
      </div>

      <div class = "userbox2" style="width:100%;">
        <div class = "boxtitle">已提现记录</div>
        <el-table :key='extracttableKey' :data="extractList" v-loading="extractLoading" element-loading-text="加载中......" border fit
                    highlight-current-row
                    style="width: 92%;margin-top:20px;margin-left:4%;margin-right:4%;">
            <el-table-column type="index" align="center" :label="$t('table.seq')" width="50">
            </el-table-column>
            <el-table-column align="center" :label="$t('dc.orderno')">
              <template slot-scope="scope">
                <span>{{scope.row.wue_orderno}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('dc.amount')">
              <template slot-scope="scope">
                <span  id="moeny">{{scope.row.wue_applysum|numFilter}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('dc.applicantdate')">
              <template slot-scope="scope">
                <span>{{scope.row.wue_applydate}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('dc.paydate')">
              <template slot-scope="scope">
                <span>{{scope.row.wue_paydate}}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container" style="margin-bottom:20px;text-align:center;">
            <!-- <el-pagination background @size-change="extractSizeChange" @current-change="extractCurrentChange"
                          :current-page="extractpage" :page-sizes="[10,20,30,50]" :page-size="extractlimit"
                          layout="total, sizes, prev, pager, next, jumper" :total="extracttotal">
            </el-pagination> -->
            <el-pagination
              small
              layout="prev, pager, next"
              :total="extracttotal"
              :page-size="extractlimit"
              @size-change="extractSizeChange" @current-change="extractCurrentChange"
              :current-page="extractpage">
            </el-pagination>
          </div>
      </div>
    </el-form>
    <el-dialog  width="50%;"  :title="textMap[dialogStatus]" :visible.sync="dialogPvVisible" :before-close="handleClose">
      <img :src="imgpath" style="width:100%;"/>
    </el-dialog>
    </div>
    </template> 
    <script>
      import { fetchPv } from '@/api/article'
      import waves from '@/directive/waves' // 水波纹指令
      import { parseTime } from '@/utils'
      import { queryOneDcIntroducer, queryDcIntroduceLogs, queryDcILbyrebate, queryDcIntroducerExtracts } from '@/api/dc'
      import Fullcalendar from 'vue-fullcalendar'
      var demoEvents = []
      // arr to obj ,such as { CN : "China", US : "USA" }
      export default {
        components: { Fullcalendar },
        name: 'introducershow1',
        directives: {
          waves
        },
        filters: {
          numFilter(value) {
            return parseFloat(value).toFixed(2)
          }
        },
        data() {
          return {
            introducerInfo: {
              wv_phone: null,
              wv_gradeid: null,
              wv_status: null,
              wv_Introduction_total: null,
              wv_withdraw_total: null,
              wv_qrcode: null,
              wv_consultant: null,
              wv_account_number: null,
              wv_account_bank: null,
              wv_people_count: null,
              wv_account_number_path: null,
              dc_channel: null
            },
            registerList: null,
            registertableKey: 0,
            registerpage: 1,
            registerlimit: 10,
            registertotal: null,
            registerLoading: true,
            queryRegister: {
              limit: 10,
              page: 1,
              xul_event: 2,
              xul_introducer_phone: null
            },
            imgpath: null,
            // ----------------
            contractList: null,
            contracttableKey: 0,
            contractpage: 1,
            contractlimit: 10,
            contracttotal: null,
            contractLoading: true,
            queryContract: {
              limit: 10,
              page: 1,
              xul_event: 5,
              xul_introducer_phone: null
            },
            // -------------
            finishList: null,
            finishtableKey: 0,
            finishpage: 1,
            finishlimit: 10,
            finishtotal: null,
            finishLoading: true,
            queryFinish: {
              limit: 10,
              page: 1,
              xul_event: 6,
              xul_introducer_phone: null
            },
            // ----------
            extractList: null,
            extracttableKey: 0,
            extractpage: 1,
            extractlimit: 10,
            extracttotal: null,
            extractLoading: true,
            queryExtract: {
              limit: 10,
              page: 1,
              wue_type: 3,
              wue_phone: null
            },
            // ------
            fcEvents: demoEvents,
            dialogImageUrl: undefined,
            dialogVisible: false,
            certificateKey: 0,
            trainkey: 0,
            listLoading: true,
            fileListvoucher: [],
            showReviewer: false,
            trainoptions: '',
            modifyresult: '',
            train_name: '',
            visible2: false,
            dialogFormVisible: false,
            dialogStatus: '',
            textMap: {
              update: 'Edit',
              create: '添加月嫂'
            },
            dialogPvVisible: false,
            pvData: [],
            downloadLoading: false,
            view: {
              name: undefined,
              path: undefined,
              title: undefined
            }
          }
        },
        destroyed() {
          this.view.name = 'introducershow'
          this.view.path = '/dc/introducer_show'
          this.view.title = 'introducershow'
          this.$store.dispatch('delVisitedViews', this.view)
        },
        created() {
          this.getlist()
        },
        methods: {
          getlist() {
            var queryIntroducer = {
              wv_phone: null
            }
            queryIntroducer.wv_phone = this.$route.params.wv_phone
            queryOneDcIntroducer(queryIntroducer).then(response => {
              this.introducerInfo.wv_phone = response.data.wv_phone
              if (response.data.wv_gradeid === 1) {
                this.introducerInfo.wv_gradeid = '银牌'
              } else if (response.data.wv_gradeid === 2) {
                this.introducerInfo.wv_gradeid = '金牌'
              }
              if (response.data.wv_status === 1) {
                this.introducerInfo.wv_status = '正常'
              } else if (response.data.wv_status === 0) {
                this.introducerInfo.wv_status = '停用'
              }
              this.introducerInfo.wv_Introduction_total = response.data.wv_Introduction_total
              this.introducerInfo.wv_withdraw_total = response.data.wv_withdraw_total
              this.introducerInfo.wv_qrcode = response.data.wv_qrcode
              this.introducerInfo.wv_consultant = response.data.wv_consultantname
              this.introducerInfo.wv_account_number = response.data.wv_account_number
              this.introducerInfo.wv_account_bank = response.data.wv_account_bank
              this.introducerInfo.wv_people_count = response.data.wv_people_count
              this.introducerInfo.wv_account_number_path = response.data.wv_account_number_path
              this.introducerInfo.dc_channel = response.data.dc_channel
            })
            this.queryRegister.xul_introducer_phone = this.$route.params.wv_phone
            queryDcIntroduceLogs(this.queryRegister).then(response => {
              this.registerList = response.data.items
              this.registertotal = response.data.total
              this.registerLoading = false
            })
            this.queryContract.xul_introducer_phone = this.$route.params.wv_phone
            queryDcIntroduceLogs(this.queryContract).then(response => {
              this.contractList = response.data.items
              this.contracttotal = response.data.total
              this.contractLoading = false
            })
            this.queryContract.xul_introducer_phone = this.$route.params.wv_phone
            queryDcIntroduceLogs(this.queryContract).then(response => {
              this.contractList = response.data.items
              this.contracttotal = response.data.total
              this.contractLoading = false
            })
            this.queryFinish.xul_introducer_phone = this.$route.params.wv_phone
            queryDcILbyrebate(this.queryFinish).then(response => {
              this.finishList = response.data.items
              this.finishtotal = response.data.total
              this.finishLoading = false
            })
            this.queryExtract.wue_phone = this.$route.params.wv_phone
            queryDcIntroducerExtracts(this.queryExtract).then(response => {
              this.extractList = response.data.items
              this.extracttotal = response.data.total
              this.extractLoading = false
            })
          },
          handleModifyStatus(row, status) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            row.status = status
          },
          handleCreate() {
            this.resetmminfo()
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
            this.$nextTick(() => {
              this.$refs['addTrains'].clearValidate()
            })
          },
          handleUpdate(row) {
            this.temp = Object.assign({}, row) // copy obj
            this.temp.timestamp = new Date(this.temp.timestamp)
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            this.$nextTick(() => {
              this.$refs['dataForm'].clearValidate()
            })
          },
          handleDelete(row) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          },
          handleFetchPv(pv) {
            fetchPv(pv).then(response => {
              this.pvData = response.data.pvData
              this.dialogPvVisible = true
            })
          },
          handleDownload() {
            this.downloadLoading = true
            import('@/vendor/Export2Excel').then(excel => {
              const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
              const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
              const data = this.formatJson(filterVal, this.list)
              excel.export_json_to_excel(tHeader, data, 'table-list')
              this.downloadLoading = false
            })
          },
          formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
              if (j === 'timestamp') {
                return parseTime(v[j])
              } else {
                return v[j]
              }
            }))
          },
          cancelEdit() {
            this.getList()
          },
          // ---------------------------------
          registeSizeChange(val) {
            this.registerlimit = val
            this.queryRegister.limit = val
            this.queryRegister.page = this.registerpage
            this.registeFilter()
          },
          registeCurrentChange(val) {
            this.registerpage = val
            this.queryRegister.limit = this.registerlimit
            this.queryRegister.page = val
            this.registeFilter()
          },
          registeFilter() {
            this.queryRegister.page = this.registerpage
            this.queryRegister.limit = this.registerlimit
            this.queryType = 'query'
            this.listLoading = true
            queryDcIntroduceLogs(this.queryRegister).then(response => {
              this.registerList = response.data.items
              this.registertotal = response.data.total
              this.registerLoading = false
            })
          },
          // ----------
          contractSizeChange(val) {
            this.contractlimit = val
            this.queryContract.limit = val
            this.queryContract.page = this.contractpage
            this.contractFilter()
          },
          contractCurrentChange(val) {
            this.contractpage = val
            this.queryContract.limit = this.contractlimit
            this.queryContract.page = val
            this.contractFilter()
          },
          contractFilter() {
            this.queryContract.page = this.contractpage
            this.queryContract.limit = this.contractlimit
            this.queryType = 'query'
            this.listLoading = true
            queryDcIntroduceLogs(this.queryContract).then(response => {
              this.contractList = response.data.items
              this.contracttotal = response.data.total
              this.contractLoading = false
            })
          },
          // -------
          finishSizeChange(val) {
            this.finishlimit = val
            this.queryFinish.limit = val
            this.queryFinish.page = this.finishpage
            this.finishFilter()
          },
          finishCurrentChange(val) {
            this.finishpage = val
            this.queryFinish.limit = this.finishlimit
            this.queryFinish.page = val
            this.finishFilter()
          },
          finishFilter() {
            this.queryFinish.page = this.finishpage
            this.queryFinish.limit = this.finishlimit
            this.queryType = 'query'
            this.listLoading = true
            queryDcILbyrebate(this.queryFinish).then(response => {
              this.finishList = response.data.items
              this.finishtotal = response.data.total
              this.finishLoading = false
            })
          },
          // ------
          extractSizeChange(val) {
            this.extractlimit = val
            this.queryExtract.limit = val
            this.queryExtract.page = this.extractpage
            this.extractFilter()
          },
          extractCurrentChange(val) {
            this.extractpage = val
            this.queryExtract.limit = this.extractlimit
            this.queryExtract.page = val
            this.extractFilter()
          },
          extractFilter() {
            this.queryExtract.page = this.extractpage
            this.queryExtract.limit = this.extractlimit
            this.queryType = 'query'
            this.listLoading = true
            queryDcIntroducerExtracts(this.queryExtract).then(response => {
              this.extractList = response.data.items
              this.extracttotal = response.data.total
              this.extractLoading = false
            })
          },
          herfQrCodeShow(path, type) {
            this.dialogStatus = 'create'
            this.dialogPvVisible = true
            this.imgpath = path
            if (type === 1) {
              this.textMap.create = '小程序码'
            } else {
              this.textMap.create = '银行卡号'
            }
          },
          handleClose(done) {
            this.$confirm('确认关闭？').then(_ => {
              done()
            }).catch(_ => {})
          },
          handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
          }
        }
      }
    </script>
  <style>
    .el-form--label-left .el-form-item__label{
      text-align:right
    }
    .el-rate{
      line-height: 0;
      margin-top:8px;
    }
    .el-checkbox.el-checkbox {
        margin-left: 30px;
    }
    .el-input-number .el-input__inner {
      text-align: right;
    }
    .userbox {
      border: 1px solid #ebebeb;
    }
    .userbox2 {
      margin-top: 28px;
      border: 1px solid #ebebeb;
    }
    .boxtitle {
      width: 110px;
      background-color: #ffffff;
      height: 20px;
      margin-top: -10px;
      margin-left: 10px;
      text-align: center;
    }
    #moeny{
      float: right;
    }
    </style>