<template>
  <el-dialog
    :title="form.id ? '编辑台桌' : '添加台桌'"
    :visible.sync="dialogVisible"
    @open="tbShopAreaGet"
    @close="reset"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      label-position="left"
    >
      <el-form-item label="选择区域" prop="areaId">
        <el-select v-model="form.areaId" placeholder="请选择区域"
        @change="selectChange($event, 'form' , 'areaId')"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in areaList"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="台桌状态" prop="status" v-if="form.id">
        <el-select v-model="form.status" placeholder="请选择台桌状态">
          <el-option
            :label="item.name"
            :value="item.value"
            v-for="item in status"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="台桌标识"  prop="sign">
        <div class="u-flex">
            <div class="u-flex" style="width: 57px;">
                  <el-input
              v-model="form.sign"
              placeholder="A"
            ></el-input>
            </div>
      
          <div class="u-flex u-m-l-30" >
            <div class="u-flex">
                <div class="u-m-r-4">起始</div>
                <el-input v-model="form.start" style="width: 57px;" placeholder="请输入起始值" >
          </el-input>

            </div>
           
          <div
            style="
              background-color: #D9D9D9;
              height: 1px;
              width: 32px;
              border-radius: 1px;
            "
            class="u-m-l-16 u-m-r-16"
          ></div>
          <div class="u-flex">
            <span class="u-m-r-4">结束</span>
            <el-input v-model="form.end" style="width: 57px;" placeholder="请输入结束值">
                
          </el-input>
          </div>
       
          </div>
       
        </div>
      </el-form-item>
      <el-form-item label="客座数">
        <el-input-number
          v-model="form.capacity"
          :min="0"
          controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="清台管理">
        <el-radio-group v-model="form.autoClear">
          <el-radio-button :label="0">手动清台</el-radio-button>
          <el-radio-button :label="1">自动清台</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="网络预定开关">
        <el-switch
          v-model="form.isPredate"
          :active-value="1"
          :inactive-value="2"
        ></el-switch>
      </el-form-item>
      <el-form-item label="类型">
        <el-radio-group v-model="form.type">
          <el-radio-button :label="0">低消</el-radio-button>
          <el-radio-button :label="2">计时</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="最低消费" v-if="form.type == 0">
        <el-input-number
          v-model="form.amount"
          :min="0"
          controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="每小时收费" v-if="form.type == 2">
        <el-input-number
          v-model="form.perhour"
          :min="0"
          controls-position="right"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="onSubmitHandle"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { tbShopTable, tbShopAreaGet ,$fastCreateTable} from "@/api/table";
export default {
  data() {
    return {
      dialogVisible: false,
      resetForm: "",
      loading: false,
      status: [
        { value: "pending", name: "挂单中" },
        { value: "using", name: "开台中" },
        { value: "paying", name: "结算中" },
        { value: "idle", name: "空闲" },
        { value: "subscribe", name: "预定" },
        { value: "closed", name: "关台" },
        // {value:'opening',name:'开台中'},
        { value: "cleaning", name: "台桌清理中" },
      ],
      form: {
        id: "",
        areaId: "",
        sign:'',
        start:1,
        end:10,
        capacity: 0,
        isPredate: 1,
        type: 2,
        perhour: 0,
        amount: 0,
        autoClear: 1,
      },
      rules: {
        areaId: [
          {
            required: true,
            message: "请选择区域",
            trigger: ["blur","change"],
          },
        ],
        sign: [
          {
            required: true,
            message: "请输入台桌标识",
            trigger: ["blur","change"],
          },
        ],
      },
      areaList: [],
    };
  },
  mounted() {
    this.resetForm = { ...this.form };
  },
  methods: {
    //解决selectc值改变后未验证问题
    selectChange($event, ref, type) {
      this.$refs[ref][0].validateField(type)
    },
    onSubmitHandle() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          try {
            let res = await $fastCreateTable(
              {
                ...this.form,
                qrcode: this.form.tableId,
                shopId: localStorage.getItem("shopId"),
              },
              this.form.id ? "put" : "post"
            );
            this.$emit("success", res);
            this.close();
            this.$notify({
              title: "成功",
              message: `${this.form.id ? "编辑" : "添加"}成功`,
              type: "success",
            });
            this.loading = false;
          } catch (error) {
            this.loading = false;
            console.log(error);
          }
        }
      });
    },
    show(obj) {
      this.dialogVisible = true;
      if (obj && obj.id) {
        this.form = JSON.parse(JSON.stringify(obj));
      }
    },
    close() {
      this.dialogVisible = false;
    },
    reset() {
      this.form = { ...this.resetForm };
    },
    // 获取区域
    async tbShopAreaGet() {
      try {
        const { content } = await tbShopAreaGet({
          shopId: localStorage.getItem("shopId"),
        });
        this.areaList = content;
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>