<template>
  <div>
    <Paragraph title="基础信息">
      <template>
        <el-form ref="form" size="mini" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="采购订单号" prop="name" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采购方" prop="name" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话" prop="name" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="负责人" prop="name" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品采购总数" prop="name" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采购总斤数" prop="name" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="总价" prop="name" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="支付金额" prop="name" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="支付方式" prop="name" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采购时间" prop="name" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="发票截图" prop="name" required>
                <ImageUpload :isShowTip="false" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </Paragraph>
    <Paragraph title="商品信息">
      <template>
        <el-button type="primary" @click="handleAddGoods">增加商品</el-button>
        <p></p>
        <el-table>
          <el-table-column label="商品名称" prop="1" min-width="80" />
          <el-table-column label="单价(元)" prop="3" min-width="80" />
          <el-table-column label="总数" prop="2" min-width="80" />
          <el-table-column label="总价(元)" prop="4" min-width="80" />
          <el-table-column label="操作" align="left" width="130" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </Paragraph>
    <!-- 材料列表弹出层 -->
    <el-dialog
      title="材料列表"
      :visible.sync="materialDialog"
      class="common-dialog"
      width="80%"
    >
      <PagingTable>
        <el-table-column label="序号" prop="id" min-width="80" />
        <el-table-column label="原材料名称" prop="1" min-width="80" />
        <el-table-column label="规格" prop="3" min-width="80" />
        <el-table-column label="原材料编号" prop="2" min-width="80" />
      </PagingTable>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Paragraph from "@/components/Paragraph";
import PagingTable from "@/components/PagingTable";
export default {
  name: "FormUI",
  components: { Paragraph, PagingTable },
  props: {
    form: {
      type: Object,
      default: () => ({}),
    },
    mode: {
      type: String,
      default: "add",
    },
  },
  data() {
    return {
      materialDialog: false,
    };
  },
  methods: {
    handleAddGoods() {
      this.materialDialog = true;
    },
    close() {
      this.materialDialog = false;
    },
  },
};
</script>
