<template>
  <basic-container class="base">
    <Card class="cardTitle">
      <p>
        <el-button type="primary" @click="backPage" style="width: 80px"
          >返回</el-button
        >
      </p>
    </Card>
    <div class="all-points">
      <el-form label-width="85px">
        <el-form-item label="总积分包值">
          <el-input v-model="score" disabled></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="explain">
      <h5>
        拆包：选择任务，点击“拆分为新包”，将所选任务拆分到新的积分包。拆分后，新积分包包值是“已选任务分值”，原积分包包值将变为“总积分包值-新积分包值”。
      </h5>
      <p>说明：“已选任务分值”必须小于 “总积分包值”，否则不允许拆分</p>
    </div>
    <avue-crud
      :data="tableData"
      :option="splitOption"
      :page.sync="page"
      :table-loading="tableLoading"
      @search-change="searchVal"
      @search-reset="searchReset"
      @on-load="getList"
      @size-change="sizeChange"
      @current-change="currentChange"
      @selection-change="selectionChange"
    >
      <template slot="menuLeft">
        <el-button
          type="primary"
          icon="el-icon-upload2"
          @click="splitClick"
          size="small"
        >
          拆分为新包
        </el-button>
      </template>
      <template slot="taskTypeIdSearch">
        <el-select v-model="taskTypeId" placeholder="任务类型">
          <el-option
            :label="item.taskTypeName"
            :value="item.id"
            v-for="item in taskList"
            :key="item.id"
          ></el-option>
        </el-select>
      </template>
      <template slot="taskTypeId" slot-scope="scope">
        {{ getName && getName(scope.row) }}
      </template>
      <template slot="tip">
        <span class="ml20"
          >总任务积分：<span class="fwb f16">{{ totalScore }}</span></span
        >
      </template>
    </avue-crud>
    <el-dialog title="拆包" center :visible.sync="dialogVisible" width="50%">
      <el-form label-width="100px" :inline="true">
        <el-form-item label="总积分包值">
          <el-input v-model="score" disabled></el-input>
        </el-form-item>
        <el-form-item label="已选任务分值">
          <el-input v-model="totalScore" disabled></el-input>
        </el-form-item>
      </el-form>
      <h3 class="txt">
        拆分后，新积分包包值为{{ totalScore }}，原积分包包值将变为{{
          score - totalScore
        }}，确认拆分？
      </h3>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitClick">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import { splitOption } from "@/const/crud/assignPoints/quota/index";
import { getTaskList } from "@/api/assignPoints/currency/taskAudit";
import {
  getSplitList,
  getSplitUnpack
} from "@/api/assignPoints/currency/index";
export default {
  data() {
    return {
      score: 0,
      taskTypeId: "",
      taskList: [],
      splitOption,
      tableData: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      tableLoading: false,
      selection: [],
      selectTaskIds: [],
      dialogVisible: false
    };
  },
  computed: {
    totalScore() {
      return this.selection.reduce((pre, cur) => {
        return pre + (cur.score || 0);
      }, 0);
    }
  },
  created() {
    this.score = this.$route.query.score;
    this.getTaskList();
    this.getList();
  },
  methods: {
    getName(row) {
      let id = row.taskTypeId;
      let curr = this.taskList.find(item => item.id == id);
      return curr.taskTypeName;
    },
    selectionChange(selection, row) {
      this.selection = selection;
      this.selectTaskIds = [];
      if (undefined != selection) {
        this.selectTaskIds = selection.map(item => item.id);
      }
    },
    backPage() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
    async getTaskList() {
      let res = await getTaskList(this.$route.query.id, 3);
      this.taskList = res.data.data;
    },
    async getList() {
      this.tableLoading = true;
      const obj = {
        current: this.page.currentPage,
        scorePackageId: this.$route.query.id,
        size: this.page.pageSize,
        taskStatus: 3,
        taskTypeId: this.taskTypeId
      };
      const res = await getSplitList(obj);
      if (res.data.code === 0) {
        this.dataList = res.data.data.records;
        this.page.total = res.data.data.total;
        this.tableData = res.data.data.records;
      }
      this.tableLoading = false;
    },
    searchVal(form, done) {
      this.searchForm = form;
      this.searchForm.taskTypeId = this.taskTypeId;
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    searchReset() {
      this.taskTypeId = "";
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
      this.getList();
    },
    currentChange(val) {
      this.page.currentPage = val;
      this.getList();
    },
    splitClick() {
      if (!this.selection.length) {
        this.$message({
          message: "请先选择拆分对象",
          type: "warning"
        });
        return;
      }
      if (Number(this.totalScore) >= this.score) {
        this.$message({
          message: "“已选总任务积分”必须小于“总积分包分值”，否则不能拆分。",
          type: "warning"
        });
        return;
      }
      this.dialogVisible = true;
    },
    async submitClick() {
      let obj = {
        scorePackageId: this.$route.query.id,
        remainPackageScore: Number(this.score) - this.totalScore,
        selectTaskScore: this.totalScore,
        selectTaskIds: this.selectTaskIds
      };
      let res = await getSplitUnpack(obj);
      if (res.data.code == 0) {
        this.$message.success("拆包成功");
        this.page.currentPage = 1;
        this.getList();
        this.dialogVisible = false;
        this.score = Number(this.score) - this.totalScore;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.all-points {
  margin-top: 20px;
  width: 30%;
  padding-left: 20px;
}
.explain {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 23px;
  h5 {
    color: #333333;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
  }
  p {
    color: #999;
    font-size: 12px;
    line-height: 18px;
  }
}
.search {
  margin-top: 23px;
}
.txt {
  margin-left: 20px;
  font-weight: 500;
  font-size: 14px;
  color: #333;
}
</style>
