<template>
  <el-container>
    <PortalDesignerDialog ref="designDialog" @close="designClose" />
    <el-container style="border-left:1px solid #E7EAEC">
      <el-main>
        <el-row>
          <el-col :span="6">
            <el-button
              type="primary"
              size="small"
              @click="addMyLayout()"
              icon="el-icon-plus"
              style="margin-left:0"
            >{{$t('common.add')}}</el-button>
<!--            <el-button-->
<!--              type="danger"-->
<!--              size="small"-->
<!--              @click="remove"-->
<!--              icon="el-icon-delete"-->
<!--              style="margin-left:3px;"-->
<!--            >{{$t('common.delete')}}</el-button>-->
            <eip-popconfirm-button
                type="danger"
                title="确定删除吗？"
                icon="el-icon-delete"
                @onConfirm="remove"
                style="margin-left:3px;">{{$t('common.delete')}}</eip-popconfirm-button>
          </el-col>
          <el-col :span="18">
            <el-input
              size="small"
              style="width:380px"
              clearable
              :placeholder="$t('myLayout.myLayoutName')"
              prefix-icon="el-icon-search"
              v-model="tableData"
            ></el-input>
            <el-button
              style="margin-left: 20px"
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="search('find')"
            >{{$t('common.search')}}</el-button>
            <el-button size="small" icon="el-icon-refresh" @click="reset">{{$t('common.reset')}}</el-button>
          </el-col>
        </el-row>
        <el-table
          :data="rows"
          stripe
          border
          style="width: 100%"
          header-cell-class-name="todo-header-row"
          row-class-name="todo-row"
          size="medium"
          v-loading="fullscreenLoading"
          @selection-change="handleChecked"
        >
          <el-table-column type="selection" sortable width="50"></el-table-column>
          <el-table-column type="index" sortable width="50" :label="$t('common.seq')"></el-table-column>
          <el-table-column prop="name" :label="$t('myLayout.myLayoutName')" align="center"></el-table-column>
          <el-table-column prop :label="$t('myLayout.valid')" align="center" width="290">
            <template slot-scope="scope">{{scope.row.valid===1 ? "有效" :"无效"}}</template>
          </el-table-column>
          <el-table-column prop :label="$t('common.operation')" align="center" width="290">
            <template slot-scope="scope">
              <el-button
                @click="editMylayout(scope.row.id)"
                size="small"
                icon="el-icon-edit"
                plain
              >{{$t('common.modify')}}</el-button>
              <el-button
                v-if="scope.row.valid!==1"
                @click="setValid(scope.row.id)"
                size="small"
                icon="el-icon-tickets"
                plain
              >{{$t('myLayout.setValid')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer height="45px">
        <el-row type="flex" justify="end">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-row>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
import { mapState, mapActions } from "vuex";
import req from "@/request.js";
const PortalDesignerDialog = () =>
  import("@/components/myLayout/PortalDesignerDialog.vue");
import EipPopconfirmButton from "@/components/eipControl/EipPopconfirmButton";

export default {
  name: "approvalItemList",
  components: {
    PortalDesignerDialog,
    EipPopconfirmButton
  },
  data() {
    return {
      tableData: "",
      fullscreenLoading: true,
      checkBoxData: [],
      portal: window.context.portal,
      rows: [],
      pagination: { page: 1, pageSize: 20, showTotal: true },
      total: 1
    };
  },

  methods: {
    setValid(id) {
      req
        .get(this.portal + `/portal/sysIndexMyLayout/v1/setValid?id=` + id)
        .then(response => {
          this.search();
        });
    },
    designClose() {
      this.init();
    },
    addMyLayout() {
      this.$refs.designDialog.showDialog();
    },
    editMylayout(id) {
      this.$refs.designDialog.showDialog(id);
    },
    init(pagination) {
      if (!pagination) {
        pagination = { pageBean: { page: 1, pageSize: 20, showTotal: true } };
      }
      req
        .post(this.portal + `/portal/sysIndexMyLayout/v1/listJson`, pagination)
        .then(response => {
          this.rows = response.data.rows;
          let pageBean = {
            page: response.data.page,
            pageSize: response.data.pageSize,
            showTotal: true
          };
          this.pagination = pageBean;
          this.total = response.data.total;
          this.fullscreenLoading = false;
        });
    },
    remove() {
      var ids = [];
      if (this.checkBoxData && this.checkBoxData.length > 0) {
        for (let index = 0; index < this.checkBoxData.length; index++) {
          ids.push(this.checkBoxData[index].id);
        }
      }
      //数组去重
      //this.checkBoxData = Array.from(new Set(this.checkBoxData));
      if (ids.length > 0) {
        req
          .remove(
            this.portal +
              `/portal/sysIndexMyLayout/v1/deleteLayout?ids=` +
              ids.join(",")
          )
          .then(response => {
            this.search();
          });
      } else {
        this.$message({
          message: "请选择要删除的数据",
          type: "warning"
        });
      }
    },
    handleChecked(value) {
      this.checkBoxData = value;
    },
    //Loading 加载中
    openFullScreen() {
      this.fullscreenLoading = true;
    },
    // 查询
    search(str) {
      this.openFullScreen();
      if (str == "find") {
        this.pagination.page = 1;
      }
      let querys = []; //查询条件
      let queryFilter = {};
      let pageBean = { pageBean: this.pagination };
      if (this.tableData == "") {
        this.init(pageBean);
      } else {
        querys = [
          {
            property: "NAME_",
            value: this.tableData,
            group: "main",
            operation: "LIKE",
            relation: "OR"
          }
        ];
        queryFilter = { pageBean: this.pagination, querys };
        this.init(queryFilter);
      }
    },
    //重置
    reset() {
      this.tableData = "";
      this.search("find");
    },
    operating(id, action) {
      var title =
        action == "edit"
          ? "编辑常用语"
          : action == "add"
          ? "添加常用语"
          : "查看常用语";
      if (action == "add") {
        this.$router.push("/approvalItem/approvalItemAdd");
      } else if (action == "edit") {
        this.$router.push("/approvalItem/approvalItemEdit/" + id);
      } else {
        this.$router.push("/approvalItem/approvalItemGet/" + id);
      }
    },
    handleSizeChange: function(size) {
      //每页下拉显示数据
      this.$store.dispatch("approvalItem/setPaginationSize", size);
      this.search();
    },
    handleCurrentChange: function(currentPage) {
      //点击第几页
      this.$store.dispatch("approvalItem/setPaginationPageNum", currentPage);
      this.search();
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables.scss";

.el-table ::v-deep th.todo-header-row {
  background-color: #fafafa;
  font-size: 13px;
}

.el-table ::v-deep tr.todo-row {
  font-size: 13px;
  color: $--color-text-regular;
}

.el-container {
  background-color: #fff;
}

.el-row {
  margin-bottom: 20px;
}

.el-header {
  border-bottom: 1.5px solid #ededed;
}

.todo-subject {
  cursor: pointer;
}

.todo-subject {
  color: $--theme-color;
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
