<template>
  <el-dialog
    title="高级筛选"
    :append-to-body="true"
    :modal-append-to-body="true"
    :close-on-click-modal="falseValue"
    :visible.sync="showDialog"
    :modal="falseValue"
    custom-class="dialog-style proList-dialog"
    width="1200px"
    @close="dialogClose"
    v-el-drag-dialog
    v-el-dialog-center
  >
    <div class="cont">
      <div id="containt" style="height: 550px">
        <div class="search-criteria fl" style="width: 220px; height: 100%">
          <div class="tit">
            <i class="iconfont icon-shaixuan"></i><b>{{ $t1("搜索条件") }}</b>
          </div>

          <el-form label-position="top">
            <div style="height: 468px; padding-top: 10px; overflow: auto">
              <el-form-item :label="$t1('搜索类型')">
                <el-radio-group v-model="fileType">
                  <el-radio :label="2">{{ $t1("文件夹") }}</el-radio>
                  <el-radio :label="1">{{ $t1("文件") }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="文件名">
                <el-input v-model="formData.fileName" size="small" clearable />
              </el-form-item>
              <!--              <el-form-item label="所属对象描述">
                <base-input-batch v-model="formData.note"/>
              </el-form-item>-->
              <el-form-item :label="$t1('创建时间')">
                <el-date-picker
                  v-model="formData.startTime"
                  type="date"
                  placeholder=""
                  size="small"
                  clearable
                  value-format="yyyy-MM-dd"
                  :picker-options="$baseStartPickerOptions(formData.endTime)"
                ></el-date-picker>
                <span>-</span>
                <el-date-picker
                  v-model="formData.endTime"
                  type="date"
                  placeholder=""
                  size="small"
                  clearable
                  value-format="yyyy-MM-dd"
                  :picker-options="$baseEndPickerOptions(formData.startTime)"
                ></el-date-picker>
              </el-form-item>
              <!-- <el-form-item :label="$t1('文件类型')">
                <el-select v-model="fileTypeSn" @change="getAttributeList">
                  <el-option
                    v-for="(item, index) in fileTypes"
                    :key="index"
                    :label="item.fileTypeName"
                    :value="item.fileTypeSn"
                  ></el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item
                v-for="(item, index) in fileAttributes"
                :key="index"
                :label="item.attributeName"
              >
                <el-input v-model="item.formValue" clearable></el-input>
              </el-form-item>
            </div>
            <el-form-item class="btns">
              <el-button
                icon="el-icon-brush"
                class="button-sty"
                @click="resetEvent"
                type="primary"
                plain
                >{{ $t1("重置") }}
              </el-button>
              <el-button
                type="warning"
                icon="el-icon-search"
                class="button-sty"
                @click="searchEvent"
                >{{ $t1("搜索") }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <label id="labBtn" class="labBtn1" style="cursor: unset; height: 100%">
          <!--          <div class="icon">
                      <i class="el-icon-more"></i>
                      <i class="el-icon-more"></i>
                    </div>-->
        </label>
        <div class="main-right fr" style="width: calc(100% - 220px); padding-left: 6px">
          <div style="height: 100%">
            <vxe-grid
              ref="table-m1"
              v-bind="vxeOption"
              @resizable-change="$vxeTableUtil.onColumnWitchChange"
              @custom="$vxeTableUtil.customHandle"
            >
              <template #form>
                <div class="clearfix screen-btns">
                  <div class="fl screen-breadcrumb">
                    <el-breadcrumb separator-class="el-icon-arrow-right ">
                      <el-breadcrumb-item
                        ><i class="iconfont icon-dingwei-mianxing"></i
                        ><span class="f-blue" @click="checkTreeNode()">{{
                          $t1("搜索范围")
                        }}</span>
                      </el-breadcrumb-item>
                      <el-breadcrumb-item
                        v-for="(treeNode, index) in treeNodeArr"
                        :key="index"
                      >
                        <span class="f-blue" @click="checkTreeNode(treeNode)">{{
                          treeNode.label
                        }}</span>
                      </el-breadcrumb-item>
                    </el-breadcrumb>
                  </div>
                  <div class="fr"></div>
                </div>
              </template>
              <template #fileName="{ row }">
                <div v-if="!row.dirs">
                  <el-tooltip
                    :enterable="false"
                    effect="dark"
                    :content="$t2('预览', 'components.fileLibrary.preview')"
                    placement="top"
                  >
                    <a class="a-link img" @click="$baseFilePreview(row)">
                      <el-image :src="getShowUrl(row, 'thumbnail')"></el-image>
                    </a>
                  </el-tooltip>
                  <a class="a-link underLine" @click="$baseFilePreview(row)">{{
                    row.fileName
                  }}</a>
                </div>
                <div v-else>
                  <a class="a-link img">
                    <div class="img">
                      <svg-icon icon-class="ico-wenjianjia" />{{ row.fileName }}
                    </div>
                  </a>
                </div>
              </template>
            </vxe-grid>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { selectDialogMixins } from "@base/mixins/selectDialog/index.js";

import { treeScollx, treeScolly } from "@base/utils/global.js";
import { encode } from "js-base64";

export default {
  name: "fileLibraryFilterDialog",
  props: ["visiable", "multi", "rows", "treeNodeArr", "currentFileCategory"],
  mixins: [selectDialogMixins],
  inject: ["current_prefix", "storeAreaCode", "getObjectForeignId", "getIsPrivate"],
  created() {
    this.initSetting({ treeScolly: false });
    /*setTimeout(() => {
      treeScollx({target: this, type: 'default', dragBtn: '.labBtn1'});
      treeScolly({target: this, type: 'selectDialog', dragBtn: '.labBtn2'});
    }, 200);*/
  },
  mounted() {
    this.getFileTypeList();
    this.initTableM1();
  },

  computed: {},
  data() {
    return {
      showDialog: true,
      falseValue: false,
      selectMulti: true,
      formData: {},
      vxeOption: {},

      fileTypes: [],
      fileAttributes: [],
      fileTypeSn: null,
      fileAttachAttributeCDTos: [],
      fileType: 1,
    };
  },
  methods: {
    initTableM1() {
      let that = this;

      let tableOption = {
        vue: that,
        tableRef: "table-m1",
        tableName: "fileLigraryFilterDialog-m1",
        path: () => {
          let url = null;
          if (this.fileType === 1) {
            url = this.current_prefix + "/file_obj/listAuthAttachPage";
          } else if (this.fileType === 2) {
            url = this.current_prefix + "/file_obj/listAuthObjPage";
          }
          return url;
        },
        param: () => {
          /* let parents = this.currentFileCategory &&
           this.currentFileCategory.id &&
           this.currentFileCategory.id > 0
             ? [this.currentFileCategory.id]
             : [];*/
          let fileAttachAttributeCDTOs = [];
          this.fileAttributes.map((item) => {
            if (item.formValue !== "" && item.formValue !== null) {
              fileAttachAttributeCDTOs.push({
                attributeSn: item.attributeSn,
                attributeValue: item.formValue,
              });
            }
          });

          let objectForeignId = this.getObjectForeignId();
          let isPrivate = this.getIsPrivate();
          return {
            // parents,
            objectForeignId: objectForeignId,
            // privateDir: isPrivate ? 1 : 0,
            fileAttachAttributeCDTOs,
            storeAreaCode: this.storeAreaCode,
            ...this.formData,
          };
        },
        config: {
          proxyConfig: {
            autoLoad: false,
          },
        },
        columns: [
          { type: "checkbox", width: 48, resizable: false, fixed: "left" },
          {
            title: this.$t2("文件名称", "components.fileLibrary.fileName"),
            field: "fileName",
            width: 250,
            fixed: "left",
            slots: {
              default: "fileName",
            },
          },
          {
            title: this.$t2("文件大小", "components.fileLibrary.fileSize"),
            field: "fileSize",
            width: 150,
            slots: {
              default: ({ row, $rowIndex }) => {
                if (!row.dirs) {
                  return this.formatFileSize(row.fileSize);
                }
              },
            },
          },
          {
            title: this.$t1("文件路径"),
            field: "treePathName",
            width: 250,
          },
          {
            title: this.$t2("版本号", "components.fileLibrary.fileRev"),
            field: "rev",
            width: 150,
            slots: {
              default: ({ row, $rowIndex }) => {
                if (!row.dirs) {
                  return row.rev;
                }
              },
            },
          },
          {
            title: this.$t2("分辨率", "components.fileLibrary.widthHeight"),
            field: "widthHeight",
            width: 150,
          },
          {
            title: this.$t2("所属对象描述", "components.fileLibrary.note"),
            field: "note",
            width: 250,
          },
          {
            title: this.$t1("状态"),
            field: "status",
            width: 150,
            slots: {
              default: ({ row, $rowIndex }) => {
                if (!row.dirs) {
                  return row.status == 1 ? this.$t1("已归档") : this.$t1("未归档");
                }
              },
            },
          },
          {
            title: this.$t2("文件编码", "components.fileLibrary.fileSn"),
            field: "fileSn",
            width: 150,
          },
          // ...customColumns,
          {
            title: this.$t2("创建人", "components.fileLibrary.createBy"),
            field: "_createBy",
            width: 150,
          },
          {
            field: "createDate",
            title: this.$t2("创建时间", "components.fileLibrary.createDate"),
            width: 150,
          },
          {
            width: 47,
            fixed: "right",
            title: "",
            sortable: false,
            slots: {
              default: ({ row, rowIndex }) => {
                return [
                  <div>
                    <a
                      href="javascript:void(0);"
                      class="a-link"
                      onclick={() => {
                        this.openFileDirs(row);
                      }}
                    >
                      <el-tooltip
                        enterable={false}
                        effect="dark"
                        content={this.$t1("在文件夹中显示")}
                        placement="top"
                        popper-class="tooltip-skin"
                      >
                        <i class="el-icon-folder-opened" />
                      </el-tooltip>
                    </a>
                  </div>,
                ];
              },
            },
          },
        ],
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
        that.vxeOption = opts;
      });
    },
    openFileDirs(row) {
      this.dialogClose();
      this.$emit("openFileDirs", row);
    },
    getShowUrl(attachment, field) {
      if (!field) field = "medium";
      return this.$commonFileUtil.getShowUrl(
        attachment.domain + (attachment[field] ? attachment[field] : attachment.url)
      );
    },
    formatFileSize(fileSize) {
      fileSize = fileSize || 0;
      if (fileSize < 1024) {
        return fileSize + "B";
      } else if (fileSize < 1024 * 1024) {
        var temp = fileSize / 1024;
        temp = temp.toFixed(2);
        return temp + "KB";
      } else if (fileSize < 1024 * 1024 * 1024) {
        var temp = fileSize / (1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "MB";
      } else {
        var temp = fileSize / (1024 * 1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "GB";
      }
    },
    searchEvent() {
      this.$refs["table-m1"].commitProxy("reload");
    },
    resetEvent() {
      this.formData = {};
      this.clearFileAttributeFormValue();
      this.$refs["table-m1"].commitProxy("reload");
    },
    clearFileAttributeFormValue() {
      this.fileTypeSn = null;
      this.fileAttributes = [];
    },
    getFileTypeList() {
      this.$http({
        url: this.current_prefix + `/file_type/listPage`,
        method: `post`,
        data: {
          enabled: true,
        },
        // isLoading: true,
        // modalStrictly: true,
        success: (res) => {
          this.fileTypes = res.objx?.records || [];
        },
      });
    },
    getAttributeList() {
      this.$http({
        url: this.current_prefix + `/file_type/listAttribute`,
        method: `post`,
        data: {
          stringOne: this.fileTypeSn,
        },
        // isLoading: true,
        // modalStrictly: true,
        success: (res) => {
          let rows = res.objx || [];
          rows.forEach((row) => {
            row.formValue = null;
          });
          this.fileAttributes = rows;
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.dialog-style.proList-dialog .el-dialog__body #containt {
  height: 100%;

  .main-right {
    height: 100%;
  }
}

#labBtn.transverse {
  margin-bottom: 0;
  margin-left: -8px;
}
</style>
