﻿<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="NCC-dialog NCC-dialog_center"
    lock-scroll
    width="1200px"
  >
    <el-row :gutter="15" class="">
      <el-form
        ref="elForm"
        :model="dataForm"
        size="medium"
        label-width="100px"
        label-position="right"
        :disabled="!!isDetail"
        :rules="rules"
      >
        <el-col :span="24">
          <el-form-item label="产品/套餐" prop="title">
            <el-input
              v-model="dataForm.title"
              placeholder="产品/套餐"
              clearable
              required
              :style="{ width: '100%' }"
            >
            </el-input> 
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="type">
          
            <el-radio-group v-model="dataForm.type" required>
              <el-radio :label="0">商品</el-radio>
              <el-radio :label="1">会员套餐</el-radio> 
            </el-radio-group>

          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="金额/单价" prop="price">
            <el-input
              v-model="dataForm.price"
              placeholder="金额/单价"
              clearable
              required
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原价" prop="originalPrice">
            <el-input
              v-model="dataForm.originalPrice"
              placeholder="请输入"
              clearable
              required
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="折扣" prop="discount">
            <el-input
              v-model="dataForm.discount"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标签" prop="tags">
            <el-input
              v-model="dataForm.tags"
              placeholder="标签 | 隔开"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有效期 (开始)" prop="validStart">
            <el-date-picker
              v-model="dataForm.validStart"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
              type="date"
              format="yyyy-MM-dd"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有效期 (结束)" prop="validEnd">
            <el-date-picker
              v-model="dataForm.validEnd"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
              type="date"
              format="yyyy-MM-dd"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="商品描述" prop="description">
            <NCC-Quill
              v-model="dataForm.description"
              placeholder="请输入内容..."
              required
            >
            </NCC-Quill>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="图片" prop="images">
            <NCC-UploadImg
              v-model="dataForm.images"
              :fileSize="5"
              sizeUnit="MB"
              :limit="9"
            >
            </NCC-UploadImg>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-show="dataForm.type  != 1">
          <el-form-item label-width="0">
            <el-table :data="dataForm.baseProductDetailsList" size="mini">
              <el-table-column
                type="index"
                width="50"
                label="序号"
                align="center"
              />
              <el-table-column prop="title" label="标题">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.title"
                    placeholder="例如: 鸳鸯锅底 (1份)"
                    clearable
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="isUseCoupo" label="允许使用优惠券">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.isUseCoupo"></el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="price" label="价格">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.price"
                    placeholder="请输入"
                    clearable
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="orgPrice" label="原价">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.orgPrice"
                    placeholder="请输入"
                    clearable
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="50">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    class="NCC-table-delBtn"
                    @click="handleDelBaseProductDetailsEntityList(scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div
              class="table-actions"
              @click="addHandleBaseProductDetailsEntityList()"
            >
              <el-button type="text" icon="el-icon-plus">新增</el-button>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="false">
          <el-form-item label="创建用户" prop="creatorUserId">
            <el-input
              v-model="dataForm.creatorUserId"
              placeholder="系统自动生成"
              readonly
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="false">
          <el-form-item label="创建时间" prop="creatorTime">
            <el-input
              v-model="dataForm.creatorTime"
              placeholder="系统自动生成"
              readonly
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="false">
          <el-form-item label="修改用户" prop="lastModifyUserId">
            <el-input
              v-model="dataForm.lastModifyUserId"
              placeholder="系统自动生成"
              readonly
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="false">
          <el-form-item label="修改时间" prop="lastModifyTime">
            <el-input
              v-model="dataForm.lastModifyTime"
              placeholder="系统自动生成"
              readonly
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
export default {
  components: {},
  props: [],
  data() {
    return {
      loading: false,
      visible: false,
      isDetail: false,
      dataForm: {
        id: "",
        title: undefined,
        price: undefined,
        originalPrice: undefined,
        discount: undefined,
        tags: undefined,
        validStart: undefined,
        validEnd: undefined,
        description: undefined,
        images: [],
        baseProductDetailsList: [],
        creatorUserId: undefined,
        creatorTime: undefined,
        lastModifyUserId: undefined,
        lastModifyTime: undefined,
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入产品/套餐",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择类型",
            trigger: "blur",
          },
        ],
        price: [
          {
            required: true,
            message: "请输入金额/单价",
            trigger: "blur",
          },
          {
            pattern: /[1-9]\d*.\d*|0.\d*[1-9]\d*/,
            message: "金额不正确",
            trigger: "blur",
          },
        ],
        originalPrice: [
          {
            required: true,
            message: "请输入原价",
            trigger: "blur",
          },
          {
            pattern: /[1-9]\d*.\d*|0.\d*[1-9]\d*/,
            message: "请输入正确的金额",
            trigger: "blur",
          },
        ],
        discount: [
          {
            pattern: /[1-9]\d*.\d*|0.\d*[1-9]\d*/,
            message: "请输入正确的折扣",
            trigger: "blur",
          },
        ],
        description: [
          {
            required: true,
            message: "请输入商品描述",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goBack() {
      this.$emit("refresh");
    },
    init(id, isDetail) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          request({
            url: "/api/Food/BaseProduct/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataForm = res.data;
            if (!this.dataForm.images) this.dataForm.images = [];
          });
        }
      });
    },
    dataFormSubmit() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
			console.log('dataFormSubmit',JSON.stringify(this.dataForm));
          if (!this.dataForm.id) {
            request({
              url: `/api/Food/BaseProduct`,
              method: "post",
              data: this.dataForm,
            }).then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  (this.visible = false), this.$emit("refresh", true);
                },
              });
            });
          } else {
            request({
              url: "/api/Food/BaseProduct/" + this.dataForm.id,
              method: "PUT",
              data: this.dataForm,
            }).then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                },
              });
            });
          }
        }
      });
    },
    addHandleBaseProductDetailsEntityList() {
      let item = {
        title: undefined,
        isUseCoupo: "1",
        price: undefined,
        orgPrice: undefined,
      };
      this.dataForm.baseProductDetailsList.push(item);
    },
    handleDelBaseProductDetailsEntityList(index) {
      this.dataForm.baseProductDetailsList.splice(index, 1);
    },
  },
};
</script>
