<template>
  <a-modal
    v-model="opened"
    title="特价规则优先级"
    centered
    :maskClosable="false"
    width="30%"
    :footer="null"
    @cancel="cancel"
  >
    <a-spin :spinning="spinning" tip="Loading...">
      <div style="padding: 0 50px;">
        <div style="padding:10px 0;text-align:left;color:red">
          注：优先级默认是先直降再打折
        </div>
        <div style="padding:10px 0;">
          <ul style="padding:0;margin:0;">
            <li style="display:flex;justify-content: space-between;padding:5px 3px;border-bottom:1px solid #eee;">
              <div style="width:50%;">
                活动简称-规则简称
              </div>
              <div>优先级</div>
              <div style="width:100px;text-align:center;">操作</div>
            </li>
            <li v-for="(item,rowIndex) in activeSortList" :key="item.id" style="display:flex;justify-content: space-between;padding:5px 3px;">
              <div style="width:50%;">
                {{ item.promotion.description }}-{{ item.promotionRule.description }}
              </div>
              <div> {{ item.sort }} </div>
              <div style="display:flex;width:100px;justify-content:left;">
                <span style="width:50px;color:#ed1c24;text-align:center;cursor:pointer;font-size:12px;" title="上移" @click="sortRow(item,rowIndex,1)">{{ rowIndex != 0 ? '⇡上移' : '' }}</span>
                <span style="width:50px;color:#108ee9;text-align:center;cursor:pointer;font-size:12px;" title="下移" @click="sortRow(item,rowIndex,0)">{{ rowIndex != activeList.length - 1 ? '⇣下移' : '' }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div style="margin-top:36px;text-align:center;">
        <a-button @click="cancel" style="margin-right: 15px" id="chooseCustom-btn-back">取消</a-button>
        <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">确定</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { salesPromoSaveSort } from '@/api/salesNew'
export default {
  name: 'NewPromoModal',
  mixins: [commonMixin],
  props: {
    show: [Boolean],
    activeList: [Array],
    salesBillSn: [String]
  },
  data () {
    return {
      opened: this.show,
      spinning: false,
      confirmLoading: false,
      list: []
    }
  },
  computed: {
    activeSortList () {
      return this.list.sort((a, b) => {
        return a.sort - b.sort
      })
    }
  },
  methods: {
    //  保存
    handleSubmit () {
      const _this = this
      _this.confirmLoading = true
      const data = this.activeSortList.map(item => {
        return {
          id: item.id,
          sort: item.sort
        }
      })
      salesPromoSaveSort({ salesBillSn: this.salesBillSn, salesPromoList: data }).then(res => {
        if (res.status == 200) {
          _this.$emit('ok')
        }
        _this.confirmLoading = false
      })
    },
    // 排序
    sortRow (item, rowIndex, type) {
      const temp = this.list[type == 1 ? rowIndex - 1 : rowIndex + 1]
      const tempSort = temp.sort
      temp.sort = item.sort
      item.sort = tempSort
      this.list.splice()
    },
    // 取消
    cancel () {
      this.opened = false
      this.$emit('cancel')
      this.$emit('ok')
    }
  },
  watch: {
    show (newValue, oldValue) {
      this.opened = newValue
      if (newValue) {
        this.list = this.activeList
      }
    }
  }
}
</script>
