<template>
  <a-modal
    centered
    class="sendGood-detail-modal"
    :footer="null"
    :maskClosable="false"
    v-model="isShow"
    :title="modalTit"
    @cancle="isShow=false"
    width="60%">
    <a-spin :spinning="spinning" tip="Loading...">
      <div class="common-main">
        <div class="toolsBar" v-if="detail.length">
          <div>箭冠汽配西安大兴店，共 {{ detail && detail.length }} 个出库单，产品款数合计 <span>1266.45</span> ，产品数量合计 <span>158</span>。</div>
        </div>
        <div class="toolsBar">
          发货时间：<a-date-picker v-model="sendDate" :locale="locale"/>
        </div>
        <div>
          <a-table :columns="columns" :pagination="false" :data-source="tableData" bordered>
            <!-- 物品名称 -->
            <template slot="goodName" slot-scope="text, record">
              <a-input v-model.trim="record.goodName"></a-input>
            </template>
            <!-- 数量 -->
            <template slot="qty" slot-scope="text, record">
              <a-input-number style="width: 100%;" v-model="record.qty" :min="1" :max="999999"></a-input-number>
            </template>
            <!-- 操作 -->
            <template slot="action" slot-scope="text, record, index">
              <a-button
                size="small"
                type="link"
                class="button-error"
                @click="handleDel(record,index)"
              >
                删除
              </a-button>
            </template>
          </a-table>
          <div style="padding: 5px; border:1px solid #eee;border-radius:0 0 10px;border-top: 0;">
            <a-button @click="addItem()" type="link" block>+新增发货明细</a-button>
          </div>
        </div>
      </div>
      <div class="btn-box">
        <a-button @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
        <a-button type="primary" @click="handleCommonOk">{{ okText }}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import moment from 'moment'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import { STable, VSelect } from '@/components'
export default {
  name: 'CommonModal',
  components: { STable, VSelect },
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    modalTit: { // 弹框标题
      type: String,
      default: null
    },
    okText: { // 确定 按钮文字
      type: String,
      default: '确定'
    },
    cancelText: { // 取消 按钮文字
      type: String,
      default: '取消'
    },
    isCancel: { // 是否显示  取消 按钮
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      locale,
      isShow: this.openModal, //  是否打开弹框
      disabled: false,
      spinning: false,
      detail: [],
      sendDate: moment(),
      tableData: [],
      columns: [
        { title: '序号', dataIndex: 'no', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '货物名称', dataIndex: 'goodName', scopedSlots: { customRender: 'goodName' }, width: '50%', align: 'center' },
        { title: '件数', dataIndex: 'qty', scopedSlots: { customRender: 'qty' }, width: '25%', align: 'center' },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: '15%', align: 'center' }
      ]
    }
  },
  methods: {
    setData (data) {
      this.detail = data
    },
    // 删除
    handleDel (row, index) {
      this.tableData.splice(index, 1)
    },
    // 添加
    addItem () {
      const len = this.tableData.length
      this.tableData.push({
        no: len + 1,
        goodName: '',
        qty: 1
      })
    },
    // 确定
    handleCommonOk () {
      this.$emit('ok')
    },
    // 取消
    handleCommonCancel () {
      this.$emit('cancel')
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('cancel')
      }
    }
  }
}
</script>

<style lang="less">
  .sendGood-detail-modal{
    .common-main{
       .toolsBar{
         display: flex;
         align-items: center;
         margin-bottom: 10px;
         .ant-btn{
           margin-left: 30px;
         }
       }
    }
    .btn-box{
      text-align: center;
      margin-top: 30px;
      .ant-btn{
        margin:0 10px;
      }
    }
  }
</style>
