<template>
  <div class="page">
    <div class="left_box">
      <div class="table_title">自助终端申报事项列表</div>
      <LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
        <el-button
          type="danger"
          @click="allDel"
          size="mini"
          plain
          slot="table-head-left2"
          >删除
        </el-button>
      </LayoutTable>
    </div>
    <div class="right_box">
      <div class="table_title">一体化事项列表</div>
      <div class="layout-table">
        <div class="table-head flex flex-pack-justify">
          <div class="table-head-left flex flex-align-center">
            <div class="buttons">
              <el-button
                type="success"
                icon="el-icon-plus"
                plain
                size="mini"
                class="addclass"
                @click="allAdd"
                >批量加入</el-button
              >
            </div>
          </div>
          <div class="table-head-right">
            <div class="extend flex flex-pack-justify">
              <div class="table-form">
                <div class="search-form-wapper">
                  <el-form
                    :inline="true"
                    :model="form"
                    ref="search-form"
                    size="small"
                  >
                    <el-form-item
                      v-for="(item, i) in search"
                      :key="i"
                      v-bind:class="{ search_new_line: item.newLine }"
                    >
                      <el-input
                        v-model="form[item.name]"
                        v-if="item.type === 'text'"
                        :placeholder="
                          item.placeholder
                            ? item.placeholder
                            : '请输入' + item.label
                        "
                      ></el-input>

                      <el-select
                        v-model="form[item.name]"
                        :filterable="item.filterable"
                        :multiple="item.multiple"
                        clearable="true"
                        @change="item.change"
                        @clear="item.clear"
                        v-if="item.type === 'select'"
                        :placeholder="'请选择' + item.label"
                      >
                        <el-option
                          label="全部"
                          value=""
                          v-if="!item.multiple && !item.notShowAll"
                        ></el-option>
                        <el-option
                          :label="label"
                          :value="value"
                          v-for="(label, value) in dict[item.name]"
                          :key="value"
                        ></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item>
                      <el-button
                        type="primary"
                        class="addclass"
                        icon="el-icon-search"
                        @click="onSubmit"
                        title="查询"
                        >查询</el-button
                      >

                      <el-button
                        icon="el-icon-refresh-left"
                        @click="cleanForm"
                        title="清空"
                        >清空</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-table
          ref="multipleTable"
          :data="yitihuaData"
          size="small"
          style="width: 100%"
          @selection-change="handleSelectionChange1"
          height="636"
          border
          v-loading="tableLoading"
        >
          <el-table-column
            v-for="column in columns"
            :key="column.prop"
            :type="column.type"
            :width="column.width"
            :label="column.label"
            :align="column.align || 'left'"
            :formatter="column.formatter"
          >
          </el-table-column>
        </el-table>
        <div class="pagination-wapper flex">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="currPage"
            :page-size="currSize"
            :page-sizes="[10, 20, 50, 100, 200, 500]"
            layout="sizes, total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import table from "@/assets/mixins/table";
import axios from "axios";
export default {
  mixins: [table],
  created() {
    this.getYitihua();
  },
  watch: {},
  methods: {
    toDel(val) {
      console.log(val);
      axios({
        method: "post",
        url: "/complex/apply/matter/delete?id=" + val,
        headers: {
          Authorization: window.sessionStorage.getItem("token") || "",
        },
      })
        .then((res) => {
          if (res.data.code == 1) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.getYitihua();
            this.getData();
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((error) => {});
    },
    allDel() {
      console.log(this.selection);
      this.selection && this.selection.length > 0
        ? axios({
            method: "post",
            url: "/complex/apply/matter/delete?id=" + this.selection.join(","),
            headers: {
              Authorization: window.sessionStorage.getItem("token") || "",
            },
          })
            .then((res) => {
              if (res.data.code == 1) {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                this.getYitihua();
                this.getData();
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "error",
                });
              }
            })
            .catch((error) => {})
        : this.$message({
            message: "请选择一条事项",
            type: "warning",
          });
    },
    allAdd(val) {
      let arr = [];
      if (val.id) {
        arr.push(val.id);
      } else {
        if (this.multipleSelection && this.multipleSelection.length > 0) {
          arr = this.multipleSelection.map((v) => v.id);
        } else {
          this.$message({
            message: "请选择需要加入的事项",
            type: "warning",
          });
          return;
        }
      }
      let data = {
        applyType: 2,
        idList: arr,
      };
      axios({
        method: "post",
        url: "/complex/event/implementation/addToApplyMatter",
        headers: {
          Authorization: window.sessionStorage.getItem("token") || "",
        },
        data,
      })
        .then((res) => {
          if (res.data.code == 1) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.getYitihua();
            this.getData();
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((error) => {});
    },
    delete(row) {},
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange1(val) {
      this.multipleSelection = val;
    },
    getYitihua() {
      this.tableLoading = true;
      let data = {
        ...this.form,
        size: this.currSize,
        page: this.currPage,
        applyType: 2,
      };
      axios({
        method: "post",
        url: "/complex/event/implementation/subList",
        headers: {
          Authorization: window.sessionStorage.getItem("token") || "",
        },
        data,
      })
        .then((res) => {
          if (res.data.code == 1) {
            this.yitihuaData = res.data.data.data;
            this.dict = res.data.data.dict;
            this.currPage = res.data.data.current_page;
            this.total = res.data.data.total;
            this.tableLoading = false;
          } else {
            this.tableLoading = false;
          }
        })
        .catch((error) => {
          this.tableLoading = false;
        });
    },
    handleCurrentChange(val) {
      console.log(val);
      this.currPage = val;
      this.getYitihua();
    },
    handleSizeChange(val) {
      console.log(val);
      this.currSize = val;
      this.getYitihua();
    },
    onSubmit() {
      this.getYitihua();
    },
    cleanForm() {
      this.form = {};
      this.getYitihua();
    },
  },
  data() {
    return {
      tableLoading: false,
      columns: [
        { type: "selection", reserveSelection: true },
        { type: "index", label: "序号", align: "center", width: 50 },
        {
          prop: "eventObjectType",
          label: "申报类型",
          align: "center",
          formatter: (row) => {
            if (row.eventObjectType.indexOf("/") == -1) {
              return this.dict.eventObjectType[row.eventObjectType];
            } else {
              let str = row.eventObjectType.split("/");
              let arr = str
                .map((v) => {
                  return (v = this.dict.eventObjectType[v]);
                })
                .join("/");
              return arr;
            }
          },
        },
        {
          prop: "implementName",
          label: "事项名称",
          formatter: (row) => {
            return row.implementName ? row.implementName : "--";
          },
          align: "center",
        },
        {
          label: "操作",
          align: "center",
          formatter: (row) => {
            return (
              <div>
                <el-button
                  size="mini"
                  type="success"
                  onClick={() => this.allAdd(row)}
                >
                  加入
                </el-button>
              </div>
            );
          },
        },
      ],
      currPage: 1,
      currSize: 10,
      total: 0,
      form: {},
      dict: {},
      search: [
        {
          name: "eventObjectType",
          type: "select",
          label: "申报类型",
        },
        {
          name: "implementName",
          type: "text",
          label: "事项名称搜索",
        },
      ],
      yitihuaData: [],
      multipleSelection: [],
      config: {
        applyType: 2,
        height: "620",
        downloadUrl: "",
        columns: [
          { type: "selection", reserveSelection: true },
          { type: "index", label: "序号", align: "center", width: 50 },
          {
            prop: "eventObjectType",
            label: "申报类型",
            align: "center",
            formatter: (row) => {
              if (row.eventObjectType.indexOf("/") == -1) {
                return this.tableData.dict.eventObjectType[row.eventObjectType];
              } else {
                let str = row.eventObjectType.split("/");
                let arr = str
                  .map((v) => {
                    return (v = this.tableData.dict.eventObjectType[v]);
                  })
                  .join("/");
                return arr;
              }
            },
          },
          {
            prop: "implementName",
            label: "事项名称",
            align: "center",
          },
          {
            label: "操作",
            align: "center",
            formatter: (row) => {
              return (
                <div>
                  <table-buttons noView row={row} noEdit onDel={this.toDel} />
                </div>
              );
            },
          },
        ],
        search: [
          {
            name: "eventObjectType",
            type: "select",
            label: "申报类型",
          },
          {
            name: "implementName",
            type: "text",
            label: "事项名称搜索",
          },
        ],
      },
    };
  },
};
</script>
<style lang="less" scoped>
.page {
  display: flex;
  .left_box {
    width: 50%;
    height: 100%;
    border-right: 1px solid #ededed;
    padding: 20px;
  }
  .right_box {
    flex: 1;
    height: 100%;
    padding: 20px;
  }
}
</style>
