<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="sampleformMatterTable.searchForm.deptCode"
              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="sampleformMatterTable.searchForm.matterFullName"
              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>
            <y-table
              :data="sampleformMatterTable.data"
              :max-height="650"
              :column="sampleformMatterTable.columns"
              highlight-current-row
              size="small"
              border
              :loading="sampleformMatterTable.loading"
              tooltip-effect="dark"
              @current-change="handleCurrentChange"
              ref="leftTable"
            >
              <template slot="matterName" slot-scope="scope">
                <p class="short">{{ scope.row.matterName }}</p>
                <p class="full-name">
                  事项全称：{{ scope.row.matterFullName }}
                </p>
              </template>
            </y-table>
          </div>
        </div>
        <y-pagination
          :total="sampleformMatterTable.total"
          :page.sync="sampleformMatterTable.page"
          :pageSize.sync="sampleformMatterTable.size"
          @change="getSampleformMatterList"
        ></y-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"
              v-if="activeDep.id"
              type="primary"
              @click="addMaterialsToFolder"
              >移动至</el-button
            >
          </div>
          <div slot="right" class="flex">
            <el-select
              v-model="materialsTable.searchForm.deptCode"
              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="materialsTable.searchForm.materiaFullName"
              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">
          <y-table
            ref="rightTable"
            size="small"
            :column="materialsTable.columns"
            :loading="materialsTable.loading"
            :data="materialsTable.data"
            border
            tooltip-effect="dark"
            @selection-change="handleSelectionChangeRight"
          >
            <template slot="materialName" slot-scope="scope">
              <p class="short">{{ scope.row.materialName }}</p>
              <p class="full-name">材料全称：{{ scope.row.materiaFullName }}</p>
            </template>

            <template slot="action" 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>
          </y-table>
        </div>
        <y-pagination
          :page.sync="materialsTable.page"
          :pageSize.sync="materialsTable.size"
          :total="materialsTable.total"
          @change="getMaterialsList"
        ></y-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 AddFolders from "./modal/AddFolders.vue";
import FolderList from "./modal/FolderList.vue";
import TabHeader from "@/components/TabHeader.vue";
import { getSampleformMatterList } 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,
    AddFolders,
    FolderList,
    TabHeader,
  },
  data() {
    return {
      siteId: local.getLocal("sampleSiteId")
        ? local.getLocal("sampleSiteId")
        : "",
      // 样表事项表格
      sampleformMatterTable: {
        loading: false,
        page: 1,
        size: 10,
        total: 0,
        data: [],
        selectionKeys: [],
        searchForm: {
          matterFullName: "",
          deptCode: "",
        },
        columns: [
          {
            label: "序号",
            type: "index",
            width: "55",
            align: "center",
            index: (index) => {
              return (
                (this.sampleformMatterTable.page - 1) *
                  this.sampleformMatterTable.size +
                index +
                1
              );
            },
          },
          {
            label: "部门名称",
            prop: "deptName",
            align: "center",
            width: "180",
            showOverflowTooltip: true,
          },
          {
            label: "事项名称",
            slot: true,
            prop: "matterName",
            showOverflowTooltip: true,
          },
          {
            label: "材料数量",
            prop: "datumCount",
            align: "center",
            width: "100",
          },
        ],
      },
      // 表单表格
      materialsTable: {
        loading: false,
        page: 1,
        size: 10,
        total: 0,
        data: [],
        selectionKeys: [],
        searchForm: {
          materiaFullName: "",
          deptCode: "",
        },
        columns: [
          {
            label: "全选",
            type: "selection",
            width: "55",
            align: "center",
            reserveSelection: true,
          },
          {
            label: "序号",
            type: "index",
            width: "55",
            align: "center",
            index: (index) => {
              return (
                (this.materialsTable.page - 1) * this.materialsTable.size +
                index +
                1
              );
            },
          },

          {
            label: "部门名称",
            prop: "deptName",
            align: "center",
            width: "180",
            showOverflowTooltip: true,
          },
          {
            label: "材料名称",
            slot: true,
            prop: "materialName",
            showOverflowTooltip: true,
          },
          {
            label: "所属文件夹",
            prop: "categoryName",
            align: "center",
            width: "100",
          },
          {
            label: "查看次数",
            prop: "total",
            align: "center",
            width: "80",
          },
          {
            label: "排序",
            prop: "sort",
            align: "center",
            width: "80",
          },
          {
            label: "操作",
            slot: true,
            prop: "action",
            align: "center",
            width: "210",
          },
        ],
      },
      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.getSampleformMatterList();
    this.getMaterialsList();
  },
  computed: {
    ...mapGetters(["deptList"]),
  },
  methods: {
    // 系统事项列表
    async getSampleformMatterList() {
      this.sampleformMatterTable.loading = true;
      let res = await getSampleformMatterList({
        page: this.sampleformMatterTable.page,
        size: this.sampleformMatterTable.size,
        matterFullName: `%${this.sampleformMatterTable.searchForm.matterFullName}%`,
        deptCode: this.sampleformMatterTable.searchForm.deptCode,
        siteId: this.siteId,
      });
      this.sampleformMatterTable.loading = false;
      if (res.data.code === 1) {
        let { data, total } = res.data.data;
        this.sampleformMatterTable.data = data;
        this.sampleformMatterTable.total = total;
      }
    },

    // 获取材料列表
    async getMaterialsList() {
      this.materialsTable.loading = true;
      let res = await getMaterialsList({
        page: this.materialsTable.page,
        size: this.materialsTable.size,
        materiaFullName: `%${this.materialsTable.searchForm.materiaFullName}%`,
        matterId: this.activeDep.id,
        deptCode: this.materialsTable.searchForm.deptCode,
        siteId: parseInt(this.siteId),
      });
      this.materialsTable.loading = false;
      let { data, total, recommendCount } = res.data.data;
      if (!data.length && this.materialsTable.page > 1) {
        this.materialsTable.page -= 1;
        this.getMaterialsList();
      }
      this.materialsTable.total = total;
      this.materialsTable.data = data;
      this.recommendCount = recommendCount;
    },
    // 左边搜索
    handleSearchLeft() {
      this.sampleformMatterTable.page = 1;
      this.getSampleformMatterList();
    },
    // 左边重置
    leftReset() {
      this.sampleformMatterTable.searchForm.matterFullName = "";
      this.sampleformMatterTable.searchForm.deptCode = "";
      this.sampleformMatterTable.page = 1;
      this.getSampleformMatterList();
    },

    // 左边选择表格行
    handleCurrentChange(currentRow) {
      if (currentRow) {
        this.activeDep = currentRow;
        this.materialsTable.page = 1;
        this.$refs.rightTable.clearSelection();
        this.getMaterialsList();
      }
    },
    // 取消材料全选
    setCurrent() {
      this.$refs.leftTable.setCurrentRow();
      this.activeDep = {};
      this.materialsTable.page = 1;
      this.$refs.rightTable.clearSelection();
      this.getMaterialsList();
    },

    // 新增材料
    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.materialsTable.selectionKeys = select;
    },
    // 批量删除
    handleDelAll() {
      if (!this.materialsTable.selectionKeys.length) {
        this.$message.warning("请先勾选数据");
        return;
      }
      let ids = this.materialsTable.selectionKeys.map((v) => v.id).join(",");
      this.handleDel(ids);
    },
    // 右边搜索
    handleSearchRight() {
      this.materialsTable.page = 1;
      this.$refs.rightTable.clearSelection();
      this.getMaterialsList();
    },
    // 右边重置
    rightReset() {
      this.materialsTable.page = 1;
      this.materialsTable.searchForm.materiaFullName = "";
      this.materialsTable.searchForm.deptCode = "";
      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.getSampleformMatterList();
            this.$refs.rightTable.clearSelection();
          }
        })
        .catch(() => {
          console.log("取消成功！");
        });
    },

    // 新增材料成功
    addSuccess() {
      this.getSampleformMatterList();
      this.getMaterialsList();
    },
    // 新增文件夹
    addFolder() {
      if (!this.activeDep.id) {
        this.$message.warning("请先选择事项");
        return;
      }
      this.$refs.AddFolders.onAdd(this.activeDep);
      this.addFolderVisible = true;
    },
    // 移动材料进事项文件夹
    addMaterialsToFolder() {
      if (!this.materialsTable.selectionKeys.length) {
        this.$message.warning("请先勾选材料");
        return;
      }
      this.$refs.FolderList.onAdd(
        this.materialsTable.selectionKeys,
        this.activeDep.id
      );
      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>
