<template>
  <ContentWrap>
    <el-table
      v-loading="loading"
      :data="list"
      stripe
      border
      size="small"
      :show-overflow-tooltip="true"
      row-key="id"
    >
      <!-- 展开行：参数列表 -->
      <el-table-column type="expand" fixed="left">
        <template slot-scope="{ row }">
          <div class="p2">
            <el-table
              :data="row.paramList"
              stripe
              border
              size="small"
              :show-overflow-tooltip="true"
            >
              <el-table-column label="绑定字段" align="center" prop="columnId">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.columnId"
                    clearable
                    filterable
                    placeholder="请选择"
                    size="small"
                    class="w100"
                    @change="columnChange($event, scope.row)"
                  >
                    <el-option
                      v-for="item in columnList"
                      :key="item.id"
                      :label="item.columnComment"
                      :value="item.id"
                    />
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column label="参数名" align="center" prop="paramName">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.paramName"
                    size="small"
                    clearable
                  />
                </template>
              </el-table-column>

              <el-table-column
                label="参数描述"
                align="center"
                prop="paramComment"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.paramComment"
                    size="small"
                    clearable
                  />
                </template>
              </el-table-column>

              <el-table-column label="可编辑" align="center" prop="allowEdit">
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.allowEdit"
                    true-value="true"
                    false-value="false"
                  />
                </template>
              </el-table-column>

              <el-table-column label="是否过滤" align="center" prop="filter">
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.filter"
                    true-value="true"
                    false-value="false"
                  />
                </template>
              </el-table-column>

              <el-table-column label="是否隐藏" align="center" prop="ifHide">
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.ifHide"
                    true-value="true"
                    false-value="false"
                  />
                </template>
              </el-table-column>

              <el-table-column label="默认值" align="center" prop="value">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.value" size="small" clearable />
                </template>
              </el-table-column>

              <el-table-column label="操作" width="100" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" @click="addParamRow(row)"
                    >新增</el-button
                  >
                  <el-button
                    type="text"
                    :disabled="row.paramList.length === 1"
                    @click="handleDeleteParam(scope, row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>

      <!-- 主表字段 -->
      <el-table-column label="按钮名" align="center" prop="buttonName">
        <template slot-scope="{ row }">
          <el-input v-model="row.buttonName" size="small" clearable />
        </template>
      </el-table-column>

      <el-table-column
        label="接口（路由）"
        align="center"
        prop="interfaceUrl"
        min-width="130"
      >
        <template slot-scope="{ row }">
          <el-input v-model="row.interfaceUrl" size="small" clearable />
        </template>
      </el-table-column>

      <el-table-column
        label="HTTP方法类型"
        align="center"
        prop="restMethod"
        width="120"
      >
        <template slot-scope="{ row }">
          <DictSelect
            v-model="row.restMethod"
            :dict-type="'HTTP_METHOD_TYPE'"
            placeholder="请选择"
            clearable
          />
        </template>
      </el-table-column>

      <el-table-column
        label="操作类型"
        align="center"
        width="100"
        prop="operateType"
      >
        <template slot-scope="{ row }">
          <DictSelect
            v-model="row.operateType"
            :dict-type="'SYSTEM_OPERATE_TYPE'"
            placeholder="请选择"
            clearable
          />
        </template>
      </el-table-column>

      <el-table-column
        label="请求参数类型"
        align="center"
        width="120"
        prop="requestParameter"
      >
        <template slot-scope="{ row }">
          <DictSelect
            v-model="row.requestParameter"
            :dict-type="'REQUEST_PARAM_TYPE'"
            placeholder="请选择"
            clearable
          />
        </template>
      </el-table-column>

      <el-table-column label="排序" align="center" width="80" prop="sort">
        <template slot-scope="{ row }">
          <el-input-number
            v-model="row.sort"
            :controls="false"
            :min="0"
            size="small"
            class="w100"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="接口描述"
        align="center"
        prop="interfaceComment"
        min-width="120"
      >
        <template slot-scope="{ row }">
          <el-input v-model="row.interfaceComment" size="small" clearable />
        </template>
      </el-table-column>

      <el-table-column label="多选" align="center" prop="ifArray" width="60">
        <template slot-scope="{ row }">
          <el-checkbox
            v-model="row.ifArray"
            true-value="true"
            false-value="false"
          />
        </template>
      </el-table-column>

      <el-table-column label="积木打印" align="center" prop="ifJimu" width="80">
        <template slot-scope="{ row }">
          <el-checkbox
            v-model="row.ifJimu"
            true-value="true"
            false-value="false"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="积木模板"
        align="center"
        prop="reportId"
        width="90"
      >
        <template slot-scope="{ row }">
          <ReportSelect
            v-model="row.reportId"
            size="small"
            filterable
            clearable
            placeholder="请选择报表"
            :disabled="![true, 'true'].includes(row.ifJimu)"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="其他打印"
        align="center"
        prop="printSoft"
        width="90"
      >
        <template slot-scope="{ row }">
          <el-input
            v-model="row.printSoft"
            size="small"
            clearable
            :disabled="[true, 'true'].includes(row.ifJimu)"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="其他打印模板"
        align="center"
        prop="templet"
        width="90"
      >
        <template slot-scope="{ row }">
          <el-select
            v-model="row.templet"
            size="small"
            clearable
            class="w100"
            placeholder="打印模板"
            :disabled="[true, 'true'].includes(row.ifJimu)"
          >
            <el-option
              v-for="item in templateList"
              :key="item.id"
              :label="item.originName"
              :value="item.url"
            />
          </el-select>
        </template>
      </el-table-column>

      <el-table-column
        label="需传入菜单id"
        align="center"
        width="120"
        prop="needMenuId"
      >
        <template slot-scope="{ row }">
          <el-checkbox
            v-model="row.needMenuId"
            true-value="true"
            false-value="false"
          />
        </template>
      </el-table-column>

      <el-table-column label="是否隐藏" align="center" prop="ifHide">
        <template slot-scope="{ row }">
          <el-checkbox
            v-model="row.ifHide"
            true-value="true"
            false-value="false"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="160" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="addRow">新增</el-button>
          <el-button
            type="text"
            :disabled="list.length === 1"
            @click="handleDelete(scope)"
            >删除</el-button
          >
          <el-button
            type="text"
            :loading="saveLoading"
            @click="saveButton(scope.row)"
            >保存</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>
</template>

<script>
import * as QueryManageButtonApi from "@/api/mes/queryManage/button";
import { getAppendixTableData } from "@/api/system/appendix.js";
import ReportSelect from "@/views/system/menu/component/ReportSelect.vue";
import DictSelect from "@/components/DictSelect";
import { DICT_TYPE } from "@/utils/dict";
import ContentWrap from "./ContentWrap.vue";

export default {
  name: "QueryManageButton",
  components: { ReportSelect, DictSelect, ContentWrap },
  props: {
    columnList: { type: Array, default: () => [] },
    masterId: { type: String, required: true, default: "" },
  },
  data() {
    return {
      loading: false,
      list: [],
      templateList: [],
      saveLoading: false,
      nextId: 0,
      DICT_TYPE,
    };
  },
  watch: {
    masterId: {
      immediate: true,
      handler() {
        this.getList();
      },
    },
  },
  mounted() {
    this.getList();
    this.getTemplateList();
  },
  methods: {
    /* 主列表 */
    async getList() {
      this.loading = true;
      try {
        const { data } = await QueryManageButtonApi.getQueryManageButtonPage({
          masterId: this.masterId,
        });
        this.list = data.list || [];
        if (this.list.length === 0) {
          this.list.push({ tempId: ++this.nextId, paramList: [{}] });
        } else {
          this.list.forEach((item) => {
            item.paramList = item.paramList?.length ? item.paramList : [{}];
          });
        }
      } finally {
        this.loading = false;
      }
    },

    /* 打印模板下拉 */
    async getTemplateList() {
      const { data } = await getAppendixTableData();
      this.templateList = data?.list || [];
    },

    /* 新增主行 */
    addRow() {
      this.list.push({ tempId: ++this.nextId, paramList: [{}] });
    },

    /* 删除主行 */
    async handleDelete(scope) {
      const { id } = scope.row;
      if (!id) {
        this.list.splice(scope.$index, 1);
        return;
      }
      this.loading = true;
      try {
        await QueryManageButtonApi.deleteQueryManageButton(id);
        this.$message.success("删除成功");
        this.getList();
      } finally {
        this.loading = false;
      }
    },

    /* 新增参数行 */
    addParamRow(row) {
      // row.paramList.push({});
      this.$set(row.paramList, row.paramList.length, {
        columnId: "",
        paramName: "",
        paramComment: "",
        allowEdit: "false",
        filter: "false",
        ifHide: "false",
        value: "",
      });
    },

    /* 删除参数行 */
    handleDeleteParam(scope, row) {
      row.paramList.splice(scope.$index, 1);
    },

    /* 字段选择变化 */
    columnChange(v, row) {
      const col = this.columnList.find((item) => item.id === v);
      if (!col) return;
      row.paramName = col.columnName;
      row.paramComment = col.columnComment;
    },

    /* 保存按钮 */
    async saveButton(row) {
      if (!this.masterId) return this.$message.warning("masterId 不能为空");
      this.saveLoading = true;
      row.masterId = this.masterId;
      row.paramList.forEach((p) => (p.buttonId = row.id));
      delete row.tempId;
      try {
        if (row.id) {
          await QueryManageButtonApi.updateQueryManageButton(row);
        } else {
          await QueryManageButtonApi.createQueryManageButton(row);
        }
        this.$message.success("保存成功");
        this.getList();
      } finally {
        this.saveLoading = false;
      }
    },
  },
};
</script>

<style scoped>
.p2 {
  padding: 12px;
}
.w100 {
  width: 100%;
}
</style>
