<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"
              >（已选择：事项{{ devMatterList.length }}个）</span
            >
          </div>
          <!-- 列表 -->
          <div class="matter-list">
            <div
              class="matter-item flex flexc jcc"
              v-for="v in devMatterList"
              :key="v.id"
            >
              <div class="flex aic jcb">
                <el-tooltip :content="v.matterName" placement="top">
                  <p class="matter-item-title flex1">
                    {{ v.matterName }}
                  </p>
                </el-tooltip>
                <div>
                  <span
                    class="primary pointer"
                    v-if="!v.isRecommend"
                    @click="changeRecommend(v.id, 1)"
                  >
                    推荐
                  </span>
                  <span
                    class="green pointer"
                    v-else
                    @click="changeRecommend(v.id, 0)"
                  >
                    取消推荐
                  </span>

                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="删除"
                    placement="top"
                  >
                    <i
                      class="el-icon-delete delete"
                      @click="handleDel(v.id)"
                    ></i>
                  </el-tooltip>
                </div>
              </div>
              <div class="matter-item-count">
                材料数量：{{ v.matterDatumList && v.matterDatumList.length }}
              </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="630px"
                border
                :row-key="(row) => row.id"
                @selection-change="handleSelectionChange"
              >
                <!-- <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 slot-scope="scope">
                    <span class="primary pointer" @click="handleJoin(scope.row)"
                      >选择</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <Pagination
            :total="total"
            :current="current"
            :size="size"
            @currentChange="changePagination"
            @sizeChange="changeSize"
          ></Pagination>
        </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 Pagination from "@/components/Pagination.vue";
import { getWriteMatterList } from "@/api/matter";
import {
  getDeviceMatterList,
  saveDeviceMatter,
  delDeviceMatter,
} from "@/api/device";
import local from "@/utils/local";
export default {
  components: {
    TableHeader,
    Pagination,
  },
  props: {
    matterDrawer: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      siteId: local.getLocal("sampleSiteId")
        ? local.getLocal("sampleSiteId")
        : "",
      department: "",
      searchVal: "",
      current: 1,
      size: 10,
      total: 0,
      tableData: [],
      devMatterList: [], // 设备事项列表
      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();
      this.getDeviceMatterList(row.id);
    },
    // 获取设备事项列表
    async getDeviceMatterList(deviceId) {
      let res = await getDeviceMatterList({
        page: 1,
        size: -1,
        siteId: this.siteId,
        deviceId,
      });
      if (res.data.code == 1) {
        let { data } = res.data.data;
        this.devMatterList = data;
      }
    },
    // 获取填单系统事项列表
    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.$refs.curTable.clearSelection();
      this.getWriteMatterList();
    },
    // 重置
    handleReset() {
      this.department = "";
      this.searchVal = "";
      this.current = 1;
      this.$refs.curTable.clearSelection();
      this.getWriteMatterList();
    },
    // 翻页
    changePagination(cur) {
      this.current = cur;
      this.getWriteMatterList();
    },
    // 改变每页显示数量
    changeSize(size) {
      this.size = size;
      this.getWriteMatterList();
    },
    // 表格批量选中
    handleSelectionChange(select) {
      this.selectionKeys = select;
    },
    // 批量加入
    async handleJoinAll() {
      if (!this.selectionKeys.length) {
        this.$message.warning("请先勾选数据");
        return;
      }
      let arr = this.selectionKeys.map((v) => {
        return {
          siteId: v.siteId,
          deviceId: this.devInfo.id,
          matterId: v.id,
          sort: 0,
        };
      });
      let res = await saveDeviceMatter(arr);
      let { code, msg } = res.data;
      if (code == 1) {
        this.$message.success(msg);
        this.getDeviceMatterList();
      }
    },
    // 加入
    async handleJoin(row) {
      let obj = {
        siteId: row.siteId,
        deviceId: this.devInfo.id,
        matterId: row.id,
        sort: 0,
      };
      let res = await saveDeviceMatter(obj);
      let { code, msg } = res.data;
      if (code == 1) {
        this.$message.success(msg);
        this.$refs.curTable.clearSelection();
        this.getDeviceMatterList(this.devInfo.id);
      }
    },
    // 切换推荐
    async changeRecommend(id, isRecommend) {
      let obj = {
        id,
        isRecommend,
      };
      let res = await saveDeviceMatter(obj);
      let { code, msg } = res.data;
      if (code == 1) {
        this.$message.success(msg);
        this.getDeviceMatterList(this.devInfo.id);
      }
    },
    // 删除设备事项
    handleDel(id) {
      this.$confirm("此操作将删除该关联事项，是否继续?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "btn-custom-cancel",
        type: "warning",
      })
        .then(async () => {
          let res = await delDeviceMatter({ id });
          let { code, msg } = res.data;
          if (code == 1) {
            this.$message.success(msg);
            this.getDeviceMatterList(this.devInfo.id);
          }
        })
        .catch(() => {
          console.log("取消成功！");
        });
    },
    // 关闭弹窗
    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;
  .el-icon-delete {
    padding: 6px;
    font-size: 16px;
    cursor: pointer;
  }
  .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;
      cursor: default;
    }
    .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>
