<template>
  <div :class="[hasTreeFieldInQueryForm ? 'page-container' : 'app-container']">
    <div v-if="hasTreeFieldInQueryForm" class="left-container">
      <AnjiTree
        ref="queryFormTree"
        v-model.trim="queryParams[queryFormTreeField.field]"
        :is-open="queryFormTreeField.anjiTreeOption.isOpen"
        :enable-filter="queryFormTreeField.anjiTreeOption.enableFilter"
        :label-name="queryFormTreeField.label"
        :url="queryFormTreeField.anjiTreeOption.url"
        @node-click="handleTreeNodeCheck"
      />
    </div>
    <div class="right-container">
      <!-- 查询表单开始 -->
      <el-form
        ref="formSearch"
        :model="queryParams"
        label-width="100px"
        v-permission="option.buttons.query.permission"
      >
        <el-row>
          <el-col
            v-for="(item, index) in queryFormFieldExcludeTree"
            :key="item.field"
            :span="queryFormFieldSpan(item)"
          >
            <el-form-item
              v-if="index <= 2 || (index > 2 && queryParams.showMoreSearch)"
              :label="item.label"
              :rules="item.rules"
              :prop="item.field"
            >
              <!-- 输入框 -->
              <el-input
                v-if="
                  item.inputType == 'input' || item.inputType == 'input-number'
                "
                v-model.trim="queryParams[item.field]"
                :placeholder="item.placeholder || '请输入'"
                :clearable="item.clearable !== false"
                :disabled="item.disabled"
                @change="value => queryFormChange(item.field, value)"
              />
              <!-- 开关 -->
              <el-switch
                v-else-if="item.inputType == 'switch'"
                v-model.trim="queryParams[item.field]"
                :disabled="item.disabled"
                :active-value="item.switchOption.disableValue"
                :inactive-value="item.switchOption.enableValue"
                active-color="#5887fb"
                inactive-color="#ccc"
                @change="value => queryFormChange(item.field, value)"
              />
              <!-- 下拉框 -->
              <anji-select
                v-else-if="item.inputType == 'anji-select'"
                v-model.trim="queryParams[item.field]"
                :multiple="item.anjiSelectOption.multiple"
                :dict-code="item.anjiSelectOption.dictCode"
                :url="item.anjiSelectOption.url"
                :method="item.anjiSelectOption.method"
                :query-param="item.anjiSelectOption.queryParam"
                :option="item.anjiSelectOption.option"
                :label="item.anjiSelectOption.label"
                :disabled-options="item.anjiSelectOption.disabledOptions"
                :disabled="item.disabled"
                :merge-label="item.anjiSelectOption.mergeLabel"
                @change="value => queryFormChange(item.field, value)"
              />
              <!-- 日期时间框  -->
              <el-date-picker
                v-else-if="item.inputType.indexOf('date') >= 0"
                v-model="queryParams[item.field]"
                style="width: 100%"
                :placeholder="item.placeholder || '请选择'"
                :type="item.inputType"
                :clearable="item.clearable !== false"
                @change="value => queryFormChange(item.field, value)"
              />
              <!-- 待扩展的表单类型，请自行扩展 -->
              <el-input
                v-else
                placeholder="组件不支持此类型表单请至组件内部自行扩展"
                disabled
              />
            </el-form-item>
          </el-col>

          <el-col :span="6" style="text-align: center">
            <el-button type="primary" @click="handleQueryForm('query')"
              >查询</el-button
            >
            <el-button type="danger" @click="handleResetForm()">重置</el-button>
            <a
              v-if="queryFormFieldExcludeTree.length > 3"
              style="margin-left: 8px"
              @click="handleToggleMoreSearch"
            >
              {{ queryParams.showMoreSearch == true ? "收起" : "展开" }}
              <i
                :class="
                  queryParams.showMoreSearch
                    ? 'el-icon-arrow-up'
                    : 'el-icon-arrow-down'
                "
              />
            </a>
          </el-col>
        </el-row>
      </el-form>
      <!-- 查询表单结束 -->

      <!-- 批量操作 -->
      <slot name="buttonLeftOnTable" />
      <el-button
        v-if="
          option.buttons.add.isShow == undefined
            ? true
            : option.buttons.add.isShow
        "
        v-permission="option.buttons.add.permission"
        type="primary"
        icon="el-icon-plus"
        @click="handleOpenEditView('add')"
        >新增</el-button
      >
      <el-button
        v-if="
          option.buttons.delete.isShow == undefined
            ? true
            : option.buttons.delete.isShow
        "
        v-permission="option.buttons.delete.permission"
        :disabled="disableBatchDelete"
        type="danger"
        icon="el-icon-delete"
        @click="handleDeleteBatch()"
        >删除</el-button
      >

      <!-- 表格开始 -->
      <el-table
        class="anji_curd_table"
        :data="records"
        border
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
      >
        <!--多选-->
        <el-table-column fixed type="selection" width="50" align="center" />
        <!--隐藏列-->
        <el-table-column v-if="tableExpandColumns.length > 0" type="expand">
          <template slot-scope="scope">
            <p
              v-for="item in tableExpandColumns"
              :key="item.field"
              class="table-expand-item"
            >
              <span class="titel"> {{ item.label }}: </span>
              <span>{{ scope.row[item.field] }}</span>
            </p>
          </template>
        </el-table-column>
        <!--序号-->
        <el-table-column label="序号" min-width="50" align="center">
          <template slot-scope="scope">
            {{
              queryParams.pageSize * (queryParams.pageNumber - 1) +
                scope.$index +
                1
            }}
          </template>
        </el-table-column>

        <template v-for="item in option.columns">
          <el-table-column
            v-if="item.tableHide != true && item.columnType != 'expand'"
            :key="item.field"
            :prop="item.field"
            :label="fieldLabel(item)"
            :min-width="item.minWidth || 110"
            :sortable="item.sortable"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="item.columnType == 'imgPreview'">
                <!-- 图片缩略图-->
                <el-image
                  style="width: 25%; height: 50%"
                  fit="contain"
                  :src="scope.row[item.field]"
                  :preview-src-list="[scope.row[item.field]]"
                />
              </div>
              <div v-else>
                <span v-if="item.inputType == 'switch' && !item.colorStyle">
                  <el-switch
                    v-model.trim="scope.row[item.field]"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#5887fb"
                    inactive-color="#ccc"
                    @change="switchChange(scope.row, item.switchOption)"
                  />
                </span>
                <!-- 带单位 -->
                <span v-else-if="item.inputType == 'anji-input'">{{
                  fieldValueByAnjiInput(scope.row[item.field], item)
                }}</span>
                <!--表格 a 合并 b上-->
                <span v-else-if="item.mergeColumn"
                  >{{ scope.row[item.field] }}({{
                    scope.row[item.mergeColumn]
                  }})</span
                >
                <!-- 没有单位 -->
                <span
                  v-else-if="item.colorStyle"
                  :class="item.colorStyle[scope.row[item.editField]]"
                  >{{ fieldValueByRowRenderer(scope.row, item) }}</span
                >
                <span v-else>{{
                  fieldValueByRowRenderer(scope.row, item)
                }}</span>
                <!-- 正常展示模式
                <div v-if="!item.custom">
                  是第一列数据 && 需要高亮字段不为false 高亮并且可以点击
                  <span v-if="!index && item.operate !== false" class="view" @click="handleOpenEditView('view', scope.row)">{{ scope.row[item.field] }}</span>
                  <span v-else>{{ scope.row[item.field] }}</span>
                </div>
                -->
                <!-- 自定义展示数据
                <div v-else v-html="item.renderer(scope.row)" />-->
              </div>
            </template>
          </el-table-column>
        </template>
        <!--操作栏-->
        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          :width="
            option.buttons.customButton &&
            option.buttons.customButton.operationWidth
              ? option.buttons.customButton.operationWidth
              : 100
          "
        >
          <template slot-scope="scope">
            <slot name="edit" :msg="scope.row" />
            <el-button
              v-if="
                (option.buttons.query.isShow == undefined
                  ? true
                  : option.buttons.query.isShow) &&
                  hasPermission(option.buttons.edit.permission) == false
              "
              type="text"
              size="small"
              @click="handleOpenEditView('view', scope.row)"
              v-permission="option.buttons.query.permission"
              >查看</el-button
            >
            <el-button
              v-if="
                option.buttons.edit.isShow == undefined
                  ? true
                  : option.buttons.edit.isShow
              "
              type="text"
              size="small"
              @click="handleOpenEditView('edit', scope.row)"
              v-permission="option.buttons.edit.permission"
              >编辑</el-button
            >
            <el-button
              v-if="
                hasRowCustomButton == false &&
                option.buttons.delete.isShow == undefined
                  ? true
                  : option.buttons.edit.isShow
              "
              type="text"
              size="small"
              @click="handleDeleteBatch(scope.row)"
              v-permission="option.buttons.delete.permission"
              >删除</el-button
            >
            <el-dropdown v-if="hasRowCustomButton" trigger="click">
              <span class="el-dropdown-link">
                更多<i class="el-icon-caret-bottom el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item class="clearfix">
                  <slot name="rowButton" :msg="scope.row" />
                  <el-button
                    v-if="
                      option.buttons.delete.isShow == undefined
                        ? true
                        : option.buttons.edit.isShow
                    "
                    type="text"
                    size="small"
                    @click="handleDeleteBatch(scope.row)"
                    v-permission="option.buttons.delete.permission"
                    >删除</el-button
                  >
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-show="total > 0"
          background
          :current-page.sync="queryParams.pageNumber"
          :page-sizes="$pageSizeAll"
          :page-size="queryParams.pageSize"
          layout="total, prev, pager, next, jumper, sizes"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <div>
          <slot name="tableSelectionBtn" :selection="checkRecords" />
        </div>
      </div>

      <!-- 表格结束 -->

      <EditDialog
        ref="edit"
        :option="option"
        :model-type="editDialogModelType"
        :visible="editDialogOpen"
        :row-data="editDialogRowData"
        @closeEvent="editDialogClosedEvent"
      >
        <template v-slot:customCard>
          <slot name="cardInEditPage" />
        </template>
        <template slot="editBtn" slot-scope="scope">
          <slot name="editBtnPage" :rowData="scope" />
        </template>
      </EditDialog>
    </div>
    <slot name="pageSection" />
  </div>
</template>
<script>
import AnjiTree from "@/components/AnjiPlus/anji-tree.vue";
import EditDialog from "./edit";
import request from "@/utils/request";
export default {
  components: {
    EditDialog,
    AnjiTree
  },
  props: {
    option: {
      require: true,
      type: Object,
      default: () => {
        return {
          // 查询表单条件
          queryFormFields: [],
          // 按钮
          buttons: {
            query: {},
            edit: {},
            delete: {},
            add: {}
          },
          // 表格列
          columns: [],
          queryFormChange: (fileName, val) => {}
        };
      }
    }
  },
  data() {
    return {
      // 查询表单提交的值
      queryParams: {
        showMoreSearch: false, // 是否展开更多搜索条件
        pageNumber: 1,
        pageSize: 10,
        order: "",
        sort: ""
      },

      checkRecords: [], // 表格中当前选中的记录
      records: [], // 接口返回的记录列表
      total: 0, // 接口返回的总条数

      // 编辑详情弹框
      editDialogOpen: false, // 新建时主动打开编辑弹框
      editDialogRowData: {}, // 编辑时的主键
      editDialogModelType: "view", // 编辑 查看

      hasRowCustomButton: false // 除了编辑删除外，还有自定义的行按钮
    };
  },
  computed: {
    // 左侧树形查询条件
    queryFormTreeField() {
      var treeField = this.option.queryFormFields.find(
        item => item["inputType"] == "anji-tree"
      );
      return treeField;
    },
    // 查询条件里是否有树形控件
    hasTreeFieldInQueryForm() {
      return this.isNotBlank(this.queryFormTreeField);
    },
    // 不包含树形控件的查询条件
    queryFormFieldExcludeTree() {
      var treeFields = this.option.queryFormFields.filter(
        item => item["inputType"] != "anji-tree"
      );
      return treeFields;
    },
    // 主键的列名
    primaryKeyFieldName() {
      var primaryKey = this.option.columns.find(
        item => item["primaryKey"] == true
      );
      if (primaryKey != null) {
        return primaryKey["field"];
      } else {
        return null;
        console.warn(
          "在columns中查找primaryKey=true失败，会导致查询详情和删除失败"
        );
      }
    },

    // 表格中可展开的列
    tableExpandColumns() {
      var expandColumns = this.option.columns.filter(
        item => item["columnType"] == "expand"
      );
      return expandColumns;
    },

    // 是否可以批量删除
    disableBatchDelete() {
      return this.checkRecords.length <= 0;
    }
  },
  created() {
    // 为查询框中所有input加上默认值
    this.option.queryFormFields.forEach(item => {
      // 动态添加属性
      this.$set(this.queryParams, item.field, item.defaultValue || null);
    });
    // 查询列表
    this.handleQueryForm("query");
    this.queryFormChange();
  },
  mounted() {
    if (this.$scopedSlots["rowButton"] != null) {
      this.hasRowCustomButton = true;
    } else {
      this.hasRowCustomButton = false;
    }
  },
  methods: {
    queryFormFieldSpan(item) {
      // console.log(item)

      if (item.span != null) {
        return item.span;
      } else {
        return 6;
      }
      // let rowLength = this.option.queryFormFields.length;
      // console.log(rowLength, "ss")
      // console.log(rowLength % 3)
      // if (rowLength <= 3) {
      //   return 6
      // }
      // else if (rowLength % 3 == 0) {
      //   return 8
      // } else if (rowLength > 6) {
      //   return 8
      // }
    },
    // 切换更多搜索条件
    handleToggleMoreSearch() {
      this.queryParams.showMoreSearch = !this.queryParams.showMoreSearch;
    },
    // 列上排序切换
    handleSortChange(column) {
      // {column: {…}, prop: "orgCode", order: "ascending"}
      if (column == null || column.prop == null) {
        console.warn("排序字段名prop为空，无法排序");
        return;
      }
      var sort = column.prop; // 列表查询默认排序列
      var order = column.order == "ascending" ? "ASC" : "DESC";
      this.queryParams["sort"] = sort;
      this.queryParams["order"] = order;
      this.handleQueryForm("query");
    },
    // 查询按钮
    handleQueryForm(from) {
      // 如果是点查询按钮，把树的查询属性去掉
      if (from == "query") {
        if (this.hasTreeFieldInQueryForm) {
          delete this.queryParams[this.queryFormTreeField.field];
        }
      }
      // 如果是点树查询，把查询区里的属性去掉
      if (from == "tree") {
        if (this.hasTreeFieldInQueryForm) {
          var treeVal = this.queryParams[this.queryFormTreeField.field];
          this.queryParams = {
            pageNumber: 1,
            pageSize: 10
          };
          this.queryParams[this.queryFormTreeField.field] = treeVal;
        }
      }
      // 默认的排序
      if (
        this.isBlank(this.queryParams["order"]) &&
        this.isNotBlank(this.option.buttons.query.order)
      ) {
        this.queryParams["sort"] = this.option.buttons.query.sort;
        this.queryParams["order"] = this.option.buttons.query.order;
      }
      this.queryParams.pageNumber = 1;
      this.handleQueryPageList();
    },
    // 列表查询
    async handleQueryPageList() {
      var params = this.queryParams;
      // 将特殊参数值urlcode处理 var params = this.urlEncodeObject(this.queryParams, 'order,sort')
      const { data, code } = await this.option.buttons.query.api(params);
      if (code != "200") return;
      this.records = data.records;
      this.total = data.total;
    },
    // 重置
    handleResetForm() {
      this.queryParams = {
        pageNumber: 1,
        pageSize: 10
      };
      // this.$refs['queryForm'].resetFields()
      // this.records = []
      // this.total = 0
    },
    // 树形查询条件点击回调
    handleTreeNodeCheck() {
      this.handleQueryForm("tree");
      // 为新建页面的对应属性值，绑定上对应的默认值
      var treeFieldName = this.queryFormTreeField["field"];
      for (var i = 0; i < this.option.columns.length; i++) {
        var item = this.option.columns[i];
        if (
          item["editField"] == treeFieldName ||
          item["field"] == treeFieldName
        ) {
          this.$set(
            this.option.columns[i],
            "defaultValue",
            this.queryParams[treeFieldName]
          );
          break;
        }
      }
    },
    // 编辑和查看操作
    handleOpenEditView(modelType, row) {
      if (modelType == "view" || modelType == "edit") {
        this.editDialogRowData = row;
      }
      this.editDialogModelType = modelType;
      if (modelType == "add") {
        // 新增模式，不需要查询数据详情，直接打开
        this.editDialogOpen = true;
      }
      const obj = {
        type: modelType,
        value: row
      };
      this.$emit("handleCustomValue", obj);
    },
    // 弹框被关闭时的回调事件
    editDialogClosedEvent(value) {
      // 把列表页中弹框打开标记改成已关闭
      this.editDialogOpen = false;
      // 关闭弹出框时，如果有树，刷新下
      if (
        this.hasTreeFieldInQueryForm &&
        this.$refs.queryFormTree != null &&
        !value
      ) {
        this.$refs.queryFormTree.queryData();
      }
      this.handleQueryPageList();
      // 关闭时 清空表单的验证规则
      this.$refs.edit.$refs.mainForm.$refs.editForm.resetFields();
    },
    // 批量删除
    handleDeleteBatch(row) {
      var ids = [];
      if (row != null) {
        ids.push(row[this.primaryKeyFieldName]); // 删除指定的行
      } else {
        // 批量删除选中的行
        ids = this.checkRecords.map(item => item[this.primaryKeyFieldName]);
      }
      this.$confirm("删除确认", "确认要删除吗?", {
        type: "warning",
        confirmButtonClass: "delete_sure",
        cancelButtonClass: "el-button--danger is-plain"
      })
        .then(() => {
          this.option.buttons.delete.api(ids).then(res => {
            // {code: "200", message: "操作成功", data: true}
            this.checkRecords = [];
            // 关闭弹出框时，如果有树，刷新下
            if (
              this.hasTreeFieldInQueryForm &&
              this.$refs.queryFormTree != null
            ) {
              this.$refs.queryFormTree.queryData();
            }
            this.handleQueryPageList();
          });
        })
        .catch(e => {
          e;
        });
    },

    // 选择项改变时
    handleSelectionChange(val) {
      this.checkRecords = val;
    },
    // 页码改变
    handleCurrentChange(pageNumber) {
      this.queryParams.pageNumber = pageNumber;
      this.handleQueryPageList();
    },
    // 每页size改变时
    handleSizeChange(val) {
      this.queryParams.pageNumber = 1;
      this.queryParams.pageSize = val;
      this.handleQueryPageList();
    },
    // table列文件缩略图
    thumbnailUrl(row, field) {
      // return 'http://10.108.3.123:9090/tms/file/download/79ee7e8b-2a9a-4142-b06d-706ac8089205'
      // if (row.filePath) {
      //   if (row.filePath.endsWith('xlsx') || row.filePath.endsWith('xls')) {
      //     return fileExcel;
      //   } else if (row.filePath.endsWith('pdf')) {
      //     return filePdf;
      //   }
      //   return process.env.VUE_APP_BASE_API + '/tms/file/download/' + row.fileId;
      // } else {
      //   return logo;
      // }
    },
    // 带单位的列，需要转换
    fieldLabel(columnConfig) {
      if (columnConfig == null) {
        return "";
      }
      if (
        columnConfig.inputType == "anji-input" &&
        columnConfig.anjiInput != null
      ) {
        return `${columnConfig.label}(${columnConfig.anjiInput.unit})`;
      } else {
        return columnConfig.label;
      }
    },
    // 带单位的输入框
    fieldValueByAnjiInput(value, columnConfig) {
      if (columnConfig == null) {
        return value;
      }
      if (
        columnConfig.inputType == "anji-input" &&
        columnConfig.anjiInput != null
      ) {
        return value / columnConfig.anjiInput.conversion;
      } else {
        return value;
      }
    },
    // 带表格列格式化的值
    fieldValueByRowRenderer(row, columnConfig) {
      if (
        columnConfig == null ||
        typeof columnConfig.fieldTableRowRenderer != "function"
      ) {
        return row[columnConfig.field];
      } else {
        return columnConfig.fieldTableRowRenderer(row);
      }
    },
    // 暴露给外部crud页面，回传saveForm的值
    getMainEntity() {
      return this.$refs.edit.getSaveForm();
    },
    setMainEntity(object) {
      this.$refs.edit.setSaveForm(object);
    },
    async switchChange(val, api) {
      request({
        url: api.url,
        method: "put",
        headers: { noPrompt: false },
        data: [val.id]
      }).then(response => {
        this.handleQueryPageList();
      });
    },
    queryFormChange(fileName, fieldVal) {
      if (typeof this.option.queryFormChange == "function") {
        this.option.queryFormChange(this.queryParams, fileName, fieldVal);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.style-btn {
  pointer-events: none;
}
.page-container {
  height: 100%;
  position: relative;
  .left-container {
    width: 20%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border-radius: 4px 0px 0px 4px;
    padding: 20px 20px 0;
    overflow: hidden;
    overflow-y: auto;
    height: 100%;
  }
  .right-container {
    width: calc(80% - 5px);
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    border-radius: 0px 4px 4px 0px;
    padding: 20px 20px 0;
    height: 100%;
  }
}
.el-table .cell,
.el-table td div {
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-dropdown {
  font-size: 12px;
  display: inline;
  color: #5887fb;
  cursor: pointer;
}
.el-dropdown-menu--mini .el-dropdown-menu__item {
  min-width: 80px;
  max-width: 110px;
  float: right;
  .el-button--text {
    float: right;
  }
  &:hover {
    background: none !important;
  }
  .el-button--mini {
    float: right;
  }
  .el-button + .el-button {
    margin-left: 0 !important;
    float: right;
  }
}
.pagination {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
}
.anji_curd_table {
  margin-top: 20px;
}
</style>