<template>
  <div class="materias-manage flex">
    <div class="left">
      <el-card class="box-card" shadow="never">
        <div slot="header">
          <span>事项列表</span>
        </div>
        <TableHeader>
          <div slot="left">
            <el-button size="small" @click="setCurrent">{{
              activeDep.id ? "取消选择" : "全部材料"
            }}</el-button>
          </div>
          <div slot="right" class="flex">
            <el-select
              v-model="departmentLeft"
              size="small"
              placeholder="选择部门"
            >
              <el-option
                v-for="item in deptList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-input
              size="small"
              v-model="leftSearch"
              class="ml10 mr10"
              placeholder="请输入事项名称搜索"
            ></el-input>
            <el-button size="small" type="primary" @click="getWriteMatterList"
              >搜索</el-button
            >
            <el-button size="small" @click="leftReset">重置</el-button>
          </div>
        </TableHeader>
        <!-- 表格 -->
        <div class="table-content">
          <div @click.stop>
            <el-table
              ref="singleTable"
              v-loading="loadingLeft"
              :data="LeftTableData"
              size="small"
              tooltip-effect="dark"
              style="width: 100%"
              max-height="550px"
              highlight-current-row
              :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"
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                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="count"
                label="材料数量"
                align="center"
                width="80"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="pagination" v-if="leftTotal">
          <el-pagination
            background
            layout="total,sizes,prev,pager,next,jumper"
            :pager-count="5"
            :total="leftTotal"
            :current-page="leftCurrent"
            :page-size="leftSize"
            :page-sizes="pageSizes"
            @current-change="leftChangePagination"
            @size-change="leftChangeSize"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <div class="right">
      <el-card class="box-card" shadow="never">
        <div slot="header">
          <span>材料列表 </span>
        </div>
        <!-- 内容 -->
        <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="danger" @click="handleDelAll"
              >批量删除</el-button
            >
          </div>
          <div slot="right" class="flex">
            <el-select
              v-model="departmentRight"
              size="small"
              placeholder="选择部门"
            >
              <el-option
                v-for="item in deptList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-input
              size="small"
              v-model="rightSearch"
              class="ml10 mr10"
              placeholder="请输入材料名称搜索"
            ></el-input>
            <el-button size="small" type="primary" @click="getMaterialsList"
              >搜索</el-button
            >
            <el-button size="small" @click="rightReset">重置</el-button>
          </div>
        </TableHeader>
        <!-- 表格 -->
        <div class="table-content">
          <el-table
            ref="multipleTable"
            size="small"
            v-loading="loadingRight"
            :data="rightTableData"
            border
            tooltip-effect="dark"
            style="width: 100%"
            max-height="550px"
            :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"
              width="80"
            >
            </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 label="操作" align="center" width="180">
              <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"
                      :class="{ primary: recommendCount < 5 }"
                      >推荐</span
                    >
                  </div>
                  <span class="primary pointer" @click="handleEdit(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>
        <div class="pagination" v-if="rightTotal">
          <el-pagination
            background
            layout="total,sizes,prev,pager,next,jumper"
            :pager-count="5"
            :total="rightTotal"
            :current-page="rightCurrent"
            :page-size="rightSize"
            :page-sizes="pageSizes"
            @current-change="rightChangePagination"
            @size-change="rightChangeSize"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 新增材料 -->
    <AddMaterials
      ref="AddMaterials"
      :addMaterialsVisible.sync="addMaterialsVisible"
      :title="title"
      @addSuccess="getMaterialsList"
    ></AddMaterials>
    <!-- 预览材料 -->
    <PreviewMaterials
      :drawer.sync="drawer"
      :materialsInfo="materialsInfo"
    ></PreviewMaterials>
    <!-- 公共库 -->
    <CommonLib :depList="depList" :libVisible.sync="libVisible"></CommonLib>
  </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 { 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,
  },
  data() {
    return {
      siteId: local.getLocal("writeSiteId")
        ? local.getLocal("writeSiteId")
        : "",
      departmentLeft: "",
      departmentRight: "",
      leftSearch: "",
      rightSearch: "",
      loadingLeft: false,
      loadingRight: false,
      pageSizes: [10, 20, 30, 40, 50, 100, 200],
      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: [],
      recommendCount: "", // 推荐次数
    };
  },
  created() {
    this.getWriteMatterList();
    this.getMaterialsList();
  },
  computed: {
    ...mapGetters(["deptList"]),
  },
  methods: {
    // 系统事项列表
    async getWriteMatterList() {
      this.loadingLeft = true;
      let res = await getWriteMatterList({
        page: this.leftCurrent,
        size: this.leftSize,
        matterName: this.leftSearch,
        deptId: this.departmentLeft,
        siteId: this.siteId,
      });
      if (res.data.code === 1) {
        let { data, total } = res.data.data;
        this.LeftTableData = data;
        this.leftTotal = total;
        this.loadingLeft = false;
      }
    },

    // 获取材料列表
    async getMaterialsList() {
      this.loadingRight = true;
      let res = await getMaterialsList({
        page: this.rightCurrent,
        size: this.rightSize,
        materiaFullName: this.rightSearch,
        matterId: this.activeDep.id,
        deptId: this.departmentRight,
      });
      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;
      console.log(data);
      this.loadingRight = false;
    },

    // 左边重置
    leftReset() {
      this.departmentLeft = "";
      this.leftSearch = "";
      this.getWriteMatterList();
    },

    // 左边选择表格行
    handleCurrentChange(currentRow) {
      this.activeDep = currentRow;
      this.getMaterialsList();
    },

    // 取消材料全选
    setCurrent() {
      this.$refs.singleTable.setCurrentRow();
      this.activeDep = {};
      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.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);
    },

    // 右边重置
    rightReset() {
      this.departmentRight = "";
      this.rightSearch = "";
      this.getMaterialsList();
    },
    // 推荐
    async handleRecommend(id) {
      let res = await recommendMaterials({ id });
      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.rightSelectedRowKeys = [];
          }
        })
        .catch(() => {
          console.log("取消成功！");
        });
    },
    // 右边翻页
    rightChangePagination(cur) {
      this.rightCurrent = cur;
      this.getMaterialsList();
    },
    // 右边改变每页显示数量
    rightChangeSize(size) {
      this.rightSize = size;
      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: 40%;
  height: 100%;
}
.right {
  width: 60%;
  height: 100%;
}
</style>