<template>
  <div v-loading="loading">
    <edit-header :title="title">
      <el-button type="primary" plain @click="submitForm(false)" icon="el-icon-check" size="small">仅保存</el-button>
      <el-button type="primary" @click="submitForm(true)" icon="el-icon-s-check" size="small">保存并发布</el-button>
    </edit-header>

    <div class="app-container">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="6em">
        <div class="edit-title">基础信息</div>
        <el-row>
          <form-col :span="span"  label="主图" prop="picture">
            <image-upload v-model="form.picture" :limit="1"/>
          </form-col>
          <form-col :span="span"  label="交货日期" prop="deliveryDate">
            <el-date-picker v-model="form.deliveryDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :clearable="false" style="width: 100%;"/>
          </form-col>
          <form-col :span="span"  label="数量" prop="num">
            <el-input-number v-model="form.num" :min="0" controls-position="right" style="width: 100%;"/>
          </form-col>
          <form-col :span="span"  label="客户" prop="customer">
            <el-input v-model="form.customer" placeholder="请输入客户"/>
          </form-col>
          <form-col :span="span * 3"  label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :maxlength="1000" show-word-limit :autosize="{minRows: 3, maxRows: 10}"/>
          </form-col>
        </el-row>

        <div class="edit-title">产品信息</div>
        <order-prod-list
          ref="orderProdList"
          :form="form"
          :rules="rules.prodList"
        />
      </el-form>
    </div>
  </div>
</template>

<script>
import EditHeader from '@/components/EditHeader/index.vue'
import { addOrder, getOrder, updateOrder } from '@/api/bst/order'
import FormCol from '@/components/FormCol/index.vue'
import OrderProdList from '@/views/bst/order/edit/components/orderProdList.vue'

export default {
  name: "OrderEdit",
  components: { OrderProdList, FormCol, EditHeader },
  data() {
    return {
      title: null,
      form: {},
      loading: false,
      span: 6,
      // 表单校验
      rules: {
        num: [
          { required: true, message: "数量不能为空", trigger: "blur" }
        ],
        prodList: {
          name: [
            { required: true, message: "产品名称不能为空", trigger: "blur" }
          ],
          num: [
            { required: true, message: "数量不能为空", trigger: "blur" }
          ],
          workType: [
            { required: true, message: "加工方式不能为空", trigger: "blur" }
          ],
          processList: {
            deptId: [
              { required: true, message: "生产车间不能为空", trigger: "blur" }
            ],
            num: [
              { required: true, message: "数量不能为空", trigger: "blur" }
            ]
          }
        }
      }
    }
  },
  mounted() {
    this.form.id = this.$route.params.id;
    if (this.form.id == null) {
      this.title = "新增订单";
      this.reset();
    } else {
      this.title = "修改订单";
      this.getDetail(this.form.id);
    }
  },
  methods: {
    getDetail(id) {
      this.loading = true;
      getOrder(id).then(res => {
        this.form = res.data;
      }).finally(() => {
        this.loading = false;
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        orderNo: null,
        picture: null,
        deliveryDate: null,
        num: null,
        customer: null,
        remark: null,
        createBy: null,
        createTime: null,
        deleted: null,
        prodList: [
          this.$refs.orderProdList.getNewRow()
        ]
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm(submit) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            this.loading = true;
            updateOrder(this.form, submit).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$router.back();
            }).finally(() => {
              this.loading = false;
            })
          } else {
            this.loading = true;
            addOrder(this.form, submit).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$router.back();
            }).finally(() => {
              this.loading = false;
            })
          }
        }
      });
    },
  }
}
</script>
