<template>
  <a-modal
    centered
    :footer="null"
    :maskClosable="false"
    class="pushOrderManagement-explainInfo-modal"
    title="查看发货说明"
    v-model="isShow"
    @cancel="handleCancel"
    :width="600">
    <a-spin :spinning="spinning" tip="Loading...">
      <div>
        <div v-if="infoList.length">
          <div style="min-height:100px;max-height:400px;overflow:auto;">
            <div class="infoList-item" v-for="item in infoList" :key="item.id">
              <div><strong>{{ item.createDate }}</strong></div>
              <div>{{ item.explainInfo }}</div>
            </div>
          </div>
          <div class="info-new" v-if="!showInput && mode=='edit'">
            <a-button type="primary" @click="showInput=true" size="small" ghost block>+新增发货说明</a-button>
          </div>
        </div>
        <div v-if="(infoList.length==0 || showInput) && mode=='edit'">
          <a-input
            type="textarea"
            :maxLength="100"
            :auto-size="{ minRows: 3, maxRows: 5 }"
            v-model.trim="explainInfo"
            placeholder="请输入发货说明(最多100字符)"
            allowClear />
        </div>
        <div style="text-align: center;color:#999;padding-top:20px;" v-if="infoList.length==0 && mode == 'view'">
          暂无发货说明
        </div>
      </div>
      <div class="btn-cont" v-if="mode=='edit'&&showInput">
        <a-button @click="handleCancel">取消</a-button>
        <a-button
          type="primary"
          @click="handleSave('export')"
          style="margin-left: 10px;">保存</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { queryExplainList, saveExplain } from '@/api/dispatch'
export default {
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    rowData: { // 当前操作数据
      type: Object,
      default: function () {
        return null
      }
    },
    mode: { // 操作模式，编辑or查看
      type: String,
      default: 'edit'
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      spinning: false,
      showInput: false, // 是否显示表单组件
      explainInfo: '', // 发货说明
      infoList: [] // 发货详细列表
    }
  },
  methods: {
    // 确认
    handleSave (type) {
      if (this.explainInfo == '') {
        this.$message.info('请输入发货说明')
        return false
      }
      this.spinning = true
      saveExplain({
        dispatchBillSn: this.rowData.dispatchBillSn,
        dispatchBillNo: this.rowData.dispatchBillNo,
        salesBillSn: this.rowData.salesBillSn,
        salesBillNo: this.rowData.salesBillNo,
        purchaseBillSn: this.rowData.purchaseBillSn,
        purchaseBillNo: this.rowData.purchaseBillNo,
        explainInfo: this.explainInfo
      }).then(res => {
        if (res.status == 200) {
          this.explainInfo = ''
          this.showInput = false
          this.getInfo()
        }
        this.spinning = false
      })
    },
    // 获取发货单明细
    getInfo () {
      this.spinning = true
      queryExplainList({ dispatchBillSn: this.rowData.dispatchBillSn }).then(res => {
        this.infoList = res.data || []
        this.showInput = !this.infoList.length
        this.spinning = false
      })
    },
    // 取消选择分类
    handleCancel () {
      this.isShow = false
      this.explainInfo = ''
      this.infoList = []
      this.showInput = false
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      } else {
        this.getInfo()
      }
    }
  }
}
</script>

<style lang="less">
  .pushOrderManagement-explainInfo-modal{
    .btn-cont {
      text-align: center;
      margin: 25px 0 10px;
    }
    .infoList-item{
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      line-height: 18px;
    }
    .info-new{
      padding: 10px 0;
    }
  }
</style>
