<!--
 * @Descripttion: 完善导购指标
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-11-12 10:48:40
 * @LastEditors: 无尘
 * @LastEditTime: 2020-11-12 11:32:52
-->
<template>
  <div class="common-app-right">
    <div class="task-set-content border-box">
      <el-alert
        title="提示：【导购总计】需大于等于【本店指标】金额。否则无法提交"
        show-icon
        :closable="false"
        style="width: 450px;margin-bottom: 20px">
      </el-alert>
      <div class="saler-set-title flex flex-space-between m-b-15">
        <div class="colorFirst">
          <span>{{ clerkObj.yearMonth }}</span><span class="p-l-18">{{ clerkObj.storeName }}</span>
        </div>
      </div>
      <div class="saler-set-table">
        <el-table class="select-table" ref="multipleTable" :span-method="objectSpanMethod" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
          <el-table-column label="导购">
            <template slot-scope="scope">
              <div>{{ scope.row.clerkName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="月指标">
            <template slot-scope="scope">
              <div>
                <el-input class="w-120 p-l-8" maxlength="50" v-model="scope.row.clerkPerformance" placeholder="请输入" :disabled="clerkObj.settingAble == 0 || scope.row.bindFlag == 0" @blur="value => inputPerformance(value, scope.$index, scope.row)">
                  <i slot="prefix" style="font-style: normal;position: absolute;top: 4px;left: 12px;">￥</i>
                </el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="总计 >= 门店月指标" width="418px">
            <template >
              <div><span class="font-14 color-606266 text-left">总计</span><span class=" p-l-175 font-14 color-606266 text-left">门店月指标</span></div>
              <div style="margin-top: 4px;">
                <el-input class="w-161" v-model="performanceSum" disabled>
                  <i slot="prefix" style="font-style: normal;position: absolute;top: 4px;left: 10px;">￥</i>
                </el-input>
                <span class="p-l-10 p-r-10"> &gt;= </span>
                <el-input class="w-161 p-l-8" maxlength="50" v-model="clerkObj.storePerformance" placeholder="请输入指标值" disabled>
                  <i slot="prefix" style="font-style: normal;position: absolute;top: 4px;left: 16px;">￥</i>
                </el-input>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="task-set-save m-t-30">
        <el-button v-if="clerkObj.settingAble == 1" :disabled="!equalFlag ? true : false" type="primary" @click="saveSet">确认</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { _debounce } from '@/common/js/public';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
import fetch from '@/api/target-manage-app.js';
const { saveSaleSet, getSaleSet } = fetch;
export default {
  name: 'PerfectSaleTarget',
  components: {},
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      tableH: window.screen.availHeight - 464 - 126,
      activeTab: '1',
      activeBrand: this.brandId, // 商户(品牌) id
      operationStaffName: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).staffDTO['staffName'] : '',
      activeId: '4',
      tableData: [ {}, {} ],
      performanceSum: '0.00', // 总指标
      clerkObj: {
        storeId: '',
        storeName: '',
        yearMonth: '',
        settingAble: 1,
        storePerformance: 0
      },
      equalFlag: false // 相等标志
    };
  },
  mounted() {
    let that = this;
    this.$emit('showTab', '/target-list');
    let bread = [ { name: '指标管理', path: '/target-list' }, { name: '查看门店', path: '/target-store' }, { name: '完善导购指标' } ];
    // 修改面包屑
    this.$emit('change-nav', bread);

    if (!!that.brandId) {
      that.getData();
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const that = this;
      if (columnIndex === 2) {
        if (rowIndex == 0) {
          return {
            rowspan: that.tableData.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    /**
     * @description:输入
     * @param {Function} val
     * @param {Number} index
     * @param {Object} row
     * @author: 无尘
     */
    inputPerformance: function(val, index, row) {
      const that = this;
      row.clerkPerformance = !!Number(row.clerkPerformance.replace(/[^\d.]/g, '')) ? row.clerkPerformance.replace(/[^\d+(.\d+)]/g, '') : '';
      row.clerkPerformance = Number(row.clerkPerformance).toFixed(2);
      let sumData = 0;
      that.tableData.forEach(ele => {
        sumData += Number(ele.clerkPerformance);
      });
      that.performanceSum = Number(sumData).toFixed(2);
      that.diffData();
    },

    diffData() {
      let that = this;
      let dataFlag = Number(that.performanceSum) > Number(that.clerkObj.storePerformance) || Number(that.performanceSum) == Number(that.clerkObj.storePerformance);
      if (!dataFlag) {
        that.equalFlag = false;
      } else {
        that.equalFlag = true;
      }
      return dataFlag;
    },
    /**
     * @description:保存
     * @author: 无尘
     */
    saveSet: _debounce(function() {
      const that = this;
      if (!that.diffData()) {
        return false;
      }
      /* 非空验证 */
      if (that.clerkObj.storePerformance == '') {
        that.$message.error({
          duration: 1000,
          message: '请输入门店月指标'
        });
        return false;
      }
      const data = {
        clerkPerformanceList: that.tableData,
        storePerformance: that.clerkObj.storePerformance,
        operationStaffName: that.operationStaffName
      };
      that.postSave(data);
    }, 500),
    postSave(data) {
      const that = this;
      const para = {
        enterpriseId: that.activeBrand,
        storeId: that.clerkObj.storeId,
        yearMonth: that.clerkObj.yearMonth,
        performance: JSON.stringify(data)
      };
      saveSaleSet(para)
        .then(res => {
          if (res.code == '0000') {
            showMsg.showmsg('保存成功', 'success');
            return;
          }
          errMsg.errorMsg(res);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * @description:获取设置数据
     * @author: 无尘
     */
    getData() {
      const that = this;
      const para = {
        enterpriseId: that.activeBrand,
        storeId: that.clerkObj.storeId,
        yearMonth: that.clerkObj.yearMonth
      };
      getSaleSet(para)
        .then(res => {
          if (res.code == '0000') {
            if (!!res.result.clerkPerformanceList && !!res.result.clerkPerformanceList.length) {
              res.result.clerkPerformanceList.forEach(ele => {
                ele.clerkPerformance = Number(ele.clerkPerformance).toFixed(2);
              });
              that.tableData = res.result.clerkPerformanceList || [];
            }
            res.result.storePerformance = Number(res.result.storePerformance).toFixed(2);
            that.clerkObj = res.result;
            let allSum = 0;
            that.tableData.forEach(ele => {
              allSum += Number(ele.clerkPerformance);
            });
            that.performanceSum = Number(allSum).toFixed(2);
            return;
          }
          errMsg.errorMsg(res);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    brandId: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.activeBrand = newData;
        that.clerkObj.yearMonth = that.$route.query.yearMonth;
        that.clerkObj.storeId = that.$route.query.storeId;
        that.getData();
      }
    }
  },

};
</script>
<style type="text/scss" lang="scss" scoped>
.task-set-content {
  box-sizing: border-box;
  .w-105 {
    width: 105px;
  }
  .w-120 {
    width: 120px;
  }
  .w-161 {
    width: 161px;
  }
  .m-b-15 {
    margin-bottom: 15px;
  }
  .p-l-8 {
    padding-left: 8px;
  }
  .p-l-18 {
    padding-left: 18px;
  }
  .p-l-24 {
    padding-left: 24px;
  }
  .p-l-175 {
    padding-left: 175px;
  }
  .color-1890ff {
    color: #2f54eb;
  }
  .color-f5222d {
    color: #f5222d;
  }
  .colorFirst {
    color: #303133;
    font-weight: 600;
  }

}
</style>
