<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :permission="permissionList"
        :table-loading="tableLoading"
        :option="tableOption"
        @selection-change="selectionChange"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-update="handleUpdate"
        @row-save="handleSave"
        @row-del="rowDel"
      >
        <template slot="menuLeft">
          <el-button
            type="primary"
            icon="el-icon-view"
            size="small"
            @click.stop="batchReview"
          >
            批量审核
          </el-button>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            :disabled="scope.row.status > 1"
            @click="taskTG(scope.row, scope.index)"
            >审核通过
          </el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-delete"
            :disabled="scope.row.status > 1"
            @click="taskBtg(scope.row, scope.index)"
            >审核不通过
          </el-button>
        </template>
        <template slot="quizResult" slot-scope="scope">
          <template v-if="scope.row.quizResult && scope.row.quizResult.length">
            <template v-for="(item, index) in scope.row.quizResult">
              <span :key="item.quizId">
                <span class="mark-text" @click="showQuizFn(item)">{{
                  item.finalMark || 0
                }}</span>
                <span v-if="scope.row.quizResult.length - 1 !== index">/</span>
              </span>
            </template>
          </template>
        </template>
        <template slot="scorePackageName" slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="'积分包编号：' + scope.row.packageSn"
            placement="top-start"
          >
            <span>{{ scope.row.scorePackageName }}</span>
          </el-tooltip>
        </template>
      </avue-crud>
      <!-- 批量审核 -->
      <el-dialog
        title="接单审核"
        :visible.sync="batchReviewDialog"
        top="30vh"
        width="440px"
        @close="batchReviewClose"
        center
      >
        <div class="f16 mb10 batch-review-title">审核意见</div>
        <el-form
          :model="batchReviewForm"
          :rules="batchReviewRules"
          ref="batchReviewForm"
          label-width="94px"
        >
          <el-form-item label="审核意见：" prop="status">
            <el-radio-group v-model="batchReviewForm.status">
              <el-radio label="PASSED">审核通过</el-radio>
              <el-radio label="REJECTED">审核拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div v-if="batchReviewForm.status === 'PASSED'" class="attention tc">
          {{
            `将审核通过${batchReviewOperation}条数据，剩余${batchReviewRemain}条重复数据需手动审核`
          }}
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="batchReviewClose">取 消</el-button>
          <el-button
            type="primary"
            :loading="buttonLoading"
            @click="batchReviewSubmit"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <quizDialog :showDialog.sync="showAddQuizDialog" :quizItem="quizItem" />
    </basic-container>
  </div>
</template>

<script>
import {
  fetchList,
  getObj,
  addObj,
  putObj,
  delObj,
  batchReviewByIds,
  getBatchReviewIds
} from "@/api/wmscorepackagestatus";
import { tableOption } from "@/const/crud/wmscorepackagestatus";
import { mapGetters } from "vuex";
import { addWmScorePackage, editData } from "@/api/assignPoints/currency";
import quizDialog from "@/views/admin/wmscorepackagestatus/components/quizDialog";

export default {
  name: "wmscorepackagestatus",
  components: { quizDialog },
  data() {
    return {
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      batchReviewDialog: false,
      batchReviewForm: {}, // 批量审核form
      batchReviewRules: {
        status: [
          { required: true, message: "请选择审核意见", trigger: "change" }
        ]
      },
      buttonLoading: false,
      selectionList: [], // 当前表格选中项
      batchReviewIds: "", // 批量审核ids
      batchReviewOperation: 0, // 将审核通过条数
      batchReviewRemain: 0, // 需手动审核条数
      quizItem: {},
      showAddQuizDialog: false
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
    permissionList() {
      return {
        addBtn: this.vaildData(
          this.permissions.admin_wmscorepackagestatus_add,
          false
        ),
        delBtn: this.vaildData(
          this.permissions.admin_wmscorepackagestatus_del,
          false
        ),
        editBtn: this.vaildData(
          this.permissions.admin_wmscorepackagestatus_edit,
          false
        )
      };
    }
  },
  watch: {
    "batchReviewForm.status": {
      handler: function(newVal) {
        if (newVal === "PASSED") {
          getBatchReviewIds({ ids: this.batchReviewIds }).then(res => {
            if (res.data.code === 0) {
              this.batchReviewOperation =
                (res.data.data && res.data.data.operation) || 0;
              this.batchReviewRemain =
                (res.data.data && res.data.data.remain) || 0;
            } else {
              this.batchReviewOperation = 0;
              this.batchReviewRemain = 0;
              this.$message.error(
                '暂时无法获取"将审核通过条数"和"需手动审核条数"'
              );
            }
          });
        }
      }
    }
  },
  methods: {
    selectionChange(list) {
      this.selectionList = list;
      this.batchReviewIds = this.selectionList.map(ele => ele.id).join(",");
    },
    // 批量审核
    batchReview() {
      if (this.selectionList.length === 0) {
        return this.$message.warning("请选择审核项！");
      }
      this.batchReviewDialog = true;
    },
    // 批量审核弹窗关闭
    batchReviewClose() {
      this.batchReviewDialog = false;
      this.batchReviewForm = {};
    },
    // 批量审核提交
    batchReviewSubmit() {
      this.$refs.batchReviewForm.validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          batchReviewByIds({
            batchIds: this.batchReviewIds,
            status: this.batchReviewForm.status
          })
            .then(res => {
              if (res.data.code === 0) {
                if (this.batchReviewForm.status === "PASSED") {
                  // 审核通过
                  this.$message.success(
                    `审核通过${(res.data.data && res.data.data.operation) ||
                      0}条数据，剩余${(res.data.data && res.data.data.remain) ||
                      0}条重复数据需手动审核`
                  );
                } else {
                  this.$message.success("审核拒绝成功！");
                }
                this.batchReviewClose();
                this.getList(this.page);
              } else {
                this.$message.error(res.data.msg);
              }
              this.buttonLoading = false;
            })
            .catch(err => {
              this.buttonLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getList(page, params) {
      this.tableLoading = true;
      fetchList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm
        )
      )
        .then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    rowDel: function(row, index) {
      this.$confirm("是否确认删除ID为" + row.id, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return delObj(row.id);
        })
        .then(data => {
          this.$message.success("删除成功");
          this.getList(this.page);
        });
    },
    handleUpdate: function(row, index, done, loading) {
      putObj(row)
        .then(data => {
          this.$message.success("修改成功");
          done();
          this.getList(this.page);
        })
        .catch(() => {
          loading();
        });
    },
    handleSave: function(row, done, loading) {
      addObj(row)
        .then(data => {
          this.$message.success("添加成功");
          done();
          this.getList(this.page);
        })
        .catch(() => {
          loading();
        });
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    searchChange(form, done) {
      this.searchForm = form;
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    refreshChange() {
      this.getList(this.page);
    },
    taskTG(row, index) {
      row.status = "2";
      putObj(row)
        .then(data => {
          this.$message.success("审核通过成功");
          this.getList(this.page);
        })
        .catch(() => {});
    },
    taskBtg(row, index) {
      row.status = "3";
      putObj(row)
        .then(data => {
          this.$message.success("审核不通过成功");
          this.getList(this.page);
        })
        .catch(() => {});
    },
    // 合规测评
    showQuizFn(quizItem) {
      this.quizItem = quizItem;
      this.showAddQuizDialog = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.batch-review-title {
  padding-bottom: 5px;
  border-bottom: 1px solid #cccccc;
}
.attention {
  color: #d9001b;
}
.mark-text {
  cursor: pointer;
  color: #6eb657;
  &:hover {
    text-decoration: underline;
  }
}
</style>
