<template>
  <div class="basicStyle">
    <div>
      <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
        <el-form-item label="排队页地址">
          <span style="color: #999999">{{ form.pageAddress }}</span>
          <span @click="copydata">复制</span>
        </el-form-item>
        <el-form-item label="线上取号">
          <el-switch v-model="form.isOnline" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="背景图片">
          <single-image-upload v-model="form.bgCover" @change="uploadChange"></single-image-upload>
        </el-form-item>
        <el-form-item label="桌型">
          <div style="width: 100%">
            <div>
              <el-button
                type="primary"
                @click="
                  showLocation = true;
                  title = '新增';
                "
              >
                添加
              </el-button>
            </div>
            <el-table :data="formtable.records" border style="width: 60%; margin-top: 20px">
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="note" label="描述"></el-table-column>
              <el-table-column prop="waitTime" label="等待时间「桌」"></el-table-column>
              <el-table-column prop="prefix" label="号码前缀"></el-table-column>
              <el-table-column prop="start" label="开始号码"></el-table-column>
              <el-table-column prop="name" label="操作">
                <template v-slot="scope">
                  <div style="display: flex; gap: 10px">
                    <el-button type="text" @click="editPop(scope.row)">编辑</el-button>
                    <el-button type="text" style="color: #ff4d4f" @click="deleteevnt(scope.row)">
                      删除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </el-form>
      <h2>通知模板</h2>
      <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
        <el-form-item label="排队成功提醒">
          <el-input
            v-model="form.successMsg"
            placeholder="请输入排队成功提醒"
            disabled
            style="width: 500px"
          ></el-input>
        </el-form-item>
        <el-form-item label="排队即将排到通知">
          <div>
            <el-input
              v-model="form.nearMsg"
              placeholder="请输入排队成功提醒"
              disabled
              style="width: 500px"
            ></el-input>
            <div class="duoshaozhuo">
              <div>前面等待</div>
              <el-input v-model="form.nearNum" placeholder="" disabled></el-input>
              <div>桌时提醒</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="排队到号提醒">
          <el-input
            v-model="form.callingMsg"
            placeholder="请输入排队到号提醒"
            disabled
            style="width: 500px"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitHandle" :loading="formLoading">
            <span v-if="!formLoading">保存</span>
            <span v-else>保存中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog :title="title" v-model="showLocation" width="500px">
      <el-form :model="forms" label-width="140px" label-position="left">
        <el-form-item label="名称">
          <el-input v-model="forms.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="forms.note" placeholder="如：1-2人"></el-input>
        </el-form-item>
        <el-form-item label="等待时间">
          <el-input v-model="forms.waitTime" placeholder="0">
            <template #append>分钟/1桌</template>
          </el-input>
        </el-form-item>
        <el-form-item label="号码前缀">
          <el-input v-model="forms.prefix" placeholder="请输入英文字母「不支持中文」"></el-input>
        </el-form-item>
        <el-form-item label="开始号码">
          <el-input v-model="forms.start" placeholder="请输入开始号码"></el-input>
        </el-form-item>
        <el-form-item label="临近几桌提醒">
          <el-input-number
            step-strictly
            v-model="forms.nearNum"
            placeholder="请输入临近几桌提醒"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="过号保留">
          <el-input
            v-model="forms.postponeNum"
            :disabled="!forms.isPostpone"
            placeholder="请输入名称"
          >
            <template #prepend>
              <div>
                <span><el-checkbox v-model="forms.isPostpone">开启顺延</el-checkbox></span>
              </div>
            </template>

            <template #append>桌</template>
          </el-input>
        </el-form-item>
        <el-form-item label="" width="120">
          <template v-slot="scope">
            <div style="display: flex; gap: 10px">
              <el-button
                plain
                @click="
                  showLocation = false;
                  forms = {};
                "
              >
                取消
              </el-button>
              <el-button type="primary" @click="submitE">确定</el-button>
            </div>
          </template>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import callTableApi from "@/api/account/callTable";
import { ElMessage, ElMessageBox, ElSubMenu } from "element-plus";
import uploadImg from "@/assets/images/upload.png";
export default {
  data() {
    return {
      uploadImg,
      showLocation: false,
      showUpload: false,
      uploadIndex: 1,
      startTime: "",
      endTime: "",
      formLoading: false,
      form: {
        nearNum: 1,
      },
      forms: {},
      formtable: "",
      rules: {
        shopName: [
          {
            required: true,
            message: " ",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: " ",
            trigger: "blur",
          },
        ],
        settleTime: [
          {
            required: true,
            message: " ",
            trigger: "blur",
          },
        ],
      },
      fileList: [],
      files: [],
      headers: {
        Authorization: "",
      },
      title: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async editPop(item) {
      this.forms = item;
      this.showLocation = true;
      this.title = "编辑";
    },
    async deleteevnt(item) {
      ElMessageBox.confirm("是否要删除" + item.name, {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await callTableApi.deleteTable({
            callTableId: item.id,
          });
          console.log(res, "挑食 ");
          if (res) {
            this.init();
            ElSubMenu.success("删除成功");
          }
        })
        .catch(() => {});
    },
    async submitE() {
      if (this.title == "新增") {
        const res = await callTableApi.addTable({
          ...this.forms,
        });
        if (res) {
          ElMessage.success("新增成功");
          this.showLocation = false;
          this.init();
        }
      } else {
        const res = await callTableApi.editTable({
          ...this.forms,
          callTableId: this.forms.id,
        });
        if (res) {
          ElMessage.success("修改成功");
          this.showLocation = false;
          this.init();
        }
      }
      this.forms = {};
    },
    async uploadChange() {
      const res = await callTableApi.editConfig({ bgCover: this.form.bgCover });
    },
    async init() {
      try {
        const res = await callTableApi.getConfig();
        this.form = res;
        const data = await callTableApi.getTable({
          page: 1,
          size: 10,
        });
        this.formtable = data;
      } catch (error) {}
    },
    // 保存
    submitHandle() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.formLoading = true;
          try {
            // if (this.startTime && this.endTime) {
            //     this.form.businessTime = `${this.startTime}-${this.endTime}`;
            // }
            const res = await callTableApi.editConfig(this.form);
            this.formLoading = false;
            this.forms = {};
            ElMessage({
              title: "成功",
              message: "提交成功",
              type: "success",
            });
          } catch (error) {}
        }
      });
    },
    handleSuccess(response, file, fileList) {
      // const uid = file.uid
      // const id = response.id
      // this.files.push({ uid, id })
      console.log("上传成功", response);
      this.files = response.data;
      this.form.bgCover = response.data[0];
    },
    handleBeforeRemove(file, fileList) {
      for (let i = 0; i < this.files.length; i++) {
        if (this.files[i].uid === file.uid) {
          crudQiNiu.del([this.files[i].id]).then((res) => {});
          return true;
        }
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      const msg = JSON.parse(e.message);
      this.crud.notify(msg.message, CRUD.NOTIFICATION_TYPE.ERROR);
    },
    async copydata(content) {
      let copyResult = true;
      // 设置想要复制的文本内容
      const text = this.form.pageAddress || "复制内容为空哦~";
      // 判断是否支持clipboard方式
      if (!!window.navigator.clipboard) {
        // 利用clipboard将文本写入剪贴板（这是一个异步promise）
        await window.navigator.clipboard
          .writeText(text)
          .then((res) => {
            console.log("复制成功");
          })
          .catch((err) => {
            console.log("复制失败--采取第二种复制方案", err);
            // clipboard方式复制失败 则采用document.execCommand()方式进行尝试
            copyResult = copyContent2(text);
          });
      } else {
        // 不支持clipboard方式 则采用document.execCommand()方式
        copyResult = copyContent2(text);
      }
      // 返回复制操作的最终结果
      // return copyResult;
    },
    // 刷新列表数据
    doSubmit() {
      this.fileList = [];
      this.showUpload = false;
      switch (this.uploadIndex) {
        case 1:
          this.form.bgCover = this.files[0];
          break;
        case 2:
          this.form.coverImg = this.files[0];
          break;
        case 3:
          this.form.shopQrcode = this.files[0];
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.basicStyle {
  padding: 20px;
}

.map_box {
  width: 100%;
  position: relative;

  .map {
    height: 300px;
  }

  .search_box {
    position: absolute;
    top: 10px;
    left: 10px;
  }

  .search_wrap {
    padding: 6px 0;

    .item {
      display: flex;
      padding: 12px 0;

      .left {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-right: 20px;

        .location {
          color: #999;
          padding-top: 4px;
        }
      }
    }
  }
}

.duoshaozhuo {
  display: flex;
  align-items: center;

  > input {
    width: 120px;
    border: none !important;
  }

  > div {
    color: #999;
    width: 118px;
    height: 33px;
    line-height: 33px;
    text-align: center;
    border: 1px solid #dddfe6;
    background-color: #f5f7fa;
    margin-top: 9px;
  }
}
</style>