<template>
  <div class="unitRecharge">
    <div class="header">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="onSearch()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn">导出</el-button>
        </el-form-item>
        <el-form-item>
          <el-select v-model="page.examineStatus" placeholder="全部状态">
            <el-option v-for="item in examineStatus" :key="item.id" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="page.name" placeholder="全部单位">
            <el-option v-for="item in name" :key="item.id" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="page.opType" placeholder="全部操作类型">
            <el-option v-for="item in opType" :key="item.id" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="value" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChangePicker" />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="onChangeDialogVisible('add')">增加</el-button>
      <el-button type="primary" @click="onChangeDialogVisible('audit')">审核</el-button>
    </div>
    <Table v-show="flag" :data="tableData" :list="tableList" :judgment="true" :total="total" :loading="loading" @selectionChange="onSelectionChange" @sizeChange="onSizeChange">
      <template #type="data">
        <div v-show="data.item === 'rechargeNum'">
          {{ data.scope.rechargeNum / 10000 }}
        </div>
        <div v-show="data.item === 'rechargeAfterNum'">
          {{ data.scope.rechargeAfterNum / 10000 }}
        </div>
        <div v-show="data.item === 'payNum'">
          {{ data.scope.payNum / 10000 }}
        </div>
        <div v-show="data.item === 'rechargeType'">
          {{ data.scope.rechargeType === 1 ? '充值' : '减扣' }}
        </div>
        <div v-show="data.item === 'examineStatus'">
          <span>{{ data.scope.examineStatus === 0 ? '待审' : '同意' }}</span>
          <span v-show="data.scope.examineStatus === 2">拒绝</span>
        </div>
      </template>
    </Table>
    <Add :dialog="dialogVisible" :text="text" :table-change="tableListChange" @changeDialog="onChangeDialog" @sbmit="onSbmit" />
  </div>
</template>

<script>
import Table from '@/components/Table/index.vue'
import Add from '@/views/Account/UnitRecharge/components/add.vue'
import { smsSmsChangeList1API } from '@/api/Account/UnitRecharge'

export default {
  name: 'UnitRecharge',

  components: {
    Table,
    Add
  },

  data() {
    return {
      page: {
        limit: 10,
        offset: 0,
        opType: '',
        name: '',
        beginDate: '',
        endDate: '',
        examineStatus: ''
      },
      total: 0,
      value: '',

      tableData: [],
      tableList: [
        {
          id: '1',
          label: '序号',
          prop: 'uid',
          flag: false
        },
        {
          id: '2',
          label: '单位名称',
          prop: 'name',
          flag: false
        },
        {
          id: '3',
          label: '登录用户名',
          prop: 'username',
          flag: false
        },
        {
          id: '4',
          label: '充值金额',
          prop: 'rechargeNum',
          flag: true
        },
        {
          id: '5',
          label: '充值后金额',
          prop: 'rechargeAfterNum',
          flag: true
        },
        {
          id: '6',
          label: '记账金额',
          prop: 'payNum',
          flag: true
        },
        {
          id: '7',
          label: '操作类型',
          prop: 'rechargeType',
          flag: true
        },
        {
          id: '8',
          label: '审核状态',
          prop: 'examineStatus',
          flag: true
        },
        {
          id: '9',
          label: '充值说明',
          prop: '',
          flag: false
        },
        {
          id: '10',
          label: '充值时间',
          prop: 'rechargeTime',
          flag: false
        },
        {
          id: '11',
          label: '操作用户',
          prop: 'createUserName',
          flag: false
        }
      ],
      tableListChange: [],
      onSelectionChangeValue: [],

      opType: [
        {
          id: 1,
          value: '',
          label: '全部操作类型'
        },
        {
          id: 2,
          value: 1,
          label: '充值'
        },
        {
          id: 3,
          value: 2,
          label: '减扣'
        }
      ],
      name: [
        {
          id: 1,
          value: '全部单位',
          label: '全部单位'
        },
        {
          id: 2,
          value: '短信服务中心',
          label: '短信服务中心'
        },
        {
          id: 3,
          value: '市场部',
          label: '市场部'
        },
        {
          id: 4,
          value: '博物馆',
          label: '博物馆'
        }
      ],
      examineStatus: [
        {
          id: 0,
          value: '',
          label: '全部状态'
        },
        {
          id: 1,
          value: '0',
          label: '待审'
        },
        {
          id: 2,
          value: '1',
          label: '同意'
        },
        {
          id: 3,
          value: '2',
          label: '拒绝'
        }
      ],

      flag: false,
      loading: false,
      dialogVisible: false,

      text: ''
    }
  },

  async created() {
    await this.getSmsSmsChangeList1API()
    this.flag = true
  },

  methods: {
    async getSmsSmsChangeList1API() {
      this.loading = true
      const res = await smsSmsChangeList1API(this.page)
      this.tableData = res.rows.map((item, index) => {
        return { ...item, uid: index + 1 }
      })
      this.total = res.total
      this.loading = false
    },
    async onSizeChange(value) {
      this.page.limit = value
      await this.getSmsSmsChangeList1API()
    },
    async onSearch() {
      await this.getSmsSmsChangeList1API(this.page)
    },
    onChangePicker(data) {
      this.page.beginDate = data[0]
      this.page.endDate = data[1]
    },
    onSelectionChange(value) {
      if (value.length === 1) this.tableListChange = value
      this.onSelectionChangeValue = value
    },
    onChangeDialog() {
      this.dialogVisible = !this.dialogVisible
    },
    async onSbmit() {
      await this.getSmsSmsChangeList1API(this.page)
    },
    onChangeDialogVisible(value) {
      if (value === 'add') this.text = value
      if (value === 'audit' && this.onSelectionChangeValue.length === 1) this.text = value
      if (value === 'audit' && this.onSelectionChangeValue.length < 1) {
        return this.$message({
          type: 'warning',
          message: '请选中一项'
        })
      } else if (value === 'audit' && this.onSelectionChangeValue.length > 1) {
        return this.$message({
          type: 'warning',
          message: '只能选择一项'
        })
      }
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.accountInfo {
  .header {

      .select {
        margin-right: 20px;
      }
  }
}
</style>
