<template>

  <div class="brokerage">

    <el-tabs v-model="type" type="card" class="tabs-refresh" v-loading="loading">

      <el-tab-pane v-for="item1 in list" :key="item1.label" :label="item1.label" :name="item1.value">
        <ul>

          <li v-for="item2 in item1.children" class="brokerage-item">
            <div class="brokerage-item-header clearfix">
              {{filterName(item2.value, 'BROKERAGE_COURSE_TYPE')}}
              <el-button
                v-if="!$store.state.readonly"
                @click="itemAdd(item1.value, item2.value)"
                class="fr" type="success" plain size="small">新增</el-button>
            </div>
            <el-table border :data="item2.data">

              <el-table-column :label="item2.money">
                <template slot-scope="scope">
                  <div style="display: flex;">
                    <el-input
                      style="width: 46%;"
                      type="number"
                      v-model.number="scope.row.min_money">
                      <template v-if="item2.isMoneyPercent" slot="append">%</template>
                    </el-input>
                    <div style="display: flex; align-items: center; justify-content: center; width: 8%;">~</div>
                    <el-input
                      style="width: 46%;"
                      type="number"
                      v-model.number="scope.row.max_money">
                      <template v-if="item2.isMoneyPercent" slot="append">%</template>
                    </el-input>
                  </div>
                </template>
              </el-table-column>

              <el-table-column :label="item2.scale">
                <template slot-scope="scope">
                  <el-input
                    type="number"
                    v-model.number="scope.row.scale">
                    <template slot="append">%</template>
                  </el-input>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="150px">
                <template slot-scope="scope">
                  <div style="display: flex;">
                    <el-button
                      v-if="!$store.state.readonly"
                      :disabled="!((typeof scope.row.min_money == 'number') && (typeof scope.row.max_money == 'number') && (typeof scope.row.scale == 'number'))"
                      size="small" plain type="primary" @click="itemSave(scope.row)">保存</el-button>
                    <el-button
                      v-if="!$store.state.readonly && $store.state.deletePermission"
                      size="small" plain type="danger" @click="itemDelete(scope.row)">删除</el-button>
                  </div>
                </template>
              </el-table-column>


            </el-table>
          </li>

        </ul>
      </el-tab-pane>

    </el-tabs>

  </div>

</template>

<script>
  import {getBrokerageApi, deleteBrokerageApi, postBrokerageApi,putBrokerageApi} from '@/service/api';
  import {BROKERAGE_COURSE_TYPE} from '@/util/wordbook';

  export default {
    name: "index",
    data() {
      return {
        loading: true,
        type: '1',
        BROKERAGE_COURSE_TYPE: BROKERAGE_COURSE_TYPE,
        list: [{
          label: '顾问',
          value: '1',
          children: [{
            label: '试听课来源-转年课业绩提点配置',
            isMoneyPercent: false,
            money: '业绩区间',
            scale: '提点比例',
            value: '1',
            data: []
          }, {
            label: '月课、季课来源-转年课业绩提点配置',
            isMoneyPercent: false,
            money: '业绩区间',
            scale: '提点比例',
            value: '2',
            data: []
          }, {
            label: '年课来源 - 转两年课业绩提点配置',
            isMoneyPercent: false,
            money: '业绩区间',
            scale: '提点比例',
            value: '3',
            data: []
          }]
        }, {
          label: '主管',
          value: '2',
          children: [{
            label: '主管业绩提点',
            isMoneyPercent: true, // 是否显示%
            money: '业绩完成率',
            scale: '提点比例',
            value: '4',
            data: []
          }, {
            label: '主管转化率系数（试听课）',
            isMoneyPercent: true,
            money: '团队转化率',
            scale: '转化系数',
            value: '5',
            data: []
          }, {
            label: '主管转化率系数（月课、季课）',
            isMoneyPercent: true,
            money: '团队转化率',
            scale: '转化系数',
            value: '6',
            data: []
          }]
        }]
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      filterName(string, type) {
        return this[type].find(i => {
          return i.value == string
        }).label
      },

      itemAdd(id1, id2) {
        this.list.forEach(val1 => {
          if (val1.value == id1) {
            val1.children.forEach(val2 => {
              if (val2.value == id2) {
                val2.data.push({
                  sale_type: id1,
                  course_type: id2,
                  max_money: '',
                  min_money: '',
                  scale: '',
                  id_add: (new Date()).getTime(),
                })
              }
            })
          }
        })
      },
      itemSave(row) {
        if ((typeof row.min_money == 'number') && (typeof row.max_money == 'number') && (typeof row.scale == 'number')) {
          let json = {
            min_money: row.min_money,
            max_money: row.max_money,
            scale: row.scale,
            sale_type: row.sale_type,
            course_type: row.course_type
          }
          if (row.id) { // 编辑的
            putBrokerageApi(row.id, json).then(res => {
              this.$message({type: 'success', message: '保存成功'});
              this.getData();
            })
          } else { // 新增的
            postBrokerageApi(json).then(res => {
              this.$message({type: 'success', message: '保存成功'});
              this.getData();
            })
          }
        }
      },
      itemDelete(row) {
        if (row.id_add) {
          this.list.forEach(val1 => {
            if (val1.value == row.sale_type) {
              val1.children.forEach(val2 => {
                if (val2.value == row.course_type) {
                  var idx = val2.data.findIndex(item => {
                    return item.id_add == row.id_add
                  })
                  val2.data.splice(idx, 1);
                }
              })
            }
          })
        } else {
          this.$confirm(`确定删除？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteBrokerageApi(row.id).then(res => {
              this.$message({type: 'success', message: '删除成功'});
              this.getData();
            })
          }).catch(()=>{
            this.$message({type: 'info', message: '已取消删除'});
          });
        }
      },

      getData() {
        getBrokerageApi().then(res => {
          if (res.list && res.list.length) {
            res.list.forEach(val1 => {
              if (val1 && val1.length) {
                var idx1 = this.list.findIndex(item1 => {
                  return item1.value == val1[0].sale_type
                })
                var idx2 = this.list[idx1].children.findIndex(item2 => {
                  return item2.value == val1[0].course_type
                })
                this.list[idx1].children[idx2].data = val1;
              }
            })
            // console.log(this.list)
          }
          this.loading = false;
        })
      }
    }
  }
</script>

<style lang="less">
  .brokerage {
    .brokerage-item {
      margin: 0 10px 10px;
      padding: 10px;
      background-color: #fff;
      .brokerage-item-header {
        padding-bottom: 10px;
        line-height: 32px;
        color: #333333;
        font-size: 16px;
      }
    }
  }
</style>
