<template>
  <a-modal
    v-model="isShow"
    title="正价产品明细"
    centered
    class="view-normal-product-modal"
    :maskClosable="false"
    width="860px"
    :footer="null"
    @cancel="cancel"
  >
    <a-spin :spinning="spinning" tip="Loading...">
      <a-form-model
        id="normalProduct-modal-form"
        ref="ruleForm"
        :model="form"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol">
        <a-form-model-item label="活动简称">
          {{ form.description||'--' }}
        </a-form-model-item>
        <a-form-model-item label="促销规则">
          <span>{{ form.accrualFlag==='1'?'数量叠加；':'' }}</span>
          <div v-if="form.giveRuleList&&form.giveRuleList.length>0">
            <span v-for="item in form.giveRuleList" :key="item.scopeLevel">{{ form.giveRuleList.length>1?item.scopeLevel+'、' :'' }}{{ item.regularSameFlag==='1'?'同款':'不同款' }}产品购买满 {{ item.regularUnit==='YUAN'?toThousands(item.regularValue):item.regularValue }} {{ item.regularUnit==='YUAN'?'元':'个' }}正价产品，送 {{ item.promotionValue }} 个促销产品</span>
          </div>
          <span v-else>--</span>
        </a-form-model-item>
      </a-form-model>
      <!-- 筛选条件 -->
      <div class="table-page-search-wrapper">
        <a-form
          layout="inline"
          id="normalProduct-modal-search"
          @keyup.enter.native="$refs.table.refresh(true)"
        >
          <a-row :gutter="15">
            <a-col :md="8" :sm="24">
              <a-form-item label="产品编码">
                <a-input id="normalProduct-productCode" v-model.trim="queryParam.productCode" placeholder="请输入产品编码" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="符合规则">
                <v-select
                  v-model="queryParam.flagVal"
                  id="normalProduct-flagVal"
                  code="FLAG"
                  placeholder="请选择是否符合规则"
                  allowClear></v-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24" style="margin-bottom: 10px;">
              <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="normalProduct-search">查询</a-button>
              <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="normalProduct-reset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        class="sTable"
        ref="table"
        size="small"
        :scroll="{ y: 200 }"
        :rowKey="(record) => record.id"
        :columns="columns"
        :data="loadData"
        :pageSize="10"
        :defaultLoadData="false"
        bordered>
      </s-table>
    </a-spin>
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { STable, VSelect } from '@/components'
import { accumulatedProductsList } from '@/api/salesDetailNew'
export default {
  name: 'TotalProductDetailModal',
  mixins: [commonMixin],
  components: { STable, VSelect },
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    }
  },
  data () {
    const _this = this
    return {
      isShow: this.openModal, // 打开弹窗
      spinning: false, // 页面加载动画
      disabled: false, // 阻止查询重置按钮多次点击事件
      // label 布局设置
      formItemLayout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 20 }
      },
      // 查询参数
      queryParam: {
        productCode: '',
        flagVal: undefined
      },
      form: {
        description: undefined,
        giveRuleList: []
      },
      loadData: parameter => {
        this.disabled = true
        this.spinning = true
        return accumulatedProductsList(Object.assign(parameter, this.queryParam)).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            const no = (data.pageNo - 1) * data.pageSize
            for (var i = 0; i < data.list.length; i++) {
              data.list[i].no = no + i + 1
            }
          }
          this.disabled = false
          this.spinning = false
          return data
        })
      },
      columns: [
        { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
        { title: '产品编码', dataIndex: 'productCode', width: '16%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '价格级别', dataIndex: 'priceLevelDictValue', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '售价', dataIndex: 'price', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
        { title: '售价小计', dataIndex: 'totalPrice', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
        { title: '累计售价', dataIndex: 'qty', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
        { title: '累计金额', dataIndex: 'totalAmount', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
        { title: '合计金额', dataIndex: 'buyerName', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
        { title: '差额', dataIndex: 'warehouseName', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } }
      ]
    }
  },
  methods: {
    cancel () {
      this.isShow = false
    },
    // 重置
    resetSearchForm () {
      this.queryParam.productCode = ''
      this.queryParam.flagVal = undefined
      this.$refs.table.refresh(true)
    }
  },
  watch: {
  //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      }
    }
  }
}
</script>
