<template>
  <!-- 顶部按钮区域 -->
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="searchBtn">
        <Button
          type="success"
          icon="md-add-circle"
          class="twoWord"
          @click="add()"
          >{{ $t("1002") }}</Button
        >
        <Button
          type="warning"
          class="twoWord"
          @click="edit()"
          icon="ios-create-outline"
          >{{ $t("1003") }}</Button
        >
        <Button
          type="error"
          icon="md-close-circle"
          class="twoWord"
          @click="Delete()"
          >{{ $t("1004") }}</Button
        >
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        highlight-row
        class="tableClass"
        :data="tableData2"
        :columns="tableColumns1"
        @on-current-change="handleRowChange"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            show-elevator
            show-sizer
            show-total
            @on-change="changePage"
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10, 20, 30, 40, 100]"
          ></Page>
        </div>
      </div>

      <!-- 添加/修改 弹框 -->
      <Modal
        class="newModalClass"
        v-model="showModal"
        :styles="{ width: '650px' }"
      >
        <p slot="header">
          <span v-if="type == 1">{{ $t("1002") }}</span>
          <span v-if="type == 2">{{ $t("1003") }}</span>
        </p>
        <!-- 文档类型 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(900754) }}：
          </label>
          <Input
            clearable
            type="text"
            v-model="addobj.addDocumentType"
            class="searchInput"
          />
        </div>
        <!-- 审核流程 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(960580) }}：
          </label>
          <Select
            clearable
            label-in-value
            id="section_id"
            class="searchSelect"
            v-model="addobj.addAssessmentType"
          >
            <Option
              v-for="item in AssessmentList"
              :value="item.id"
              :key="item.id"
              >{{ item.title }}</Option
            >
          </Select>
        </div>
        <!-- 创建权限 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(700123) }}：
          </label>
          <Select
            multiple
            clearable
            filterable
            label-in-value
            class="searchSelect nowropStyle"
            v-model="addobj.addPrivilege"
          >
            <Option
              v-for="item in createUserList"
              :value="item.id"
              :key="item.id"
              >{{ item.title }}</Option
            >
          </Select>
        </div>
        <!-- 签收管理 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(960583) }}：
          </label>
          <Select
            clearable
            label-in-value
            id="section_id"
            class="searchSelect"
            v-model="addobj.addSignManage"
          >
            <Option
              v-for="item in AllUserList"
              :value="item.id"
              :key="item.id"
              >{{ item.title }}</Option
            >
          </Select>
        </div>
        <!-- 单选框 -->
        <div class="document">
          <Checkbox v-model="single">
            <b>{{ $t("400070") }}</b>
          </Checkbox>
        </div>
        <!-- 底部按钮区域 -->
        <div slot="footer">
          <Button
            type="text"
            size="large"
            @click="cancel()"
            v-text="$t(1033)"
            >{{ $t("1033") }}</Button
          >
          <Button
            type="primary"
            v-if="type == 1"
            size="large"
            @click="asyncConfirm(1)"
            v-text="$t(1011)"
            >{{ $t("1011") }}</Button
          >
          <Button
            type="primary"
            v-if="type == 2"
            size="large"
            @click="asyncConfirm(2)"
            v-text="$t(1011)"
            >{{ $t("1011") }}</Button
          >
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
export default {
  data() {
    return {
      loading: false,
      single: false, // 默认不选中
      showModal: false, // 是否展示弹出框
      total: 0, //  总条数
      page: 1, // 当前显示页码值
      pagesize: 10, // 一页展示多少条数据
      detailobj: {},
      // type 为 1 是添加操作 type 为 2 是修改操作
      type: 0,
      addDocumentType: "", // 文档类型
      addAssessmentType: "", // 审核类型
      addPrivilege: [], // 创建权限
      addSignManage: "", //  签收管理
      tableData2: [], //  Table表格数据
      AllUserList: [], //  所有创建权限数据
      AssessmentList: [], //  审核类型列表
      createUserList: [], //  创建权限列表
      addobj: {}, // 弹出框中表单对象
      tableColumns1: [
        {
          type: "sort",
          title: this.$t(1008),
          width: 80,
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          }
        },
        { title: this.$t(900754), key: "name" },
        { title: this.$t(960580), key: "process_name" },
        { title: this.$t(700123), key: "usergroup_names" },
        { title: this.$t(960581), key: "sign_usergroup_name" },
        { title: this.$t(920169), key: "create_time" },
        { title: this.$t(100040), key: "creator_name" }
      ]
    };
  },
  created() {
    this.search();
    this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
  },
  methods: {
    search() {
      this.page = 1;
      this.pagesize = 10;
      this.tableSearch();
    },
    tableSearch() {
      this.detailobj = {};
      var params = {
        page: this.page,
        pagesize: this.pagesize
      };
      axios
        .request({
          url: "/esop/EsopDocumentSet/GetDocumentSetPagedList",
          params,
          method: "get"
        })
        .then(res => {
          this.total = 0; // 设定一个初始值
          this.tableData2 = []; // 设定一个初始值
          if (res.data.ret === 1) {
            this.total = res.data.total;
            this.tableData2 = res.data.data;
          } else {
            this.$Message.error(this.$t("" + result.msg));
          }
        });
    },
    // 弹框组件审核流程
    GetAllProcess() {
      axios
        .request({
          url: "/esop/EsopProcess/GetAllProcess",
          method: "get"
        })
        .then(res => {
          this.AssessmentList = []; // 设定一个初始值
          if (res.data.ret === 1 && res.data.data.length !== 0) {
            res.data.data.unshift({ id: 0, title: "不需要审核" });
            this.AssessmentList = res.data.data;
          }
        });
    },
    // 弹框组件创建权限(签收管理用同一个数据)
    GetAllUserGroups() {
      axios
        .request({
          url: "/config/ProjectUserGroup/GetAllUserGroups",
          method: "get"
        })
        .then(res => {
          this.AllUserList = []; // 初始化
          if (res.data.ret === 1 && res.data.data.lenght !== 0) {
            this.createUserList = res.data.data;
            let arr = [{ id: 0, title: "不需要签收" }];
            if (res.data.data.length > 0) {
              res.data.data.forEach((item, index) => {
                arr.push(item);
              });
            }
            this.AllUserList = arr;
          } else {
            this.$Message.error(this.$t("res.data.msg"));
          }
        });
    },
    // 添加事件
    add() {
      this.type = 1; // 设置 type 为 1 表示是添加操作
      this.showModal = true;
      this.addobj = {
        addDocumentType: "",
        addPrivilege: []
      };
      this.single = false; // 默认不选中
      this.GetAllProcess(); // 获取审核流程
      this.GetAllUserGroups(); // 获取创建权限
      this.addobj.addAssessmentType = 0; // 默认选中
      this.addobj.addSignManage = 0; // 默认选中
    },
    // 监听修改事件
    edit() {
      if (
        this.detailobj.id == "" ||
        this.detailobj.id == null ||
        this.detailobj.id == undefined 
      ) {
        this.$Message.warning(this.$t(1043));
        return false;
      }
      //  获取审核类型,创建权限,签收管理下拉列表
      this.GetAllProcess();
      this.GetAllUserGroups();
      this.showModal = true;
      this.type = 2; // type 为 2 表示修改
      this.addobj.addDocumentType = this.detailobj.name; // 文档类型
      this.addobj.addAssessmentType = this.detailobj.process_id; // 审核类型
      this.addobj.addPrivilege = this.detailobj.usergroup_ids.split(","); // 创建权限
      if (this.detailobj.need_train == 0) {
        this.single = false;
      } else if (this.detailobj.need_train == 1) {
        this.single = true;
      }
      // 如果存在, 循环遍历
      if (this.addobj.addPrivilege.length > 0) {
        this.addobj.addPrivilege.forEach((ele, index) => {
          this.addobj.addPrivilege[index] = parseInt(ele);
        });
      }
      this.addobj.addSignManage = this.detailobj.sign_usergroup_id; // 签收管理
    },
    // 监听删除事件
    Delete() {
      if (
        this.detailobj === undefined ||
        this.detailobj.id === undefined ||
        this.detailobj.id === 0
      ) {
        this.$Message.warning(this.$t("1043"));
        return false;
      } else {
        this.$Modal.confirm({
          title: this.$t("1018"),
          content: "",
          width: "290px",
          closable: true,
          okText: this.$t("1004"),
          onOk: () => {
            let params = { id: this.detailobj.id };
            axios
              .request({
                url: "/esop/EsopDocumentSet/DeleteDocumentSet",
                params,
                method: "post"
              })
              .then(res => {
                if (res.data.ret === 1) {
                  this.$Message.success(this.$t("1058"));
                  this.page = 1;
                  this.tableSearch(); // 刷新
                } else {
                  this.$Message.error(this.$t(res.data.msg));
                  this.tableSearch(); // 刷新
                }
              });
          }
        });
      }
    },
    //  弹框保存事件
    asyncConfirm(type) {
      //  必填项表单验证
      if (!this.addobj.addDocumentType) {
        this.$Message.error(this.$t("100408"));
        return false;
      }
      if (this.addobj.addPrivilege.length === 0) {
        this.$Message.error(this.$t("100410"));
        return false;
      }
      // 组装请求参数
      let data = {
        id: this.detailobj.id,
        name: this.addobj.addDocumentType, //  文档类型
        need_train: this.single ? 1 : 0, //  是否需要签收培训
        process_id: this.addobj.addAssessmentType, // 审核类型
        sign_usergroup_id: this.addobj.addSignManage, //  签收管理
        usergroup_ids: this.addobj.addPrivilege.join() //  创建权限
      };
      this.loading = true;
      // type 为 1 添加 type 为 2 修改
      if (type == 1) {
        this.axios
          .request({
            url: "/esop/EsopDocumentSet/AddDocumentSet",
            data,
            method: "post"
          })
          .then(res => {
            let result = res.data;
            if (result.ret == 1) {
              this.showModal = false; // 隐藏
              this.$Message.success(this.$t("1055")); // 提示
              this.page = 1;
              this.pagesize = 10;
              this.tableSearch(); // 刷新
            } else {
              this.$Message.error(this.$t("" + result.msg)); // 提示
              return false;
              this.page = 1;
              this.tableSearch(); //  刷新
            }
          });
      } else if (type == 2) {
        // 编辑弹框按钮
        this.axios
          .request({
            url: "/esop/EsopDocumentSet/UpdateDocumentSet",
            data,
            method: "post"
          })
          .then(res => {
            this.loading = false;
            let result = res.data;
            if (result.ret == 1) {
              this.showModal = false; // 隐藏
              this.$Message.success(this.$t("1060")); // 提示
              this.tableSearch(); // 刷新
            } else {
              this.$Message.error(this.$t("" + result.msg)); // 提示用户
            }
          });
      }
    },
    // 弹框取消事件
    cancel() {
      this.addobj = {
        addDocumentType: "",
        addPrivilege: []
      };
      this.showModal = false;
    },
    // 页码改变的回调, 返回改变后的页码
    changePage(value) {
      this.page = value;
      this.tableSearch();
    },
    // 切换每页条数时的回调, 返回切换后的每页条数
    handlePageSize(value) {
      this.pagesize = value;
      this.tableSearch();
    },
    // 当表格的当前行发生变化的时候会触发
    handleRowChange(currentRow, oldCurrentRow) {
      this.detailobj = currentRow;
    }
  }
};
</script>

<style lang="less" scoped>
.document {
  margin-left: 25px;
  margin-top: 6px;
  width: 100%;
  height: 15px;
  white-space: nowrap;
}
</style>
