<template>
  <a-card size="small" :bordered="false" class="explainQspj-warp">
    <div class="explainQspj-cont">
      <p class="explain-tit">趋势平均法</p>
      <p class="explain-txt margin-b-30">趋势平均法是从过去各期实际销售量中，观察其增减变动的基本趋势并使其平均化，从而排除了某一个别销售期可能存在偶然因素的影响的一种销售预测法。</p>
      <div class="sub-tit">
        <img src="@/assets/explain/icon_sales.png" width="16" class="tit-icon" />
        <p class="txt">预计月销量</p>
      </div>
      <div class="item-cont">
        <p class="item-exp">预计月销量= = A + n×T</p>
        <div class="item-main">
          <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
          <p class="item-txt">其中 A 表示五期平均值，n 表示距离预测时间的期数，T 表示趋势平均值</p>
        </div>
        <div class="item-main">
          <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
          <p class="item-txt">如果是新产品，没有历史销量，则不会进行预测，下载结果的excel中显示为-</p>
        </div>
        <div class="item-main">
          <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
          <p class="item-txt">如果产品上线时间不长，历史销售量记录小于12个月，则取有记录的销量平均值作为预计月销量</p>
        </div>
      </div>
      <div class="sub-tit">
        <img src="@/assets/explain/icon_inventory.png" width="16" class="tit-icon" />
        <p class="txt">安全库存</p>
      </div>
      <div class="item-cont">
        <p class="item-exp">安全库存=需求的标准偏差 × 安全系数 × 交付前置期开方</p>
        <div class="item-main">
          <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
          <p class="item-txt">标准偏差是一个统计值，用来衡量一组个体值的离散程度，由希腊字母西格玛（σ）表示。在具体计算时，先计算出每个个体值的方差，加总后再开方便得到标准偏差。</p>
        </div>
        <div class="item-main">
          <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
          <p class="item-txt">安全系数与服务水平相关，服务水平越高，对应的安全系数就越大</p>
        </div>
        <div class="item-main">
          <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
          <p class="item-txt">交付前置期是订货周期/30</p>
        </div>
      </div>
      <div class="sub-tit">
        <img src="@/assets/explain/icon_mete.png" width="16" class="tit-icon" />
        <p class="txt">预计需求量</p>
      </div>
      <div class="item-cont">
        <p class="item-exp">预计需求量=预计月销量 × 交付前置期 + 安全库存</p>
        <div class="item-main">
          <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
          <p class="item-txt">交付前置期是订货周期/30</p>
        </div>
      </div>
      <div class="sub-tit">
        <img src="@/assets/explain/icon_example.png" width="16" class="tit-icon" />
        <p class="txt">示例</p>
      </div>
      <div class="item-cont">
        <div class="item-main">
          <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
          <p class="item-txt">某产品的订货周期为45天，最近12个月的实际销量如下表</p>
        </div>
        <div class="item-table">
          <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false"></a-table>
        </div>
        <div class="item-main">
          <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
          <p class="item-txt">计算预计月销量 = 54.4 + 3 × （-0.2） = 53.8 ≈ 54（四舍五入）</p>
        </div>
        <div class="item-table">
          <a-table :columns="columnsXl" :data-source="dataSourceXl" bordered :pagination="false"></a-table>
        </div>
        <div class="item-main">
          <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
          <p class="item-txt">计算安全库存 = 73的开方 × 90%的服务水平对应的安全系数 × 45/30的开方 = 8.54 × 1.28 × 1.22 = 13.34 ≈ 13（四舍五入）</p>
        </div>
        <div class="item-table">
          <a-table :columns="columnsKc" :data-source="dataSourceKc" bordered :pagination="false"></a-table>
        </div>
        <div class="item-main">
          <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
          <p class="item-txt">计算预计需求量 = 54 × （45/30） + 13 = 94</p>
        </div>
      </div>
      <div style="text-align:center;padding: 20px;">
        <a-button type="default" @click="closePage">关闭</a-button>
      </div>
    </div>
  </a-card>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        { title: '1月', dataIndex: 'january', align: 'center' },
        { title: '2月', dataIndex: 'february', align: 'center' },
        { title: '3月', dataIndex: 'march', align: 'center' },
        { title: '4月', dataIndex: 'april', align: 'center' },
        { title: '5月', dataIndex: 'may', align: 'center' },
        { title: '6月', dataIndex: 'june', align: 'center' },
        { title: '7月', dataIndex: 'july', align: 'center' },
        { title: '8月', dataIndex: 'august', align: 'center' },
        { title: '9月', dataIndex: 'september', align: 'center' },
        { title: '10月', dataIndex: 'october', align: 'center' },
        { title: '11月', dataIndex: 'november', align: 'center' },
        { title: '12月', dataIndex: 'december', align: 'center' }
      ],
      dataSource: [
        { january: 55, february: 53, march: 54, april: 56, may: 58, june: 57, july: 52, august: 52, september: 56, october: 52, november: 53, december: 59 }
      ],
      columnsXl: [
        { title: '月份', dataIndex: 'title', align: 'center' },
        { title: '1月', dataIndex: 'january', align: 'center' },
        { title: '2月', dataIndex: 'february', align: 'center' },
        { title: '3月', dataIndex: 'march', align: 'center' },
        { title: '4月', dataIndex: 'april', align: 'center' },
        { title: '5月', dataIndex: 'may', align: 'center' },
        { title: '6月', dataIndex: 'june', align: 'center' },
        { title: '7月', dataIndex: 'july', align: 'center' },
        { title: '8月', dataIndex: 'august', align: 'center' },
        { title: '9月', dataIndex: 'september', align: 'center' },
        { title: '10月', dataIndex: 'october', align: 'center' },
        { title: '11月', dataIndex: 'november', align: 'center' },
        { title: '12月', dataIndex: 'december', align: 'center' }
      ],
      dataSourceXl: [
        { title: '实际销量', january: 55, february: 53, march: 54, april: 56, may: 58, june: 57, july: 52, august: 52, september: 56, october: 52, november: 53, december: 59 },
        { title: '五期平均值', january: '-', february: '-', march: 55.2, april: 55.6, may: 55.4, june: 55.0, july: 55.0, august: 53.8, september: 53.0, october: 54.4, november: '-', december: '-' },
        { title: '变动趋势值', january: '-', february: '-', march: '-', april: 0.4, may: -0.2, june: -0.4, july: 0, august: -1.2, september: -0.8, october: 1.4, november: '-', december: '-' },
        { title: '三期趋势平均值', january: '-', february: '-', march: '-', april: '-', may: -0.067, june: -0.2, july: -0.533, august: -0.667, september: -0.2, october: '-', november: '-', december: '-' }
      ],
      columnsKc: [
        { title: '月份', dataIndex: 'title', align: 'center' },
        { title: '1月', dataIndex: 'january', align: 'center' },
        { title: '2月', dataIndex: 'february', align: 'center' },
        { title: '3月', dataIndex: 'march', align: 'center' },
        { title: '4月', dataIndex: 'april', align: 'center' },
        { title: '5月', dataIndex: 'may', align: 'center' },
        { title: '6月', dataIndex: 'june', align: 'center' },
        { title: '7月', dataIndex: 'july', align: 'center' },
        { title: '8月', dataIndex: 'august', align: 'center' },
        { title: '9月', dataIndex: 'september', align: 'center' },
        { title: '10月', dataIndex: 'october', align: 'center' },
        { title: '11月', dataIndex: 'november', align: 'center' },
        { title: '12月', dataIndex: 'december', align: 'center' },
        { title: '求和', dataIndex: 'sum', align: 'center' }
      ],
      dataSourceKc: [
        { title: '实际销量', january: 55, february: 53, march: 54, april: 56, may: 58, june: 57, july: 52, august: 52, september: 56, october: 52, november: 53, december: 59, sum: '--' },
        { title: '实际销量', january: 54, february: 54, march: 54, april: 54, may: 54, june: 54, july: 54, august: 54, september: 54, october: 54, november: 54, december: 54, sum: '--' },
        { title: '实际销量', january: 1, february: -1, march: 0, april: 2, may: 4, june: 3, july: -2, august: -2, september: 2, october: -2, november: -1, december: 5, sum: '--' },
        { title: '实际销量', january: 1, february: 1, march: 0, april: 4, may: 16, june: 9, july: 4, august: 4, september: 4, october: 4, november: 1, december: 25, sum: 73 }
      ]
    }
  },
  methods:{
    closePage(){
      this.$emit('close')
    }
  }
}
</script>

<style lang="less">
  .explainQspj-warp{
    .explainQspj-cont{
      width: 960px;
      margin: 0 auto;
      p{
        margin: 0;
      }
      .explain-tit{
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        margin: 20px 0 30px;
      }
      .explain-txt{
        font-size: 13px;
        color: rgba(0,0,0,0.85);
      }
      .margin-b-30{
        margin-bottom: 30px;
      }
      .sub-tit{
        margin-bottom: 10px;
        .tit-icon{
          vertical-align: text-bottom;
          margin-right: 5px;
        }
        .txt{
          font-size: 16px;
          color: rgba(0, 21, 41, 1);
          display: inline-block;
          margin: 0;
        }
      }
      .item-cont{
        font-size: 13px;
        padding-left: 23px;
        line-height: 26px;
        margin-bottom: 25px;
        .item-exp{
          color: rgba(231, 0, 18, 0.85);
        }
        .item-main{
          position: relative;
          .item-icon{
            position: absolute;
            left: 0;
            top: 7px;
          }
          .item-txt{
            padding-left: 20px;
          }
        }
        .item-table{
          margin: 15px 0;
        }
      }
    }
  }
</style>
