<template>
  <div>
    <div class="title">
      <span class="title-text">页面按钮</span>
      <el-button @click="addButton(buttonFormRef)">新增按钮</el-button>
    </div>
    <div class="content el-card">
      <el-tag
        type
        v-for="(item, index) in buttons"
        class="btn"
        closable
        :key="index"
        @close="handleClose(index)"
        @click="editButton(index)"
      >
        {{ item.cnName }}
      </el-tag>
    </div>
    <div v-if="dialogButton">
      <el-dialog
        :title="buttonForm.id ? '修改按钮' : '新增按钮'"
        v-model="dialogButton"
        width="600px"
        @close="dialogButton = false"
      >
        <div style="width: 400px">
          <el-form
            :model="buttonForm"
            label-width="100px"
            :rules="buttonRule"
            ref="buttonFormRef"
          >
            <el-form-item label="按钮类名" prop="className">
              <el-input v-model="buttonForm.className" placeholder></el-input>
            </el-form-item>
            <el-form-item label="按钮风格" prop="theme">
              <el-select v-model="buttonForm.theme" placeholder>
                <el-option label="默认" value=" "></el-option>
                <el-option label="主色(primary)" value="primary"></el-option>
                <el-option label="成功(success)" value="success"></el-option>
                <el-option label="警告(warning)" value="warning"></el-option>
                <el-option label="信息(info)" value="info"></el-option>
                <el-option label="危险(danger)" value="danger"></el-option>
                <el-option label="文字(text)" value="text"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="按钮中文" prop="cnName">
              <el-input v-model="buttonForm.cnName" placeholder></el-input>
            </el-form-item>
            <el-form-item label="按钮英文" prop="enName">
              <el-input v-model="buttonForm.enName" placeholder></el-input>
            </el-form-item>
            <el-form-item label="按钮图标" prop="icon">
              <el-input v-model="buttonForm.icon" placeholder></el-input>
            </el-form-item>
            <el-form-item label="按钮类别" prop="type">
              <el-select v-model="buttonForm.type" placeholder>
                <el-option label="行按钮" :value="0"></el-option>
                <el-option label="头按钮" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="配置子页面" v-if="buttonForm.id">
              <el-button type="success" @click="showSetSubPage = true"
                >配置</el-button
              >
            </el-form-item>
            <el-form-item label>
              <el-button
                type="primary"
                @click="saveButton(buttonFormRef)"
                :disabled="submitKey"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>
    <div v-if="showSetSubPage">
      <el-dialog title="配置子页面" v-model="showSetSubPage">
        <sub-page-column :btnId="buttonForm.id"></sub-page-column>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "page-button",
};
</script>
<script setup>
import { computed, onMounted, reactive, ref, watch } from "vue";
import {
  ElMessage as $message,
  ElMessageBox as $messageBox,
} from "element-plus";
import { pageService } from "@/ApiService/pageService";
import { onBeforeRouteUpdate } from "vue-router";
import subPageColumn from "./subPageColumnCom.vue";

const props = defineProps({
  webId: Number | String,
});
const buttons = ref([]),
  buttonForm = reactive({
    className: "",
    cnName: "",
    enName: "",
    icon: "",
    type: "",
    theme: "",
    webId: "",
    id: "",
  }),
  buttonRule = reactive({
    cnName: [{ required: true, message: "请输入按钮中文", trigger: "blur" }],
    enName: [{ required: true, message: "请输入按钮英文", trigger: "blur" }],
    type: [{ required: true, message: "请选择按钮类别", trigger: "blur" }],
  }),
  buttonFormRef = ref();
let submitKey = ref(false),
  dialogButton = ref(false),
  showSetSubPage = ref(false);

onMounted(() => {
  fetchButtons();
});
const queryWebId = computed(() => {
  return props.webId;
});
watch(queryWebId, (val) => {
  fetchButtons();
});
const addButton = (buttonFormRefDom) => {
  buttonFormRefDom ? buttonFormRefDom.resetFields() : "";
  dialogButton.value = true;
};
const fetchButtons = () => {
  if (!props.webId) return;
  pageService.queryButtonByWeb(props.webId).then((res) => {
    if (res.code == 0) {
      buttons.value = res.data;
    } else {
      $message.error(res.err);
    }
  });
};
const saveButton = (buttonFormRefDom) => {
  console.log(buttonForm);
  if (submitKey.value) {
    return;
  }
  buttonFormRefDom.validate((valid) => {
    if (valid) {
      submitKey.value = true;
      buttonForm.webId = props.webId;
      if (buttonForm.id) {
        editButtonAction();
        return;
      }
      pageService.addButton(buttonForm).then((res) => {
        if (res.code == 0) {
          $message.success("添加成功");
          dialogButton.value = false;
          fetchButtons();
        } else {
          $message.error(res.err);
        }
        submitKey.value = false;
      });
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};
const editButtonAction = () => {
  pageService.updateButton(buttonForm).then((res) => {
    if (res.code == 0) {
      $message.success("修改成功");
      dialogButton.value = false;
      fetchButtons();
    } else {
      $message.error(res.err);
    }
    submitKey.value = false;
  });
};
const handleClose = (index) => {
  $messageBox
    .confirm("确定要删除该按钮么", "warning", {
      confirmButtonText: "OK",
      cancelButtonText: "Cancel",
      type: "warning",
    })
    .then(() => {
      const button = buttons.value[index];
      pageService.deleteButton(button.id).then((res) => {
        if (res.code == 0) {
          $message.success("删除成功");
          fetchButtons();
        } else {
          $message.error(res.err);
        }
      });
    })
    .catch(() => {
      console.log("用户取消删除");
    });
};
const editButton = (index) => {
  const button = buttons.value[index];
  for (let i in button) {
    buttonForm[i] = button[i];
  }
  dialogButton.value = true;
};
</script>
<style lang="scss" scoped></style>
