<template>
  <div class="data-list">
    <el-table
      :data="dataList"
      header-row-class-name="headerBg"
      empty-text="没有项目信息"
      :max-height="tableMaxHeight"
      align="center"
    >
      <el-table-column prop="dcb_id" label="ID"  width="80" />
      <!--  <el-table-column prop="code" label="引用名" align="center" width="180"/> -->
      <el-table-column prop="dcb_name" label="文档块名称"  />
      <el-table-column prop="category_id" label="所属分类" >
        <template #default="scope">
          {{ getCategoryName(scope.row.category_id) }}
        </template>
      </el-table-column>
      <!--     <el-table-column prop="create_time" label="创建时间" align="center" /> -->
      <el-table-column prop="dcb_share" label="共享类型" align="center">
        <template #default="scope">
          <div v-if="scope.row.dcb_share == 1">官方</div>
          <div v-if="scope.row.dcb_share == 2">私有</div>
          <div v-if="scope.row.dcb_share == 3">共享</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="300">
        <template #default="scope">
          <div class="btns">
            <el-button
              type="primary"
              size="small"
              @click="btnEdit(scope.row.dcb_id)"
              ><svg-icon icon-class="edit" />编辑模块</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="EditorInfo(scope.row)"
              ><svg-icon icon-class="edit" />修改信息</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="btnDelete(scope.row.dcb_id)"
              ><svg-icon icon-class="delete" />删除</el-button
            ><!-- v-if="scope.row.auth.delete" -->
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="page-info">
      <el-pagination
        :currentPage="queryForm.page"
        :page-size="queryForm.pageSize"
        :total="recordCount"
        :page-count="pageTotal"
        background
        layout="prev, pager, next"
        @current-change="ChangePage"
      >
      </el-pagination>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      append-to-body
      v-el-drag-dialog
      :close-on-click-modal="false"
      width="30%"
      custom-class="prod-verify"
      title="修改模块信息"
    >
      <el-form
        :model="moduleForm"
        :rules="moduleRules"
        ref="moduleRef"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="文档块名称:" prop="dcb_name">
          <el-input
            style="width: 220px"
            v-model="moduleForm.dcb_name"
            placeholder="请选择文档块名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="共享类型:" prop="dcb_share">
          <!--  <el-cascader
            v-model="moduleForm.category_id"
            clearable
            :options="categoryList"
            :props="props"
            :show-all-levels="false"
            @change="onChangeCategory"
            placeholder="请选择模块分类"
          /> -->
          <el-select
            v-model="moduleForm.dcb_share"
            clearable
            class="m-2"
            placeholder="请选择共享类型"
            size="large"
          >
            <el-option
              v-for="item in dcbShareList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="模块分类:" prop="category_id">
          <el-select
            v-model="moduleForm.category_id"
            class="m-2"
            placeholder="请选择模块分类"
            size="large"
          >
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeModule">取 消</el-button>
        <el-button type="primary" @click="submitModule">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import {
  deleteTemplate,
  pageTemplate,
  getAllList,
  updateTemplate,
  treeCategory,
} from "@/api/template";
import dataInfo from "./dataInfo.vue";
import elDragDialog from "@/directive/el-drag-dialog";
/* import Editor from "@/views/document/com/editor.vue"; */
export default {
  components: {
    dataInfo,
  },
  directives: { elDragDialog },
  props: {
    queryForm: {
      type: Object,
      default: () => {
        return {
          page: 1,
          pageSize: 10,
          name: "",
          sign: "",
        };
      },
    },
  },
  watch: {
    queryForm: {
      handler: function (val) {
        this.search();
      },
      // immediate: true,//立即执行
      deep: true,
    },
  },
  computed: {
    ...mapGetters(["roleInfo", "authList"]),
  },
  data() {
    return {
      dialogVisible: false, //控制产品审核
      currentDataId: 0,
      recordCount: 0,
      pageTotal: 1,
      dataList: [],
      currentData: {},
      dialogVisible: false,
      moduleForm: {
        name: "",
        dcb_share: "",
        category_id: "",
      },
      moduleRules: {
        dcb_name: [
          { required: true, message: "请输入文档块名称", trigger: "blur" },
        ],
        dcb_share: [
          { required: true, message: "请选择共享类型", trigger: "change" },
        ],
        category_id: [
          { required: true, message: "请选择模块分类", trigger: "change" },
        ],
      },
      props: {
        value: "id",
        label: "name",
        children: "children",
        checkStrictly: true,
      },
      statusOptions: [
        {
          value: "",
          label: "请选择状态",
        },
        {
          value: 5,
          label: "启用",
        },
        {
          value: 6,
          label: "停用",
        },
      ],
      categoryList: [],
      tableMaxHeight: 500, // Add this line

      /* 共享类型 */
      dcbShareList: [
        {
          value: 1,
          label: "官方",
        },
        {
          value: 2,
          label: "私有",
        },
        {
          value: 3,
          label: "共享",
        },
      ],
    };
  },
  mounted() {
    this.search();
    this.initCategoryList();
  },
  methods: {
    /* 所属分类 */
    getCategoryName(categoryId) {
      const category = this.categoryList.find((item) => item.id === categoryId);
      return category ? category.name : "";
    },
    refreshList() {
      this.search();
    },
    /* 选择模块分类 */
    onChangeCategory() {},
    /* 取消修改 */
    closeModule() {
      this.dialogVisible = false;
      this.moduleForm = {
        dcb_name: "",
        dcb_share: "",
        category_id: "",
      };
    },
    /* 确定修改模块*/
    submitModule() {
      this.$refs.moduleRef.validate((valid) => {
        if (valid) {
          updateTemplate(this.moduleForm).then((res) => {
            if (res.code !== 200) return;
            this.$message.success("修改成功！");
            this.dialogVisible = false;
            this.moduleForm = {
              dcb_name: "",
              dcb_share: "",
              category_id: "",
            };
            //this.onSubmit()
            // 修改这里：直接调用 search 方法而不是 onSubmit
            this.search();
          });
        }
      });
    },
    /* 获取分类 */
    async initCategoryList() {
      let _this = this;
      let res = await treeCategory();
      this.categoryList = res.data; //this.processDataForCascader(res.data);
    },

    EditorInfo(item) {
      this.dialogVisible = true;
      this.moduleForm = item;
    },
    checkAuth(path) {
      if (this.roleInfo.is_admin == 1) {
        return true;
      }
      let auth = this.authList.filter((o) => o.type == 999 && o.path == path);
      if (auth.length > 0) {
        return true;
      }
      return false;
    },

    btnDelete(e) {
      let _this = this;
      let par = {
        id: e,
      };
      _this
        .$confirm("您是否确认删除该记录？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then((res) => {
          console.log(e);
          // console.log("AAA")
          deleteTemplate(e).then((res) => {
            _this.search();
          });
        })
        .catch(() => {});
    },

    searchData() {
      let _this = this;
      _this.dialogVisible = false;
      _this.search();
    },

    //编辑
    btnEdit(e) {
      this.$router.push(
        "/document/system/document/create?templateId=" + e + "&type=module"
      );
      /*  let _this = this;
      var a = document.createElement("a");
      a.href = "#/document/create?templateId=" + e + "&type=module";
      a.target = "_blank";
      a.click(); */
      //this.$router.push({path:"/document/create",query:{templateId:e}})
    },

    handleClose() {
      let _this = this;
      _this.currentDataId = 0;
      _this.dialogVisible = false;
      _this.search();
    },

    //搜索
    search() {
      let _this = this;
      pageTemplate(_this.queryForm).then((res) => {
        if (!res) return;
        _this.dataList = res.data.dataList;
        _this.recordCount = res.data.totalRecord;
        _this.pageTotal = res.data.totalPage;
      });
    },
    //修改分页
    ChangePage(e) {
      let _this = this;
      _this.queryForm.page = e;
      _this.search();
    },
  },
};
</script>

<style lang="scss">
@import "./dataList.scss";
</style>
