<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-form inline>
      <el-form-item>
        <el-button type="primary" @click="mulSubmitSendMessage">提醒</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="sendOrderPay">发送订单结算</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :disabled="messageStatus.pay_status"
          @click="setToggleMessage(1)"
        >
          {{ messageStatus.pay_status ? '已开启自动支付' : '开启自动支付' }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :disabled="!messageStatus.pay_status"
          @click="setToggleMessage(0)"
        >
          关闭自动支付
        </el-button>
      </el-form-item>
      <el-form-item v-if="messageStatus.status">
        <span style="color: red; font-size: 26px">全部订单已支付完毕!</span>
      </el-form-item>
    </el-form>
    <el-table
      ref="listTable"
      :data="list"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
      style="margin-bottom: 20px"
      @selection-change="orderMulSelect"
    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
      />
      <el-table-column
        label="代理昵称"
        align="center"
      >
        <template slot-scope="{ row: { get_user } }">
          {{ get_user && get_user.nickname }}
        </template>
      </el-table-column>
      <el-table-column
        label="代理手机号"
        align="center"
      >
        <template slot-scope="{ row: { get_user } }">
          {{ get_user && get_user.mobile }}
        </template>
      </el-table-column>
      <el-table-column
        prop="money"
        label="总下单金额"
        align="center"
      />
      <el-table-column
        prop="pay_money"
        label="已付款金额"
        align="center"
      />
      <el-table-column
        prop="no_pay_money"
        label="未付款金额"
        align="center"
      />
      <el-table-column
        label="操作"
        align="center"
        width="200"
      >
        <template slot-scope="{ row }">
          <el-button type="text" @click="sendMessage([row.user_id])">提醒</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :limit="searchParams.page_size" :page="searchParams.page_index" @pagination="changePagination" @update:limit="changePagination" />
    <el-dialog
      title="确认开启自动支付"
      :visible.sync="openAutoPay"
      width="520px"
    >
      <el-form label-width="120px">
        <el-form-item label="验证码: ">
          <p class="code_check" @click="createRandomCode">{{ randomCode }}</p>
        </el-form-item>
        <el-form-item label="确认验证码:">
          <el-input v-model="code" type="text" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelRandomCode">取消</el-button>
        <el-button type="primary" @click="submitOpen">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as apis from '@/api/order/no_pay'
export default {
  data() {
    return {
      loadingFull: false,
      searchParams: {
        page_size: 20,
        page_index: 1
      },
      list: [],
      total: 0,
      mulselect: [],
      messageStatusTimer: null,
      messageStatus: {
        pay_status: false,
        status: false
      },
      openAutoPay: false,
      randomCode: '',
      code: ''
    }
  },
  watch: {
    messageStatus(a) {
      a.pay_status ? this.interValStatus() : this.messageStatusTimer ? clearInterval(this.interValStatus) : null
    },
    openAutoPay(a) {
      if (a) {
        this.createRandomCode()
      }
    }
  },
  created() {
    this.getList()
    this.getMesageStatus()
    this.createRandomCode()
  },
  destroyed() {
    this.messageStatusTimer ? clearInterval(this.interValStatus) : null
  },
  methods: {
    setToggleMessage(type) {
      if (!this.messageStatus.pay_status) {
        this.openAutoPay = true
      } else {
        this.setMessageToggle(type)
      }
    },
    submitOpen() {
      if (this.code === this.randomCode) {
        this.setMessageToggle(1)
      } else {
        this.$message.error('验证码错误')
      }
    },
    cancelRandomCode() {
      this.randomCode = ''
      this.openAutoPay = false
    },
    createRandomCode() {
      this.randomCode = ''
      for (var i = 0; i < 5; i++) {
        this.randomCode += Math.ceil(Math.random() * 9)
      }
    },
    sendOrderPay() {
      this.$confirm('确认给所有用户发送点订单结算模板消息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading()
        apis.sendOrderPay().then(res => {
          loading.close()
          if (res.code === 200) {
            this.$message.success('发送成功')
          } else {
            this.$message.error(res.message || '发送失败')
          }
        }).catch(() => {
          loading.close()
          this.$message.error('发送失败')
        })
      }).catch(() => {})
    },
    interValStatus() {
      const _this = this
      if (this.messageStatusTimer) return false
      this.messageStatusTimer = setInterval(_this.getMesageStatus, 5000)
    },
    getMesageStatus() {
      apis.messageStatus().then(res => {
        if (res.code === 200) {
          this.messageStatus = res.data
        }
      })
    },
    setMessageToggle(type) {
      const loading = this.$loading()
      if (!type) {
        this.messageStatusTimer ? clearInterval(this.interValStatus) : null
      }
      apis.setMessageToggle({ type }).then(res => {
        loading.close()
        if (res.code === 200) {
          this.$message.success(res.message)
          this.cancelRandomCode()
          this.getMesageStatus()
        } else {
          this.$message.error(res.message || '设置失败')
        }
      }).catch(() => {
        loading.close()
        this.$message.error('设置失败')
      })
    },
    mulSubmitSendMessage() {
      if (this.mulselect.length === 0) {
        this.$message.error('请选择至少一个')
        return false
      }
      this.sendMessage(this.mulselect)
    },
    sendMessage(ids) {
      this.$confirm('确认提醒用户继续付款', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apis.sendMessage({ ids }).then(res => {
          if (res.code === 200) {
            this.$message.success('提醒代理成功')
          } else {
            this.$message.error(res.message || '提醒代理失败')
          }
        }).catch(() => {
          this.$message.error('提醒代理失败')
        })
      }).catch(() => {})
    },
    // 多选
    orderMulSelect(val) {
      this.mulselect = val.map(({ user_id }) => user_id)
    },
    changePagination({ page, limit }) {
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getList()
    },
    getList() {
      this.loadingFull = true
      apis.noPayList(this.searchParams).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.list = res.data.list
          this.total = res.data.total
        } else {
          this.$message.error(res.message || '获取未支付列表失败')
        }
      }).catch(() => {
        this.loadingFull = false
        this.$message.error('获取未支付列表失败')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .code_check {
    margin: 0;
    width: 80px;
    height: 40px;
    background: #cccccc;
    color: #ffffff;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    letter-spacing: 2px;
    user-select: none;
    cursor: pointer;
  }
</style>
