<!--
 * @Descripttion: 完善日指标
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-11-12 10:47:17
 * @LastEditors: 无尘
 * @LastEditTime: 2020-11-12 11:19:24
-->
<template>
  <div class="common-app-right" style="padding: 20px 0;color: #303133">
    <el-form :model="form" label-width="110px">
      <el-form-item label="门店名称"></el-form-item>
      <el-form-item label="指标额">
        <el-button type="text" @click="dialogVisible=true">修改</el-button>
      </el-form-item>
      <el-form-item label="指标类型">业绩指标日权重</el-form-item>
      <el-form-item label="">
        <div class="content-data">
          <span class="color2">月指标：¥ </span>
          <span class="color1">100,000</span>
          <span class="color2">日指标总和：¥  </span>
          <span class="color1" :style="{ color: totalDayTarget > monthTarget ? '#F5222D' : '#606266' }">{{ parseFloat(totalDayTarget).toFixed(2) }}</span>
        </div>
      </el-form-item>
    </el-form>

    <div class="target-title">
      <span>2020年9月</span>
      <el-button type="text">设置默认日权重</el-button>
    </div>

    <div class="target-table">
      <ul class="table-title">
        <li>周日</li>
        <li>周一</li>
        <li>周二</li>
        <li>周三</li>
        <li>周四</li>
        <li>周五</li>
        <li>周六</li>
      </ul>
      <ul class="table-content">
        <!-- 补充空白 -->
        <li v-for="(item, i) in zerofill" :key="i"></li>

        <li v-for="(item, i) in tableData" :key="i">
          <div>{{ item.perfromanceDay }}</div>
          <el-input-number v-model="item.performanceValue" :precision="2" :controls="false" style="width: 80px;margin-left:40px;margin-top:5px"></el-input-number>
        </li>

        <!-- 补充空白 -->
        <li v-for="(item, i) in zerofillLast" :key="i"></li>
      </ul>
    </div>

    <el-button type="primary" :loading="loading" style="margin-left:20px">保存</el-button>

    <el-dialog
      title="修改指标"
      :visible.sync="dialogVisible"
      width="600px"
      @close="dialogClose">
      <el-alert
        title="修改当月指标会导致已完善的日指标重新下发，并完善。请谨慎设置"
        type="danger"
        show-icon
        :closable="false">
      </el-alert>

      <el-form :model="targetForm" ref="targetForm" hide-required-asterisk label-width="175px">
        <el-form-item
          prop="value"
          :rules="[
            { required: true, message: '请输入月指标额', trigger: 'blur' }
          ]">
          <span slot="label">
            <span class="color1" style="padding-right:35px">2020-10</span>
            指标额
          </span>

          <el-input v-model="targetForm.value" style="width: 289px">
            <span slot="prefix" style="color:#303133;padding-left:5px">￥</span>
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmMonthTarget">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import errMsg from '@/common/js/error';
// import showMsg from '@/common/js/showmsg';
// import fetch from '@/api/target-manage-app.js';
// const { saveDaySet, getDaySet } = fetch;
export default {
  name: 'PerfectDayTarget',
  components: {},
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      form: {},
      loading: false,
      monthTarget: 10000,

      tableData: [],
      zerofill: [],
      zerofillLast: [],

      targetForm: {
        value: ''
      },
      dialogVisible: false,
    };
  },
  created() {
    this.init();
  },
  mounted() {
    this.$emit('showTab', '/target-list');
    let bread = [ { name: '指标管理', path: '/target-list' }, { name: '查看门店', path: '/target-store' }, { name: '完善日指标' } ];
    // 修改面包屑
    this.$emit('change-nav', bread);
  },
  // watch: {
  //   brandId() {
  //   }
  // },
  methods: {
    // 初始化表格
    init() {
      const { date } = this.$route.query;
      let sDate = date ? date.split('-') : '';
      if (!sDate) return errMsg('缺少参数，请返回重试');
      let week = new Date(sDate[0], sDate[1] - 1).getDay(); // 第一天周几
      let days = new Date(sDate[0], sDate[1], 0).getDate(); // 一个月天数
      this.zerofill = new Array(week).fill(null); // 补空白
      this.tableData = new Array(days).fill(null).map((item, i) => {
        return {
          perfromanceDay: i + 1,
          performanceValue: 0,
          performanceSubType: 2
        };
      });
      // 末尾补空白
      let len = (this.zerofill.length + this.tableData.length) % 7;
      if (len) this.zerofillLast = new Array(7 - len).fill(null);
    },
    // 修改月指标
    confirmMonthTarget() {
      this.$refs.targetForm.validate(valid => {
        if (!valid) return;
      });
    },
    dialogClose() {
      this.$refs.targetForm.resetFields();
    }
  },
  computed: {
    totalDayTarget() {
      return this.tableData.reduce((preV, { performanceValue }) => {
        return preV + performanceValue;
      }, 0);
    }
  },
};
</script>
<style type="text/less" lang="less" scoped>
.color1 {
  font-size: 16px;
  padding-right: 15px;
  font-weight: 600;
}
.content-data {
  position: relative;
  .color2 {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    &:not(:first-of-type) {
      padding-left: 16px;
      &::before {
        content: '|';
        position: absolute;
        left: 0;
        color: #DCDFE6;
      }
    }
  }
}
.target-title {
  display: flex;
  justify-content: space-between;
  width: 1145px;
  margin: 20px;
  span {
    font-weight: 600;
  }
}
.target-table {
  width: 1145px;
  margin: 0 20px 50px;
}
.table-title {
  display: flex;
  background-color: #ebecf0;
  li {
    width: 163px;
    height: 48px;
    line-height: 48px;
    text-indent: 35px;
    font-weight: 500;
    // border-bottom: 1px solid #DCDFE6;
    &:not(:last-of-type) {
      border-right: 1px solid #DCDFE6;
    }
  }
}
.table-content {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 163px;
    height: 70px;
    padding: 5px 0 8px 10px;
    border-bottom: 1px solid #DCDFE6;
    &:not(:nth-of-type(7n)) {
      border-right: 1px solid #DCDFE6;
    }
  }
}
.el-input-number /deep/.el-input__inner {
  text-align: left;
  border: none;
  background-color: #F5F7FA;
}
.el-form-item {
  margin-bottom: 10px;
}
/deep/.el-alert--danger {
  width: 456px;
  margin-bottom: 20px;
  background: #FFFBE6;
  border-radius: 2px;
  border: 1px solid #FFE58F;
  .el-alert__icon {
    color: #FAAD14;
  }
}
</style>
