<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model
        ref="form"
        :model="model"
        :rules="validatorRules"
        slot="detail"
      >
        <a-row>
          <a-col :span="8">
            <a-form-model-item
              label="套餐名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="name"
            >
              <a-input
                v-model="model.name"
                placeholder="请输入套餐名称"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item
              label="套餐条形码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="barCode"
            >
              <a-input
                v-model="model.barCode"
                placeholder="请输入套餐条形码"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item
              label="分类"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="thailType"
            >
              <a-tree-select
                v-model="model.thailType"
                :tree-data="treeData"
                :replaceFields="{
                  children: 'children',
                  title: 'name',
                  key: 'id',
                  value: 'id',
                }"
                placeholder="商品分类"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item
              label="售价"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="price"
            >
              <a-input-number
                v-model="model.price"
                placeholder="请输入售价"
                style="width: 100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item
              label="状态"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="state"
            >
              <a-switch
                v-model="model.state"
                checked-children="启用"
                un-checked-children="停用"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item
              label="是否厨打"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="kitchen"
            >
              <a-switch
                v-model="model.kitchen"
                checked-children="是"
                un-checked-children="否"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item
              label="备注"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="remark"
            >
              <a-textarea
                v-model="model.remark"
                rows="4"
                placeholder="请输入备注"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-button @click="handleAdd" type="primary" icon="plus"
              >选择商品</a-button
            >
            <a-table
              :columns="columns"
              :data-source="model.posThaliInGoodsList"
              :pagination="false"
              rowKey="id"
            >
              <template slot="num" slot-scope="text, record, index">
                <div>
                  <a-input-number v-model="record.num" :min="1" :max="99" />
                </div>
              </template>
              <template slot="required" slot-scope="text, record, index">
                <div>
                  <a-switch v-model="record.required" />
                </div>
              </template>

              <span slot="action" slot-scope="text, record, index">
                <a @click="handleDelete(index)">删除</a>
              </span>
            </a-table>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <select-goods-modal ref="modalForm2" @ok="modalFormOk"></select-goods-modal>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from "@/api/manage";
import { validateDuplicateValue } from "@/utils/util";
import { tree } from "@/api/good";
import SelectGoodsModal from "./SelectGoodsModal";
const columns = [
  {
    title: "商品名称",
    dataIndex: "name",
  },
  {
    title: "商品条码",
    dataIndex: "barCode",
  },
  {
    title: "库存",
    dataIndex: "inventory",
  },
  {
    title: "数量",
    dataIndex: "num",
    scopedSlots: { customRender: "num" },
  },
  {
    title: "售价",
    dataIndex: "sellingPrice",
  },
  {
    title: "必选项",
    dataIndex: "required",
    scopedSlots: { customRender: "required" },
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    fixed: "right",
    width: 70,
    scopedSlots: { customRender: "action" },
  },
];
export default {
  name: "PosThaliForm",
  components: { SelectGoodsModal },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      columns,
      model: { posThaliInGoodsList: [] },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        tenantId: [{ required: true, message: "请输入关联租户!" }],
        hotelId: [{ required: true, message: "请输入关联酒店!" }],
        name: [{ required: true, message: "请输入套餐名称!" }],
        posTypeId: [{ required: true, message: "请输入pos类型id!" }],
        barCode: [{ required: true, message: "请输入套餐条形码!" }],
        thailType: [{ required: true, message: "请输入分类!" }],
        price: [{ required: true, message: "请输入售价!" }],
      },
      url: {
        add: "/pos/posThali/add",
        edit: "/pos/posThali/edit",
        queryById: "/pos/posThali/queryById",
      },
      treeData: [],
      goodsList: [],
    };
  },
  computed: {
    formDisabled() {
      return this.disabled;
    },
  },
  created() {
    var _info = JSON.parse(localStorage.getItem("storeInfo"));
    if (_info) {
      this.model.hotelId = _info.id;
    }
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
    this.loadTree();
  },
  methods: {
    handleDelete(index) {
      this.model.posThaliInGoodsList.splice(index, 1);
    },
    modalFormOk(e) {
      console.log("e", e);
      e.forEach((t) => {
        this.$set(t, "required", false);
        this.$set(t, "num", 1);
      });
      //判断两个数组中是否有id相同的元素
      if (this.model.posThaliInGoodsList.some((t) => e.some((ele) => ele.id == t.id))) {
        this.$message.warning("请勿重复添加");
        return;
      }
      this.model.posThaliInGoodsList = this.model.posThaliInGoodsList.concat(e);
    },
    handleAdd() {
      this.$refs.modalForm2.edit({
        formThali: true,
      });
      this.$refs.modalForm2.title = "商品选择";
      this.$refs.modalForm2.disableSubmit = false;
    },
    loadTree() {
      var that = this;
      tree().then((res) => {
        if (res.success) {
          this.treeData = res.result;
        }
      });
    },
    add() {
      this.edit(this.modelDefault);
    },
    edit(record) {
      this.model = Object.assign({}, record);
      this.visible = true;
      if (this.model.id) {
        getAction("/pos/posThaliInGoods/list", {
          posThaliId: this.model.id,
        }).then((res) => {
          if (res.success) {
            this.model.posThaliInGoodsList = res.result.records;
          }
        });
      }
    },
    submitForm() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true;
          let httpurl = "";
          let method = "";
          if (!this.model.id) {
            httpurl += this.url.add;
            method = "post";
          } else {
            httpurl += this.url.edit;
            method = "put";
          }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit("ok");
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
            });
        }
      });
    },
  },
};
</script>