<template>
  <div>
    <el-drawer size="70%" title="我是标题" :visible.sync="drawer">
      <span slot="title"
        >绑定样表（设备名称：{{ devInfo.deviceName || "--" }}）</span
      >
      <div class="main flex1 flex aic">
        <div class="left">
          <div class="header mb20">
            已选择事项<span class="header-count primary"
              >（已选择：事项3个 | 材料12个）</span
            >
          </div>
          <!-- 列表 -->
          <div class="matter-list">
            <div class="matter-item flex flexc jcc" v-for="v in 20" :key="v">
              <div class="matter-item-title">
                机动车登记证、行驶证核发机动车登记证、行驶证核发机动车登记证、行驶证核发机动车登记证、行驶证核发
              </div>
              <div class="matter-item-count">材料数量：6</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="title mb20">选择事项</div>
          <TableHeader>
            <div slot="left">
              <el-button
                size="small"
                plain
                type="primary"
                @click="handleJoinAll"
                >批量加入</el-button
              >
            </div>
            <div slot="right" class="flex">
              <el-select
                v-model="department"
                size="small"
                placeholder="选择部门"
                class="autoWidth"
                filterable
              >
                <template slot="prefix">
                  {{
                    (deptList.find((s) => s.deptNumber === department) || {})
                      .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="searchVal"
                style="width: 200px"
                class="ml10 mr10"
                placeholder="请输入事项全称搜索"
                @keyup.native.enter="handleSearch"
              ></el-input>
              <el-button size="small" type="primary" @click="handleSearch"
                >搜索</el-button
              >
              <el-button size="small" @click="handleReset">重置</el-button>
            </div>
          </TableHeader>
          <!-- 表格 -->
          <div class="table-content">
            <div @click.stop>
              <el-table
                ref="curTable"
                v-loading="loading"
                :data="tableData"
                size="small"
                tooltip-effect="dark"
                style="width: 100%"
                max-height="650px"
                border
                :row-key="(row) => row.id"
              >
                <el-table-column
                  type="selection"
                  reserve-selection
                  width="40"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  align="center"
                  :index="(index) => (current - 1) * size + index + 1"
                >
                </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
                  label="部门"
                  align="center"
                  width="180"
                  prop="deptName"
                >
                </el-table-column>
                <el-table-column
                  prop="datumCount"
                  label="材料数量"
                  align="center"
                  width="80"
                >
                </el-table-column>
                <el-table-column align="center" label="操作" width="80">
                  <template>
                    <span class="primary pointer">选择</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="pagination" v-if="total">
            <el-pagination
              background
              layout="total,sizes,prev,pager,next,jumper"
              :pager-count="5"
              :total="total"
              :current-page="current"
              :page-size="size"
              :page-sizes="pageSizes"
              @current-change="changePagination"
              @size-change="changeSize"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button type="primary" size="small" @click="handleClose"
          >确 定</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import TableHeader from "@/components/TableHeader.vue";
import { getWriteMatterList } from "@/api/matter";
import local from "@/utils/local";
export default {
  components: {
    TableHeader,
  },
  props: {
    matterDrawer: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      siteId: local.getLocal("writeSiteId")
        ? local.getLocal("writeSiteId")
        : "",
      department: "",
      searchVal: "",
      current: 1,
      size: 10,
      total: 0,
      tableData: [],
      pageSizes: [10, 20, 30, 40, 50, 100, 200],
      selectionKeys: [],
      devInfo: {},
    };
  },
  computed: {
    drawer: {
      get() {
        return this.matterDrawer;
      },
      set(val) {
        this.$emit("update:matterDrawer", val);
      },
    },
    ...mapGetters(["deptList"]),
  },
  created() {},
  methods: {
    getDevInfo(row) {
      this.devInfo = row;
      this.getWriteMatterList();
    },
    // 获取填单系统事项列表
    async getWriteMatterList() {
      this.loading = true;
      let res = await getWriteMatterList({
        page: this.current,
        size: this.size,
        matterFullName: `%${this.searchVal}%`,
        deptCode: this.department,
        siteId: this.siteId,
      });
      this.loading = false;
      if (res.data.code === 1) {
        let { data, total } = res.data.data;
        this.tableData = data;
        this.total = total;
        this.$refs.curTable.bodyWrapper.scrollTop = 0;
      }
    },
    // 搜索
    handleSearch() {
      this.current = 1;
      this.getWriteMatterList();
    },
    // 重置
    handleReset() {
      this.department = "";
      this.searchVal = "";
      this.current = 1;
      this.getWriteMatterList();
    },
    // 翻页
    changePagination(cur) {
      this.current = cur;
      this.getWriteMatterList();
    },
    // 改变每页显示数量
    changeSize(size) {
      this.size = size;
      this.getWriteMatterList();
    },
    // 表格批量选中
    handleSelectionChange(select) {
      this.selectionKeys = select.map((v) => v.id);
      console.log(select);
    },
    // 批量加入
    handleJoinAll() {
      if (!this.selectionKeys.length) {
        this.$message.warning("请先勾选数据");
        return;
      }
    },
    // 关闭弹窗
    handleClose() {
      this.$refs.curTable.clearSelection();
      this.department = "";
      this.searchVal = "";
      this.current = 1;
      this.size = 10;
      this.drawer = false;
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-drawer__body) {
  display: flex;
  flex-direction: column;
}
.main {
  width: 100%;
  overflow-y: auto;
}
.left {
  height: 100%;
  width: 35%;
  padding: 20px;
  border-right: 1px solid #ececec;
  overflow-y: auto;
  .matter-item {
    height: 60px;
    margin-bottom: 20px;
    padding: 0px 20px;
    border-left: 4px solid #06a16b;
    border-radius: 4px;
    font-size: 14px;
    background-color: #f0f9f6;
    .matter-item-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .matter-item-count {
      margin-top: 4px;
      color: #06a16b;
    }
  }
}
.right {
  height: 100%;
  width: 65%;
  padding: 20px;
  overflow-y: auto;
}
.footer {
  height: 50px;
  padding: 0px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #ececec;
}
.short {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.full-name {
  color: rgb(172, 170, 170);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>