<template>
  <a-card size="small" :bordered="false" class="explainXsbz-warp">
    <div class="explainXsbz-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">预计月销量= {上个月实际销量，最近两个月实际销量平均值，最近半年实际销量平均值，去年同期实际销量} 取大者</p>
        <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_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">保障倍数是专家根据经验判断，自行设置的一个数值，取值范围在1~3之间，最多两位小数</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">计算预计月销量 = MAX { 59，（53+59）/2，（52+52+56+52+53+59）/6，55 } =59</p>
        </div>
        <div class="item-main">
          <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
          <p class="item-txt">计算预计需求量 = 59 × 保障倍数1.5 = 88.5 ≈ 89（假设保障倍数为1.5）</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 }
      ]
    }
  },
  methods:{
    closePage(){
      this.$emit('close')
    }
  }
}
</script>

<style lang="less">
  .explainXsbz-warp{
    .explainXsbz-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>
