<template>
  <!-- 列表 -->
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="40%"
    @close="dialogVisible = false"
  >
    <el-card>
      <el-form
        v-if="curButtonInfo.paramList && curButtonInfo.paramList.length > 0"
        label-width="auto"
      >
        <el-row :gutter="10">
          <el-col
            v-for="item in curButtonInfo.paramList"
            v-if="item.ifHide !== true"
            :key="item.id"
            :span="12"
          >
            <el-form-item :label="item.paramComment">
              <el-input v-model="item.value" :disabled="!item.allowEdit" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <template slot="footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "QueryManageButton",
  props: {},
  data() {
    return {
      dialogVisible: false,
      dialogTitle: "",
      curButtonInfo: {},
      selectData: [],
      columnList: [],
    };
  },
  methods: {
    /** 打开弹窗 */
    open(
      type = "create",
      buttonInfo,
      id = "",
      multipleData = [],
      columns = []
    ) {
      this.dialogVisible = true;
      this.dialogTitle = type === "create" ? "新增" : "修改";
      this.selectData = multipleData;
      this.columnList = columns || [];
      this.curButtonInfo = { ...buttonInfo } || {};
      if (type === "update" && this.selectData.length > 0) {
        this.fetchDefaultValue();
      }
    },

    submitForm() {
      this.handleDynamic(this.curButtonInfo);
    },

    async handleDynamic(params) {
      const {
        interfaceUrl,
        restMethod = "get",
        paramList = [],
        requestParameter = "0",
      } = params;
      const fieldValues = this.paramsToConver(paramList);

      const config = {
        method: restMethod,
        url: interfaceUrl,
      };

      try {
        switch (restMethod) {
          case "get":
          case "delete":
            this.handleGetDelete(config, fieldValues, requestParameter);
            break;
          default:
            if (requestParameter === "1") {
              this.handleGetDelete(config, fieldValues, requestParameter);
            } else {
              config.data = fieldValues;
            }
        }

        const response = await request(config);
        this.$message.success("操作成功");
        this.dialogVisible = false;
        this.$emit("success");
        return response;
      } catch (error) {
        console.error(error);
      }
    },

    handleGetDelete(config, fieldValues, requestParameter) {
      switch (requestParameter) {
        case "1":
          config.params = fieldValues;
          break;
        case "3":
          const queryString = new URLSearchParams(fieldValues).toString();
          config.url = queryString
            ? `${config.url}?${queryString}`
            : config.url;
          break;
        case "4":
          config.headers = { ...config.headers, ...fieldValues };
          break;
        default:
          config.data = fieldValues;
      }
    },

    paramsToConver(paramList) {
      return paramList.reduce((acc, item) => {
        acc[item.paramName] = item.value;
        return acc;
      }, {});
    },

    fetchDefaultValue() {
      const selectedItem = this.selectData[0];
      this.curButtonInfo.paramList = this.curButtonInfo.paramList.map(
        (param) => {
          const column = this.columnList.find(
            (col) => col.id === param.columnId
          );
          if (column && selectedItem.hasOwnProperty(column.columnComment)) {
            return {
              ...param,
              value: selectedItem[column.columnComment],
            };
          }
          return param;
        }
      );
    },
  },
};
</script>
