<template>
  <vxe-modal v-model="value" id="addOrder" width="80%" height="80%" min-width="460" min-height="320" 
    show-zoom resize transfer show-footer>
      <template #title>
        <span>创建新订单</span>
      </template>
      <template #default>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="基本信息" name="1" class="add-order-item">
            <by-form :propConfig="config" ref="form"></by-form>
          </el-collapse-item>
          <el-collapse-item title="买家信息" name="2"></el-collapse-item>
          <el-collapse-item title="商品订单" name="3"></el-collapse-item>
          <el-collapse-item title="订单支付情况" name="4"></el-collapse-item>
          <el-collapse-item title="发票信息" name="5"></el-collapse-item>
        </el-collapse>
      </template>
      <template #footer>
        <div class="btn">
          <el-button type="primary" size="small">确定并继续</el-button>
          <el-button type="primary" size="small">确定</el-button>
        </div>
      </template>
    </vxe-modal>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class AddOrder extends Vue {
  value=true;
  activeNames:Array<any> =['1'];
  config:any={
    attr:{
      size:'mini',
      rules:{
        shopName:[{
          required: true, message: '请输入名称', trigger: 'blur'
        }],
        sourceId:[{
          required: true, message: '请输入名称', trigger: 'blur'
        }],
        orderDate:[{
          required: true, message: '请输入名称', trigger: 'blur'
        }]
      }
    },
    columns:[
      [{
        span:6,
        label:'店铺名称',
        prop:'shopName',
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'请输入店铺名称',
            clearable:true
          }
        }
      },{
        span:6,
        label:'线上订单',
        prop:'sourceId',
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'请输入线上订单',
            clearable:true
          }
        }
      },{
        span:6,
        label:'订单日期',
        prop:'orderDate',
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'请输入订单日期',
            clearable:true
          }
        }
      }],
      [{
        span:6,
        label:'运费',
        prop:'freight',
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'请输入订单日期',
            clearable:true
          }
        }
      },{
        span:6,
        label:'快递公司',
        prop:'logisticsCompany',
        component:'by-select',
        compConfig:{
          attr:{
            placeholder:'请选择快递公司',
            clearable:true
          }
        }
      },{
        span:6,
        label:'业务员',
        slot:true,
        prop:'slotField',
      }],
      [{
        label:'多标签',
        prop:'labels',
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'以逗号分隔，单个标签不能超过十个字符',
            clearable:true
          }
        }
      }],
      [{
        label:'买家留言',
        prop:'buyerMessage',
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'请输入买家留言',
            clearable:true
          }
        }
      }],
      [{
        label:'卖家备注',
        prop:'remark',
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'请输入卖家备注',
            clearable:true
          }
        }
      }]
    ]
  }
  setShow(v:boolean){
    this.value = v;
  }
}
</script>

<style lang="scss" scoped>
.btn{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>

<style lang="scss">
.add-order-item{
  .el-collapse-item__content{
    padding-bottom: 0;
  }
}
</style>