<template>
  <div>
    <div style="margin-top:2px; margin-bottom:15px;" class="inline-block-btn-list">
      <el-button
        class="first-element-btn"
        :disabled="multipleSelection.length < 1"
        @click="deleteInfoAll"
        type="danger"
        plain
      >批量删除</el-button>

      <TaskRelationBtn @send_success="onFilterChanged"></TaskRelationBtn>
    </div>

    <el-scrollbar
      wrap-class="column-wrapper scrollable-items-container"
      :native="false"
      style="height: 325px;"
    >
      <el-table
        stripe
        v-loading="loading"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="42" label="选择"></el-table-column>

        <el-table-column prop="employee_name" label="姓名"></el-table-column>
        <el-table-column prop="name" label="任务名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="remark" label="内容" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="积分">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.point > 0">{{scope.row.point}}</span>
              <span v-if="scope.row.point <= 0">{{scope.row.info.value_1}}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="分配周期">
          <template slot-scope="scope">
            <span v-if="scope.row.cycle_type == 0">每天</span>
            <span v-if="scope.row.cycle_type == 1">每周</span>
            <span v-if="scope.row.cycle_type == 2">每月</span>
            <span v-if="scope.row.cycle_type == 0">{{scope.row.distribution_time}}:00</span>
            <span v-if="scope.row.cycle_type == 1">
            <span v-if="scope.row.distribution_date==1">星期一 </span>
            <span v-if="scope.row.distribution_date==2">星期二 </span>
            <span v-if="scope.row.distribution_date==3">星期三 </span>
            <span v-if="scope.row.distribution_date==4">星期四 </span>
            <span v-if="scope.row.distribution_date==5">星期五 </span>
            <span v-if="scope.row.distribution_date==6">星期六 </span>
            <span v-if="scope.row.distribution_date==7">星期日 </span>{{scope.row.distribution_time}}:00
          </span>
            <span v-if="scope.row.cycle_type == 2">第{{scope.row.distribution_date}}天 {{scope.row.distribution_time}}:00</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text" @click="deleteInfo(scope.row.id)">删除</el-button>
              <el-button type="text" @click="editPointInfo(scope.row.id)">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <el-pagination
      background
      layout="total,sizes, prev, pager, next"
      @size-change="handleSizeChange"
      :page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="totalCount"
      :current-page.sync="currentPage"
      @current-change="changePage"
    ></el-pagination>



    <el-dialog
      append-to-body
      title="编辑信息"
      width="450px"
      :visible.sync="dialogEditVisible"
      :close-on-click-modal="false"
    >
      <RewardCreate ref="RewardEditCom" @send-success="InfoSendSuccess"></RewardCreate>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="EditSend">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog
      append-to-body
      title="编辑信息"
      width="450px"
      :visible.sync="dialogEditPointVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="Formdata"
        ref="newTaskForm"
        :rules="FormRules"
        @submit.native.prevent
        style="padding-right:20px;"
      >
        <el-form-item label="积分" name="point" prop="point" label-width="60px">
          <el-input v-model="Formdata.point" :value="Formdata.point" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark" label-width="60px">
          <el-input type="textarea" :value="Formdata.remark" v-model="Formdata.remark"></el-input>
        </el-form-item>
      </el-form>
      <!-- <RewardCreate ref="RewardEditCom" @send-success="InfoSendSuccess"></RewardCreate> -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editPointSend">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>



<script>
  import TaskRelationBtn from "@/views/performance/TaskRelationBtn";
export default {
  components: {  TaskRelationBtn },
  data() {
    return {
      FormRules: {
        point: [{ required: true, message: "请输入积分值", trigger: "blur" }]
      },
      multipleSelection: [],
      dialogCreateVisible: false,
      dialogEditVisible: false,
      dialogEditPointVisible: false,
      pageSize: 10,
      totalCount: 0,
      currentPage: 1,
      tableData: [],
      loading: false,
      pointID: -1,
      Formdata: {
        point: "",
        remark: ""
      },
      filter: {
        keywords: "",
        employee_id: 0
      }
    };
  },
  methods: {
    editPointInfo(id) {
      this.pointID = id;
      this.dialogEditPointVisible = true;
      this.$http('get',"/integral.php/point_auto_setting/get_info.html?id=" + id + "")
        .then(res => {
          if (res.status == 200) {
            var jsonData = res.data;
            try {
              this.Formdata.point =
                jsonData.data.point == 0
                  ? jsonData.data.info.value_1
                  : jsonData.data.point;
              this.Formdata.remark = jsonData.data.remark;
            } catch (err) {
              console.log(err);
            }
          }
        });
    },
    editPointSend() {
      const form = this.$refs["newTaskForm"];
      form.validate(valid => {
        if (valid) {
          this.$http('post',"/integral.php/point_auto_setting/save_info.html", {id: this.pointID,point: this.Formdata.point,remark: this.Formdata.remark})
            .then(res => {
              if (res.status == 200) {
                this.dialogEditPointVisible = false;
                this.$message({
                  message: res.data.msg,
                  type: "success"
                });
                this.loadTableData();
              }
            });
        }
      });
    },
    handleSelectionChange: function(val) {
      this.multipleSelection = val;
    },

    confirmMultipleDelete() {},
    InfoSendSuccess(data) {
      this.dialogCreateVisible = false;
      this.dialogEditVisible = false;
      this.loadTableData();
    },

    editInfo(id) {
      this.dialogEditVisible = true;
      const _this = this;
      this.$nextTick(() => {
        _this.$refs["RewardEditCom"].FormReset();
        _this.$refs["RewardEditCom"].FormApi = "/integral.php/reward/update";
        _this.$refs["RewardEditCom"].loadInfo(id);
      });
    },
    CreateOpen() {
      const _this = this;
      this.$nextTick(() => {
        _this.$refs["RewardCreateCom"].FormReset();
      });
    },
    EditSend() {
      this.$refs["RewardEditCom"].FormSend();
    },
    CreateSend() {
      this.$refs["RewardCreateCom"].FormSend();
    },
    StatusText: function(row, column, cellValue) {
      let text = "";
      switch (cellValue) {
        case 0:
          text = "隐藏";
          break;
        case 1:
          text = "显示";
          break;
      }
      return text;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.onFilterChanged();
    },
    onFilterChanged: function() {
      this.currentPage = 1;
      this.loadTableData();
    },
    changePage: function(current) {
      if (isNaN(current) || current < 1) {
        return false;
      }
      this.loadTableData();
    },
    loadTableData() {
      this.loading = true;
      var self = this;
      var params = {
        keywords: this.filter.keywords,
        employee_id: this.filter.employee_id,
        page: this.currentPage,
        offset:
          (this.currentPage == 1 ? 0 : this.currentPage - 1) * this.pageSize,
        limit: this.pageSize
      };
      this.$http('get',"/integral.php/performance_work/taskrelation_list",params).then(function(response) {
        var jsonData = response.data;

            self.loading = false;
            self.totalCount = jsonData.data.total
            self.tableData = jsonData.data.data

        })
        .catch(function(error) {
          console.log(error);
        });
    },
    deleteInfo(id) {
      var self = this;
      this.$confirm("确定要删除此记录吗？", "删除记录", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (!id) {
            return false;
          }
          const params = {
            id: id
          };

          this.$http("post","/integral.php/performance_work/taskrelation_del",params,'','',
            {transformRequest: [
              data => {
                const paramArray = new Array();
                for (const it in data) {
                  paramArray.push(
                    encodeURIComponent(it) + "=" + encodeURIComponent(data[it])
                  );
                }
                return paramArray.join("&");
              }
            ]},
            // headers: {
            //   "Content-Type": "application/x-www-form-urlencoded"
            // }
          )
            .then(function(response) {
              var message = "";
              if (response.status == 200) {
                var data = response.data;
                message = data.msg;
                if (data.code == 1000) {
                  self.$message({
                    message: message,
                    type: "success"
                  });
                  self.loadTableData();
                } else {
                  self.$message({
                    message: message,
                    type: "error"
                  });
                }
              } else {
                message = "服务器太忙了";
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        })
        .catch(() => {});
    },

    deleteInfoAll() {
      var self = this;
      this.$confirm("确定要删除选中的记录吗？", "删除记录", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let ids = [];
          for (let i in self.multipleSelection) {
            ids.push(self.multipleSelection[i].id);
          }
          const params = {
            id: ids.toString()
          };

          this.$http("post","/integral.php/performance_work/taskrelation_del",params,'','',
            {transformRequest: [
              data => {
                const paramArray = new Array();
                for (const it in data) {
                  paramArray.push(
                    encodeURIComponent(it) + "=" + encodeURIComponent(data[it])
                  );
                }
                return paramArray.join("&");
              }
            ]},
            // headers: {
            //   "Content-Type": "application/x-www-form-urlencoded"
            // }
          )
            .then(function(response) {
              var message = "";
              if (response.status == 200) {
                var data = response.data;
                message = data.msg;
                if (data.code == 1000) {
                  self.$message({
                    message: message,
                    type: "success"
                  });
                  self.loadTableData();
                } else {
                  self.$message({
                    message: message,
                    type: "error"
                  });
                }
              } else {
                message = "服务器太忙了";
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        })
        .catch(() => {});
    }
  },
  created() {
    this.loadTableData();
  }
};
</script>

