<template>
  <div class="cantainer">
    <!-- 搜索 -->
    <div class="formSearch">
      <el-form :inline="true" :model="querySelect">
        <!-- <el-form-item label="是否启用">
          <el-select v-model="formInline.state" placeholder="请选择">
          <el-option label="是" value="1" />
          <el-option label="否" value="0" />
          </el-select>
          </el-form-item> -->
        <el-form-item>
          <!-- <el-button type="primary" plain @click="search">查询</el-button> -->
          <el-button type="success" plain @click="isCreate = true;isUpdata = false">新增充值额度</el-button>
          <el-switch
            v-model.number="isOpenUp"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            active-text="开启商家充值"
            inactive-text="关闭商家充值"
            @change="openUp()"
          >
          </el-switch>
          <!-- <el-button type="info" plain @click="clear">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table
        ref="multipleTable" :data="tableData" border center
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
      >
        <el-table-column label="ID" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.amountId }}</template>
        </el-table-column>
        <el-table-column label="充值金额">
          <template slot-scope="scope">{{ scope.row.rechargeAmount }}</template>
        </el-table-column>
        <el-table-column label="显示名称">
          <template slot-scope="scope">{{ scope.row.displayName }}</template>
        </el-table-column>
        <el-table-column label="详细描述信息">
          <template slot-scope="scope">{{ scope.row.description }}</template>
        </el-table-column>
        <el-table-column label="是否激活">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: center;align-items: center;">
              <el-switch
                v-model.number="scope.row.isActive"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                @change="editOpen(scope.row)"
              >
              </el-switch>
              <span style="line-height: 100%;margin-left: 10px;">{{ scope.row.isActive === 1 ? '开启' : '关闭' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="详细描述信息">
          <template slot-scope="scope">
            <div class="btnList">
              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
              <el-button v-show="isShowDelete" type="text" @click="deletes(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination
          :current-page="querySelect.page" :page-sizes="[10, 20, 50, 100]" :page-size="querySelect.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog
      :title="!isUpdata ? '新增用户' : '修改用户'" :visible.sync="isCreate" width="30%" center
      :close-on-click-modal="false"
    >
      <!-- 新增用户 -->
      <div>
        <el-form ref="ruleForm" :model="formData" label-width="80px" :rules="rules">
          <el-form-item label="商家ID" prop="">
            <el-input v-model="formData.shopId" disabled maxlength="20" />
          </el-form-item>
          <el-form-item label="充值金额" prop="rechargeAmount">
            <!-- <el-input v-if="formData" maxlength="11" :value="hidden(addForm.phone, 3, 4)" @focus="focusPhoneInput" /> -->
            <el-input v-model.number="formData.rechargeAmount" @change="getBonusAmount()" />
          </el-form-item>
          <el-form-item label="赠送金额" prop="bonusAmount">
            <el-input v-model.number="formData.bonusAmount" disabled />
            <!-- <el-input disabled v-text="bonusAmount" /> -->
          </el-form-item>
          <el-form-item label="显示名称" prop="displayName">
            <el-input v-model="formData.displayName" placeholder="显示名称,例如: 50元充值" />
          </el-form-item>
          <el-form-item label="详情信息" prop="description">
            <el-input v-model="formData.description" />
          </el-form-item>
          <el-form-item label="是否激活">
            <el-radio-group v-model="formData.isActive">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isCreate = false">取 消</el-button>
        <el-button v-if="!isUpdata" type="primary" @click="createdAcount('ruleForm')">
          确 定
        </el-button>
        <el-button v-if="isUpdata" type="primary" @click="editAcount('ruleForm')">
          保存
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { saveAcount, updateAcount, deleteAcount, getAllAcount, getByIdAcount, disableAcount, switchRecharge, switchRechargeOf } from '@/api/voucherManagement/businessRechargeAmounts'
export default {
  // eslint-disable-next-line vue/match-component-file-name
  name: 'RechargeManagement',
  data() {
    return {
      isOpenUp: 0,
      isShowDelete: false,
      isCreate: false,
      querySelect: {
        shopId: Cookies.get('shopID'),
        page: 1,
        pageSize: 10
      },
      total: 0,
      isUpdata: false,
      updataId: '',
      formData: {
        shopId: Cookies.get('shopID'),
        rechargeAmount: '',
        bonusAmount: '',
        displayName: '',
        description: '',
        isActive: 1
      },
      userRules: {},
      tableData: [],
      rules: {
        rechargeAmount: [{ required: true, message: '请输入充值金额', trigger: 'blur' }, { type: 'number', message: '充值金额必须为数字' }],
        bonusAmount: [{ required: true, message: '请输入充值金额', trigger: 'change' }, { type: 'number', message: '充值金额必须为数字' }],
        displayName: [ { required: true, message: '请输入显示名称', trigger: 'change' } ],
        description: [ { required: true, message: '请输入详情信息', trigger: 'change' } ],
        isActive: [ { required: true, message: '请选择是否激活', trigger: 'change' } ]
      }
    }
  },
  created() {
    // this.formData.shopId = Cookies.get('shopID')
    this.getDataList()
    switchRechargeOf().then((res) => {
      this.isOpenUp = Number(res.data.switchRecharge)
      console.log(res)
    })
      .catch((err) => {
        console.log(err)
      })
  },
  methods: {
    getDataList() {
      getAllAcount(this.querySelect).then((res) => {
        // console.log(res)
        this.tableData = res.data.records
      })
        .catch((err) => {
          window.console.log(err)
        })
    },
    createdAcount() {
      this.$refs.ruleForm.validate((valid) => {
        // console.log(valid)
        // console.log(this.formData)
        if (valid) {
          saveAcount(this.formData).then((res) => {
            // console.log(res)
            this.$message({
              message: '创建成功',
              type: 'success'
            })
            this.isCreate = false
            this.getDataList()
          })
            .catch((err) => {
              window.console.log(err)
            })
        } else {
          this.$message.error('请输入正确的信息')
        }
      })
    },
    getBonusAmount() {
      this.formData.bonusAmount = this.formData.rechargeAmount * 2
    },
    edit(row) {
      this.isCreate = true
      this.isUpdata = true
      this.updataId = row.amountId
      for (const key in this.formData) {
        this.formData[key] = row[key]
      }
    },
    editAcount() {
      this.$refs.ruleForm.validate((valid) => {
        // console.log(valid)
        // console.log(this.formData)
        if (valid) {
          updateAcount({ ...this.formData, amountId: this.updataId }).then((res) => {
            // console.log(res)
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.isCreate = false
            this.getDataList()
          })
            .catch((err) => {
              window.console.log(err)
            })
        } else {
          this.$message.error('请输入正确的信息')
        }
      })
    },
    editOpen(value) {
      // console.log(value)
      disableAcount({
        amountId: value.amountId,
        isActive: value.isActive
      }).then((res) => {
        // console.log(res)
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      })
        .catch((err) => {
          window.console.log(err)
        })
    },
    handleSizeChange(val) {
      this.querySelect.pageSize = val
      this.getDataList(this.querySelect)
    },
    handleCurrentChange(val) {
      this.querySelect.page = val
      this.getDataList(this.querySelect)
    },
    deletes(value) {
      deleteAcount({
        amountId: value.amountId
      }).then((res) => {
        // console.log(res)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getDataList()
      })
    },
    openUp(value) {
      // console.log(value)
      // console.log(this.isOpenUp)
      switchRecharge({
        switchOf: this.isOpenUp
      }).then((res) => {
        console.log(res)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cantainer {
	padding: 20px;
}
@import url("../../../styles/elDialog.scss");

.pending {
	padding: 30px;
}

.fenye {
	margin-top: 20px;
}

.clickMe {
	color: #3a68f2;
	cursor: pointer;
}

.uploadDialog {
	// display: flex;
	// flex-direction: column;
	// justify-content: center;
	>>>.el-upload__tip {
		display: inline-block;
		width: 360px;
		margin: auto;
	}
}

.vipDialog {
	.priceTable {
		table {
			width: 100%;
			text-align: center;
			border-left: 1px solid #EBEEF5;
			border-bottom: 1px solid #EBEEF5;
			font-size: 14px;
			color: #606266;
			border-collapse: collapse;

			tr {
				border-top: 1px solid #EBEEF5;

				th {
					padding: 12px 0;
					background: #EEF3FF;
					color: #333;
					border-right: 1px solid #EBEEF5;
				}

				td {
					padding: 12px 0;
					border-right: 1px solid #EBEEF5;

					&.td-input {
						.el-input {
							width: 80px;
							margin-right: 0;
						}
					}

					&:nth-child(1),
					&:nth-child(2) {
						width: 80px;
					}

					.el-input {
						width: 100px;
						margin-right: 10px;
					}
				}
			}
		}
	}

	.clearBtn {
		margin-top: 20px;
	}
}
</style>
