<template>
  <div class="salarySet">
    <!-- <h4>单次课次参考时长：30min</h4> -->
    <div class="tableList">
      <div class="left">
        <el-table :data="teamTable"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column label="乐团课课酬课时结算">
            <template slot-scope="scope">{{ scope.row.courseScheduleType | coursesType }}</template>
          </el-table-column>
          <el-table-column label="默认课酬-主教">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.mainTeacher30MinSalary"
                        placeholder="请输入课酬">
                <template slot="append"
                          v-if="scope.row.courseScheduleType == 'HIGH'">元/45分钟</template>
                <template slot="append"
                          v-else-if="scope.row.courseScheduleType == 'CLASSROOM'">元/40分钟</template>
                <template slot="append"
                          v-else>元/30分钟</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="默认课酬-助教">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.assistantTeacher30MinSalary"
                        placeholder="请输入课酬">
                <template slot="append"
                          v-if="scope.row.courseScheduleType == 'HIGH'">元/45分钟</template>
                <template slot="append"
                          v-else-if="scope.row.courseScheduleType == 'CLASSROOM'">元/40分钟</template>
                <template slot="append"
                          v-else>元/30分钟</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="3.0课酬-主教">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        :disabled="scope.row.courseScheduleType == 'CLASSROOM'"
                        v-model.trim="scope.row.mainTeacher90MinSalary"
                        placeholder="请输入课酬">
                <template slot="append"
                          v-if="scope.row.courseScheduleType == 'HIGH'">元/45分钟</template>
                <template slot="append"
                          v-else-if="scope.row.courseScheduleType == 'CLASSROOM'">元/40分钟</template>
                <template slot="append"
                          v-else>元/90分钟</template>
                <!-- <template slot="append">元/{{ (scope.row.courseScheduleType == 'HIGH' || scope.row.courseScheduleType == 'CLASSROOM') ? 45 : 90 }}分钟</template> -->
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="3.0课酬-助教">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        :disabled="scope.row.courseScheduleType == 'CLASSROOM'"
                        v-model.trim="scope.row.assistantTeacher90MinSalary"
                        placeholder="请输入课酬">
                <template slot="append"
                          v-if="scope.row.courseScheduleType == 'HIGH'">元/45分钟</template>
                <template slot="append"
                          v-else-if="scope.row.courseScheduleType == 'CLASSROOM'">元/40分钟</template>
                <template slot="append"
                          v-else>元/90分钟</template>
                <!-- <template slot="append">元/{{ (scope.row.courseScheduleType == 'HIGH' || scope.row.courseScheduleType == 'CLASSROOM') ? 45 : 90 }}分钟</template> -->
              </el-input>
            </template>
          </el-table-column>
        </el-table>

        <el-table :data="teamSmallTable"
                  style=" margin-top: 15px;"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column label="">
            <template slot-scope="scope">{{ scope.row.courseScheduleType | coursesType }}</template>
          </el-table-column>
          <el-table-column label="1V1">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.v1"
                        placeholder="请输入课酬">
                <template slot="append">元/节</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="1V2">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.v2"
                        placeholder="请输入课酬">
                <template slot="append">元/节</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="1V3">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.v3"
                        placeholder="请输入课酬">
                <template slot="append">元/节</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="1V4">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.v4"
                        placeholder="请输入课酬">
                <template slot="append">元/节</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="1V5">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.v5"
                        placeholder="请输入课酬">
                <template slot="append">元/节</template>
              </el-input>
            </template>
          </el-table-column>
        </el-table>

        <el-table :data="vipTable"
                  style="width: 70%; margin-top: 15px;"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column label="VIP课课酬参考值"
                           prop="vipGroupCategoryName"></el-table-column>
          <!-- <el-table-column label="线上课">
            <template slot-scope="scope">
              <el-input
                type="number"
                @mousewheel.native.prevent
                v-model.trim="scope.row.onlineClassesSalary"
                placeholder="请输入内容"
              >
                <template slot="append">元/45分钟</template>
              </el-input>
            </template>
          </el-table-column> -->
          <el-table-column label="">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.offlineClassesSalary"
                        placeholder="请输入内容">
                <template slot="append">元/45分钟</template>
              </el-input>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="accompanyTable"
                  style="width: 35%; margin-top: 15px;"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column label="网管课">
            <template slot-scope="scope">
              <el-input type="number"
                        style="width:195px"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.mainTeacherSalary">
                <template slot="append">元/{{scope.row.minutes}}分钟</template>
              </el-input>
            </template>
          </el-table-column>
        </el-table>

        <el-form style="margin-top: 20px;">
          <el-form-item label="生效日期">
            <el-date-picker v-model.trim="startDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                            placeholder="选择日期"></el-date-picker>
            <div style="display: inline; color: red; padding-left: 10px;">说明：本次调整只对生效日期之后（包含当天）且未结算的课程生效；</div>
          </el-form-item>

        </el-form>

        <div style="padding-top: 10px;"
             v-permission="pageType == 'create' ? {child: 'teacherDefaultMusicGroupSalary/batchUpset', parent: 'teacherAdd/batchUpset'} : {child: 'teacherDefaultMusicGroupSalary/batchUpset', parent: 'teacherUpdate/batchUpset'}">
          <el-button @click="onSave()"
                     type="primary">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  vipGroupSalaryList,
  vipGroupSalarySet,
  teacherSalaryList,
  teacherSalaryBatchUpset,
  teacherDefaultPracticeGroupSalary,
  PracticeGroupSalaryUpdate
} from "@/api/teacherManager";
import { sysConfigList } from "@/api/generalSettings";
import { findTeacherDefaultSalary } from "@/api/vipSeting";
let nowTime = new Date();
let checkTime =
  nowTime.getFullYear() +
  "-" +
  (nowTime.getMonth() + 1) +
  "-" +
  nowTime.getDate();
export default {
  props: ["teacherId"],
  name: "salarySet",
  data () {
    return {
      pageType: this.$route.query.type, // 页面类型
      // teacherId: this.teacherId ? this.teacherId : this.$route.query.teacherId,
      teamTable: [
        {
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          courseScheduleType: "SINGLE",
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        },
        {
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          courseScheduleType: "MIX",
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        },
        {
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          courseScheduleType: "COMPREHENSIVE",
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        },
        {
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          courseScheduleType: "TRAINING_SINGLE",
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        },
        {
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          courseScheduleType: "TRAINING_MIX",
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        },
        {
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          courseScheduleType: "HIGH",
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        },
        {
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          courseScheduleType: "CLASSROOM",
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        }
      ],
      // salaryRuleJson: { 3: 0, 4: 0, 5: 0 },
      // userId: this.teacherId
      teamSmallTable: [
        {
          courseScheduleType: "HIGH_ONLINE",
          // salaryRuleJson: { 3: 0, 4: 0, 5: 0 },
          v1: 0,
          v2: 0,
          v3: 0,
          v4: 0,
          v5: 0,
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        },
        {
          courseScheduleType: "MUSIC_NETWORK",
          // salaryRuleJson: { 3: 0, 4: 0, 5: 0 },
          v1: 0,
          v2: 0,
          v3: 0,
          v4: 0,
          v5: 0,
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        }
      ],
      vipTable: [],
      musicGroupTable: [],
      ruleList: [],
      vipList: [],
      startDate: null,
      accompanyTable: [
        {
          assistantTeacherSalary: 30,
          minutes: 25,
          userId: this.teacherId,
          mainTeacherSalary: 0
        }
      ],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
        firstDayOfWeek: 1
      }
    };
  },
  created () { },
  mounted () {
    this.pageType = this.$route.query.type;
    this.__init();
  },
  activated () {
    this.pageType = this.$route.query.type;
    this.__init();
  },
  methods: {
    __init () {
      if (this.$route.query.search) {
        this.Fsearch = this.$route.query.search;
      }
      if (this.$route.query.rules) {
        this.Frules = this.$route.query.rules;
      }
      // 获取课程形态 设置vip课酬
      findTeacherDefaultSalary({ userId: this.teacherId }).then(res => {
        if (res.code == 200 && res.data.length > 0) {
          let vipData = [];
          res.data.forEach(item => {
            vipData.push({
              offlineClassesSalary: null,
              onlineClassesSalary: null,
              vipGroupCategoryId: item.id,
              vipGroupCategoryName: item.name,
              userId: this.teacherId
            });
          });
          // VIP课列表
          vipGroupSalaryList({
            rows: 9999,
            page: 1,
            search: this.teacherId
          }).then(res => {
            if (res.code == 200) {
              let rows = res.data.rows;
              this.vipListCompare(vipData, rows);
            }
          });
        }
      });
      // 乐团
      teacherSalaryList({
        rows: 9999,
        page: 1,
        teacherId: this.teacherId
        // settlementType: 'FIXED_SALARY'
      }).then(res => {
        if (res.code == 200) {
          // this.teamTable = res.data.rows
          let rows = res.data.rows;
          this.teacherSalaryMoney(rows);
        }
      });
      // 网管课
      teacherDefaultPracticeGroupSalary({ teacherId: this.teacherId }).then(
        res => {
          if (res.code == 200 && res.data.length > 0) {
            this.accompanyTable = res.data;
          }
        }
      );
    },
    vipListCompare (vipData, rows) {
      // vip 做对比
      if (!rows) {
        // 判断是否有数据
        this.vipTable = vipData;
        return;
      }
      let result = [];
      vipData.forEach(item => {
        rows.forEach(c => {
          if (item.vipGroupCategoryId == c.vipGroupCategoryId) {
            item.checked = true;
            result.push({
              vipGroupCategoryId: c.vipGroupCategoryId,
              offlineClassesSalary: c.offlineClassesSalary,
              onlineClassesSalary: c.onlineClassesSalary,
              vipGroupCategoryName: c.vipGroupCategoryName,
              userId: c.userId
            });
          }
        });
      });
      if (result.length > 0) {
        vipData.forEach(item => {
          if (!item.checked) {
            result.push(item);
          }
        });
      } else {
        result = vipData;
      }
      this.vipTable = result;
    },

    teacherSalaryMoney (rows) {
      // 判断是否有数据
      if (!rows || rows.length <= 0) return;
      let teamTable = this.teamTable;
      let result = [];
      teamTable.forEach(item => {
        rows.forEach(c => {
          if (item.courseScheduleType == c.courseScheduleType) {
            item.checked = true;
            result.push({
              mainTeacher30MinSalary: c.mainTeacher30MinSalary,
              mainTeacher90MinSalary: c.mainTeacher90MinSalary,
              assistantTeacher30MinSalary: c.assistantTeacher30MinSalary,
              assistantTeacher90MinSalary: c.assistantTeacher90MinSalary,
              courseScheduleType: c.courseScheduleType,
              userId: this.teacherId
            });
          }
        });
      });
      if (result.length > 0) {
        teamTable.forEach(item => {
          if (!item.checked) {
            result.push(item);
          }
        });
      } else {
        result = teamTable;
      }
      this.teamTable = result;

      let smallResult = []
      let teamSmallTable = this.teamSmallTable
      teamSmallTable.forEach(item => {
        rows.forEach(c => {
          if (item.courseScheduleType == c.courseScheduleType) {
            item.checked = true;
            let tempJson = c.salaryRuleJson ? JSON.parse(c.salaryRuleJson) : { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 }
            // console.log(tempJson)
            smallResult.push({
              mainTeacher30MinSalary: c.mainTeacher30MinSalary,
              mainTeacher90MinSalary: c.mainTeacher90MinSalary,
              assistantTeacher30MinSalary: c.assistantTeacher30MinSalary,
              assistantTeacher90MinSalary: c.assistantTeacher90MinSalary,
              salaryRuleJson: tempJson,
              v1: tempJson[1] ? tempJson[1] : 0,
              v2: tempJson[2] ? tempJson[2] : 0,
              v3: tempJson[3] ? tempJson[3] : 0,
              v4: tempJson[4] ? tempJson[4] : 0,
              v5: tempJson[5] ? tempJson[5] : 0,
              courseScheduleType: c.courseScheduleType,
              userId: this.teacherId
            });
          }
        });
      })

      if (smallResult.length > 0) {
        teamSmallTable.forEach(item => {
          if (!item.checked) {
            smallResult.push(item);
          }
        });
      } else {
        smallResult = teamSmallTable;
      }
      this.teamSmallTable = smallResult;
    },
    onSave () {
      this.$confirm("您确定更改老师课酬", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let teamTable = this.teamTable;
          let checkStatus = true;
          teamTable.forEach(item => {
            if (
              item.assistantTeacher30MinSalary < 0 ||
              item.assistantTeacher90MinSalary < 0 ||
              item.mainTeacher30MinSalary < 0 ||
              item.mainTeacher90MinSalary < 0
            ) {
              this.$message.error("输入课酬不能为负数");
              checkStatus = false;
              return;
            }
          });
          let temps = []
          this.teamSmallTable.forEach(item => {
            if (item.v1 < 0 || item.v2 < 0 || item.v3 < 0 || item.v4 < 0 || item.v5 < 0) {
              this.$message.error("输入课酬不能为负数");
              checkStatus = false;
              return;
            }
            temps.push({
              courseScheduleType: item.courseScheduleType,
              salaryRuleJson: JSON.stringify({ 1: Number(item.v1), 2: Number(item.v2), 3: Number(item.v3), 4: Number(item.v4), 5: Number(item.v5) }),
              assistantTeacher30MinSalary: 0,
              assistantTeacher90MinSalary: 0,
              mainTeacher30MinSalary: 0,
              mainTeacher90MinSalary: 0,
              userId: item.userId
            })
          })
          this.vipTable.forEach(item => {
            if (item.offlineClassesSalary < 0 && item.onlineClassesSalary < 0) {
              this.$message.error("输入课酬不能为负数");
              checkStatus = false;
              return;
            }
          });
          this.accompanyTable.forEach(item => {
            if (item.mainTeacherSalary < 0) {
              this.$message.error("输入课酬不能为负数");
              checkStatus = false;
              return;
            }
            if (!item.mainTeacherSalary.toString()) {
              this.$message.error("输入网管课课酬");
              checkStatus = false;
              return;
            }
          });
          // 判断输入的值是否正确
          if (!this.startDate) {
            this.$message.error("请填写生效日期");
            return;
          }
          if (!checkStatus) {
            return
          }

          let params = teamTable.concat(temps)
          teacherSalaryBatchUpset({
            teacherDefaultMusicGroupSalaries: params,
            startDate: this.startDate
          }).then(res => {
            if (res.code == 200) {
              // 判断输入的值是否正确
              vipGroupSalarySet({
                teacherDefaultVipGroupSalaries: this.vipTable,
                startDate: this.startDate
              }).then(res => {
                if (res.code == 200) {
                  PracticeGroupSalaryUpdate({
                    startDate: this.startDate,
                    teacherDefaultPracticeGroupSalaries: this.accompanyTable
                  }).then(res => {
                    if (res.code == 200) {
                      this.$message.success("保存成功");
                      this.$router.push({
                        path: "/business/teacherList",
                        query: { rules: this.Frules, search: this.Fsearch }
                      });
                    }
                  });
                  // if(this.$route.query.type == 'create') {

                  // }
                }
              });
            }
          });
        })
        .catch(() => { });
    }
  }
};
</script>
<style lang="scss" scoped>
.salarySet {
  h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #444;
    font-weight: normal;
  }
  .tableList {
    .left,
    .right {
      float: left;
    }
    .left {
      width: 70%;
      margin-right: 2%;
    }
    .right {
      width: 56%;
      margin-left: 2%;
    }
  }
}

/deep/.el-table__body {
  tr {
    td:nth-child(3) {
      border-right: 1px solid #ebeef5;
    }
  }
}
/deep/.el-input-group__append {
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-left: 0;
}
</style>