<!--
 * @Descripttion: 完善导购指标
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-11-12 10:48:40
 * @LastEditors: 无尘
 * @LastEditTime: 2020-11-25 09:23:34
-->
<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.performanceYm }}</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.performanceValue" placeholder="请输入" :disabled="disableSetting"  @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, checkDisEdit } 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 { changeStorePerformanceClerk, getStorePerformanceClerk } = fetch;
export default {
  name: 'PerfectSaleTarget',
  components: {},
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      tableH: window.screen.availHeight - 464 - 126,
      tableData: [],
      performanceSum: '0.00', // 总指标
      clerkObj: {
        storeInfoId: '',
        storeName: '',
        performanceYm: '',
        performanceSubType: '',
        settingAble: 1,
        storePerformance: 0
      },
      equalFlag: false, // 相等标志
      disableSetting: false // 是否禁用设置（false：不禁用设置，true：禁用设置）
    };
  },
  mounted() {
    const that = this;
    that.$emit('showTab', '/target-list');
    const { tab, applicationId, performanceYm, storeInfoId, storeName, flag } = that.$route.query;
    let bread = [ { name: '指标管理', path: `/target-list?tab=${tab}&applicationId=${applicationId}` }, { name: '查看门店', path: `/target-store?tab=${tab}&applicationId=${applicationId}&performanceYm=${performanceYm}` }, { name: flag == false ? '完善导购指标' : '查看导购指标' } ];
    // 修改面包屑
    that.$emit('change-nav', bread);
    // 禁用判断
    that.disableSetting = checkDisEdit(performanceYm);
    if (!!that.brandId) {
      that.clerkObj.performanceYm = performanceYm;
      that.clerkObj.storeInfoId = storeInfoId;
      that.clerkObj.storeName = storeName;
      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.performanceValue = !!Number(row.performanceValue.replace(/[^\d.]/g, '')) ? row.performanceValue.replace(/[^\d+(.\d+)]/g, '') : '';
      row.performanceValue = Number(row.performanceValue).toFixed(2);
      let sumData = 0;
      that.tableData.forEach(ele => {
        sumData += Number(ele.performanceValue);
      });
      that.performanceSum = Number(sumData).toFixed(2);
      that.diffData();
    },

    diffData() {
      const 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;
      }
      that.postSave();
    }, 500),
    postSave() {
      const that = this;
      const para = {
        enterpriseId: that.brandId,
        storeInfoId: that.clerkObj.storeInfoId,
        performanceYear: that.clerkObj.performanceYm.split('-')[0],
        performanceYm: that.clerkObj.performanceYm,
        performanceType: that.$route.query.performanceType,
        dataJson: JSON.stringify(that.tableData)
      };
      changeStorePerformanceClerk(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.brandId,
        storeInfoId: that.clerkObj.storeInfoId,
        performanceYm: that.clerkObj.performanceYm,
        performanceType: that.$route.query.performanceType,
        performanceSubType: that.$route.query.performanceSubType
      };
      getStorePerformanceClerk(para)
        .then(res => {
          if (res.code == '0000') {
            if (!!res.result && !!res.result.length) {
              res.result.forEach(ele => {
                ele.performanceValue = Number(ele.performanceValue).toFixed(2);
              });
              that.tableData = res.result || [];
            }
            that.clerkObj.storePerformance = Number(that.$route.query.performanceValue).toFixed(2);
            let allSum = 0;
            that.tableData.forEach(ele => {
              allSum += Number(ele.performanceValue);
            });
            that.performanceSum = Number(allSum).toFixed(2);
            that.diffData();
            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.clerkObj.performanceYm = that.$route.query.performanceYm;
        that.clerkObj.storeInfoId = that.$route.query.storeInfoId;
        that.clerkObj.storeName = that.$route.query.storeName;
        that.getData();
      }
    }
  },

};
</script>
<style type="text/less" lang="less" 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>
