<template>
  <a-modal
    centered
    class="sendGood-gz-modal"
    :footer="null"
    :maskClosable="false"
    v-model="isShow"
    :title="modalTit"
    @cancel="handleCommonCancel"
    width="60%">
    <a-spin :spinning="spinning" tip="Loading...">
      <div class="common-main">
        <div style="display: flex;align-items: center;justify-content: space-between;padding-bottom: 10px;">
          <a-alert type="info" v-if="sendBillStockOutList.length">
            <div slot="message">{{ customeName||'' }}，共 {{ sendBillStockOutList && sendBillStockOutList.length }} 个出库单，产品款数合计 <span>{{ productTotal&&productTotal.totalCategory }}</span> ，产品数量合计 <span>{{ productTotal&&productTotal.totalQty }}</span>。</div>
          </a-alert>
        </div>
        <div>
          <a-table class="sTable" :columns="outColumns" :pagination="false" :data-source="sendBillStockOutList" bordered></a-table>
        </div>
        <div class="toolsBar forms" v-if="detail">
          <div style="flex-basis:35%">托运日期：{{ detail.sendDate }}</div>
          <div style="flex-basis:65%">目的地：{{ detail.customerAddress||'--' }}</div>
          <div style="flex-basis:35%">收货人：{{ detail.customerCacateName }}<span v-if="detail.customerCacatePhone">（{{ detail.customerCacatePhone }}）</span></div>
          <div style="flex-basis:65%;word-break: break-all;">详细地址：{{ detail.customerAddressDetail }}</div>
          <div style="flex-basis:35%">收款方式：{{ detail.payTypeDictValue||'--' }}</div>
          <div style="flex-basis:35%">交货方式：{{ detail.handoverTypeDictValue||'--' }}</div>
          <div style="flex-basis:30%">运费合计：{{ toThousands(detail.totalSendAmount) }}</div>
          <div style="flex-basis:35%">物流电话：{{ detail.transportTele||'--' }}</div>
          <div style="flex-basis:35%">物流单号：{{ detail.transportNo||'--' }}</div>
          <div style="flex-basis:30%"></div>
          <div style="flex-basis:35%" :class="type==0?'requerd':''">物流情况：
            <v-select
              v-model="form.transportState"
              ref="transportState"
              showType="radio"
              v-if="type==0"
              code="TRANSPORT_STATE"
              allowClear></v-select>
            <span v-else>{{ detail.transportStateDictValue||'--' }}</span>
          </div>
          <div style="flex-basis:35%">
            是否收货：
            <div>
              <a-checkbox v-model="form.receiveFlag" @change="receiveFlagChange" v-if="type==0">是</a-checkbox>
              <span v-else>{{ detail.receiveFlag == 1?'是':'否' }}</span>
            </div>
          </div>
          <div style="flex-basis:30%" v-if="form.receiveFlag||detail.receiveFlag == 1" :class="type==0&&form.receiveFlag?'requerd':''">
            收货时间：
            <a-date-picker inputReadOnly format="YYYY-MM-DD" v-model="form.receiveDate" v-if="type==0"/>
            <span v-else>{{ detail.receiveDate||'--' }}</span>
          </div>
          <div style="flex-basis:30%" v-else></div>
          <div style="flex-basis:30%;display:flex;">
            <label>物流备注：</label>
            <div style="padding:0 10px;max-width: 80%;">
              <a-textarea style="width:300px;" v-model="form.transportRemark" :maxLength="100" placeholder="请输入备注(最多100字符)" v-if="type==0"/>
              <span v-else>{{ detail.transportRemark||'--' }}</span>
            </div>
          </div>
          <div style="flex-basis:60%;display:flex;" v-if="detail.receiveFlag == 1 && type!=0">
            问题反馈：
            <div style="max-width: 60%;">
              <div v-if="showEditQus" style="width:400px;">
                <a-textarea
                  ref="issue"
                  @blur="saveIssue"
                  v-model="detail.issueRemark"
                  placeholder="请输入问题反馈(最多100字符)"
                  :maxLength="100"
                  auto-size />
              </div>
              <div style="word-break: break-all;" v-else>{{ detail.issueRemark||'--' }}</div>
            </div>
            <div v-if="!showEditQus">
              <a-icon @click="editIssue" style="color:#00aaff;font-size:16px;cursor:pointer;" type="form" />
            </div>
          </div>
        </div>
        <div>
          <a-table class="sTable" :columns="columns" :pagination="false" :data-source="tableData" bordered></a-table>
        </div>
      </div>
      <div class="btn-box" v-if="type==0">
        <a-button @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
        <a-button type="primary" @click="handleCommonOk">{{ okText }}</a-button>
      </div>
      <div class="btn-box" v-if="type==1">
        <a-button @click="handleCommonCancel">{{ cancelText }}</a-button>
        <a-button @click="showTipModal = true" type="primary">发货单打印</a-button>
      </div>
      <!-- 发货打印 -->
      <commonModal
        modalTit="发货打印预览"
        width="700pt"
        okText="立即打印"
        :openModal="showTipModal"
        @cancel="showTipModal=false"
        @ok="$refs.printModel.printDom()">
        <printModel ref="printModel" :detail="detail" @ok="printOk"></printModel>
      </commonModal>
    </a-spin>
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import moment from 'moment'
import { STable, VSelect } from '@/components'
import printModel from './printModel.vue'
import commonModal from '@/views/common/commonModal.vue'
import { updateTransportInfo, sendBillFindBySn, updateIssueRemark } from '@/api/sendBill'
export default {
  name: 'SendOutDetailModal',
  mixins: [commonMixin],
  components: { STable, VSelect, printModel, commonModal },
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    okText: { // 确定 按钮文字
      type: String,
      default: '保存'
    },
    cancelText: { // 取消 按钮文字
      type: String,
      default: '取消'
    },
    isCancel: { // 是否显示  取消 按钮
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      disabled: false,
      spinning: false,
      detail: null,
      modalTit: '',
      type: 0,
      form: {
        transportState: 'NORMAL',
        receiveDate: '',
        receiveFlag: false,
        transportRemark: ''
      },
      tableData: [],
      columns: [
        { title: '序号', dataIndex: 'no', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '货物名称', dataIndex: 'goodsName', scopedSlots: { customRender: 'goodName' }, width: '15%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '件数', dataIndex: 'goodsQty', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '体积（m³）', dataIndex: 'goodsVolume', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '重量（kg）', dataIndex: 'goodsWeight', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '计费单价（元）', dataIndex: 'unitPrice', width: '9%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
        { title: '运费（元）', dataIndex: 'transportAmount', width: '9%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
        { title: '保价（万）', dataIndex: 'supportValue', width: '9%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
        { title: '送货费', dataIndex: 'sendAmount', width: '9%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
        { title: '其他', dataIndex: 'otherAmount', width: '8%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
        { title: '合计', dataIndex: 'totalAmount', width: '9%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') }
      ],
      sendBillStockOutList: [],
      outColumns: [
        { title: '序号', dataIndex: 'no', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '出库单号', dataIndex: 'stockOutNo', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '业务单号', dataIndex: 'outBizSubNo', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '出库类型', dataIndex: 'outBizTypeDictValue', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '发货编号', dataIndex: 'sendNo', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '客户名称', dataIndex: 'buyerName', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '收货客户名称', dataIndex: 'receiverName', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '产品款数', dataIndex: 'productTotalCategory', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '产品数量', dataIndex: 'productTotalQty', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '收款时间', dataIndex: 'settleTime', width: '10%', align: 'center', customRender: function (text) { return text || '--' } }
      ],
      sendBillSn: null,
      customeName: '',
      showTipModal: false,
      showEditQus: false
    }
  },
  methods: {
    receiveFlagChange (e) {
      console.log(e)
      const v = e.target.checked
      this.form.receiveDate = v ? moment() : ''
    },
    // 打印回调
    printOk (res) {
      if (res) {
        this.showTipModal = false
      }
    },
    editIssue () {
      this.showEditQus = !this.showEditQus
      this.$nextTick(() => {
        this.$refs.issue.focus()
      })
    },
    saveIssue () {
      updateIssueRemark({ issueRemark: this.detail.issueRemark, sendBillSn: this.sendBillSn }).then(res => {
        this.showEditQus = false
      }).catch(res => {
        this.$refs.issue.focus()
      })
    },
    // 编辑
    getDetail (data, type, title) {
      this.type = type // 0 是物流跟踪，1是详情
      this.modalTit = title
      this.sendBillSn = data.sendBillSn
      this.customeName = data.customeName
      this.spinning = true
      sendBillFindBySn({ sn: data.sendBillSn }).then(res => {
        console.log(res)
        this.spinning = false
        if (res.data) {
          this.detail = res.data
          this.detail.receiveFlag = res.data.receiveFlag == 1
          this.detail.issueRemark = this.detail.issueRemark || ''
          this.form.receiveFlag = false
          this.form.receiveDate = ''
          this.form.transportState = res.data.transportState
          this.form.transportRemark = res.data.transportRemark
          // 出库单明细
          this.sendBillStockOutList = res.data.sendBillStockOutList || []
          this.sendBillStockOutList.map((item, i) => {
            item.no = i + 1
          })
          // 发货明细
          this.tableData = res.data.detailList
          this.tableData.map((item, i) => {
            item.no = i + 1
          })
          // 统计出库单
          this.getProductTotal()
        }
      })
    },
    // 出库单数据统计
    getProductTotal () {
      const ret = {
        totalCategory: 0,
        totalQty: 0
      }
      this.sendBillStockOutList.map(item => {
        ret.totalCategory = ret.totalCategory + item.productTotalCategory
        ret.totalQty = ret.totalQty + item.productTotalQty
      })
      this.productTotal = ret
    },
    // 确定
    handleCommonOk () {
      const params = {
        sendBillSn: this.sendBillSn,
        receiveDate: this.form.receiveDate ? this.form.receiveDate.format('YYYY-MM-DD') : '',
        receiveFlag: this.form.receiveFlag ? 1 : 0,
        transportState: this.form.transportState,
        transportRemark: this.form.transportRemark || ''
      }
      if (this.type == 0 && params.receiveFlag && !this.form.receiveDate) {
        this.$message.error('请输入收货时间')
        return false
      }
      console.log(params)
      updateTransportInfo(params).then(res => {
        if (res.status == 200) {
          this.$emit('ok')
        }
      })
    },
    // 取消
    handleCommonCancel () {
      this.$emit('cancel')
      this.form = {
        transportState: 'NORMAL',
        receiveDate: moment(),
        receiveFlag: true,
        transportRemark: ''
      }
      this.detail = null
      this.sendBillStockOutList = []
      this.tableData = []
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.handleCommonCancel()
      }
    }
  }
}
</script>

<style lang="less">
  .sendGood-gz-modal{
    .common-main{
       .toolsBar{
         display: flex;
         align-items: center;
         margin: 10px 0;
       }
       .forms{
         flex-wrap: wrap;
         border:1px solid #eee;
         border-radius: 3px;
         padding: 5px;
       }
       .forms > div{
         flex-grow: 1;
         flex-basis: 50%;
         padding: 6px 10px;
         display: flex;
         align-items: center;
         > label{
           flex-basis: 70px;
         }
       }
       .requerd{
         &::before{
           content: '*';
           color: red;
         }
       }
    }
    .btn-box{
      text-align: center;
      margin-top: 30px;
      .ant-btn{
        margin:0 10px;
      }
    }
  }
</style>
