<template>
  <a-modal
    centered
    class="vinRecord-modal"
    :footer="null"
    :maskClosable="false"
    :title="shelfName"
    v-model="isShow"
    @cancel="isShow=false"
    width="60%">
    <!-- 详情 -->
    <div v-if="itemData">
      <a-descriptions :column="3" size="default">
        <a-descriptions-item label="调回单号">{{ itemData.recallBillNo }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ itemData.createDate }}</a-descriptions-item>
        <a-descriptions-item label="状态" :span="1">{{ itemData.billStateDictValue }}</a-descriptions-item>
        <a-descriptions-item label="退库时间">{{ itemData.confirmTime }}</a-descriptions-item>
        <a-descriptions-item style="width:calc(100% - 18px);background:red">
          <span style="color:rgba(0, 0, 0, 0.85)">关联销售退货单：</span>
          <span v-if="salesReturnBillList && salesReturnBillList.length>0">
            <span v-for="con in salesReturnBillList" :key="con.id" class="recallBillNo" @click="jumpDetail(con)">{{ con.salesReturnNo }}</span>
          </span>
          <span v-else>
            --
          </span>
          <a-button type="primary" ghost class="recallBillBtn" @click="seeRecallBill" v-if="itemData.billState != 'CANCEL'">生成销售退货单</a-button>
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <!-- 表格 -->
    <div class="table-body" v-if="detailList && detailList.length>0">
      <a-table
        :columns="columns"
        :data-source="detailList"
        :scroll="{ y: 300 }"
        :rowKey="(record) => record.id"
        :pagination="false"
        :bordered="true"
      ></a-table>
    </div>
    <div class="btn-cont"><a-button id="vinRecord-modal-back" @click="isShow = false">关闭</a-button></div>
    <!-- 回调单号提示窗 -->
    <a-modal
      class="tipPopup"
      :maskClosable="false"
      v-model="tipVisible"
      :centered="true"
      :closable="false"
      :footer="null"
      width="23%">
      <div class="tipTop" v-if="itemData">
        <div>产品总款数：<span>{{ itemData.totalCategory }}</span></div>
        <div>产品总件数：<span>{{ itemData.viewQty }}</span></div>
      </div>
      <div class="tipCon" v-if="salesReturnBillList && salesReturnBillList.length==0">确认生成销售退货订单吗？</div>
      <div v-else>
        <div class="tipCon">此调回单已经存在相应的销售退货单，确定再次生成销售退货单吗？</div>
        <div class="tipRecallBillNo">
          <p v-for="con in salesReturnBillList" :key="con.id" @click="jumpDetail(con)">{{ con.salesReturnNo }}</p>
        </div>
      </div>
      <div class="tipFooter">
        <a-button class="btnLeft" type="link" @click="tipVisible = false">
          取消
        </a-button>
        <a-button class="btnLeft" type="link" @click="setReturnBill" :loading="btnLoading">
          确定
        </a-button>
      </div>
    </a-modal>
  </a-modal>
</template>

<script>
import { generateSaleReturnBill } from '@/api/shelfRecall.js'
export default {
  name: 'DetailModal',
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemData: {
      type: Object,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      tipVisible: false,
      salesReturnBillList: [],
      detailList: [],
      btnLoading: false,
      columns: [{
        title: '序号',
        dataIndex: 'no',
        width: '10%',
        align: 'center'
      },
      {
        title: '产品编码',
        dataIndex: 'productCode',
        width: '15%',
        align: 'center',
        customRender: function (text) {
          return text || '--'
        }
      },
      {
        title: '产品名称',
        dataIndex: 'productName',
        width: '30%',
        align: 'left',
        customRender: function (text) {
          return text || '--'
        },
        ellipsis: true
      },
      {
        title: '调回数量',
        dataIndex: 'qty',
        width: '15%',
        align: 'center',
        customRender: function (text) {
          return text || text == 0 ? text : '--'
        }
      },
      {
        title: '实退数量',
        dataIndex: 'confirmQty',
        width: '15%',
        align: 'center',
        customRender: function (text) {
          return text || text == 0 ? text : '--'
        }
      },
      {
        title: '单位',
        dataIndex: 'product.unit',
        width: '15%',
        align: 'center',
        customRender: function (text) {
          return text || text == 0 ? text : '--'
        }
      }
      ],
      shelfName: ''
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      } else {
        if (this.itemData) {
          this.salesReturnBillList = this.itemData.salesReturnBillList ? this.itemData.salesReturnBillList : []
          this.itemData.detailList.map((con, i) => {
            con.no = i + 1
          })
          this.detailList = this.itemData.detailList
          this.shelfName = '调回单详情——' + this.itemData.shelfInfo.shelfName
        }
      }
    }
  },
  methods: {
    seeRecallBill () {
      this.tipVisible = true
    },
    // 生成销售退货单
    setReturnBill () {
      this.spinning = true
      this.btnLoading = true
      generateSaleReturnBill({ recallBillSn: this.itemData.recallBillSn }).then(res => {
        if (res.status == 200) {
          this.$message.success(res.message)
          this.tipVisible = false
          this.$emit('close')
          this.spinning = false
        } else {
          this.spinning = false
        }
        this.btnLoading = false
      })
    },
    jumpDetail (row) {
      const _this = this
      if (row.delFlag == 0) {
        _this.isShow = false
        _this.tipVisible = false
        _this.$router.push({ name: 'salesReturnDetail', params: { id: row.id, sn: row.salesReturnSn } })
      } else {
        _this.$error({
          title: '提示',
          content: '此销售退货单已删除，无法查看详情',
          centered: true
        })
      }
    }
  }
}
</script>

<style lang="less">
  .vinRecord-modal{
    .ant-modal-body {
      padding: 40px 40px 24px;
    }
    .ant-modal-title{
      font-weight: 600;
    }
    .btn-cont {
      text-align: center;
      margin: 35px 0 10px;
    }
    .table-body{
      margin-top:10px;
      // table{
      //   th,td{
      //     text-align: center;
      //     padding: 5px;
      //     border:1px solid #ddd;
      //   }
      //   th{
      //     background:#f8f8f8;
      //   }
      // }
    }
    .recallBillNo{
      color:#39f;
      font-weight: 600;
      cursor: pointer;
    }
    .recallBillNo:not(:last-child)::after{
      content:'，';
    }
    .recallBillBtn{
      border-color:#39f;
      color:#39f;
      margin-left: 20px;
      &:hover, &:focus {
        border-color: #52a6fb;
        color: #52a6fb;
      }
    }
    .ant-descriptions-item{
          vertical-align: top;
    }
  }
  // 弹窗
  .tipPopup{
    .ant-modal-body{
      padding:0 !important;
    }
    text-align: center;
    .tipTop{
      width:62%;
      display: flex;
      algin-item:center;
      padding:20px 0;
      box-sizing: border-box;
      justify-content: space-between;
      color:#333;
      margin:0 auto;
      span{
        color:#f30f30;
        font-weight: bold;
      }
    }
    .tipCon{
        width:62%;
        margin: 0 auto 30px;
        text-align: center;
    }
    .tipRecallBillNo{
        padding:0 20px;
        p{
          padding-bottom: 15px;
          border-bottom: 1px solid #e0e0e0;
        }
    }
    .tipFooter{
      display: flex;
      algin-item:center;
      border-top:1px solid #e0e0e0;
      :hover{

      }
      .btnLeft{
        width:50%;
        text-align: center;
        height:46px;
        line-height: 46px;
        color:#39f;
        &:first-child{
          border-right:1px solid #e0e0e0;
        }
      }
    }

  }
</style>
