<template>
  <div>
    <div class="title">
      <span class="title-text">页面列</span>
      <el-button @click="addColumn(columnsFormRef)">新增列</el-button>
      <el-button @click="addColumns(columnsFormsRef)">批量新增列</el-button>
    </div>
    <div class="content el-card">
      <template v-for="(item, index) in columns" :key="index">
        <el-tag
          type
          class="column"
          closable
          @close="handleClose(index)"
          @click="editColumn(index)"
        >
          {{ item.cnName }}
        </el-tag>
      </template>
    </div>
    <el-dialog
      title="新增实体对象"
      :model-value="dialogColumn"
      width="400px"
      @close="dialogColumn = false"
    >
      <el-form
        :model="columnsForm"
        label-width="80px"
        :rules="columnsRule"
        ref="columnsFormsRef"
      >
        <el-form-item label="实体对象" prop="outputName">
          <el-input v-model="columnsForm.outputName" placeholder></el-input>
        </el-form-item>
        <el-form-item label>
          <el-button
            type="primary"
            @click="saveColumn(columnsFormsRef)"
            :disabled="submitKey"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <div v-if="dialogField">
      <el-dialog
        title="修改字段"
        :model-value="dialogField"
        width="400px"
        @close="dialogField = false"
      >
        <el-form
          :model="fieldForm"
          label-width="120px"
          :rules="fieldRule"
          ref="columnsFormRef"
        >
          <el-form-item label="中文名字" prop="cnName">
            <el-input v-model="fieldForm.cnName" placeholder></el-input>
          </el-form-item>
          <el-form-item label="英文名字" prop="enName">
            <el-input v-model="fieldForm.enName" placeholder></el-input>
          </el-form-item>
          <el-form-item label="列宽(表格)" prop="width">
            <el-input v-model="fieldForm.width" placeholder></el-input>
          </el-form-item>
          <el-form-item label="字段类型" prop="fieldType">
            <el-select v-model="fieldForm.fieldType" placeholder>
              <el-option label="string(字符串)" value="string"></el-option>
              <el-option label="select(可选择项)" value="select"></el-option>
              <el-option label="date(日期)" value="date"></el-option>
              <el-option label="img(图片)" value="img"></el-option>
              <el-option label="link(a标签)" value="link"></el-option>
              <el-option label="click(点击)" value="click"></el-option>
              <el-option label="custom(自定义内容)" value="custom"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="isSelect" prop="isSelect">
            <el-select v-model="fieldForm.isSelect" placeholder>
              <el-option label="否" :value="0"></el-option>
              <el-option label="是" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="navSelect" prop="navSelect">
            <el-select v-model="fieldForm.navSelect" placeholder>
              <el-option label="否" :value="0"></el-option>
              <el-option label="是" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="表格显示" prop="isTableShow">
            <el-select v-model="fieldForm.isTableShow" placeholder>
              <el-option label="否" :value="0"></el-option>
              <el-option label="是" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序" prop="orderBy">
            <el-input v-model="fieldForm.orderBy" placeholder></el-input>
          </el-form-item>
          <el-form-item label="参数" prop="param">
            <el-input v-model="fieldForm.param" placeholder></el-input>
          </el-form-item>
          <el-form-item label>
            <el-button
              type="primary"
              @click="editColumnAction(columnsFormRef)"
              :disabled="submitKey"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "page-button",
};
</script>
<script setup>
import { onMounted, reactive, ref, watch, computed } from "vue";
import {
  ElMessage as $message,
  ElMessageBox as $messageBox,
} from "element-plus";
import { pageService } from "@/ApiService/pageService";
const props = defineProps({
  webId: Number | String,
});
const columns = ref([]),
  columnsForm = reactive({
    outputName: "",
    webId: 0,
  }),
  fieldForm = reactive({
    className: "",
    width: 150,
    cnName: "", //
    enName: "", //
    fieldType: "", //select，string，date
    isSelect: 0, // 0否1是
    navSelect: 0, // 0否1是
    orderBy: 0, //
    param: "", //当fieldType 为select时 param 显示并key:value; 出现并必选
    isTableShow: 1, //是否在表格中显示
  }),
  dialogColumn = ref(false),
  dialogField = ref(false),
  columnsRule = reactive({
    outputName: [{ required: true, message: "请输入列名", trigger: "blur" }],
  }),
  fieldRule = reactive({
    cnName: [{ required: true, message: "请输入", trigger: "blur" }],
    enName: [{ required: true, message: "请输入", trigger: "blur" }],
    fieldType: [{ required: true, message: "请输入", trigger: "blur" }],
    width: [{ required: true, message: "请输入", trigger: "change" }],
    isSelect: [{ required: true, message: "请选择", trigger: "change" }],
    navSelect: [{ required: true, message: "请选择", trigger: "change" }],
    isTableShow: [{ required: true, message: "请选择", trigger: "change" }],
    orderBy: [{ required: true, message: "请输入", trigger: "change" }],
  }),
  submitKey = ref(false);
let columnsFormRef = ref();
let columnsFormsRef = ref();

onMounted(() => {
  fetchColumns();
});
const queryWebId = computed(() => {
  return props.webId;
});
watch(queryWebId, (val) => {
  fetchColumns();
});
watch(dialogField, (val, old) => {
  console.log("dialogField", val, old);
});
const addColumn = (columnsFormRefDom) => {
  console.log(columnsFormRef);

  for (let i in fieldForm) {
    fieldForm[i] = "";
  }

  dialogField.value = true;
};
const addColumns = (columnsFormRefsDom) => {
  for (let i in columnsForm) {
    columnsForm[i] = "";
  }

  dialogColumn.value = true;
};
const fetchColumns = () => {
  if (!props.webId) return;
  pageService.queryFieldByWeb(props.webId).then((res) => {
    if (res.code == 0) {
      columns.value = res.data;
    } else {
      $message.error(res.err);
    }
  });
};
const handleClose = (index) => {
  $messageBox
    .confirm("确定要删除该字段么？", "warning", {
      confirmButtonText: "OK",
      cancelButtonText: "Cancel",
      type: "warning",
    })
    .then(() => {
      const column = columns.value[index];
      pageService.deleteField(column.id).then((res) => {
        if (res.code == 0) {
          $message.success("删除成功");
          fetchColumns();
        } else {
          $message.error(res.err);
        }
      });
    });
};
const editColumn = (index) => {
  const field = columns.value[index];
  for (let i in field) {
    fieldForm[i] = field[i];
  }
  dialogField.value = true;
};
const editColumnAction = (columnsFormRefDom) => {
  columnsFormRefDom.validate((valid) => {
    if (valid) {
      if (fieldForm.id) {
        editSingleColumn();
      } else {
        addSingleColumn();
      }
    } else {
      return false;
    }
  });
};
const editSingleColumn = () => {
  pageService.updatePageField(fieldForm).then((res) => {
    if (res.code == 0) {
      $message.success("修改成功");
      dialogField.value = false;
      fetchColumns();
    } else {
      $message.error(res.err);
    }
    submitKey.value = false;
  });
};
const addSingleColumn = () => {
  pageService
    .addSingleField({ ...fieldForm, webId: props.webId })
    .then((res) => {
      if (res.code == 0) {
        $message.success("添加成功");
        dialogField.value = false;
        fetchColumns();
      } else {
        $message.error(res.err);
      }
      submitKey.value = false;
    });
};
const saveColumn = (columnsFormsRef) => {
  if (submitKey.value) {
    return;
  }
  columnsFormsRef.validate((valid) => {
    if (valid) {
      submitKey.value = true;
      columnsForm.webId = props.webId;
      pageService.addPageField(columnsForm).then((res) => {
        if (res.code == 0) {
          $message.success("添加成功");
          dialogColumn.value = false;
          fetchColumns();
        } else {
          $message.error(res.err);
        }
        submitKey.value = false;
      });
    } else {
      console.log("error submit!!");
      submitKey.value = false;
      return false;
    }
  });
};
</script>
<style lang="scss" scoped></style>
