<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <div class="main">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <template>
          <div class="linetitle">
            <div class="tit" />
            {{
              form.bonusDirectLoopExtsList[0].bonusType == 1
                ? '三单循环'
                : '四单循环'
            }}
          </div>
          <div
            v-for="(aitem, aindex) in form.bonusDirectLoopExtsList"
            :key="aindex"
            class="maincontent"
          >
            <el-row>
              <el-form-item :label="'等级范围'" prop="region">
                <el-checkbox-group v-model="aitem.loopDetailsList">
                  <el-checkbox
                    v-for="gitem in gradeRangList"
                    :key="gitem.pkId"
                    :label="gitem.pkId"
                  >{{ gitem.gradeName }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-col :span="1">
                <el-form-item :required="'比例设置'" prop="region" />
              </el-col>
              <el-col
                :span="3"
              ><el-form-item :label="'第一单'" prop="region">
                <el-input v-model="aitem.firstOrder" clearable>
                  <i slot="suffix" class="neibu">% </i></el-input>
              </el-form-item></el-col>
              <el-col
                :span="3"
              ><el-form-item :label="'第二单'" prop="region">
                <el-input v-model="aitem.secondOrder" clearable>
                  <i slot="suffix" class="neibu">% </i>
                </el-input>
              </el-form-item></el-col>
              <el-col
                :span="3"
              ><el-form-item :label="'第三单'" prop="region">
                <el-input v-model="aitem.thirdOrder" clearable>
                  <i slot="suffix" class="neibu">% </i>
                </el-input>
              </el-form-item></el-col>
              <el-col
                v-if="form.bonusDirectLoopExtsList[0].bonusType == 2"
                :span="3"
              ><el-form-item :label="'第四单'" prop="region">
                <el-input v-model="aitem.fourthOrder" clearable>
                  <i slot="suffix" class="neibu">% </i>
                </el-input>
              </el-form-item></el-col>
            </el-row>
            <el-row>
              <el-col :span="14">
                <el-form-item prop="name" :label="'取值类型'">
                  <el-select
                    v-model="aitem.takeValueType"
                    clearable
                    :placeholder="'请选择'"
                  >
                    <el-option
                      v-for="titem in takeValueTypeList"
                      :key="titem.value"
                      :label="titem.label"
                      :value="titem.value"
                    />
                  </el-select> </el-form-item></el-col></el-row>
          </div>
          <div style="text-align: center">
            <el-row>
              <el-col :span="4">
                <el-button
                  circle
                  icon="el-icon-plus"
                  @click="addList3()"
                />
                <el-button
                  circle
                  icon="el-icon-minus"
                  @click="subList3()"
                />
              </el-col>
            </el-row>
          </div>
        </template>

        <div class="linetitle">
          <div class="tit" />
          {{ '直推奖励配置' }}
        </div>
        <div class="maincontent">
          <el-row>
            <el-col
              v-for="(item, i) in form.bonusDirectList"
              :key="i"
              :span="14"
              class="flexcol"
            >
              <el-form-item label-width="0px" prop="name">
                <el-select
                  v-model="form.bonusDirectList[i].pkLevel"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="item in gradeRangList"
                    :key="item.pkId"
                    :label="item.gradeName"
                    :value="item.pkId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label-width="0px" prop="name">
                <el-select
                  v-model="form.bonusDirectList[i].calType"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="item in cellTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label-width="0px" prop="age">
                <el-input
                  v-model="form.bonusDirectList[i].bonusValue"
                  clearable
                  :placeholder="'请输入'"
                >
                  <i
                    v-if="form.bonusDirectList[i].calType == 1"
                    slot="suffix"
                    class="neibu"
                  >%
                  </i>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button
                circle
                icon="el-icon-plus"
                @click="addList()"
              />
              <el-button
                circle
                icon="el-icon-minus"
                @click="subList()"
              />
            </el-col>
          </el-row>
        </div>

        <div class="linetitle">
          <div class="tit" />
          {{ '复购直推配置' }}
        </div>
        <div class="maincontent">
          <el-row>
            <el-col
              v-for="(item, i) in form.repoDirectPushList"
              :key="i"
              :span="14"
              class="flexcol"
            >
              <el-form-item label-width="0px" prop="name">
                <el-select
                  v-model="form.repoDirectPushList[i].algebra"
                  clearable
                  disabled
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="item in algebraList"
                    :key="item.value"
                    :label="item.label"

                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label-width="0px" prop="name">
                <el-select
                  v-model="form.repoDirectPushList[i].calType"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="item in cellTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label-width="0px" prop="age">
                <el-input
                  v-model="form.repoDirectPushList[i].pushValue"
                  clearable
                  :placeholder="'请输入'"
                >
                  <i
                    v-if="form.repoDirectPushList[i].calType == 1"
                    slot="suffix"
                    class="neibu"
                  >%
                  </i>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button
                circle
                icon="el-icon-plus"
                @click="addList4()"
              />
              <el-button
                circle
                icon="el-icon-minus"
                @click="subList4()"
              />
            </el-col>
          </el-row>
        </div>

        <div class="linetitle">
          <div class="tit" />
          {{ '海粉直推奖励配置' }}
        </div>
        <div class="maincontent">
          <el-row>
            <el-col
              v-for="(item, i) in form.bonusHiPinkList"
              :key="i"
              :span="14"
              class="flexcol"
            >
              <el-form-item prop="name" label-width="0px">
                <el-select
                  v-model="form.bonusHiPinkList[i].rangeType"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="item in rangeTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="form.bonusHiPinkList[i].rangeType == 1"
                label-width="0px"
                prop="name"
              >
                <el-select
                  v-model="form.bonusHiPinkList[i].pkLevel"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="item in gradeRangList"
                    :key="item.pkId"
                    :label="item.gradeName"
                    :value="item.pkId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="form.bonusHiPinkList[i].rangeType == 2"
                label-width="0px"
                prop="name"
              >
                <el-select
                  v-model="form.bonusHiPinkList[i].pkLevel"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="item in awardsList"
                    :key="item.pkId"
                    :label="item.gradeName"
                    :value="item.pkId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label-width="0px" prop="name">
                <el-select
                  v-model="form.bonusHiPinkList[i].calType"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="item in cellTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label-width="0px" prop="age">
                <el-input
                  v-model="form.bonusHiPinkList[i].bonusValue"
                  clearable
                  :placeholder="'请输入'"
                >
                  <i
                    v-if="form.bonusHiPinkList[i].calType == 1"
                    slot="suffix"
                    class="neibu"
                  >%
                  </i>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button
                circle
                icon="el-icon-plus"
                @click="addList2()"
              />
              <el-button
                circle
                icon="el-icon-minus"
                @click="subList2()"
              />
            </el-col>
          </el-row>
        </div>

        <div class="linetitle">
          <div class="tit" />
          {{ '固定升级奖励' }}
        </div>
        <div class="maincontent">
          <el-row>
            <el-col :span="12" class="flexcol" style="padding: 0">
              <el-form-item :label="ycsbcLabel" label-width="70px" prop="name">
                <el-select
                  v-model="
                    form.bonusDifferenceExt.bonusDifferencesList[0].calType
                  "
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="item in cellTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="
                  form.bonusDifferenceExt.bonusDifferencesList[0].calType == 2
                "
                label-width="0px"
                prop="name"
              >
                <el-input
                  v-model="
                    form.bonusDifferenceExt.bonusDifferencesList[0].rewardValue
                  "
                  clearable
                  :placeholder="'请输入'"
                />
              </el-form-item>
              <el-form-item
                v-if="
                  form.bonusDifferenceExt.bonusDifferencesList[0].calType == 1
                "
                label-width="0px"
                prop="age"
              >
                <el-input
                  v-model="
                    form.bonusDifferenceExt.bonusDifferencesList[0].rewardValue
                  "
                  clearable
                  :placeholder="'请输入'"
                >
                  <i
                    v-if="
                      form.bonusDifferenceExt.bonusDifferencesList[0].calType ==
                        1
                    "
                    slot="suffix"
                    class="neibu"
                  >%
                  </i>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div class="twobtn">
      <div style="margin: 0 auto">
        <el-button class="thebtn btn1">{{ '修改' }}</el-button>
        <el-button class="thebtn btn2" @click="savedate">{{ '保存' }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import { getgradeRanglist, getAwardsListChiose } from '@/api/level'
import { getzccsList } from '@/api/system'
import {
  getdirectLoopList,
  getrangeTypeList,
  getcellTypeList,
  updateDirectLoop,
  getTakeValueTypeList,
  getAlgebra
} from '@/api/bonus'
import mixin from './mixin'
export default {
  name: 'Ztpz',
  components: {
    topBar
  },
  mixins: [mixin],
  data() {
    return {
      moren: 'ztpz',
      form: {
        bonusDirectLoopExtsList: [
          {
            bonusType: '', // 三单
            loopDetailsList: [], // 等级范围选择
            firstOrder: '', // 第一单
            secondOrder: '', // 第二单
            thirdOrder: '', // 第三单
            fourthOrder: '', // 第四单
            pkId: '',
            takeValueType: '' // 取值类型
          }
        ],
        bonusDirectList: [
          {
            rangeType: '',
            pkLevel: '',
            calType: '',
            bonusValue: ''
          }
        ], // 直推奖励配置列表
        bonusHiPinkList: [
          {
            // rangeType: "",
            pkLevel: '',
            calType: '',
            bonusValue: ''
          }
        ], // 嗨粉直推奖励配置列表
        bonusDifferenceExt: {
          bonusDifferencesList: [
            {
              upgradeType: '',
              calType: '', // 选择比例/值
              rewardValue: '' // 比例||值
            }
          ]
        }, // 一次性补差升级
        repoDirectPushList: [
          {
            algebra: '',
            calType: '',
            pushValue: ''
          }
        ]// 复购直推配置
      },
      cdSelectList: [
        {
          value: '1',
          label: '覆盖'
        },
        {
          value: '2',
          label: '补差'
        },
        {
          value: '3',
          label: '累计'
        }
      ], // 升级方式
      rules: {},
      gradeRangList: [], // 等级范围选择
      rangeTypeList: [], // 等级级差枚举类型选择
      awardsList: [], // 奖衔选择
      cellTypeList: [], // 计算类型枚举值
      ycxbcList: [], // 一次性补差升级
      ycsbcLabel: '', // 一次性补差升级标题名称
      takeValueTypeList: [], // 取值类型
      algebraList: [], // 代数枚举
      thebonusType: null
    }
  },
  created() {
    this.getdirectLoopList()
    this.getOthers()
  },
  methods: {
    getOthers() {
      // 计算类型枚举值
      getcellTypeList().then((res) => {
        this.cellTypeList = res.data
      })

      // 奖衔下拉列表
      getAwardsListChiose().then((res) => {
        res.rows.forEach((item) => {
          item.gradeName = item.awardsName
        })
        this.awardsList = res.rows
      })

      // 获取级差枚举类型列表
      getrangeTypeList().then((res) => {
        this.rangeTypeList = res.data
      })

      // 等级范围选择
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data
      })

      // 取值类型枚举
      getTakeValueTypeList().then((res) => {
        this.takeValueTypeList = res.data
      })

      getAlgebra().then(res => {
        this.algebraList = res.data
      })
    },

    // 点击加号
    addList() {
      this.form.bonusDirectList.push({
        rangeType: '',
        pkLevel: '',
        calType: '',
        bonusValue: ''
      })
    },
    addList2() {
      this.form.bonusHiPinkList.push({
        // rangeType: "",
        pkLevel: '',
        calType: '',
        bonusValue: ''
      })
    },
    addList3() {
      this.form.bonusDirectLoopExtsList.push({
        // rangeType: "",
        bonusType: this.thebonusType,
        loopDetailsList: [],
        firstOrder: '',
        secondOrder: '',
        thirdOrder: '',
        fourthOrder: '',
        takeValueType: ''
      })
    },
    addList4() {
      this.form.repoDirectPushList.push({
        algebra: '',
        calType: '',
        pushValue: ''
      })
    },
    subList4() {
      this.form.repoDirectPushList.pop()
    },
    subList3() {
      this.form.bonusDirectLoopExtsList.pop()
    },
    // 点击减号
    subList() {
      this.form.bonusDirectList.pop()
    },
    subList2() {
      this.form.bonusHiPinkList.pop()
    },

    // 初始化直推配置请求列表
    getdirectLoopList() {
      getdirectLoopList().then((res) => {
        if (res.data.bonusDirectLoopExtsList.length > 0) {
          this.form.bonusDirectLoopExtsList = res.data.bonusDirectLoopExtsList
        }
        if (res.data.bonusDirectList.length > 0) {
          this.form.bonusDirectList = res.data.bonusDirectList
        }
        if (res.data.bonusHiPinkList.length > 0) {
          this.form.bonusHiPinkList = res.data.bonusHiPinkList
        }
        if (res.data.bonusDifferenceExt.bonusDifferencesList.length > 0) {
          this.form.bonusDifferenceExt.bonusDifferencesList =
            res.data.bonusDifferenceExt.bonusDifferencesList
        }
        if (res.data.repoDirectPushList.length > 0) {
          this.form.repoDirectPushList = res.data.repoDirectPushList
        }
      })
      // 获取三单循环还是四单循环 1三单2四单
      getzccsList({ key: 'RECOMMEND' }).then((res) => {
        if (res.data[0].value) {
          if (res.data[0].value == 1) {
            this.form.bonusDirectLoopExtsList[0].bonusType = 1
            this.thebonusType = 1
          } else if (res.data[0].value == 2) {
            this.form.bonusDirectLoopExtsList[0].bonusType = 2
            this.thebonusType = 2
          }
        }
      })
      // 一次性补差
      getzccsList({ key: 'UPGRADE_WAY' }).then((res) => {
        res.data.forEach((item) => {
          this.cdSelectList.forEach((element) => {
            if (item.value == element.value) {
              this.ycsbcLabel = element.label
              this.form.bonusDifferenceExt.bonusDifferencesList[0].upgradeType =
                item.value
            }
          })
        })
      })
    },
    // 点击保存
    savedate() {
      updateDirectLoop(this.form).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          })
        }
        this.getdirectLoopList()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.tit {
  width: 5px;
  height: 22px;
  background: #c8161d;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  position: absolute;
  margin-top: -3px;
  left: 0;
}
.flexcol {
  display: flex;
  padding: 0 20px;
}
::v-deep .el-input__inner {
  height: 35px;
  font-size: 14px;
}
.neibu {
  margin-right: 10px;
  color: #666666;
}
.page {
  padding: 20px 20px 36px 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    background: #ffffff;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    border-radius: 8px;
    .linetitle {
      padding: 20px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #333333;
      border-bottom: 4px solid #eeeeee;
      position: relative;
    }
    .maincontent {
      padding: 20px 0;

      .contentbox1 {
        display: flex;
        align-items: center;
        .inputbox {
          width: 97px;
          height: 28px;
          margin: 0 5px;
        }
      }
      .lastline {
        margin-right: 112px;
      }
      .marginbox {
        margin: 0 20px;
      }
    }
  }
  .twobtn {
    margin-top: 20px;
    display: flex;

    .thebtn {
      width: 120px;
      height: 48px;
      color: #ffffff;
      font-size: 14px;
      font-weight: bold;
    }
    .btn1 {
      background: #4391fd;
      margin-right: 80px;
    }
    .btn2 {
      background: #ffad41;
    }
  }
}
</style>
