<template>
  <div>
    <a-alert
      style="margin-bottom:10px"
      :message="`当前价格优先级：${strategies}`"
      banner
    />
    <div class="block-title">
      周价格
    </div>
    <div
      class="weekWrap"
      style="margin-bottom:30px"
    >
      <div
        class="weekItem"
        v-for="(item,index) in weekDayPriceList"
        :key="index"
      >
        <label>{{ item.label }}</label>
        <a-input-number
          class="priceInput"
          :min="0"
          :precision="2"
          :step="0.01"
          v-model="item.value"
          :formatter="value => `￥ ${value}`"
          :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
        />
      </div>
    </div>

    <a-spin :spinning="loading">
      <div class="block-title">
        日期段价格
        <a-button
          class="addBtn"
          type="primary"
          icon="plus"
          @click="handleAdd"
          size="small"
        >新增</a-button>
      </div>
      <div
        class="noData"
        v-if="priceList.length===0"
      >
        暂无
      </div>
      <ul class="priceList">
        <li
          v-for="(item,index) in priceList"
          :key="index"
        >

          <template>
            <a-range-picker
              class="calendarPicker"
              :value="[moment(item.start, 'YYYY-MM-DD'), moment(item.end, 'YYYY-MM-DD')]"
              @change="handleChange($event,item)"
            />
            <a-input-number
              class="priceInput"
              v-model="item.price"
              :formatter="value => `￥ ${value}`"
              :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
            />
          </template>

          <a-tooltip placement="top">
            <template slot="title">
              <span>删除</span>
            </template>

            <a-popconfirm
              title="确定删除吗？"
              @confirm="handleDelete(index)"
              ok-text="是"
              cancel-text="否"
            >
              <a-button
                type="danger"
                icon="close"
                size="small"
              ></a-button>
            </a-popconfirm>
          </a-tooltip>
        </li>
      </ul>
    </a-spin>

  </div>
</template>

<script>
import moment from 'moment'

export default {
  props: {
    weekDayPrice: {
      type: Array,
      default: () => []
    },
    periodPrice: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    strategies () {
      return this.$store.state.app.strategies
    }
  },
  data () {
    return {
      id: '',
      loading: false,
      visible: false,
      weekLoading: false,
      confirmLoading: false,
      priceList: [],
      weekDayPriceList: []
    }
  },
  methods: {
    moment,
    show (id) {
      this.visible = true
      this.id = id

      // 获取价格策略
      this.getTicketPriceStragegy()
    },
    handleCancel () {
      this.visible = false
    },
    handleChange (event, item) {
      this.$set(item, 'start', event[0].format('YYYY-MM-DD'))
      this.$set(item, 'end', event[1].format('YYYY-MM-DD'))
    },
    handleDelete (index) {
      this.priceList.splice(index, 1)
    },
    handleAdd () {
      let lastPrice

      if (this.priceList.length > 0) {
        lastPrice = JSON.parse(JSON.stringify(this.priceList[this.priceList.length - 1]))
      } else {
        lastPrice = { start: new Date(), end: new Date(), price: '' }
      }

      lastPrice.dateRange = [moment(lastPrice.start), moment(lastPrice.end)]

      this.priceList.push({
        ...lastPrice,
        isEdit: true
      })
    },
    handleOk () {
      this.confirmLoading = true
      // let weekPrice = this.weekDayPriceList.map(i => i.value)
      // weekPrice = Object.assign({}, weekPrice)

      // http.all([
      //   setWeekDayPrice(this.id, { price: { ...weekPrice } }),
      //   setPeriodPrice(this.id, { price: this.priceList })
      // ]).then(http.spread((acct, perms) => {
      //   this.$message.success('操作成功')
      //   this.handleCancel()
      // })).finally(() => {
      //   this.confirmLoading = false
      // })
    }
  },
  watch: {
    periodPrice: {
      handler (val) {
        this.priceList = val
      },
      immediate: true
    },
    weekDayPrice: {
      handler (val) {
        this.weekDayPriceList = val
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.priceList {
  font-variant: tabular-nums;
  li {
    margin-bottom: 15px;
  }
  .calendarTxt {
    display: inline-block; width: 332px; box-sizing: border-box; padding-right: 30px;margin-right: 20px;text-align: center;
    span {
      display: inline-block; width: 135px;
    }
  }
  .priceTxt {
    display: inline-block; width: 200px; box-sizing: border-box; padding-left: 10px;margin-right: 20px;
    span {
      margin-right: 5px;
    }
  }
  .calendarPicker {
    margin-right: 20px;
  }
  .priceInput {
    display: inline-block; width: 200px; margin-right: 20px;
  }
}

.weekWrap {
  display: flex; justify-content: space-between;
  .weekItem{
    label{
      display: block; text-align: center; margin-bottom: 5px; font-weight: bold;
    }
  }
  .weekItem + .weekItem {
    margin-left: 10px;
  }
  .priceTxt{
    width: 88px; padding: 0 11px; display: inline-block;
    i{
      font-style: normal;
    }
  }
}
.addBtn {
  float: right; margin-bottom: 5px;
}
.noData {padding: 10px;
  text-align: center; border: 1px dashed #ddd;
}

</style>
