<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-04-12 17:56:45
 * @LastEditors: 无尘
 * @LastEditTime: 2020-03-16 14:25:51
 -->
<template>
  <div class="app-detail-wrap common-right-wrap">
    <div class="task-set-content border-box">
      <div class="saler-set-title flex flex-space-between m-b-15">
        <div class="saler-set-title_left">
          <span>{{ clerkObj.yearMonth }}</span
          ><span class="p-l-18">{{ clerkObj.storeName }}门店导购月指标详情</span>
        </div>
        <!-- <div class="saler-set-title_right"><span>门店月指标：</span><el-input class="w-105 p-l-8" v-model="clerkObj.storePerformance" placeholder="请输入指标值" :disabled="clerkObj.settingAble == 0" @blur="value => inputMonthPerformance(value)"></el-input></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" 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 slot-scope="scope">
              <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">=</span>
                <el-input class="w-161 p-l-8" v-model="clerkObj.storePerformance" placeholder="请输入指标值" :disabled="clerkObj.settingAble == 0" @blur="value => inputMonthPerformance(value)">
                  <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 text-center 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 { postRequest } from '@/api/api';
export default {
  name: 'reviewed',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      tableH: window.screen.availHeight - 464 - 126,
      activeTab: '1',
      activeBrand: this.brandId, // 商户(品牌) id

      activeId: '4',
      tableData: [],
      performanceSum: '0.00', // 总指标
      clerkObj: {
        storeId: '',
        storeName: '',
        yearMonth: '',
        settingAble: 1,
        storePerformance: ''
      },
      equalFlag: true // 相等标志
    };
  },
  computed: {},
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const that = this;
      console.log(row, column, rowIndex, columnIndex);
      if (columnIndex === 2) {
        if (rowIndex == 0) {
          return {
            rowspan: that.tableData.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    /**
     * 输入
     */
    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();
    },
    inputMonthPerformance: function(val) {
      let that = this;
      that.clerkObj.storePerformance = !!Number(that.clerkObj.storePerformance.replace(/[^\d.]/g, '')) ? that.clerkObj.storePerformance.replace(/[^\d+(.\d+)]/g, '') : '';
      that.clerkObj.storePerformance = Number(that.clerkObj.storePerformance).toFixed(2);
      that.diffData();
    },

    diffData() {
      let that = this;
      let dataFlag = Number(that.performanceSum) == Number(that.clerkObj.storePerformance);
      if (!dataFlag) {
        that.equalFlag = false;
      } else {
        that.equalFlag = true;
      }
      return dataFlag;
    },
    /**
     * 保存
     */
    saveSet: _debounce(function() {
      let that = this;
      if (!that.diffData()) {
        return false;
      }
      /* 非空验证 */
      if (that.clerkObj.storePerformance == '') {
        that.$message.error({
          duration: 1000,
          message: '请输入门店月指标'
        });
        return false;
      }
      let data = {
        clerkPerformanceList: that.tableData,
        storePerformance: that.clerkObj.storePerformance
      };
      that.postSave(data);
    }, 500),
    postSave(data) {
      let that = this;
      let para = {
        enterpriseId: that.activeBrand,
        storeId: that.clerkObj.storeId,
        yearMonth: that.clerkObj.yearMonth,
        performance: JSON.stringify(data)
      };
      postRequest('/haoban-app-performance-three-web/performance/save-clerk-month-performance', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('保存成功', 'success');
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取设置数据
     */
    getData() {
      let that = this;
      let para = {
        enterpriseId: that.activeBrand,
        storeId: that.clerkObj.storeId,
        yearMonth: that.clerkObj.yearMonth
      };
      postRequest('/haoban-app-performance-three-web/performance/query-clerk-month-performance', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (!!resData.result.clerkPerformanceList && !!resData.result.clerkPerformanceList.length) {
              resData.result.clerkPerformanceList.forEach(ele => {
                ele.clerkPerformance = Number(ele.clerkPerformance).toFixed(2);
              });
              that.tableData = resData.result.clerkPerformanceList || [];
            }
            resData.result.storePerformance = Number(resData.result.storePerformance).toFixed(2);
            that.clerkObj = resData.result;
            let allSum = 0;
            that.tableData.forEach(ele => {
              allSum += Number(ele.clerkPerformance);
            });
            that.performanceSum = Number(allSum).toFixed(2);
            return;
          }
          errMsg.errorMsg(resData);
        })
        .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();
      }
    }
  },
  mounted() {
    let that = this;
    document.documentElement.style.backgroundColor = '#f0f2f5';
    that.$emit('showTab', '1');

    if (!!that.brandId) {
      that.clerkObj.yearMonth = that.$route.query.yearMonth;
      that.clerkObj.storeId = that.$route.query.storeId;
      that.getData();
    }
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: {}
};
</script>
<style type="text/scss" lang="scss" scoped>
.task-set-content {
  padding: 20px;
  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;
  }
  .saler-set-sum {
    min-width: 188px;
    margin-right: 56px;
  }
}
</style>
