<template>
  <div>
    <div style="float: right;height: 28px;margin-top:-10px">
      <el-button @click="linkToUpPage" type="text">前往文件上传页面</el-button>
    </div>

    <el-tabs
      type="border-card"
      v-model="activeNameFather"
      @tab-click="getDirFileList"
      style="height:355px;clear: both"
    >
      <el-tab-pane name="/system/fviz/sys" label="系统图片">
        <el-tabs v-model="activeNameSon1" @tab-click="getDirFileList">
          <el-tab-pane
            label="图标"
            name="first"
            style="height:250px;overflow-y:auto;overflow-x:hidden;"
          >
            <div class="block" v-for="file in nowFileList" :key="file.fileName">
              <el-image
                :id="file.fileName"
                style="width: 100px; height: 100px;"
                :src="basePath+fileBasePath+'?pathName='+nowFileDir+'/'+file.fileName"
                @click="selectPic(file.id,file.fileName)"
              ></el-image>
              <span :title="file.fileName">{{file.fileName}}</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="边框" name="/frame" style="height:250px;overflow-y:auto;overflow-x:hidden;">
            <div class="block" v-for="file in nowFileList" :key="file.fileName">
              <el-image
                :id="file.id"
                style="width: 100px; height: 100px;"
                :src="basePath+fileBasePath+'?pathName='+nowFileDir+'/'+file.fileName"
                @click="selectPic(file.id,file.fileName)"
              ></el-image>
              <span :title="file.fileName">{{file.fileName}}</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="背景图" name="/background" style="height:250px;overflow-y:auto;overflow-x:hidden;">
            <div class="block" v-for="file in nowFileList" :key="file.fileName">
              <el-image
                style="width: 100px; height: 100px;"
                :src="basePath+fileBasePath+'?pathName='+nowFileDir+'/'+file.fileName"
                @click="selectPic(file.id,file.fileName)"
              ></el-image>
              <span :title="file.fileName">{{file.fileName}}</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="其他" name="/other" style="height:250px;overflow-y:auto;overflow-x:hidden;">
            <div class="block" v-for="file in nowFileList" :key="file.fileName">
              <el-image
                style="width: 100px; height: 100px;"
                :src="basePath+fileBasePath+'?pathName='+nowFileDir+'/'+file.fileName"
                @click="selectPic(file.id,file.fileName)"
              ></el-image>
              <span :title="file.fileName">{{file.fileName}}</span>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane name="/system/fviz/custom" label="自定义图片">
        <el-tabs v-model="activeNameSon2" @tab-click="getDirFileList">
          <el-tab-pane label="图标" name="first" style="height:250px;overflow-y:auto;overflow-x:hidden;">
            <div class="block" v-for="file in nowFileList" :key="file.fileName">
              <el-image
                style="width: 100px; height: 100px;"
                :src="basePath+fileBasePath+'?pathName='+nowFileDir+'/'+file.fileName"
                @click="selectPic(file.id,file.fileName)"
              ></el-image>
              <span :title="file.fileName">{{file.fileName}}</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="边框" name="/frame" style="height:250px;overflow-y:auto;overflow-x:hidden;">
            <div class="block" v-for="file in nowFileList" :key="file.fileName">
              <el-image
                style="width: 100px; height: 100px;"
                :src="basePath+fileBasePath+'?pathName='+nowFileDir+'/'+file.fileName"
                @click="selectPic(file.id,file.fileName)"
              ></el-image>
              <span :title="file.fileName">{{file.fileName}}</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="背景图" name="/background" style="height:250px;overflow-y:auto;overflow-x:hidden;">
            <div class="block" v-for="file in nowFileList" :key="file.fileName">
              <el-image
                style="width: 100px; height: 100px;"
                :src="basePath+fileBasePath+'?pathName='+nowFileDir+'/'+file.fileName"
                @click="selectPic(file.id,file.fileName)"
              ></el-image>
              <span :title="file.fileName">{{file.fileName}}</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="其他" name="/other" style="height:250px;overflow-y:auto;overflow-x:hidden;">
            <div class="block" v-for="file in nowFileList" :key="file.fileName">
              <el-image
                style="width: 100px; height: 100px;"
                :src="basePath+fileBasePath+'?pathName='+nowFileDir+'/'+file.fileName"
                @click="selectPic(file.id,file.fileName)"
              ></el-image>
              <span :title="file.fileName">{{file.fileName}}</span>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <el-form>
      <el-form-item label-width="0" style="text-align: center;margin-top:10px">
        <el-button type="primary" size="mini" @click="saveBackParam">保存</el-button>
        <el-button size="mini" @click="closeDialog">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "FDPropPicChoose",
  props: ["currentPropValue"],
  components: {},
  computed: {},
  data() {
    return {
      basePath: this.GLOBAL.basePath,
      formCode: this.GLOBAL.formCode,
      activeNameFather: "/system/fviz/sys",
      activeNameSon1: "first",
      activeNameSon2: "first",
      fileBasePath: "fweb-fileservice/fileext/download/path",
      nowFileList: [],
      currentSelectPicPath: "",
      currentSelectPicId: "",
      pictureExtensions: ".jpg,.png,.gif,.jpeg,.svg"
    };
  },
  watch: {},
  methods: {
    //关闭窗口
    closeDialog() {
      this.$emit("closeDialog", "");
    },
    getDirFileList() {
      let me = this;
      me.axios({
        method: "get",
        url: me.basePath + "fweb-fileservice/fileext/ls_files",
        params: {
          pathname: me.nowFileDir,
          filterExtensions:me.pictureExtensions,
        }
      })
        .then(res => {
          let list = [];
          for (let i = 0; i < res.data.length; i++) {
            if (me.pictureExtensions.indexOf(res.data[i].extension) != -1) {
              list.push(res.data[i]);
            }
          }
          me.nowFileList = list;
          setTimeout(() => {
            this.setSelectPicClass();
          }, 500);
        })
        .catch(err => {
          console.log(err);
        });
    },
    init() {
      if (this.currentPropValue) {
        var pathArry = this.currentPropValue.split("=")[1].split("/");
        //文件名
        var fileName = pathArry[pathArry.length - 1];
        //文件完整路径
        var filePath = this.currentPropValue
          .split("=")[1]
          .replace(fileName, "");
        //页签父路径
        var fileFathPath =
          "/" + pathArry[1] + "/" + pathArry[2] + "/" + pathArry[3];
        //页签子路径
        var fileSonPath = this.currentPropValue
          .split("=")[1]
          .replace(fileName, "")
          .replace(fileFathPath, "");
        if (fileSonPath == "/") {
          fileSonPath = "first";
        } else {
          fileSonPath = fileSonPath.substring(0, fileSonPath.length - 1);
        }
        //选中父页签
        this.activeNameFather = fileFathPath;
        //选中子页签
        if (fileFathPath == "/system/fviz/sys") {
          this.activeNameSon1 = fileSonPath;
        } else {
          this.activeNameSon2 = fileSonPath;
        }
        this.currentSelectPicId = fileName;
        setTimeout(() => {
          this.getDirFileList();
        }, 50);
        setTimeout(() => {
          this.setSelectPicClass();
        }, 500);
      }
    },
    selectPic(fileId, fileName) {
      this.currentSelectPicId = fileName;
      this.currentSelectPicPath =
        this.fileBasePath + "?pathName=" + this.nowFileDir + "/" + fileName;
      this.setSelectPicClass();
    },
    saveBackParam() {
      this.$emit("saveDialogValue", this.currentSelectPicPath);
    },
    setSelectPicClass() {
      if (this.currentSelectPicId) {
        for (let i = 0; i < this.nowFileList.length; i++) {
          if (this.nowFileList[i].fileName) {
            $("[id='" + this.nowFileList[i].fileName + "']").css("border", "");
            $("[id='" + this.nowFileList[i].fileName + "']").css(
              "border-radius",
              ""
            );
          }
        }
        $("[id='" + this.currentSelectPicId + "']").css(
          "border",
          "5px solid #409eff"
        );
        $("[id='" + this.currentSelectPicId + "']").css("border-radius", "3px");
      }
    },
    linkToUpPage() {
      window.open(this.basePath + "view/fweb-fileservice/file_manager");
    }
  },
  created() {},
  mounted() {
    this.getDirFileList();
    this.init();
  },
  computed: {
    nowFileDir() {
      if (this.activeNameFather == "/system/fviz/sys") {
        if (this.activeNameSon1 == "first") {
          return this.activeNameFather;
        } else {
          return this.activeNameFather + this.activeNameSon1;
        }
      } else {
        if (this.activeNameSon2 == "first") {
          return this.activeNameFather;
        } else {
          return this.activeNameFather + this.activeNameSon2;
        }
      }
    }
  }
};
</script>
<style>
.is-img-select {
  outline: 3px solid #409eff;
}
.block{
  display: inline-grid;
  margin: 20px;
}
.block span{
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100px;
  font-size: 12px;
}
</style>
