<template>
  <div class="sales-level">
    <el-card v-loading="infoLoading">
      <div slot="header" class="clearfix">
        <span style="font-size: 18px;font-weight: bold;padding-right: 20px;">销售级别配置：</span>
      </div>
      <div class="subcompany-list">
        <div class="subcompany-list-content" v-if="subcompanyList.length > 0">
          <el-form :inline="true" v-for="item in subcompanyList" class="demo-form-inline" size="mini">
            <el-form-item label="销售层级">
              <el-select v-model="item.sale_level" @change="modifyLevel(item.id, item.sale_level)" @focus="focusOldVal(item.sale_level)" placeholder="销售层级">
                <el-option v-for="itemSale in saleLevel" :label="itemSale.label" :value="itemSale.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="级别名称">
              <el-input @change="modifyLevel(item.id, item.level_name)" @focus="focusOldVal(item.level_name)" v-model="item.level_name" placeholder="级别名称"></el-input>
            </el-form-item>
            <el-form-item label="底薪">
              <el-input v-model="item.money_base_salary" @change="modifyLevel(item.id, item.money_base_salary)" @focus="focusOldVal(item.money_base_salary)" placeholder="底薪"></el-input>
            </el-form-item>
            <el-form-item label="月度业绩目标">
              <el-input v-model="item.money_month_target" @change="modifyLevel(item.id, item.money_month_target)" @focus="focusOldVal(item.money_month_target)" placeholder="月度业绩目标"></el-input>
            </el-form-item>
            <el-form-item label="季度升降级线">
              <el-input v-model="item.money_quarter_lift_line" @change="modifyLevel(item.id, item.money_quarter_lift_line)" @focus="focusOldVal(item.money_quarter_lift_line)" placeholder="季度升降级线"></el-input>
            </el-form-item>
            <el-form-item>
              <el-tag style="cursor: pointer" @click="staffCountClick(item.id, 1, 10)">{{ item.staff_count || 0 }}</el-tag>
            </el-form-item>
          </el-form>
        </div>
        <div class="" v-if="subcompanyList.length === 0" style="color: #000; font-size: 13px;text-align: center;padding-top: 20px;">暂无数据</div>
        <div style="text-align: right;padding-top: 30px; padding-right: 30px;">
          <el-button type="primary" size="small" @click="staffCountClick('', 1, 10)">变更记录</el-button>
          <el-button type="primary" size="small" @click="newAdd">新增</el-button>
          <el-button type="primary" size="small" @click="preservation">保存</el-button>
        </div>
      </div>

      <el-dialog :visible.sync="salesLevelDialog" width="90%">
        <table class="custom-table" v-if="staffTitle.length != 0" v-loading="infoLoadingDialog">
          <thead>
          <tr>
            <th v-for="item in staffTitle">{{ item.label }}</th>
          </tr>
          </thead>
          <tbody>
            <tr style="text-align: center"  v-for="(item, index) in staffContent">
              <template v-if="staffId">
                <td>{{ item.level_name }}</td>
                <td>{{ item.squad }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.in_at }}</td>
                <td>{{ item.base_salary }}</td>
                <td>
                  <router-link :to="{name: 'staff', params:{ model: item.mobile }}">
                    <el-button size="mini" type="primary">修改</el-button>
                  </router-link>
                </td>
              </template>

              <template v-if="!staffId">
                <td>{{ index + 1 }}</td>
                <td>{{ item.operator }}</td>
                <td>{{ item.behavior }}</td>
                <td>{{ item.position }}</td>
                <td>{{ item.front }}</td>
                <td>{{ item.after }}</td>
              </template>
            </tr>
          </tbody>
          </table>
        <div style="padding-top: 20px;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :page-sizes="[5, 10, 20, 30, 40, 50, 60, 80, 100]"
                         :page-size="limit"
                         :current-page.sync="pageIndex"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total" style="text-align: center;">
          </el-pagination>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script type="text/ecmascript-6">
  import { getLevelListApi, addConfigApi, editLevelApi, getStaffApi, getRecordApi } from "../../service/api";
  import page from '../framework/page'
  import { STAFF, recordList } from '../../util/wordbook'
  import Util     from '../../util/Za'

  export default {
    name: 'index',
    data() {
      return {
        pageIndex: 1,
        total: 0,            // 总也
        limit: 10,           // 10条一页
        staffId: '',         // 所属级别员工列表 id
        saleLevel: [        // 销售层级数据
          { label: '销售顾问', value: 1 },
          { label: '销售主管', value: 2 },
          { label: '销售经理', value: 3 },
          { label: '销售总监', value: 4 }
        ],    // 销售层级数据
        subcompanyList: [],  // 销售级别列表
        saleLevelNum: 0,     // 截取数据保存
        salesLevelDialog: false,  // 谈框的显示
        staffTitle: [],     // 所属级别员工列表 header
        staffContent: [],   // 所属级别员工列表 content
        oldVal: '',         // 修改是传原来的数据给后台
        infoLoading: true,  // loading
        infoLoadingDialog: false
      }
    },
    components: {
      page
    },
    methods: {
      /**
       * 添加数据
       */
      newAdd() {
        this.saleLevelNum ++
        this.subcompanyList.push({
          sale_level: '',
          level_name: '',
          money_base_salary: '',
          money_month_target: '',
          money_quarter_lift_line: ''
        })
      },
      /**
       * 销售级别列表
       */
      getLevelListFn() {
        let data = { page: 1, limit: 100 }
        getLevelListApi(data).then(res => {
          this.infoLoading = false;
          res.list.map((item) => {
            item.sale_level = item.sale_level === 1 ? '销售顾问' : item.sale_level === 2 ? '销售主管' : item.sale_level === 3 ? '销售经理' : '销售总监'
          });
          this.subcompanyList = res.list
        })
      },
      /**
       * 保存
       */
      preservation() {
        // 判断是否新增数据
        if(this.saleLevelNum === 0) {
          this.$message({ message: '没有新增信息', type: 'warning' });
          return;
        }
        // 获取新增的数据
        let subcompanyListArr = this.subcompanyList.slice(-this.saleLevelNum);
        if(JSON.stringify(subcompanyListArr).indexOf('""') !== -1){
          this.$message({ message: '没有新增的信息', type: 'warning' });
        }else {
          addConfigApi({ params: JSON.stringify(subcompanyListArr) }).then((res) => {
            this.getLevelListFn()
            this.$message({ message: '数据保存成功', type: 'warning' });
          });
        }
      },
      /**
       * input 获取
       * @param val {String}
       */
      focusOldVal(val) {
        this.oldVal = val
      },
      /**
       * 修改销售级别配置
       * @param val   {Object}
       * @param name  {String}
       */
      modifyLevel(val, name) {
        // 获取索引
        let saleLevelIndex = this.subcompanyList.findIndex(item => { return item.id === val })
        let subcompanyListObj = this.subcompanyList[saleLevelIndex]
        if(Util.isEmpty(subcompanyListObj.id)) return   // 新增是不走着里面
          // 修改信息不能为空
        if(Util.isEmpty(name)) {
          this.$message({ message: '修改数据不能为空', type: 'warning' });
        }else {
          // 修改信息更新
          subcompanyListObj.position = subcompanyListObj.sale_level + '-' + subcompanyListObj.level_name + '-' + subcompanyListObj.money_base_salary  // position
          subcompanyListObj.old_val  = this.oldVal   // 变更前的值
          subcompanyListObj.new_val  = name          // 变更后的值
          editLevelApi(val, subcompanyListObj).then((res) => {
            this.$message({ message: '修改数据更新成功', type: 'warning' });
          });
        }
      },
      /**
       * 级别渲染 + 变更记录
       * @param id   {String}
       * @param page {Number}
       * @param limit {Number}
       */
      staffCountClick(id, page, limit) {
        this.staffId = id;  // 获取id
        this.infoLoadingDialog = true
        this.pageIndex = page
        this.limit     = limit
        let api = id ? getStaffApi : getRecordApi
        api({ page: page, limit: limit }, id).then(res => {
          let listDdata = id ? res.list : res.page_data
          if(listDdata.length > 0) {
            this.staffTitle   = id ? STAFF : recordList;
            this.total        = res.total;
            this.staffContent = listDdata;
            this.salesLevelDialog = true
          }else {
            this.$message({ message: '暂无数据', type: 'warning' });
          }
          this.infoLoadingDialog = false
        })
      },
      /**
       * 分页
       * @param val
       */
      handleCurrentChange(val) {
        this.pageIndex = val
        this.staffCountClick(this.staffId , val, this.limit)
      },
      handleSizeChange(val) {
        this.pageIndex = 1
        this.limit = val
        this.staffCountClick(this.staffId , 1, val)
      }
    },
    mounted() {
      this.getLevelListFn()
    }
  }
</script>

<style lang="less" type="text/less">
  .sales-level {
    padding: 10px;
    box-sizing: border-box;

    .custom-table {
      margin-top: 20px;
      width: 100%;
      border: solid 1px #EBEEF5;
      border-spacing: 0;
      border-collapse: collapse;
      thead {
        color: #909399;
        font-weight: 500;
        th {
          padding: 12px 10px;
          border: 1px solid #EBEEF5;
        }
      }
      tbody {
        td {
          padding: 12px 10px;
          border: 1px solid #EBEEF5;
        }
      }
    }

    .subcompany-list {
      width: 100%;
      .from-item {
        width: 15%;
      }
    }
  }
</style>
