<!--
 * @Descripttion: 下发设置
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-11-09 10:05:27
 * @LastEditors: 无尘
 * @LastEditTime: 2020-12-01 14:32:50
-->
<!--  -->
<template>
  <div class="common-app-right">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30px" class="demo-ruleForm" @submit.native.prevent>
      <el-form-item label="" prop="days">
        <span class="font-14 color-606266">下发时间当月，第 </span><el-select class="w-100" v-model="ruleForm.days" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select><span class="font-14 color-606266 p-l-10">号</span>
          <span class="font-14 color-909399 p-l-35">注：如当月第28天下发，如果现在是1月份，即1月28号下发2月份指标。设置后次日生效</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loadingBtn" @click="submitForm('ruleForm')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import fetch from '@/api/target-manage-app.js';
const { saveTargetSet, getTargetSet } = fetch;

import { _debounce } from '@/common/js/public';
export default {
  name: 'TargetSet',
  components: {},
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      wxEnterpriseId: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).wxEnterpriseId : '',
      userInfo: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')) : { staffId: '', staffName: '' },
      ruleForm: {
        days: ''
      },
      rules: {
        days: [
          { required: true, message: '请选择', trigger: 'blur' },
        ]
      },
      options: [],
      loadingBtn: false
    };
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    const that = this;
    for (let index = 15; index < 29; index++) {
      that.options.push({
        value: index,
        label: index
      });
    }
    if (!!that.brandId) {
      that.getData();
    }
  },
  // methods
  methods: {
    /**
     * @description: 保存
     * @param {String} formName
     * @author: 无尘
     */
    submitForm: _debounce(function(formName) {
      const that = this;
      that.loadingBtn = true;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          that.postSave();
        }else {
          that.loadingBtn = false;
        }
      });

    }, 300),
    postSave() {
      const that = this;
      const para = {
        days: that.ruleForm.days,
        enterpriseId: that.brandId,
        wxEnterpriseId: that.wxEnterpriseId,
        submitStaffId: that.userInfo.staffId,
        submitStaffName: that.userInfo.staffName
      };
      saveTargetSet(para, { headers: { sign: that.brandId } })
        .then(res => {
          that.loadingBtn = false;
          that.$message.success('保存成功');
        })
        .catch(function(error) {
          that.loadingBtn = false;
        });
    },
    /**
     * @description: 获取设置数据
     * @author: 无尘
     */
    getData() {
      const that = this;
      const para = {
        enterpriseId: that.brandId,
        wxEnterpriseId: that.wxEnterpriseId
      };
      getTargetSet(para, { headers: { sign: that.brandId } })
        .then(res => {
          that.ruleForm.days = res.result.days || '';
        })
        .catch(function(error) {

        });
    }
  },
  watch: {
    brandId: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.ruleForm.days = '';
        that.getData();
      }
    }
  },
};
</script>
<style lang='less' scoped>
  .p-l-35 {
    padding-left: 35px;
  }
  .w-100 {
    width: 100px;
  }
</style>
