<!--
  - Author: gn
  -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :close-on-click-modal="false"
    append-to-body
  >
    <avue-form ref="formRef" v-model="form" :option="formOption">

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

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

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

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

      <template slot="$cancelType" slot-scope="scope" >
        <span>{{ form.$cancelType }}</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>
                <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 slot-scope="scope" slot="menuForm">
        <el-button
          size="small"
          icon="el-icon-close"
          :loading="btnLoading"
          @click="close"
        >关闭
        </el-button>
      </template>
    </avue-form>

  </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: '90%',
      url: {
       
      },
      selfOption: {
        printBtn: true,
        emptyBtn: false,
        submitBtn: false,
        column: [
          {
            label: '退货单号',
            prop: 'cancelNo',
            span: 12,
            labelWidth: 90, 
            formslot: true,
          },
          {
            label: '客户',
            prop: 'custName',
            span: 12,
            labelWidth: 90, 
            formslot: true,
          },
          {
            label: '商品',
            prop: 'goodsName',
            span: 12,
            formslot: true,
            labelWidth: 90, 
          },
          {
            label: '退货日期',
            prop: 'cancelDate',
            span: 12,
            labelWidth: 90, 
            formslot: true,
          },
          {
            label: "备注",
            prop: "remark",
            span: 24,
            labelWidth: 90, 
            formslot: true,
          },
          {
            label: '',
            prop: 'goods',
            span: 24,
            formslot: true,
            labelWidth: 0, 
          },
        ],
      },
      
      cardsData: [],
      form: {},
    }
  },
  watch: {
    visible: {
      handler(newVal, oldVal) {
        if(newVal === false) {
          this.resetModalData()
        }
      }
    },
  },
  created() {
    
  },
  methods: {
    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 = {
        cancelNo: undefined,
        custNo: undefined,
        goodsNoList: undefined,
        cancelDate: undefined,
        remark: undefined,
        // logo: '/company/logo.png',
      }
      this.cardsData = []
      // this.goodsTypeList = []
      // this.custNameList = []
    },

  }
}
</script>

<style>
  .goods .avue-crud__menu {
    min-height: 0px !important;
    /* display: none!important; */
  }
  .goods .avue-crud__pagination {
    padding: 0px !important;
  }
  .goods .el-card__header {
    padding: 8px 20px !important;
  }
  .goods .el-card__body {
    padding: 10px 20px !important;
  }

</style>
