<template>
  <div class="app-container">
    <div v-if="isShowUpdate" class="container">
      <addModal ref="addModel" @success="modalSuccess" @back="back" />
    </div>
    <div v-show="!isShowUpdate">
      <div class="search-layout">
        <el-button
          class="filter-item"
          style="margin-right: 0"
          type="primary"
          icon="el-icon-plus"
          @click="handleCreate"
        >
          添加标题须知
        </el-button>
        <el-input
          clearable
          v-model="form.handleProveTitle"
          placeholder="请输入标题"
          class="input"
        />
        <el-button
          class="filter-item"
          type="primary"
          style="margin-left: 10px"
          icon="el-icon-search"
          @click="query"
        >
          搜索
        </el-button>
      </div>

      <!-- 主体表格 -->
      <el-table
        :data="tableData"
        border
        fit
        highlight-current-row
        class="table"
        v-loading="loading"
      >
        <el-table-column align="center" width="80" label="序号">
          <template v-slot="scope">
            {{
              (pagination.current - 1) * pagination.pageSize +
              (scope.$index + 1)
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="handleProveTitle" label="标题">
        </el-table-column>
        <el-table-column align="center" prop="handleProveNotice" label="须知">
          <template v-slot="{ row }">
            <!-- <div v-html="row.handleProveNotice"></div> -->
            <el-popover width="500" trigger="click">
              <div v-html="row.handleProveNotice"></div>
              <div
                slot="reference"
                class="handle-prove-notice"
                v-html="row.handleProveNotice"
              ></div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column align="center" label="操作区" width="150">
          <template v-slot="{ row, $index }">
            <el-button type="primary" size="mini" @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(row, $index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="pagination.total"
        :page.sync="pagination.current"
        :limit.sync="pagination.pageSize"
        :page-sizes="pagination.pageSizeOptions"
        :layout="pagination.layout"
        @pagination="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
import AddModal from "./modal/AddModal.vue";
import { getList, deleteTitleList } from "@/api/titlelib";
import tableMixins from "@/mixins/tableMixins";
import Pagination from "@/components/Pagination";

export default {
  components: { Pagination, AddModal },
  mixins: [tableMixins],
  data() {
    return {
      form: {},
      isShowUpdate: false,
      loading: false,
    };
  },
  methods: {
    initData() {
      this.getTableList();
    },
    // 获取表格数据
    async getTableList() {
      this.loading = true;
      const result = await getList(this.getFilterParams());
      this.setDataList(result.data);
      this.loading = false;
    },
    // 获取筛选信息
    query() {
      this.clearPageParams();
      this.getTableList();
    },
    transformFilterForm() {
      return {
        handleProveTitle: this.form.handleProveTitle || null,
      };
    },
    modalSuccess() {
      this.getTableList();
    },
    // 添加配置
    handleCreate() {
      this.isShowUpdate = true;
      this.$nextTick(() => {
        this.$refs.addModel.open();
      });
    },
    // 编辑配置
    handleUpdate(row) {
      this.isShowUpdate = true;
      this.$nextTick(() => {
        this.$refs.addModel.open(row);
      });
    },
    back() {
      this.isShowUpdate = false;
      // this.query()
    },
    submit() {},
    // 删除
    handleDelete(row, index) {
      const that = this;
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false,
        type: "warning",
        beforeClose: async (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.cancelButtonLoading = true;
            instance.confirmButtonText = "提交中...";
            try {
              deleteTitleList(row.id).then(() => {
                that.getTableList();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              });
            } catch (e) {
            } finally {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
                instance.cancelButtonLoading = false;
              }, 300);
            }
          } else {
            done();
          }
        },
      })
        .then(() => {})
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.search-layout {
  margin-bottom: 20px;
  margin-top: -10px;

  .filter-item {
    margin-right: 20px;
    margin-top: 10px;
  }

  .input {
    width: 200px;
    margin-left: 10px;
  }
}

.container {
  padding: 16px;
}
.handle-prove-notice {
  width: 100%;
  overflow: hidden;
  max-height: 70px;
  text-overflow: ellipsis;
  /* 弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  -webkit-line-clamp: 3;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
  cursor: pointer;
}
</style>
