<template>
  <basic-container class="base">
    <avue-crud
      :data="tableData"
      :option="integralOption"
      :page.sync="page"
      :table-loading="tableLoading"
      @on-load="getList"
      @size-change="sizeChange"
      @current-change="currentChange"
      @search-change="searchVal"
    >
      <template slot-scope="scope" slot="menu">
        <el-button type="text" @click="recordingClick(scope.row)"
          >充值记录</el-button
        >
        <el-button type="text" @click="rechargeClick(scope.row)"
          >充值</el-button
        >
        <el-button type="text" @click="permissionsClick(scope.row)"
          >权限管理</el-button
        >
      </template>
    </avue-crud>

    <!-- 充值记录 -->
    <el-dialog
      title="充值记录"
      center=""
      :visible.sync="recordingVisible"
      width="60%"
    >
      <avue-crud
        :data="recordingData"
        :option="recordingOption"
        :page.sync="recordingPage"
        @size-change="recordingSizeChange"
        @current-change="recordingCurrentChange"
      >
      </avue-crud>
    </el-dialog>

    <!-- 充值 -->
    <el-dialog
      title="积分充值"
      center=""
      :visible.sync="rechargeVisible"
      width="45%"
      :before-close="rechargeClose"
    >
      <el-form
        ref="recordingForm"
        :model="recordingForm"
        :rules="recordingRule"
        label-width="130px"
      >
        <el-form-item label="企业名称" prop="deptName" required>
          <el-input v-model="recordingForm.deptName" disabled></el-input>
        </el-form-item>
        <el-form-item label="积分余额" prop="score" required>
          <el-input v-model="recordingForm.score" disabled></el-input>
        </el-form-item>
        <!-- <el-form-item label="充值金额（元）" prop="rechargeAmount">
          <el-input
            v-model="recordingForm.rechargeAmount"
            @input="
              v => (recordingForm.rechargeAmount = v.replace(/[^\d.]/g, ''))
            "
          ></el-input>
        </el-form-item> -->
        <el-form-item label="充值积分" prop="rechargeScore" required>
          <el-input v-model="recordingForm.rechargeScore"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rechargeClose">取 消</el-button>
        <el-button type="primary" @click="rechargeSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 权限管理 -->
    <el-dialog
      title="权限管理"
      center
      :visible.sync="permissionsVisible"
      width="45%"
      :before-close="permissionsClose"
    >
      <el-form
        ref="permissionsForm"
        :model="permissionsForm"
        label-width="120px"
        :rules="permissionsRrules"
      >
        <el-form-item label="企业名称" prop="deptName" required>
          <el-input v-model="permissionsForm.deptName" disabled></el-input>
        </el-form-item>
        <!-- <el-form-item label="服务费率" prop="serviceCharge">
        <el-input v-model="permissionsForm.serviceCharge"  @input="(v)=>(permissionsForm.serviceCharge=v.replace(/[^\d.]/g,''))">
          <template slot="append">%</template>
        </el-input>
      </el-form-item> -->
        <el-form-item label="权限" prop="permissions">
          <el-select
            v-model="permissionsForm.permissions"
            multiple
            placeholder="请选择"
            @change="permissionsChange"
          >
            <el-option
              v-for="item in permissionsDict"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="透支额度" prop="overdrawScore">
          <el-input
            :disabled="overdrawScoreDiasble"
            v-model="permissionsForm.overdrawScore"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="permissionsClose">取 消</el-button>
        <el-button type="primary" @click="permissionsSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import {
  rechargePage,
  recharge,
  recordingPage,
  rechargeConfig
} from "@/api/account/recharge/index.js";
import {
  integralOption,
  recordingOption
} from "@/const/crud/account/recharge/index.js";
import { getDictType } from "@/api/common";
export default {
  data() {
    return {
      tableData: [],
      integralOption,
      page: {
        total: 0, // 总页数
        pageSize: 10,
        pagerCount: 0
      },
      searchForm: {},
      tableLoading: false,
      recordingVisible: false,
      recordingData: [],
      recordingOption,
      recordingPage: {
        total: 0, // 总页数
        pageSize: 10,
        pagerCount: 0
      },
      rechargeVisible: false,
      selectRow: {},
      recordingForm: {
        deptName: "",
        deptId: "",
        rechargeAmount: "",
        rechargeScore: ""
      },
      recordingRule: {
        rechargeAmount: [
          { required: true, message: "请输入充值金额", trigger: "blur" }
        ],
        rechargeScore: [
          { required: true, message: "请输入充值积分", trigger: "blur" }
        ]
      },
      permissionsVisible: false,
      permissionsDict: [],
      overdrawScoreRequired: false,
      permissionsRrules: {
        serviceCharge: [
          { required: true, message: "请输入服务费率", trigger: "blur" }
        ],
        overdrawScore: [
          { required: false, message: "请输入透支额度", trigger: "blur" }
        ]
      },
      overdrawScoreDiasble: true,
      permissionsForm: {
        deptId: "",
        deptName: "",
        serviceCharge: "100",
        permissions: [],
        overdrawScore: ""
      }
    };
  },
  created() {
    this.getDict();
  },
  watch: {
    "recordingForm.rechargeScore": {
      handler(newVal) {
        this.recordingForm.rechargeAmount = Math.ceil(newVal / 100);
      },
      deep: true
    }
  },
  methods: {
    getDict() {
      getDictType({ type: "recharge_permissions" }).then(res => {
        this.permissionsDict = res.data.data;
      });
    },
    async getList(page, params) {
      this.tableLoading = true;
      let data = Object.assign(
        {
          current: page.currentPage,
          size: page.pageSize
        },
        params,
        this.searchForm
      );
      let res = await rechargePage(data);
      if (res.data.code === 0) {
        this.tableData = res.data.data.records;
        this.page.total = res.data.data.total;
      }
      this.tableLoading = false;
    },
    permissionsChange(val) {
      if (val.length) {
        this.overdrawScoreDiasble = false;
      } else {
        this.overdrawScoreDiasble = true;
        this.permissionsForm.overdrawScore = "";
      }
      console.log("val", val);
      if (val.includes("OVERDRAW")) {
        this.permissionsRrules.overdrawScore[0].required = true;
      } else {
        this.permissionsRrules.overdrawScore[0].required = false;
      }
    },
    // 分页查询
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    searchReset() {
      this.searchForm = {};
    },
    searchVal(form, done) {
      this.searchForm = form;
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    recordingClick(row) {
      this.selectRow = row;
      this.getRecordingList();
    },
    recordingSizeChange(pageSize) {
      this.recordingPage.pageSize = pageSize;
      this.getRecordingList();
    },
    recordingCurrentChange(current) {
      this.recordingPage.currentPage = current;
      this.getRecordingList();
    },
    async getRecordingList() {
      const res = await recordingPage({
        deptId: this.selectRow.deptId,
        current: this.recordingPage.currentPage,
        size: this.recordingPage.pageSize,
        type: "RECHARGE"
      });
      if (res.data.code === 0) {
        this.recordingData = res.data.data.records;
        this.recordingPage.total = res.data.data.total;
        this.recordingVisible = true;
      }
    },
    rechargeClick(row) {
      console.log("row", row);
      if (!row.serviceCharge) {
        this.$message.warning("请先设置服务费率");
        return;
      }
      this.rechargeVisible = true;
      this.selectRow = row;
      this.recordingForm.deptName = row.deptName;
      this.recordingForm.score = row.score;
      this.recordingForm.deptId = row.deptId;
    },
    rechargeClose() {
      this.$refs.recordingForm.resetFields();
      this.rechargeVisible = false;
    },
    async rechargeSubmit() {
      this.$refs.recordingForm.validate(async valid => {
        if (valid) {
          let res = await recharge(this.recordingForm);
          if (res.data.code === 0) {
            this.$message.success("充值成功！");
            this.getList(this.page);
            this.rechargeClose();
          }
        }
      });
    },
    async permissionsClick(row) {
      this.permissionsVisible = true;
      this.selectRow = row;
      this.permissionsForm.deptName = row.deptName;
      this.permissionsForm.deptId = row.deptId;
      this.permissionsForm.serviceCharge = row.serviceCharge;
      this.permissionsForm.permissions = row.permissions;
      this.permissionsForm.overdrawScore = row.overdrawScore;
      if (row.overdrawScore == 0) {
        this.permissionsForm.overdrawScore = "";
      }
      this.overdrawScoreDiasble = !row.permissions;
    },
    permissionsClose() {
      const obj = {
        deptId: "",
        deptName: "",
        serviceCharge: "100",
        permissions: [],
        overdrawScore: ""
      };
      this.permissionsForm = obj;
      // this.$refs.permissionsForm.resetFields();
      this.permissionsVisible = false;
    },
    async permissionsSubmit() {
      this.permissionsForm.serviceCharge = "100";
      this.$refs.permissionsForm.validate(async valid => {
        if (valid) {
          let obj = this.permissionsForm;
          const res = await rechargeConfig(obj);
          if (res.data.code === 0) {
            this.$message.success("权限添加成功！");
            this.getList(this.page);
            this.permissionsClose();
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
</style>
