<!--
  - Author: gn
  -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :close-on-click-modal="false"
    append-to-body
  >
   <div id="printArea">
    <avue-form ref="formRef" v-model="form" :option="formOption">
        <template slot="exWarehouseNo" slot-scope="scope" >
          <span>{{ form.exWarehouseNo }}</span>
        </template>

        <template slot="custName" slot-scope="scope" >
          <span>{{ form.custName }}</span>
        </template>

        <template slot="goodsName" slot-scope="scope" >
          <span>{{ form.goodsName.join(',') }}</span>
        </template>

        <template slot="exWarehouseDate" slot-scope="scope" >
          <span>{{ form.exWarehouseDate }}</span>
        </template>

        <template slot="courierNumber" slot-scope="scope" >
          <span>{{ form.courierNumber }}</span>
        </template>

        <template slot="orderNo" slot-scope="scope" >
          <span>{{ form.orderNo }}</span>
        </template>

        <template slot="remark" slot-scope="scope" >
          <span>{{ form.remark }}</span>
        </template>

        <template slot-scope="scope" slot="goods">
          <div class="goods">
            <div v-for="(item, index) in cardsData" :key="index">
              <el-card class="box-card" shadow="always">
                <div slot="header" class="clearfix">
                  <span> {{ item.goodName }} :</span>
                </div>
                <el-row class="goods-row">
                  <el-col :span="24">
                    <avue-crud
                      :ref="'cardTableCrud' + index"
                      :data="item.tableData"
                      :option="item.cardTableOption"
                    >
                    </avue-crud>
                  </el-col>
                </el-row>
              </el-card>
            </div>
          </div>
        </template>
        <template >
        <el-button
          size="small"
          icon="el-icon-close"
          :loading="btnLoading"
          @click="close"
        >关闭
        </el-button>
      </template>
    </avue-form>
  </div>
    <!--template >
        <el-button
          size="small"
          icon="el-icon-printer"
          :loading="btnLoading"
          
          type="primary"
        >打印
        </el-button>
        <el-button
          size="small"
          icon="el-icon-close"
          :loading="btnLoading"
          @click="close"
        >关闭
        </el-button>
      </template-->
  </el-dialog>
</template>

<script>
import { GnFormMixin } from '@/util/GnFormMixin'
import { fetchList, addResult, getResult, delResult, putResult } from '@/api/commonApis'

export default {
  name: 'steps',
  mixins: [GnFormMixin],
  components: {
    
  },
  props: {
    
  },
  data() {
    return {
      title: '',
      width: '81%',
      url: {
       
      },
      selfOption: {
        size: 'small',
        printBtn: true,
        emptyBtn: false,
        submitBtn: false,
        column: [
          {
            label: '出库单号',
            prop: 'exWarehouseNo',
            span: 8,
            labelWidth: 90, 
            formslot: true,
          },
          {
            label: '客户',
            prop: 'custName',
            span: 8,
            labelWidth: 90, 
            formslot: true,
          },
          {
            label: '商品',
            prop: 'goodsName',
            span: 8,
            formslot: true,
            labelWidth: 90, 
          },
          {
            label: '出库日期',
            prop: 'exWarehouseDate',
            span: 8,
            labelWidth: 90, 
            formslot: true,
          },
          {
            label: '快递单号',
            prop: 'courierNumber',
            span: 8,
            labelWidth: 90, 
            formslot: true,
          },
          {
            label: '关联订单号',
            prop: 'orderNo',
            span: 8,
            labelWidth: 90, 
            formslot: true,
          },
          {
            label: "备注",
            prop: "remark",
            span: 24,
            labelWidth: 90, 
            formslot: true,
          },
          {
            label: '',
            prop: 'goods',
            span: 24,
            formslot: true,
            labelWidth: 0, 
          },
        ],
      },
      
      cardsData: [],
      form: {},
      printobj: {
	          id: "printArea",
	          popTitle: "打印", // 打印配置页上方标题
			      extraHead: '',
	          //extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>,<style>#printArea {width:165%;}</style>', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
	          preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
	          previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
	          previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
	          zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
	          // beforeEntryIframe() {
	          //           // copy是ele对象的深度拷贝，修改copy对象不会更改页面中table表格的样式，只会更改打印预览生成的表格的样式
	          //           const cells = document.querySelectorAll('.cell');
	          //           const tableNode = document.querySelectorAll('.el-table__header,.el-table__body');
	          //           ;[].slice.call(cells).forEach(item => {
	          //             // 为了让表格中的内容自动换行，不需要的话可以删掉
	          //             item.style.whiteSpace = 'pre-wrap'
	          //           })
	          //           // el-table打印不全的问题
					 
	          //           ;[].slice.call(tableNode).forEach((item,index) => {
						//   // if(index==0) item.style.width = '200%';
						//   //item.style.width = '100%'; 
	          //             const child = item.childNodes;
	          //             ;[].slice.call(child).forEach(element => {
	          //               if(element.localName === 'colgroup') {
	          //                 element.innerHTML = ''
	          //               }
	          //             })
	          //           })
	          //         },
	          previewBeforeOpenCallback() { }, //预览窗口打开之前的callback（开启预览模式调用）
	          previewOpenCallback() { }, // 预览窗口打开之后的callback（开启预览模式调用）
	          beforeOpenCallback() { }, // 开启打印前的回调事件
	          openCallback() { }, // 调用打印之后的回调事件
	          closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
	          url: "",
	          standard: "",
	          extraCss: "",
	        },
    }
  },
  watch: {
    visible: {
      handler(newVal, oldVal) {
        if(newVal === false) {
          this.resetModalData()
        }
      }
    },
  },
  created() {
    
  },
  methods: {
    printO(){
      $Print('#printArea')
    },
    mergeFormOption() {
      this.formOption = Object.assign(this.formOption, this.selfOption)
    },
    init(params) {
      console.log("预览 init 参数", params);
      this.mergeFormOption()
      this.form = params.form
      this.cardsData = params.cardsData
      this.$forceUpdate()
      this.visible = true
    },
    
    // 当前页面部分数据置空
    resetModalData() {
      this.form = {
        exWarehouseNo: undefined,
        custNo: undefined,
        goodsNoList: undefined,
        exWarehouseDate: undefined,
        remark: undefined,
        // logo: '/company/logo.png',
      }
      this.cardsData = []
      // this.goodsTypeList = []
      // this.custNameList = []
    },

  }
}
</script>

<style lang='scss'>
  .goods .avue-crud__menu {
    min-height: 0px ;
    /* display: none!important; */
  }
  .goods .avue-crud__pagination {
    padding: 0px ;
    
  }
  .goods .el-card__header {
    padding: 8px 20px ;
    
  }
  .goods .el-card__body {
    padding: 10px 30px ;
    .el-table {
      padding: 0 6 5 5;
    }
  }
</style>
