<template>
  <div class="matter-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" type="primary" @click="handleAddMatter"
              >新增事项</el-button
            >
            <el-button size="small" type="danger" @click="handleDelAll"
              >批量删除</el-button
            >
          </div>
          <div slot="right" class="flex">
            <el-select
              v-model="departmentLeft"
              size="small"
              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"
              style="width: 200px"
              v-model="leftSearch"
              @keyup.native.enter="searchLeft"
              class="ml10 mr10"
              placeholder="请输入事项全称搜索"
            ></el-input>
            <el-button size="small" type="primary" @click="searchLeft"
              >搜 索</el-button
            >
            <el-button size="small" @click="leftReset">重 置</el-button>
          </div>
        </TableHeader>
        <!-- 表格 -->
        <div class="table-content">
          <el-table
            :data="LeftTableData"
            size="small"
            border
            v-loading="loadingLeft"
            tooltip-effect="dark"
            style="width: 100%"
            max-height="676px"
            :row-key="(row) => row.id"
            @selection-change="handleSelectionChange"
            ref="leftTable"
          >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <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="tid"
              label="事项来源"
              align="center"
              width="80"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.source === 1">手动添加</span>
                <span v-else-if="scope.row.source === 0">站点事项</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="total"
              label="填单次数"
              align="center"
              width="80"
            >
            </el-table-column>
            <el-table-column label="操作" align="center" width="160">
              <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="delete pointer" @click="handleDel(scope.row.id)"
                    >删除</span
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <Pagination
          :current="leftCurrent"
          :size="leftSize"
          :total="leftTotal"
          @currentChange="leftChangePagination"
          @sizeChange="leftChangeSize"
        ></Pagination>
      </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="handleAllJoin"
              >批量加入</el-button
            >
          </div>
          <div slot="right" class="flex">
            <el-select
              v-model="departmentRight"
              size="small"
              placeholder="选择部门"
              class="autoWidth"
              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
            size="small"
            ref="rightTable"
            :data="rightTableData"
            border
            v-loading="loadingRight"
            tooltip-effect="dark"
            style="width: 100%"
            max-height="676px"
            :row-key="(row) => row.id"
            @selection-change="handleSelectionChangeRight"
          >
            <el-table-column
              type="selection"
              reserve-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="matterName"
              show-overflow-tooltip
              label="事项名称"
            >
            </el-table-column>
            <el-table-column label="操作" align="center" width="160">
              <template slot-scope="scope">
                <span class="primary pointer" @click="handleJoin(scope.row.id)"
                  >加入</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <Pagination
          :current="rightCurrent"
          :size="rightSize"
          :total="rightTotal"
          @currentChange="rightChangePagination"
          @sizeChange="rightChangeSize"
        ></Pagination>
      </el-card>
    </div>
    <!-- 新增事项 -->
    <AddMatter
      ref="AddMatter"
      :addMatterVisible.sync="addMatterVisible"
      :departmentList="deptList"
      :title="title"
      @addMatter="getWriteMatterList"
    ></AddMatter>
  </div>
</template>

<script>
import TableHeader from "@/components/TableHeader.vue";
import AddMatter from "./modal/AddMatter.vue";
import Pagination from "@/components/Pagination.vue";
import { mapGetters } from "vuex";
import {
  // getMatterList,
  createMatter,
  getWriteMatterList,
  delMatter,
  recommendMatter,
  getMatterSubList,
} from "@/api/matter";
import local from "@/utils/local";
export default {
  components: {
    TableHeader,
    AddMatter,
    Pagination,
  },
  data() {
    return {
      siteId: local.getLocal("sampleSiteId")
        ? local.getLocal("sampleSiteId")
        : "",
      departmentLeft: "",
      departmentRight: "",
      loadingLeft: false,
      leftSearch: "",
      rightSearch: "",
      LeftTableData: [],
      leftSelectedRowKeys: [],
      leftCurrent: 1,
      leftSize: 10,
      leftTotal: 0,
      loadingRight: false,
      rightCurrent: 1,
      rightSize: 10,
      rightTotal: 0,
      rightTableData: [],
      rightSelectedRowKeys: [],
      addMatterVisible: false,
      title: "新增事项",
      recommendCount: "", // 推荐事项个数
    };
  },
  created() {
    this.getMatterSubList();
    this.getWriteMatterList();
  },
  computed: {
    ...mapGetters(["deptList"]),
  },
  methods: {
    // 获取一体化事项列表
    async getMatterSubList() {
      this.loadingRight = true;
      let res = await getMatterSubList({
        page: this.rightCurrent,
        size: this.rightSize,
        matterName: `%${this.rightSearch}%`,
        deptCode: this.departmentRight,
        siteId: this.siteId,
      });
      this.loadingRight = false;
      if (res.data.code === 1) {
        let { total, data } = res.data.data;
        this.rightTableData = data;
        this.rightTotal = total;
        this.$refs.rightTable.bodyWrapper.scrollTop = 0;
      }
    },

    // 获取样表系统事项列表
    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, recommendCount } = res.data.data;
        if (!data.length && this.leftCurrent > 1) {
          this.leftCurrent -= 1;
          this.getWriteMatterList();
        }
        this.LeftTableData = data;
        this.leftTotal = total;
        this.recommendCount = recommendCount;
        this.$refs.leftTable.bodyWrapper.scrollTop = 0;
      }
    },
    // 新增事项
    handleAddMatter() {
      this.title = "新增事项";
      this.$refs.AddMatter.onAdd();
      this.addMatterVisible = true;
    },
    // 编辑事项
    handleEdit(row) {
      this.title = "新增事项";
      this.$refs.AddMatter.onEdit(row);
      this.addMatterVisible = true;
    },
    // 推荐
    async handleRecommend(id) {
      // if (this.recommendCount > 5) {
      //   this.$message.warning("最多只能推荐5条事项");
      //   return;
      // }
      let res = await recommendMatter({ id });
      let { code, msg } = res.data;
      if (code === 1) {
        this.$message.success(msg);
        this.getWriteMatterList();
      }
    },
    // 批量删除
    handleDelAll() {
      if (!this.leftSelectedRowKeys.length) {
        this.$message.warning("请先勾选数据");
        return;
      }
      let ids = this.leftSelectedRowKeys.map((v) => v.id).join(",");
      this.handleDel(ids);
    },
    // 左边搜索
    searchLeft() {
      this.leftCurrent = 1;
      this.$refs.leftTable.clearSelection();
      this.getWriteMatterList();
    },
    // 左边重置
    leftReset() {
      this.departmentLeft = "";
      this.leftSearch = "";
      this.leftCurrent = 1;
      this.$refs.leftTable.clearSelection();
      this.getWriteMatterList();
    },
    // 左边勾选
    handleSelectionChange(selection) {
      this.leftSelectedRowKeys = selection;
    },
    // 左边翻页
    leftChangePagination(cur) {
      this.leftCurrent = cur;
      this.getWriteMatterList();
    },
    // 左边改变每页显示数量
    leftChangeSize(size) {
      this.leftSize = size;
      this.getWriteMatterList();
    },
    // 左边删除
    handleDel(id) {
      this.$confirm(
        "此操作将删除该事项及该事项下的表单，是否继续？",
        "系统提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-custom-cancel",
          type: "warning",
        }
      )
        .then(async () => {
          let res = await delMatter({ id });
          let { code, msg } = res.data;
          if (code === 1) {
            this.$message.success(msg);
            this.$refs.leftTable.clearSelection();
            this.leftSelectedRowKeys = [];
            this.getWriteMatterList();
            this.getMatterSubList();
          }
        })
        .catch(() => {
          console.log("取消成功！");
        });
    },
    // 右边搜索
    handleSearchRight() {
      this.rightCurrent = 1;
      this.$refs.rightTable.clearSelection();
      this.getMatterSubList();
    },
    // 右边重置
    rightReset() {
      this.rightSearch = "";
      this.departmentRight = "";
      this.rightCurrent = 1;
      this.$refs.rightTable.clearSelection();
      this.getMatterSubList();
    },
    // 右边勾选
    handleSelectionChangeRight(select) {
      this.rightSelectedRowKeys = select;
    },
    // 右边加入
    async handleJoin(id) {
      let res = await createMatter({ ids: id, siteId: this.siteId });
      let { code, msg } = res.data;
      if (code === 1) {
        this.$message.success(msg);
        this.rightSelectedRowKeys = [];
        this.$refs.rightTable.clearSelection();
        this.getMatterSubList();
        this.getWriteMatterList();
      }
    },
    // 右边翻页
    rightChangePagination(cur) {
      this.rightCurrent = cur;
      this.getMatterSubList();
    },
    // 右边改变每页显示数量
    rightChangeSize(size) {
      this.rightSize = size;
      this.getMatterSubList();
    },
    // 批量加入
    handleAllJoin() {
      if (!this.rightSelectedRowKeys.length) {
        this.$message.warning("请先勾选数据");
        return;
      }
      let ids = this.rightSelectedRowKeys.map((v) => v.id).join(",");
      this.handleJoin(ids);
    },
  },
};
</script>

<style lang="less" scoped>
.matter-manage {
  width: 100%;
  min-height: 100%;
  display: flex;
  .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;
// }
.left {
  width: 50%;
  height: auto;
}
.right {
  width: 50%;
  height: auto;
}
</style>
