<template>
  <div class="matter-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="handleAddMatter"
              >新增事项</el-button
            >
            <el-button size="small" type="danger" @click="handleDelAll"
              >批量删除</el-button
            >
          </div>
          <div slot="right" class="flex">
            <el-select
              v-model="sampleformMatterTable.searchForm.deptCode"
              size="small"
              placeholder="选择部门"
              style="width: 120px"
              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="sampleformMatterTable.searchForm.matterFullName"
              class="ml10 mr10"
              placeholder="请输入事项全称搜索"
              @keyup.native.enter="searchLeft"
            ></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">
          <y-table
            :data="sampleformMatterTable.data"
            :max-height="650"
            :column="sampleformMatterTable.columns"
            size="small"
            border
            :loading="sampleformMatterTable.loading"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            ref="leftTable"
          >
            <template slot="matterName" slot-scope="scope">
              <p class="short">{{ scope.row.matterName }}</p>
              <p class="full-name">事项全称：{{ scope.row.matterFullName }}</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="delete pointer" @click="handleDel(scope.row.id)"
                  >删除</span
                >
              </div>
            </template>
          </y-table>
        </div>
        <y-pagination
          :page.sync="sampleformMatterTable.page"
          :pageSize.sync="sampleformMatterTable.size"
          :total="sampleformMatterTable.total"
          @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="handleAllJoin"
              >批量加入</el-button
            >
          </div>
          <div slot="right" class="flex">
            <el-select
              v-model="siteMatterTable.searchForm.deptCode"
              size="small"
              placeholder="选择部门"
              style="width: 120px"
              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="siteMatterTable.searchForm.matterName"
              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
            :max-height="650"
            :data="siteMatterTable.data"
            :column="siteMatterTable.columns"
            size="small"
            border
            :loading="siteMatterTable.loading"
            tooltip-effect="dark"
            @selection-change="handleSelectionChangeRight"
            ref="rightTable"
          >
            <template slot="source" slot-scope="scope">
              <el-tag size="small" type="success" v-if="scope.row.source == 0"
                >一体化添加</el-tag
              >
              <el-tag size="small" v-else>自建事项</el-tag>
            </template>
            <template slot="action" slot-scope="scope">
              <span class="primary pointer" @click="handleJoin(scope.row.id)"
                >加入</span
              >
            </template>
          </y-table>
        </div>
        <y-pagination
          :page.sync="siteMatterTable.page"
          :pageSize.sync="siteMatterTable.size"
          :total="siteMatterTable.total"
          @change="getMatterSubList"
        ></y-pagination>
      </div>
      <!-- 新增事项 -->
      <AddMatter
        ref="AddMatter"
        :addMatterVisible.sync="addMatterVisible"
        :departmentList="deptList"
        :title="title"
        @addMatter="getSampleformMatterList"
      ></AddMatter>
    </div>
  </div>
</template>

<script>
import TableHeader from "@/components/TableHeader.vue";
import AddMatter from "./modal/AddMatter.vue";
import { mapGetters } from "vuex";
import {
  createMatter,
  getSampleformMatterList,
  delMatter,
  recommendMatter,
  getMatterSubList,
} from "@/api/matter";
import local from "@/utils/local";
export default {
  components: {
    TableHeader,
    AddMatter,
  },
  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: "selection",
            width: "55",
            align: "center",
            reserveSelection: true,
          },
          {
            label: "序号",
            type: "index",
            width: "55",
            align: "center",
            index: (index) => {
              return (
                (this.sampleformMatterTable.page - 1) *
                  this.sampleformMatterTable.size +
                index +
                1
              );
            },
          },
          {
            label: "部门名称",
            prop: "deptName",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            label: "事项名称",
            slot: true,
            prop: "matterName",
            showOverflowTooltip: true,
          },

          {
            label: "事项来源",
            prop: "source",
            align: "center",
            width: "100",
            formatter: (row) => {
              return row.source === 0 ? "站点事项" : "手动添加";
            },
          },
          // {
          //   label: "填单次数",
          //   prop: "total",
          //   width: "100",
          //   align: "center",
          // },

          {
            label: "操作",
            slot: true,
            prop: "action",
            align: "center",
            width: "160",
          },
        ],
      },
      // 站点事项表格
      siteMatterTable: {
        loading: false,
        page: 1,
        size: 10,
        total: 0,
        data: [],
        selectionKeys: [],
        searchForm: {
          matterName: "",
          deptCode: "",
        },
        columns: [
          {
            label: "全选",
            type: "selection",
            width: "55",
            align: "center",
            reserveSelection: true,
          },
          {
            label: "序号",
            type: "index",
            width: "55",
            align: "center",
            index: (index) => {
              return (
                (this.siteMatterTable.page - 1) * this.siteMatterTable.size +
                index +
                1
              );
            },
          },
          {
            label: "部门名称",
            prop: "deptName",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            label: "事项名称",
            prop: "matterName",
            showOverflowTooltip: true,
          },
          {
            label: "事项来源",
            slot: true,
            prop: "source",
            align: "center",
          },

          {
            label: "操作",
            slot: true,
            prop: "action",
            align: "center",
            width: "160",
          },
        ],
      },

      addMatterVisible: false,
      title: "新增事项",
      recommendCount: "", // 推荐事项个数
    };
  },
  created() {
    this.getMatterSubList();
    this.getSampleformMatterList();
  },
  computed: {
    ...mapGetters(["deptList"]),
  },
  methods: {
    // 获取一体化事项列表
    async getMatterSubList() {
      this.siteMatterTable.loading = true;
      let res = await getMatterSubList({
        page: this.siteMatterTable.page,
        size: this.siteMatterTable.size,
        matterName: `%${this.siteMatterTable.searchForm.matterName}%`,
        deptCode: this.siteMatterTable.searchForm.deptCode,
        siteId: this.siteId,
      });
      this.siteMatterTable.loading = false;
      if (res.data.code === 1) {
        let { total, data } = res.data.data;
        this.siteMatterTable.data = data;
        this.siteMatterTable.total = total;
      }
    },

    // 获取样表系统事项列表
    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, recommendCount } = res.data.data;
        if (!data.length && this.sampleformMatterTable.page > 1) {
          this.sampleformMatterTable.page -= 1;
          this.getSampleformMatterList();
        }
        this.sampleformMatterTable.data = data;
        this.sampleformMatterTable.total = total;
        this.recommendCount = recommendCount;
      }
    },
    // 新增事项
    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.getSampleformMatterList();
      }
    },
    // 批量删除
    handleDelAll() {
      if (!this.sampleformMatterTable.selectionKeys.length) {
        this.$message.warning("请先勾选数据");
        return;
      }
      let ids = this.sampleformMatterTable.selectionKeys
        .map((v) => v.id)
        .join(",");
      this.handleDel(ids);
    },
    // 左边搜索
    searchLeft() {
      this.sampleformMatterTable.page = 1;
      this.$refs.leftTable.clearSelection();
      this.getSampleformMatterList();
    },
    // 左边重置
    leftReset() {
      this.sampleformMatterTable.searchForm.deptCode = "";
      this.sampleformMatterTable.searchForm.matterFullName = "";
      this.sampleformMatterTable.page = 1;
      this.$refs.leftTable.clearSelection();
      this.getSampleformMatterList();
    },
    // 左边勾选
    handleSelectionChange(selection) {
      this.sampleformMatterTable.selectionKeys = selection;
    },

    // 左边删除
    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.getSampleformMatterList();
            this.getMatterSubList();
          }
        })
        .catch(() => {
          console.log("取消成功！");
        });
    },
    // 右边搜索
    handleSearchRight() {
      this.siteMatterTable.page = 1;
      this.$refs.rightTable.clearSelection();
      this.getMatterSubList();
    },
    // 右边重置
    rightReset() {
      this.siteMatterTable.searchForm.matterName = "";
      this.siteMatterTable.searchForm.deptCode = "";
      this.siteMatterTable.page = 1;
      this.$refs.rightTable.clearSelection();
      this.getMatterSubList();
    },
    // 右边勾选
    handleSelectionChangeRight(select) {
      this.siteMatterTable.selectionKeys = 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.$refs.rightTable.clearSelection();
        this.getSampleformMatterList();
        this.getMatterSubList();
      }
    },

    // 批量加入
    handleAllJoin() {
      if (!this.siteMatterTable.selectionKeys.length) {
        this.$message.warning("请先勾选数据");
        return;
      }
      let ids = this.siteMatterTable.selectionKeys.map((v) => v.id).join(",");
      this.handleJoin(ids);
    },
  },
};
</script>

<style lang="less" scoped>
.matter-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;
// }
.left {
  width: 49%;
  border-radius: 4px;
}
.right {
  width: 49%;
  border-radius: 4px;
}
</style>
