<template>
  <div>
    <div class="title">
      <span class="title-text">页面列</span>
      <el-button @click="addColumn">新增列</el-button>
      <el-button @click="addColumns">批量新增列</el-button>
    </div>
    <div class="content el-card">
      <el-tag
        v-for="(item, index) in columns"
        type=""
        class="column"
        closable
        :key="index"
        @close="handleClose(index)"
        @click="editColumn(index)"
        >{{ item.cnName }}</el-tag
      >
    </div>
    <div v-if="dialogColumn">
      <el-dialog
        title="新增实体对象"
        v-model="dialogColumn"
        width="400px"
        append-to-body
      >
        <el-form
          :model="columnsForm"
          label-width="80px"
          :rules="columnsRule"
          ref="columnFormRef"
        >
          <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" :disabled="submitKey"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div v-if="dialogField">
      <el-dialog
        title="修改字段"
        v-model="dialogField"
        width="400px"
        append-to-body
      >
        <el-form
          :model="fieldForm"
          label-width="80px"
          :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="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-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"
              :disabled="submitKey"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch, computed } from "vue";
import templateHooks from "@/Hooks/templateHooks.js";
import { pageService } from "@/ApiService/pageService";
const { $route, $router, $message } = templateHooks();
const props = defineProps({
  btnId: Number || String,
});
const columns = ref([]),
  columnsForm = reactive({ outputName: "", buttonId: "" }),
  fieldForm = reactive({
    id: "",
    className: "",
    cnName: "", //
    enName: "", //
    fieldType: "", //select，string，date
    isSelect: 0, // 0否1是
    navSelect: 0, // 0否1是
    orderBy: 0, //
    param: "", //当fieldType 为select时 param 显示并key:value; 出现并必选
    isTableShow: 1, //是否在表格中显示
  });
const dialogColumn = ref(false);
const dialogField = ref(false);
const submitKey = ref(false);
const columnsRule = reactive({
  outputName: [{ required: true, message: "请输入列名", trigger: "blur" }],
});
const fieldRule = reactive({
  cnName: [{ required: true, message: "请输入", trigger: "blur" }],
  enName: [{ required: true, message: "请输入", trigger: "blur" }],
  fieldType: [{ required: true, message: "请输入", trigger: "blur" }],
});
const columnsFormRef = ref();
const columnFormRef = ref();
const btnId = computed(() => {
  return props.btnId;
});

const fetchColumns = () => {
  pageService
    .queryButtonFieldByButton({ buttonId: props.btnId })
    .then((res) => {
      if (res.code == 0) {
        columns.value = res.data;
      } else {
        $message.error(res.err);
      }
    });
};
const saveColumn = () => {
  if (submitKey.value) {
    return;
  }
  console.log(columnsFormRef);
  columnFormRef.value.validate((valid) => {
    if (valid) {
      submitKey.value = true;
      columnsForm.buttonId = props.btnId;
      pageService
        .addButtonField(columnsForm)
        .then((res) => {
          if (res.code == 0) {
            $message.success("添加成功");
            dialogColumn.value = false;
            fetchColumns();
          } else {
            $message.error(res.err);
          }
          submitKey.value = false;
        })
        .catch(() => {
          submitKey.value = false;
        });
    } else {
      console.log("error submit!!");
      submitKey.value = false;
      return false;
    }
  });
};
const editColumnAction = () => {
  console.log(columnsFormRef);
  columnsFormRef.value.validate((valid) => {
    if (valid) {
      if (fieldForm.id) {
        editSingleColumn();
      } else {
        addSingleColumn();
      }
    } else {
      return false;
    }
  });
};
const editSingleColumn = () => {
  pageService.updateButtonField(fieldForm).then((res) => {
    if (res.code == 0) {
      $message.success("修改成功");
      dialogField.value = false;
      fetchColumns();
    } else {
      $message.error(res.err);
    }
    submitKey.value = false;
  });
};
const addSingleColumn = () => {
  pageService
    .addSingleButtonField({ ...fieldForm, buttonId: props.btnId })
    .then((res) => {
      if (res.code == 0) {
        $message.success("添加成功");
        dialogField.value = false;
        fetchColumns();
      } else {
        $message.error(res.err);
      }
      submitKey.value = false;
    });
};
const handleClose = (index) => {
  const column = columns.value[index];
  pageService.deleteButtonField(column.id).then((res) => {
    if (res.code == 0) {
      $message.success("删除成功");
      fetchColumns();
    } else {
      $message.error(res.err);
    }
  });
};
const addColumn = () => {
  columnsFormRef.value ? columnsFormRef.value.resetFields() : "";
  dialogField.value = true;
};
const addColumns = () => {
  columnFormRef.value ? columnFormRef.value.resetFields() : "";
  dialogColumn.value = true;
};
const editColumn = (index) => {
  const field = columns.value[index];
  for (let i in field) {
    fieldForm[i] = field[i];
  }
  dialogField.value = true;
};
onMounted(() => {
  fetchColumns();
});
watch(btnId, (val) => {
  if (val) {
    fetchColumns();
  }
});
</script>
<script>
export default {
  name: "page-button",
  // props: {
  //     btnId: Number | String
  // },
  // data() {
  //     return {
  //         columns: [],

  //         columnsForm: {
  //             outputName: ''
  //         },
  //         fieldForm: {
  //             className: '',
  //             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: false,
  //         dialogField: false,
  //         columnsRule: {
  //             outputName: [{ required: true, message: '请输入列名', trigger: 'blur' }]
  //         },
  //         fieldRule: {
  //             cnName: [{ required: true, message: '请输入', trigger: 'blur' }],
  //             enName: [{ required: true, message: '请输入', trigger: 'blur' }],
  //             fieldType: [{ required: true, message: '请输入', trigger: 'blur' }]
  //         },
  //         submitKey: false
  //     };
  // },
  // watch: {
  //     btnId(val) {
  //         this.fetchColumns();
  //     }
  // },
  // mounted() {
  //     this.fetchColumns();
  // },
  // methods: {
  //     fetchColumns() {
  //         pageService.queryButtonFieldByButton({ buttonId: this.btnId }).then(res => {
  //             if (res.code == 0) {
  //                 this.columns = res.data;
  //             } else {
  //                 this.$message.error(res.err);
  //             }
  //         });
  //     },
  //     saveColumn() {
  //         if (this.submitKey) {
  //             return;
  //         }
  //         this.$refs['columnsForm'].validate(valid => {
  //             console.log(this.columnsForm);
  //             if (valid) {
  //                 this.submitKey = true;
  //                 this.columnsForm.buttonId = this.btnId;
  //                 pageService
  //                     .addButtonField(this.columnsForm)
  //                     .then(res => {
  //                         if (res.code == 0) {
  //                             this.$message.success('添加成功');
  //                             this.dialogColumn = false;
  //                             this.fetchColumns();
  //                         } else {
  //                             this.$message.error(res.err);
  //                         }
  //                         this.submitKey = false;
  //                     })
  //                     .catch(() => {
  //                         console.log(123);
  //                         this.submitKey = false;
  //                     });
  //             } else {
  //                 console.log('error submit!!');
  //                 this.submitKey = false;
  //                 return false;
  //             }
  //         });
  //     },
  //     editColumnAction() {
  //         this.$refs['columnsForm'].validate(valid => {
  //             if (valid) {
  //                 if (this.fieldForm.id) {
  //                     this.editSingleColumn();
  //                 } else {
  //                     this.addSingleColumn();
  //                 }
  //             } else {
  //                 return false;
  //             }
  //         });
  //     },
  //     editSingleColumn() {
  //         pageService.updateButtonField(this.fieldForm).then(res => {
  //             if (res.code == 0) {
  //                 this.$message.success('修改成功');
  //                 this.dialogField = false;
  //                 this.fetchColumns();
  //             } else {
  //                 this.$message.error(res.err);
  //             }
  //             this.submitKey = false;
  //         });
  //     },
  //     addSingleColumn() {
  //         pageService.addSingleButtonField({ ...this.fieldForm, buttonId: this.btnId }).then(res => {
  //             if (res.code == 0) {
  //                 this.$message.success('添加成功');
  //                 this.dialogField = false;
  //                 this.fetchColumns();
  //             } else {
  //                 this.$message.error(res.err);
  //             }
  //             this.submitKey = false;
  //         });
  //     },
  //     handleClose(index) {
  //         const column = this.columns[index];
  //         pageService.deleteButtonField(column.id).then(res => {
  //             if (res.code == 0) {
  //                 this.$message.success('删除成功');
  //                 this.fetchColumns();
  //             } else {
  //                 this.$message.error(res.err);
  //             }
  //         });
  //     },
  //     addColumn() {
  //         this.fieldForm = this.$options.data().fieldForm;
  //         this.dialogField = true;
  //     },
  //     addColumns() {
  //         this.columnsForm = this.$options.data().columnsForm;
  //         this.dialogColumn = true;
  //     },
  //     editColumn(index) {
  //         const field = this.columns[index];
  //         this.fieldForm = field;
  //         this.dialogField = true;
  //     }
  // }
};
</script>
<style lang="scss" scoped></style>
