<template>
  <div class="data-list">
    <el-table
      :data="dataList"
      style="width: 100%"
      header-row-class-name="headerBg"
      empty-text="没有项目信息"
    >
      <el-table-column prop="id" label="ID" align="center" width="80" />
      <!--  <el-table-column prop="code" label="引用名" align="center" width="180"/> -->
      <el-table-column prop="name" label="模块名称" align="left" />
      <el-table-column prop="type_name" label="所属分类" align="left" />
      <el-table-column prop="create_time" label="创建时间" align="center" />
      <el-table-column prop="status" label="模板状态" align="center">
        <template #default="scope">
          <div v-if="scope.row.status == 5">启用</div>
          <div v-if="scope.row.status == 6">停用</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template #default="scope">
          <div class="btns">
            <el-button
              type="primary"
              size="small"
              @click="btnEdit(scope.row.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.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
        v-model: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="name">
          <el-input
            style="width: 220px"
            v-model="moduleForm.name"
            placeholder="请选择模块名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属分类:" prop="category_id">
          <el-select
            v-model="moduleForm.category_id"
            clearable
            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-item label="模块状态:" prop="status">
          <el-select
            v-model="moduleForm.status"
            class="m-2"
            placeholder="请选择模板块态"
            size="large"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </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 } 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: "",
        status: 5,
        category_id: "",
      },
      moduleRules: {
        name: [{ required: true, message: "请输模块名称", trigger: "blur" }],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
        category_id: [
          { required: true, message: "请选择分类", trigger: "change" },
        ],
      },
      statusOptions: [
        {
          value: "",
          label: "请选择状态",
        },
        {
          value: 5,
          label: "启用",
        },
        {
          value: 6,
          label: "停用",
        },
      ],
    };
  },
  mounted() {
    this.search();
    this.initCategoryList();
  },
  methods: {
     /* 取消修改 */
     closeModule() {
      this.dialogVisible = false;
      this.moduleForm = {
        name: "",
        status: 5,
        category_id: "",
      };
    },
    /* 确定修改模块*/
    submitModule() {
      this.$refs.moduleRef.validate((valid) => {
        if (valid) {
          updateTemplate(this.moduleForm).then((res) => {
            if (res.status !== 200) return;
            this.$message.success("修改成功！");
            this.dialogVisible = false;
            this.moduleForm = {
              name: "",
              status: 5,
              category_id: "",
            };
            this.onSubmit()
          });
        }
      });
    },
    /* 获取分类 */
    async initCategoryList() {
      let _this = this;
      let res = await getAllList();
      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("AAA")
          deleteTemplate(par).then((res) => {
            _this.search();
          });
        })
        .catch(() => {});
    },

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

    //编辑
    btnEdit(e) {
      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>
