<template lang="html">
  <div class="distplan_detail" v-if="dialog.route_index !== null">
    <x-dialog :show="show">
      <div class="dbox">
        <p class="dialog-title">相同送货线路的门店</p>
        <p style="text-align:center;">
            每<span v-if="dialog.dist_way === 'D'">天</span><span v-if="dialog.dist_way === 'W'">{{getWeek(dialog.order_day)}}</span><span v-if="dialog.dist_way === 'M'">{{getMonth(dialog.order_day)}}</span>订
        </p>
        <div>
          <p class="dialog-subtitle" style="color:#89a9cf">
            {{dialog.store_list[dialog.route_index].route_name}}
          </p>
          <div class="dialog-store-wrap">
            <flexbox justify="space-between">
              <flexbox-item style="padding-left:2.8rem;text-align:left;">门店名称</flexbox-item>
              <flexbox-item style="padding-right:1.2rem;text-align:right;">到货时间</flexbox-item>
            </flexbox>
          </div>
          <div class="dialog-store">
            <flexbox justify="space-between" v-for="(ite, i) in dialog.store_list[dialog.route_index].store_list" class="dialog-store-wrap dialog-store-item" :key="i">
              <flexbox-item style="padding-left:8px;text-align:left;">{{ite.store_name}}</flexbox-item>
              <flexbox-item style="padding-right:8px;text-align:right;" v-if="dialog.dist_way === 'D'">第{{getDay(ite.dist_day)}}天 {{ite.dist_time}} 到货</flexbox-item>
              <flexbox-item style="padding-right:8px;text-align:right;" v-if="dialog.dist_way === 'W'">{{getWeek(ite.dist_day)}} {{ite.dist_time}} 到货</flexbox-item>
              <flexbox-item style="padding-right:8px;text-align:right;" v-if="dialog.dist_way === 'M'">{{getMonth(ite.dist_day)}} {{ite.dist_time}} 到货</flexbox-item>
            </flexbox>
          </div>
        </div>
        <div v-if="type === 'view'" class="close" @click="close" style="margin-bottom:15px;">关闭</div>
        <div v-if="type === 'edit'" class="btn-box" style="margin-bottom:15px;">
          <div @click="close">关闭</div>
          <div @click="edit">修改</div>
        </div>
      </div>
    </x-dialog>
  </div>
</template>

<script>
import { XDialog, Flexbox, FlexboxItem } from 'vux'
export default {
  props: ['show', 'type', 'dialog'],
  components: {
    XDialog,
    Flexbox,
    FlexboxItem
  },
  methods: {
    getDay (str) {
      console.warn(str);
      return (Number(str.split('+')[1][0]) + 1);
    },
    getWeek (str) {
      switch (str) {
      case 'MON':
        return '周一';
      case 'TUE':
        return '周二';
      case 'WED':
        return '周三';
      case 'THU':
        return '周四';
      case 'FRI':
        return '周五';
      case 'SAT':
        return '周六';
      case 'SUN':
        return '周日';
      case 'MON+1w':
        return '下周一';
      case 'TUE+1w':
        return '下周二';
      case 'WED+1w':
        return '下周三';
      case 'THU+1w':
        return '下周四';
      case 'FRI+1w':
        return '下周五';
      case 'SAT+1w':
        return '下周六';
      case 'SUN+1w':
        return '下周日';
      }
    },
    getMonth (str) {
      if (str === 'last') {
        return '月末'
      } else {
        if (str.split('+').length > 1) {
          if (str.split('+')[0] === 'last') {
            return '次月月末'
          } else {
            return '次月' + str.split('+')[0] + '号'
          }
        } else {
          return str + '号';
        }
      }
    },
    close () {
      this.$emit('close', 'store')
    },
    edit () {
      this.$emit('edit', 'store')
    }
  }
}
</script>

<style lang="less">
.weui-dialog {
  max-width: 600px;
}
.distplan_detail {
  .dialog-title {
    text-align: center;
    padding: 0.6rem 0;
    color: #fff;
    background: #8ea8cf;
  }
  .dialog-content {
    max-height: 25rem;
    overflow-y: scroll;
  }
  .dialog-subtitle {
    padding: 0.4rem 0.8rem;
    text-align: left;
  }
  .dialog-wrap {
    &:after {
      display: block;
      content: '';
      clear: both;
    }
    .dialog-item {
      float: left;
      width: 45%;
      padding: 0.2rem 0;
      margin: 0.2rem 0.4rem;
      text-align: center;
      background: #F0EFF5;
      border-radius: 3px;
    }
  }
  .close {
    width: 95%;
    margin: 0 auto;
    background: #8ea8cf;
    text-align: center;
    padding: 0.4rem 0;
    color: #fff;
    margin-top: 1rem;
    border-radius: 5px;
  }
  .btn-box {
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
    div {
      width: 46%;
      border-radius: 5px;
      padding: 0.4rem 0;
      &:first-of-type {
        background: #fff;
        color: #89a9cf;
        border: 1px solid #89a9cf;
      }
      &:last-of-type {
        background: #89a9cf;
        color: #fff;
      }
    }
  }
  .dialog-store {
    max-height: 25rem;
    overflow-y: auto;
  }
  .dialog-store-wrap {
    border-bottom: 1px solid #d6d7dc;
    padding-bottom: 0.6rem;
    span {
      padding: 0.3rem 0;
    }
  }
  .dialog-store-item {
    height: 3rem;
    padding: 0.4rem 0;
  }
}
</style>