<template>
  <div class="materias-manage flex jcb">
    <div class="left h-full bgw flex flexc">
      <TabHeader icon="el-icon-notebook-2" label="事项列表"></TabHeader>
      <div class="pd15 flex1 auto-scroll">
        <TableHeader>
          <div slot="left">
            <el-button size="small" type="primary" @click="setCurrent">{{
              activeDep.id ? "取消选择" : "全部材料"
            }}</el-button>
          </div>
          <div slot="right" class="flex">
            <el-select
              v-model="departmentLeft"
              size="small"
              style="width: 120px"
              placeholder="选择部门"
              class="autoWidth"
              filterable
            >
              <!-- <template slot="prefix">
                {{
                  (deptList.find((v) => v.deptNumber === departmentLeft) || {})
                    .name
                }}
              </template> -->
              <el-option
                v-for="item in deptList"
                :key="item.deptNumber"
                :label="item.name"
                :value="item.deptNumber"
              >
              </el-option>
            </el-select>
            <el-input
              size="small"
              v-model="leftSearch"
              style="width: 200px"
              class="ml10 mr10"
              placeholder="请输入事项全称搜索"
              @keyup.native.enter="handleSearchLeft"
            ></el-input>
            <el-button size="small" type="primary" @click="handleSearchLeft"
              >搜 索</el-button
            >
            <el-button size="small" @click="leftReset">重 置</el-button>
          </div>
        </TableHeader>
        <!-- 表格 -->
        <div class="table-content">
          <div @click.stop>
            <el-table
              ref="leftTable"
              v-loading="loadingLeft"
              :data="LeftTableData"
              size="small"
              border
              tooltip-effect="dark"
              style="width: 100%"
              max-height="676px"
              highlight-current-row
              reserve-selection
              :row-key="(row) => row.id"
              @current-change="handleCurrentChange"
            >
              <el-table-column
                type="index"
                label="序号"
                width="55"
                align="center"
                :index="(index) => (leftCurrent - 1) * leftSize + index + 1"
              >
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="部门名称"
                align="center"
                prop="deptName"
              >
              </el-table-column>
              <el-table-column
                prop="matterName"
                show-overflow-tooltip
                label="事项名称"
              >
                <template slot-scope="scope">
                  <p class="short">{{ scope.row.matterName }}</p>
                  <p class="full-name">
                    事项全称：{{ scope.row.matterFullName }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column
                prop="datumCount"
                label="材料数量"
                align="center"
                width="80"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
        <Pagination
          :current="leftCurrent"
          :size="leftSize"
          :total="leftTotal"
          @currentChange="leftChangePagination"
          @sizeChange="leftChangeSize"
        ></Pagination>
      </div>
    </div>
    <div class="right h-full bgw flex flexc">
      <TabHeader icon="el-icon-notebook-2" label="材料列表"></TabHeader>
      <div class="pd15 flex1 auto-scroll">
        <!-- 内容 -->
        <TableHeader>
          <div slot="left">
            <el-button size="small" type="primary" @click="handleAddMaterial"
              >新增材料</el-button
            >
            <el-button size="small" type="primary" @click="showLib"
              >公共库选择</el-button
            >
            <el-button size="small" type="primary" @click="addFolder"
              >新增文件夹</el-button
            >
            <el-button size="small" type="danger" @click="handleDelAll"
              >批量删除</el-button
            >
            <el-button size="small" type="primary" @click="addMaterialsToFolder"
              >移动至</el-button
            >
          </div>
          <div slot="right" class="flex">
            <el-select
              v-model="departmentRight"
              size="small"
              style="width: 120px"
              placeholder="选择部门"
              filterable
            >
              <!-- <template slot="prefix">
                {{
                  (deptList.find((v) => v.deptNumber === departmentRight) || {})
                    .name
                }}
              </template> -->
              <el-option
                v-for="item in deptList"
                :key="item.deptNumber"
                :label="item.name"
                :value="item.deptNumber"
              >
              </el-option>
            </el-select>
            <el-input
              size="small"
              style="width: 200px"
              v-model="rightSearch"
              class="ml10 mr10"
              placeholder="请输入材料全称搜索"
              @keyup.native.enter="handleSearchRight"
            ></el-input>
            <el-button size="small" type="primary" @click="handleSearchRight"
              >搜 索</el-button
            >
            <el-button size="small" @click="rightReset">重 置</el-button>
          </div>
        </TableHeader>
        <!-- 表格 -->
        <div class="table-content">
          <el-table
            ref="rightTable"
            size="small"
            v-loading="loadingRight"
            :data="rightTableData"
            reserve-selection
            border
            tooltip-effect="dark"
            style="width: 100%"
            max-height="676px"
            :row-key="(row) => row.id"
            @selection-change="handleSelectionChangeRight"
          >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="55"
              align="center"
              :index="(index) => (rightCurrent - 1) * rightSize + index + 1"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="部门名称"
              align="center"
              prop="deptName"
            >
            </el-table-column>
            <el-table-column prop="name" show-overflow-tooltip label="材料名称">
              <template slot-scope="scope">
                <p class="short">{{ scope.row.materialName }}</p>
                <p class="full-name">
                  材料全称：{{ scope.row.materiaFullName }}
                </p>
              </template>
            </el-table-column>
            <el-table-column
              prop="total"
              label="查看次数"
              align="center"
              width="80"
            >
            </el-table-column>
            <el-table-column prop="sort" label="排序" align="center" width="80">
            </el-table-column>
            <el-table-column label="操作" align="center" width="210">
              <template slot-scope="scope">
                <div class="flex jcb">
                  <div style="width: 60px">
                    <span
                      @click="handleRecommend(scope.row.id)"
                      v-if="scope.row.isRecommend == 1"
                      class="green pointer"
                      >取消推荐</span
                    >
                    <span
                      @click="handleRecommend(scope.row.id)"
                      v-else
                      class="pointer primary"
                      >推荐</span
                    >
                  </div>
                  <span class="primary pointer" @click="handleEdit(scope.row)"
                    >编辑</span
                  >
                  <!-- <span
                    class="primary pointer"
                    @click="addMaterialsToFolder(scope.row)"
                    >移动至</span
                  > -->
                  <span
                    class="primary pointer"
                    @click="handlePreview(scope.row)"
                    >预览</span
                  >
                  <span class="delete pointer" @click="handleDel(scope.row.id)"
                    >删除</span
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <Pagination
          :current="rightCurrent"
          :size="rightSize"
          :total="rightTotal"
          @currentChange="rightChangePagination"
          @sizeChange="rightChangeSize"
        ></Pagination>
      </div>
      <!-- 新增材料 -->
      <AddMaterials
        ref="AddMaterials"
        :addMaterialsVisible.sync="addMaterialsVisible"
        :title="title"
        @addSuccess="addSuccess"
      ></AddMaterials>
      <!-- 预览材料 -->
      <PreviewMaterials
        :drawer.sync="drawer"
        :materialsInfo="materialsInfo"
      ></PreviewMaterials>

      <!-- 公共库 -->
      <CommonLib
        ref="CommonLib"
        :matterId="activeDep.id"
        @ok="addSuccess"
        :libVisible.sync="libVisible"
      ></CommonLib>
      <!-- 新增文件夹 -->
      <AddFolders
        ref="AddFolders"
        :addFolderVisible.sync="addFolderVisible"
      ></AddFolders>
      <!-- 文件夹 -->
      <FolderList
        ref="FolderList"
        @addSuccess="materialsToFolderOk"
        :folderListVisible.sync="folderListVisible"
      ></FolderList>
    </div>
  </div>
</template>

<script>
import TableHeader from "@/components/TableHeader.vue";
import AddMaterials from "./modal/AddMaterials.vue";
import PreviewMaterials from "./modal/PreviewMaterials.vue";
import CommonLib from "./modal/CommonLib.vue";
import Pagination from "@/components/Pagination.vue";
import AddFolders from "./modal/AddFolders.vue";
import FolderList from "./modal/FolderList.vue";
import TabHeader from "@/components/TabHeader.vue";
import { getWriteMatterList } from "@/api/matter";
import {
  getMaterialsList,
  delMaterials,
  recommendMaterials,
} from "@/api/materials";
import local from "@/utils/local";
import { mapGetters } from "vuex";
export default {
  components: {
    TableHeader,
    AddMaterials,
    PreviewMaterials,
    CommonLib,
    Pagination,
    AddFolders,
    FolderList,
    TabHeader,
  },
  data() {
    return {
      siteId: local.getLocal("sampleSiteId")
        ? local.getLocal("sampleSiteId")
        : "",
      departmentLeft: "",
      departmentRight: "",
      leftSearch: "",
      rightSearch: "",
      loadingLeft: false,
      loadingRight: false,
      LeftTableData: [],
      leftCurrent: 1,
      leftSize: 10,
      leftTotal: 0,
      rightCurrent: 1,
      rightSize: 10,
      rightTotal: 0,
      rightTableData: [],
      rightSelectedRowKeys: [],
      addMaterialsVisible: false,
      title: "新增材料",
      drawer: false,
      materialsInfo: {}, // 材料信息
      activeDep: {},
      libVisible: false,
      depList: [],
      matterId: null,
      recommendCount: "", // 推荐次数
      addFolderVisible: false,
      folderListVisible: false,
    };
  },
  created() {
    this.getWriteMatterList();
    this.getMaterialsList();
  },
  computed: {
    ...mapGetters(["deptList"]),
  },
  methods: {
    // 系统事项列表
    async getWriteMatterList() {
      this.loadingLeft = true;
      let res = await getWriteMatterList({
        page: this.leftCurrent,
        size: this.leftSize,
        matterFullName: `%${this.leftSearch}%`,
        deptCode: this.departmentLeft,
        siteId: this.siteId,
      });
      this.loadingLeft = false;
      if (res.data.code === 1) {
        let { data, total } = res.data.data;
        this.LeftTableData = data;
        this.leftTotal = total;
        this.$refs.leftTable.bodyWrapper.scrollTop = 0;
      }
    },

    // 获取材料列表
    async getMaterialsList() {
      this.loadingRight = true;
      let res = await getMaterialsList({
        page: this.rightCurrent,
        size: this.rightSize,
        materiaFullName: `%${this.rightSearch}%`,
        matterId: this.activeDep.id,
        deptCode: this.departmentRight,
        siteId: parseInt(this.siteId),
      });
      this.loadingRight = false;
      let { data, total, recommendCount } = res.data.data;
      if (!data.length && this.rightCurrent > 1) {
        this.rightCurrent -= 1;
        this.getMaterialsList();
      }
      this.rightTotal = total;
      this.rightTableData = data;
      this.recommendCount = recommendCount;
      this.$refs.rightTable.bodyWrapper.scrollTop = 0;
    },
    // 左边搜索
    handleSearchLeft() {
      this.leftCurrent = 1;
      this.getWriteMatterList();
    },
    // 左边重置
    leftReset() {
      this.departmentLeft = "";
      this.leftSearch = "";
      this.leftCurrent = 1;
      this.getWriteMatterList();
    },

    // 左边选择表格行
    handleCurrentChange(currentRow) {
      if (currentRow) {
        this.activeDep = currentRow;
        this.rightCurrent = 1;
        this.getMaterialsList();
      }
    },
    // 取消材料全选
    setCurrent() {
      this.$refs.leftTable.setCurrentRow();
      this.activeDep = {};
      this.rightCurrent = 1;
      this.getMaterialsList();
    },
    // 左边翻页
    leftChangePagination(cur) {
      this.leftCurrent = cur;
      this.getWriteMatterList();
    },

    // 左边改变每页显示数量
    leftChangeSize(size) {
      this.leftSize = size;
      this.getWriteMatterList();
    },
    // 新增材料
    handleAddMaterial() {
      if (!this.activeDep.id) {
        this.$message.warning("请先选择事项");
        return;
      }
      this.title = "新增材料";
      this.$refs.AddMaterials.onAdd(this.activeDep);
      this.addMaterialsVisible = true;
    },
    // 公共库
    showLib() {
      if (!this.activeDep.id) {
        this.$message.warning("请先选择事项");
        return;
      }
      this.$refs.CommonLib.getPbuList();
      this.libVisible = true;
    },
    // 右边勾选
    handleSelectionChangeRight(select) {
      this.rightSelectedRowKeys = select;
    },
    // 批量删除
    handleDelAll() {
      if (!this.rightSelectedRowKeys.length) {
        this.$message.warning("请先勾选数据");
        return;
      }
      let ids = this.rightSelectedRowKeys.map((v) => v.id).join(",");
      this.handleDel(ids);
    },
    // 右边搜索
    handleSearchRight() {
      this.rightCurrent = 1;
      this.$refs.rightTable.clearSelection();
      this.getMaterialsList();
    },
    // 右边重置
    rightReset() {
      this.departmentRight = "";
      this.rightSearch = "";
      this.rightCurrent = 1;
      this.$refs.rightTable.clearSelection();
      this.getMaterialsList();
    },
    // 推荐
    async handleRecommend(id) {
      let res = await recommendMaterials({ id: id, siteId: this.siteId });
      let { code, msg } = res.data;
      if (code === 1) {
        this.$message.success(msg);
        this.getMaterialsList();
      }
    },
    // 编辑
    handleEdit(row) {
      this.title = "编辑材料";
      this.$refs.AddMaterials.onEdit(row);
      this.addMaterialsVisible = true;
    },
    // 预览
    handlePreview(info) {
      this.materialsInfo = info;
      this.drawer = true;
    },
    // 删除
    handleDel(id) {
      this.$confirm("此操作将删除该材料及表单信息，是否继续?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "btn-custom-cancel",
        type: "warning",
      })
        .then(async () => {
          let res = await delMaterials({ id });
          let { code, msg } = res.data;
          if (code === 1) {
            this.$message.success(msg);
            this.getMaterialsList();
            this.getWriteMatterList();
            this.$refs.rightTable.clearSelection();
            this.rightSelectedRowKeys = [];
          }
        })
        .catch(() => {
          console.log("取消成功！");
        });
    },
    // 右边翻页
    rightChangePagination(cur) {
      this.rightCurrent = cur;
      this.getMaterialsList();
    },
    // 右边改变每页显示数量
    rightChangeSize(size) {
      this.rightSize = size;
      this.getMaterialsList();
    },
    // 新增材料成功
    addSuccess() {
      this.getWriteMatterList();
      this.getMaterialsList();
    },
    // 新增文件夹
    addFolder() {
      if (!this.activeDep.id) {
        this.$message.warning("请先选择事项");
        return;
      }
      this.$refs.AddFolders.onAdd(this.activeDep);
      this.addFolderVisible = true;
    },
    // 移动材料进事项文件夹
    addMaterialsToFolder() {
      if (!this.rightSelectedRowKeys.length) {
        this.$message.warning("请先勾选材料");
        return;
      }
      this.$refs.FolderList.onAdd(this.rightSelectedRowKeys);
      this.folderListVisible = true;
    },
    materialsToFolderOk() {
      this.$refs.rightTable.clearSelection();
      this.getMaterialsList();
    },
  },
};
</script>

<style lang="less" scoped>
.materias-manage {
  width: 100%;
  height: 100%;
  .short {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .full-name {
    color: rgb(172, 170, 170);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  // .table-content {
  //   height: 550px;
  // }
}
/deep/.current-row td:first-child {
  border-left: 3px solid #1890ff;
}

.left {
  width: 39%;
  border-radius: 4px;
}
.right {
  width: 59%;
  border-radius: 4px;
}
</style>