<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-button
        v-if="option.buttons.importReport && option.buttons.importReport.isShow == true"
        icon="el-icon-import"
        @click="reportDialogOpen">导入
      </el-button>

      <el-button
        v-if="option.buttons.exportReport && option.buttons.exportReport.isShow == true"
        icon="el-icon-export"
        @click="handleExport()">导出
      </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>


      <el-dialog
        top="5vh"
        title="报表导入"
        :visible.sync="importProps.reportDialogOpen"
        width="80%">
        <div style="text-align: center">
          <el-steps :active="importProps.activeIndex" align-center>
            <el-step title="读取文件" description="选择文件（json格式）读取，获取报表基本信息"></el-step>
            <el-step title="导入" description="配置每一个报表的信息，配置完成后，点击保存即可"></el-step>
          </el-steps>
        </div>
        <div style="text-align: center">
          <div v-if="importProps.activeIndex == 0">
            <el-upload :before-upload="beforeAvatarUpload"
                       :headers="getHeaders()"
                       :action="getUploadUrl()"
                       list-type="picture-card"
                       :auto-upload="true"
                       :on-success="(response, file, fileList) => handleSuccess(response, file, fileList)"
                       :limit="1">
              <i class="el-icon-plus"></i>
            </el-upload>
            文件仅支持json格式文件导入
          </div>

          <el-tabs v-model="importProps.activeName" @tab-click="handleClick">
            <el-tab-pane :label="item.reportName" :name="'tab' + index" v-for="(item,index) in importProps.reportList" :key="index">
              <el-descriptions title="报表信息">
                <el-descriptions-item label="报表名称">{{item.reportName}}</el-descriptions-item>
                <el-descriptions-item label="报表编号">{{item.reportCode}}</el-descriptions-item>
                <el-descriptions-item label="最后更新用户">{{item.createBy}}</el-descriptions-item>
                <el-descriptions-item label="最后更新时间">{{item.updateTime}}</el-descriptions-item>
                <el-descriptions-item label="报表组件数">{{item.reportDashboardWidgetList.length}}</el-descriptions-item>
              </el-descriptions>

              <el-table
                border
                :data="item.reportDashboardWidgetList"
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="图层名称"
                  width="220">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ getLayerName(scope.row) }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="type"
                  label="组件类型"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="dataSetList"
                  label="数据集信息">
                  <template slot-scope="scope">
                     <div>
                       {{scope.row.dataSetList.length == 0 ? '无' :''  }}
                       <el-table
                         v-if="scope.row.dataSetList.length > 0"
                         :data="scope.row.dataSetList"
                         style="width: 100%">
                         <el-table-column
                           prop="setName"
                           label="名称"
                           width="220">
                         </el-table-column>
                         <el-table-column
                           prop="setCode"
                           label="编号"
                           width="220">
                         </el-table-column>
                         <el-table-column
                           prop="setType"
                           label="类型"
                           width="180">
                         </el-table-column>
                         <el-table-column
                           prop="config"
                           label="配置">
                           <template slot-scope="scope">
                             <el-select
                               v-model.trim="scope.row.sourceCodeChange"
                               class="organisation"
                               size="mini">
                               <el-option
                                 v-for="item in importProps.sourceList"
                                 :key="item.sourceName"
                                 :label="item.sourceName"
                                 :value="item.sourceCode"
                               />
                             </el-select>
                           </template>
                         </el-table-column>
                       </el-table>
                     </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>

        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="importProps.reportDialogOpen = false">取 消</el-button>
          <el-button type="primary" v-if="importProps.activeIndex == 1" @click="reportImportSave">保 存</el-button>
        </span>
      </el-dialog>

    </div>
    <slot name="pageSection"/>
  </div>
</template>
<script>
import AnjiTree from "@/components/AnjiPlus/anji-tree.vue";
import EditDialog from "./edit";
import request from "@/utils/request";
import {getToken} from '@/utils/auth'
import {queryAllDataSourceSet,reportImport} from "@/api/report";

export default {
  components: {
    EditDialog,
    AnjiTree
  },
  props: {
    option: {
      require: true,
      type: Object,
      default: () => {
        return {
          // 查询表单条件
          queryFormFields: [],
          // 按钮
          buttons: {
            query: {},
            edit: {},
            delete: {},
            add: {},
            importReport: {},
            exportReport: {}
          },
          // 表格列
          columns: [],
          queryFormChange: (fileName, val) => {
          }
        };
      }
    }
  },
  data() {
    return {
      // 导入
      importProps: {
        activeIndex: 0,
        reportDialogOpen: false,
        reportList:[],
        activeName: 'tab0',
        sourceList:[]
      },
      // 查询表单提交的值
      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();
    },

    // 上传前的验证
    beforeAvatarUpload(file) {
      const isJson = file.type === 'application/json';
      if(!isJson){
        this.$message.warning("请选择.json格式文档！");
      }
      return isJson;
    },
    getHeaders() {
      return {'Authorization': getToken()};
    },
    getUploadUrl() {
      return process.env.BASE_API + '/read';
    },
    // 上传成功的回调
    handleSuccess(res, file, fileList, imgName) {
      if(res.code != "200"){
        this.$message.warning("读取失败！");
        return;
      }

      let data = res.data;
      if(data.length == 0){
        this.$message.warning("暂无数据！");
        return;
      }
      this.importProps.activeIndex = 1;
      this.$message.success("读取成功！");
      this.importProps.reportList = res.data;

      this.getDataSourceList();
    },

    async getDataSourceList (){
      //获取数据源下拉
      const { code, data } = await queryAllDataSourceSet();
      if (code != "200") return;
      this.importProps.sourceList = data;
    },

    // 获取图层名称
    getLayerName(row){
      try {
        var obj = JSON.parse(row.options);
        row.options = obj;
        return obj.setup.filter(function(v){if(v.name == 'layerName'){return v}})[0].value;
      }catch (e) {

      }
      return  row.options.setup.filter(function(v){if(v.name == 'layerName'){return v}})[0].value;
    },

    handleClick(tab, event) {

    },

    reportDialogOpen(){
      this.importProps ={
        activeIndex: 0,
        reportDialogOpen: true,
        reportList:[],
        activeName: 'tab0',
        sourceList:[]
      }
    },
    // 导入
    reportImportSave() {

      let that = this;

      reportImport(this.importProps.reportList).then((res) =>{
        if(res.code == "200"){
          that.$message.success("导入成功！")
          that.importProps.reportDialogOpen = false;
        }
      })
    },

    // 导出
    handleExport() {
      var ids = this.checkRecords.map(item => item[this.primaryKeyFieldName]);

      if (ids && ids.length > 0) {
        var type = this.option.buttons.exportReport && this.option.buttons.exportReport.type ? this.option.buttons.exportReport.type : 'report'
        window.open(process.env.BASE_API + "/export?reportIdList=" + ids.join(',') + "&Authorization=" + getToken() + "&type=" + type)
        return;
      }
      this.$message.warning("至少选择一个报表");
    },

    // 批量删除
    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>