<template>
  <basic-container>
    <div>
      <Card class="cardTitle">
        <p>
          <el-button type="primary" @click="backPage" style="width: 80px;"
            >返回</el-button
          >
          <el-button
            v-if="type == '1'"
            type="primary"
            @click="suspendBtn"
            style="width: 100px;  margin-left: 20px;"
            >积分包终止</el-button
          >
        </p>
      </Card>

      <avue-crud
        style="width:100%;margin-top:15px;"
        :data="tableData"
        :option="option"
        :page.sync="page"
        :table-loading="tableLoading"
        @on-load="getList"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        <template slot="menu" slot-scope="scope">
          <div v-if="type != '1'">
            <el-button
              type="text"
              size="small"
              icon="el-icon-view"
              v-show="scope.row.status == '1'"
              @click="agreeBtn(scope.row, scope.index)"
              >同意
            </el-button>

            <el-button
              type="text"
              size="small"
              icon="el-icon-view"
              v-show="scope.row.status == '1'"
              @click="refuseBtn(scope.row, scope.index)"
              >拒绝
            </el-button>
          </div>

          <div v-if="type == '1'">
            <el-button
              type="text"
              size="small"
              icon="el-icon-view"
              v-show="scope.row.status == '2' && scope.row.enableType == '0'"
              @click="stopBtn(scope.row, scope.index)"
              >终止
            </el-button>
          </div>
        </template>
      </avue-crud>

      <!-- 中止任务 -->
      <el-dialog
        title="终止任务"
        :visible.sync="enableFlagDig"
        width="50%"
        center
      >
        <el-form
          :model="enableForm"
          :rules="enableRule"
          ref="enableForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="请选择积分收回方式" prop="enableFlag">
                <el-radio-group v-model="enableForm.enableFlag">
                  <el-radio label="1">全部收回</el-radio>
                  <el-radio label="2">剩余收回</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelBtn">取 消</el-button>
          <el-button type="primary" @click="enableFlagBtn('enableForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!--      终止积分包-->
      <el-dialog
        title="终止积分包"
        :visible.sync="enableScoreFlagDig"
        width="50%"
        center
      >
        <el-form
          :model="enableScoreForm"
          :rules="enableScoreRule"
          ref="enableScoreForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="请选择积分收回方式" prop="enableScoreFlag">
                <el-radio-group v-model="enableScoreForm.enableScoreFlag">
                  <el-radio label="1">全部收回</el-radio>
                  <el-radio label="2" v-if="ytj != 'null' && ytj != 0"
                    >剩余收回</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancleScoreBtn">取 消</el-button>
          <el-button
            type="primary"
            @click="enableScoreFlagBtn('enableScoreForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
import { receiptApprovalData } from "@/const/crud/assignPoints/commonUse/approval";

import {
  getPage,
  approvalStatus,
  updateZZ
} from "@/api/assignPoints/currency/approval";

import { updateEnable } from "@/api/assignPoints/currency/index";

export default {
  name: "receiptApproval",
  data() {
    return {
      tableData: [],
      option: receiptApprovalData,
      page: {
        pageSize: 10,
        pagerCount: 5
      },
      id: null, //参数
      type: null, //是否终止页面
      ytj: null, // 终止积分包是否显示剩余收回
      tableLoading: false,
      searchForm: {},
      enableFlagDig: false,
      enableScoreFlagDig: false,
      enableForm: {},
      enableScoreForm: {},
      enableRule: {
        enableFlag: [
          { required: true, message: "请选择积分回收方式", trigger: "change" }
        ]
      },
      enableScoreRule: {
        enableScoreFlag: [
          { required: true, message: "请选择积分回收方式", trigger: "change" }
        ]
      }
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.type = this.$route.query.type;
    this.ytj = this.$route.query.ytj;
  },
  methods: {
    // 初始化页面
    getList(page, params) {
      this.tableLoading = true;
      getPage(
        Object.assign(
          {
            packageId: this.$route.query.id,
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm
        )
      )
        .then(response => {
          this.tableData = [];
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    // 返回按钮
    backPage() {
      this.$router.$avueRouter.closeTag();
      this.$router.push({ path: "/admin/assignPoints/commonUse/index" });
    },

    // 同意按钮
    agreeBtn(row) {
      this.$confirm("是否同意", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning"
      })
        .then(() => {
          let arg = {
            packageId: row.packageId,
            id: row.id,
            status: 2
          };
          approvalStatus(arg)
            .then(data => {
              //this.$message.success("审核通过");
              this.getList(this.page);
            })
            .catch(() => {});
        })
        .catch(() => {
          //this.$message.error("请求异常");
        });
    },

    // 拒绝按钮
    refuseBtn(row) {
      this.$confirm("是否拒绝", "警告", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning"
      })
        .then(() => {
          let arg = {
            packageId: row.packageId,
            id: row.id,
            status: 3
          };
          approvalStatus(arg)
            .then(data => {
              //this.$message.success("审核通过");
              this.getList(this.page);
            })
            .catch(() => {
              this.$message.error("请求异常");
            });
        })
        .catch(() => {});
    },
    // 终止按钮
    stopBtn(row, done) {
      this.enableFlagDig = true;
      this.suspendData = row;
    },

    // 终止确认按钮
    enableFlagBtn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let args = {
            enableType: this.enableForm.enableFlag,
            id: this.suspendData.id
          };
          updateZZ(args).then(response => {
            this.$message.success("终止成功");
            this.enableFlagDig = false;
            this.getList(this.page);
            this.enableForm = {};
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 取消按钮
    cancelBtn() {
      this.enableFlagDig = false;
      this.enableForm = {};
    },
    // 分页查询
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    suspendBtn() {
      this.enableScoreFlagDig = true;
    },
    //取消
    cancleScoreBtn() {
      this.enableScoreFlagDig = false;
      this.enableScoreForm = {};
    },
    // 终止积分包确认按钮
    enableScoreFlagBtn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let args = {
            enableType: this.enableScoreForm.enableScoreFlag,
            id: this.$route.query.id
          };
          updateEnable(args).then(response => {
            this.$message.success(response.data.data);
            this.getList(this.page);
            this.enableScoreFlagDig = false;
            this.enableScoreForm = {};
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
