<template>
  <div>
    <div class="table-header table-div">
      <ListLayout :table-columns="tableColumns">
        <div slot="search" ref="searchHeight" style="margin-top: 5px">
          <!--这里放顶部搜索-->
          <!-- 搜索部分开始 -->
          <el-form
            label-width="90px"
            :inline="true"
            :model="page"
            class="search-form"
            :size="$store.getters.size"
          >
            <el-form-item>
              <!-- <el-input v-model="page.params.companyId" placeholder="公司" clearable @keyup.enter.native="getByPage" /> -->
              <el-select
                v-model="page.params.companyId"
                clearable
                filterable
                remote
                reserve-keyword
                placeholder="企业名称"
                :remote-method="companyRemoteMethod"
                @keyup.enter.native="getByPage"
              >
                <el-option
                  v-for="item in queryCompanyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="page.params.matchMark"
                placeholder="匹配方式"
                clearable
              >
                <el-option value="MATCH_DAY" label="按日匹配" />
                <!-- <el-option value="MATCH_MONTH" label="按月匹配" />
                <el-option value="MATCH_AMOUNT" label="按金额匹配" /> -->
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="page.params.enableMark"
                placeholder="启用标识"
                clearable
              >
                <el-option value="1" label="启用" />
                <el-option value="0" label="禁用" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="page.params.overMark"
                placeholder="结束标识"
                clearable
              >
                <el-option value="0" label="匹配开始" />
                <el-option value="1" label="匹配完成" />
                <el-option value="2" label="匹配停止" />
              </el-select>
            </el-form-item>
          </el-form>
          <!-- 搜索部分结束 -->
        </div>
        <el-row slot="button-group" style="margin-top: 5px">
          <el-col :span="16" class="tal">
            <el-button
              class="group-item"
              :size="$store.getters.size"
              type="primary"
              @click="toAdd"
              ><svg-icon icon-class="iconxinzeng" /> 添加</el-button
            >
          </el-col>
          <el-col :span="8">
            <el-button
              type="primary"
              :size="$store.getters.size"
              icon="el-icon-search"
              @click="search"
              >查询</el-button
            >
            <el-button
              type="info"
              :size="$store.getters.size"
              icon="el-icon-refresh"
              @click="page.params = {}"
              >重置</el-button
            >
          </el-col>
        </el-row>

        <div slot="table">
          <!--这里放表格和分页-->
          <!-- 列表开始 -->
          <el-table
          :max-height="tableHeight"
            :data="dataPage.list"
            fit
            style="width: 100%"
            :size="$store.getters.size"
            @sort-change="sortHandler"
            @selection-change="handleSelectionChange"
          >
            <!-- <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              label="序号"
              type="index"
              :index="indexMethod"
            /> -->
            <template v-for="(item, index) in tableColumns">
              <el-table-column
                v-if="item.show"
                :key="index"
                :fixed="item.fixed"
                :align="item.align"
                :show-overflow-tooltip="true"
                :min-width="item.minWidth"
                :width="item.width"
                :prop="item.prop"
                :sortable="item.sortable"
                :label="item.label"
                :formatter="item.render"
              />
            </template>

            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="150px"
            >
              <template slot-scope="scope">
                <el-button
                  :size="$store.getters.size"
                  type="text"
                  @click="handleDetail(scope.row.id)"
                  ><svg-icon icon-class="iconxiangqing1" /> 详情</el-button
                >
                <el-dropdown>
                  <el-button type="text">
                    更多<i class="el-icon-arrow-down el-icon--right" />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="toUpdate(scope.row.id)">
                      <el-button :size="$store.getters.size" type="text"
                        ><svg-icon icon-class="iconicon-" /> 编辑</el-button
                      >
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <!-- 列表结束 -->

          <!-- 分页组件开始 -->
          <div class="page-div">
            <el-pagination
              :current-page="page.currentPage"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.totalCount"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
          <!-- 分页组件结束 -->
        </div>
      </ListLayout>

      <!-- 添加抽屉 -->
      <el-drawer
        title="添加"
        class="table-detail-drawer"
        :visible.sync="addDialog"
        direction="ltr"
        size="60%"
      >
      <OilCompanyMatchAdd @getByPage="getByPage" @closeDialog="closeDialog" />
      </el-drawer>
    

      <!-- 导出弹窗 -->
      <el-dialog
        v-el-drag-dialog
        title="导出"
        :visible.sync="outPutDialog"
        width="60%"
      >
        <OilCompanyMatchOutput
          @getByPage="getByPage"
          @closeDialog="closeDialog"
        />
      </el-dialog>

      <!-- 导入弹窗 -->
      <el-dialog
        v-el-drag-dialog
        title="导入"
        :visible.sync="importDialog"
        width="60%"
      >
        <OilCompanyMatchImport
          @getByPage="getByPage"
          @closeDialog="closeDialog"
        />
      </el-dialog>

      <!-- 修改抽屉 -->
      <el-drawer
        title="修改"
        class="table-detail-drawer"
        :visible.sync="updateDialog"
        direction="ltr"
        size="60%"
      >
      <OilCompanyMatchUpdate
          v-if="updateDialog"
          :oil-company-match="oilCompanyMatch"
          @getByPage="getByPage"
          @closeDialog="closeDialog"
        />
      </el-drawer>


      <!-- 详情抽屉 -->
      <el-drawer
        title="详情"
        class="table-detail-drawer"
        :visible.sync="showTableDrawer"
        size="60%"
        direction="ltr"
        :withHeader="false"
      >
      <general-details 
      title="详情" 
      isHeader="true" 
      @close="showTableDrawer=false" 
      :sourceData="oilCompanyMatch" 
      :mappingData="mappingData" 
      v-if="showTableDrawer" >
      </general-details>
        <!-- <OilCompanyMatchInfo :oil-company-match="oilCompanyMatch" /> -->
      </el-drawer>
    </div>
  </div>
</template>
<script>
import oilCompanyMatchApi from "@/api/finance/oilCompanyMatch";
import OilCompanyMatchAdd from "./OilCompanyMatchAdd";
import OilCompanyMatchUpdate from "./OilCompanyMatchUpdate";
import OilCompanyMatchInfo from "./OilCompanyMatchInfo";
import OilCompanyMatchImport from "./OilCompanyMatchImport";
import OilCompanyMatchOutput from "./OilCompanyMatchOutput";
import oilCompanyInfoApi from "@/api/user/oilCompanyInfo";
import { mapGetters } from "vuex";
export default {
  components: {
    OilCompanyMatchAdd,
    OilCompanyMatchUpdate,
    OilCompanyMatchInfo,
    OilCompanyMatchImport,
    OilCompanyMatchOutput,
  },
  data() {
    return {
      mappingData:[
        {
          carTitle:'基础信息',
          carItems:[
            {
              label:'id主键',
              value:'id'
            },
            {
              label:'公司id',
              value:'companyId'
            },
            {
              label:'匹配额度',
              value:'matchAmount',
              remark:'该额度为企业匹配单日额度上限',
            },
            {
              label:'匹配方式',
              value:'matchMark',
              remark:'MATCH_DAY：按日匹配 MATCH_MONTH：按月匹配 MATCH_AMOUNT：按金额匹配',
            },
            {
              label:'优先级',
              value:'matchPriority',
              remark:'1-20',
            },
            {
              label:'开始时间',
              value:'startTime',
            },
            {
              label:'结束时间',
              value:'endTime',
            },
            {
              label:'累计匹配轮数',
              value:'matchCount',
            },
            {
              label:'累计匹配金额',
              value:'totalAmount',
            },
            {
              label:'乐观锁',
              value:'version',
            },
            {
              label:'结束标识',
              value:'overMark',
               remark:'1：已完成 0：匹配中 2：主动停止',
            },
            {
              label:'结束人',
              value:'overUser',
            },
            {
              label:'实际匹配结束时间',
              value:'overTime',
            },
            {
              label:'主动结束匹配说明',
              value:'overRemark',
            },
            {
              label:'备注说明',
              value:'remark',
            },
            {
              label:'启用标识',
              remark:'1启用，0禁用，默认1',
              value:'enableMark',
            },
            {
              label:'删除标识',
              remark:'1删除，0未删除',
              value:'deleteMark',
            },
            {
              label:'启用禁用人',
              value:'enableUser',
            },
            {
              label:'启用禁用时间',
              value:'deleteTime',
            },
            {
              label:'创建人编号',
              value:'createUser',
            },
            {
              label:'创建时间',
              value:'createTime',
            },
            {
              label:'创建来源',
              value:'createSource',
            },
            {
              label:'修改人编号',
              value:'updateUser',
            },
            {
              label:'修改时间',
              value:'updateTime',
            }
          ]
        }
      ],
      multipleSelection: [], // 选择表格数据集合
      importDialog: false, // 导入弹窗
      outPutDialog: false, // 导出弹窗
      showTableDrawer: false,
      queryCompanyList: [], // 企业列表
      page: {
        pageSize: 10, // 每页显示条数
        currentPage: 1, // 默认页
        params: {}, // 查询参数
        sorted: {},
        columns: [],
      },
      tableHeight: 0,
      filters: this.$options.filters,
      dataPage: {
        // 分页显示page
        pageSize: 10, // 每页显示条数
        currentPage: 1, // 默认页
        params: {
          // 查询参数
        },
        sorted: {},
      },
      tableColumns: [
        {
          prop: "id",
          label: "编号",
          show: true,
          render: (row, column, cell) => {
            return cell;
          },
        },
        {
          prop: "companyName",
          label: "公司",
          show: true,
          render: (row, column, cell) => {
            return cell;
          },
        },
        {
          prop: "matchAmount",
          label: "日匹配额度",
          show: true,
          render: (row, column, cell) => {
            return cell;
          },
        },
        {
          prop: "matchMark",
          label: "匹配方式",
          show: true,
          render: (row, column, cell) => {
            if (cell === "MATCH_DAY") {
              return "按日匹配";
            }
            if (cell === "MATCH_MONTH") {
              return "按月匹配";
            }
            if (cell === "MATCH_AMOUNT") {
              return "按金额匹配";
            }
            return cell;
          },
        },
        // {
        //   prop: "matchPriority",
        //   label: "优先级，1-20",
        //   show: true,
        //   render: (row, column, cell) => {
        //     return cell;
        //   },
        // },
        {
          prop: "startTime",
          label: "开始时间",
          show: true,
          render: (row, column, cell) => {
            return cell;
          },
        },
        {
          prop: "endTime",
          label: "结束时间",
          show: true,
          render: (row, column, cell) => {
            return cell;
          },
        },
        {
          prop: "matchCount",
          label: "累计匹配轮数",
          show: true,
          render: (row, column, cell) => {
            return cell;
          },
        },
        {
          prop: "totalAmount",
          label: "累计匹配金额",
          show: true,
          render: (row, column, cell) => {
            return cell;
          },
        },
        // { prop: 'version', label: '乐观锁', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        // { prop: 'overMark', label: '结束标识1：已完成0：匹配中2：主动停止', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        // { prop: 'overUser', label: '结束人', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        // { prop: 'overTime', label: '实际匹配结束时间', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        // { prop: 'overRemark', label: '主动结束匹配说明', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        // { prop: 'remark', label: '备注说明', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        {
          prop: "enableMark",
          label: "启用标识",
          show: true,
          render: (row, column, cell) => {
            // return cell
            return (
              <el-switch
                v-model={row.enableMark}
                active-value={1}
                inactive-value={0}
                on-change={() => this.globalEnable(row)}
              ></el-switch>
            );
          },
        },
        {
          prop: "overMark",
          label: "结束标识",
          show: true,
          render: (row, column, cell) => {
            if (cell === 0) {
              return "匹配开始";
            }
            if (cell === 1) {
              return "匹配完成";
            }
            if (cell === 2) {
              return "匹配停止";
            }
            return cell;
          },
        },
        // { prop: 'deleteMark', label: '删除标识，1删除，0未删除', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        // { prop: 'enableUser', label: '启用禁用人', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        // { prop: 'enableTime', label: '启用禁用时间', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        // { prop: 'deleteUser', label: '启用禁用人', show: true, render: (row, column, cell) => {
        //   return cell
        // } }
        // { prop: 'deleteTime', label: '启用禁用时间', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        // { prop: 'createUser', label: '创建人编号', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        // { prop: 'createTime', label: '创建时间', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        // { prop: 'createSource', label: '创建来源', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        // { prop: 'updateUser', label: '修改人编号', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        // { prop: 'updateTime', label: '修改时间', show: true, render: (row, column, cell) => {
        //   return cell
        // } },
        // { prop: 'updateSource', label: '修改来源', show: true, render: (row, column, cell) => {
        //   return cell
        // } }
      ],
      addDialog: false, // 添加弹窗
      updateDialog: false, // 修改弹窗
      oilCompanyMatch: {},
    };
  },
  computed: {
    ...mapGetters(["sysUserList"]),
  },
  created() {
    this.getByPage();
    // 增加监听事件，窗口变化时得到高度。
    this.getHeight();
    window.addEventListener("resize", this.getHeight, false);
  },
  methods: {
    globalEnable(row) {
      console.log("row.id：" + row.id);
      console.log("row.enableMark：" + row.enableMark);
      const oilCompanyMatch = {};
      oilCompanyMatch.id = row.id;
      oilCompanyMatch.enableMark = row.enableMark;
      if (row.enableMark === 1) {
        this.$confirm("确认启用?", "提示", { type: "success" })
          .then(() => {
            console.log("oilCompanyMatch：" + JSON.stringify(oilCompanyMatch));
            oilCompanyMatchApi.globalEnable(oilCompanyMatch).then((res) => {
              this.$message.success(res.msg);
              this.getByPage();
            });
          })
          .catch(() => {
            row.enableMark = 0;
          });
      } else {
        this.$confirm("确认禁用?", "提示", { type: "warning" })
          .then(() => {
            console.log("oilCompanyMatch：" + JSON.stringify(oilCompanyMatch));
            oilCompanyMatchApi.globalEnable(oilCompanyMatch).then((res) => {
              this.$message.success(res.msg);
              this.getByPage();
            });
          })
          .catch(() => {
            row.enableMark = 1;
          });
      }
    },
    companyRemoteMethod(value) {
      // 远程搜索企业
      if (value) {
        oilCompanyInfoApi.getLikeByNameSuccess({ 'name': value }).then((res) => {
          this.queryCompanyList = res.data;
        });
      }
    },
    indexMethod(index) {
      return (index + 1) * 1;
    },
    handleSelectionChange(val) {
      // 选择表格数据
      this.multipleSelection = val;
    },
    toForbid() {
      // 禁用
      if (!this.multipleSelection || this.multipleSelection.length < 1) {
        this.$message.error("请选择需要操作的数据");
        return;
      }
    },
    toStartUsing() {
      // 启用
      if (!this.multipleSelection || this.multipleSelection.length < 1) {
        this.$message.error("请选择需要操作的数据");
        return;
      }
    },
    toImport() {
      // 导入
      this.importDialog = true;
    },
    toOutPut() {
      // 导出
      this.outPutDialog = true;
    },
    handleDetail(id) {
      // 查看行 详情
      oilCompanyMatchApi.get(id).then((res) => {
        this.oilCompanyMatch = res.data;
        this.showTableDrawer = true;
      });
    },
    getHeight() {
      setTimeout(() => {
        this.sHeight = this.$refs.searchHeight.offsetHeight;
        let fixedHeaderHeight =
          document.querySelector(".fixed-header").clientHeight;
        let elPaginationHeight =
          document.querySelector(".el-pagination").clientHeight;
        this.tableHeight =
          document.documentElement.clientHeight -
          this.sHeight -
          fixedHeaderHeight -
          elPaginationHeight -
          160;
      }, 350);
    },
    search() {
      // 搜索
      this.page.currentPage = 1;
      this.getByPage();
    },
    toggleSearchAdvance() {
      this.searchAdvice = !this.searchAdvice;
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getByPage();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getByPage();
    },
    sortHandler(column) {
      // 排序查询
      console.log(column);
      const key = column.prop;
      const value = column.order;
      this.page.sorted = {};
      this.page.sorted[key] = value;
      this.getByPage();
    },
    toAdd() {
      // 跳转到添加
      this.oilCompanyMatch = {};
      this.addDialog = true;
    },
    toUpdate(id) {
      // 跳转到更新
      oilCompanyMatchApi.get(id).then((res) => {
        this.oilCompanyMatch = res.data;
        this.updateDialog = true;
      });
    },
    toDelete(id) {
      // 删除
      this.$confirm("确定删除?", "提示", { type: "error" }).then(() => {
        oilCompanyMatchApi.deleteById(id).then((res) => {
          this.$message.success(res.msg);
          this.getByPage();
        });
      });
    },
    getByPage() {
      // 分页查询
      this.addDialog = false;
      oilCompanyMatchApi.getByPage(this.page).then((res) => {
        this.dataPage = res.data;
        this.page.totalCount = this.dataPage.totalCount;
        this.page.totalPage = this.dataPage.totalPage;
      });
    },
    closeDialog() {
      this.addDialog = false;
      this.updateDialog = false;
    },
  },
};
</script>

<style scoped>
.handle-button-group {
  margin-bottom: 10px;
}
.table-div {
  min-height: calc(100vh - 150px);
  max-height: calc(100vh - 110px);
  position: relative;
  overflow-y: scroll;
  margin-bottom: 20px;
}
.table-div >>> .header-container {
  /* position: sticky;
  top: 0rem; */
  min-height: 152px;
  z-index: 4;
  background: #fff;
}
.table-div .el-table__footer-wrapper {
  position: fixed !important;
}
.page-div {
  /* position: fixed; */
  background: #fff;
  bottom: 0rem;
  z-index: 4;
  min-width: 100%;
}
</style>
