<template>
  <div class="order">
    <div class="frame">
      <el-select
        class="mr20"
        v-model="parameter.params.id"
        placeholder="炼厂名称"
        clearable
      >
        <el-option
          v-for="item in refineryList"
          :key="item.id"
          :label="item.refineryName"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="parameter.params.refineryType"
        placeholder="炼厂类型"
        clearable
      >
        <el-option
          v-for="item in refineryTypeEnum"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="parameter.params.refineryLevel"
        placeholder="炼厂等级"
        clearable
      >
        <el-option label="A" value="A"></el-option>
        <el-option label="B" value="B"></el-option>
        <el-option label="C" value="C"></el-option>
        <el-option label="D" value="D"></el-option>
        <el-option label="E" value="E"></el-option>
      </el-select>
      <el-select
        v-model="parameter.params.enableMark"
        placeholder="启用禁用"
        clearable
      >
        <el-option label="启用" value="ENABLE"> </el-option>
        <el-option label="禁用" value="DISABLE"> </el-option>
      </el-select>
      <div class="buttons">
        <el-button icon="el-icon-search" @click="search">查询</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="table">
      <div class="operation">
        <el-button @click="addition">炼厂入驻</el-button>
      </div>
      <el-table
        v-if="tableHeight"
        ref="multipleTable"
        :height="tableHeight"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="$utils.cellStyle"
        :cell-style="$utils.cellStyle"
      >
        <el-table-column
          prop="refineryName"
          label="炼厂名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="orderSerialNumber" label="炼厂类型" width="90">
          <template slot-scope="{ row }">
            <p v-if="row.refineryType">
              {{
                refineryTypeEnum.find((item) => item.value === row.refineryType)
                  .label
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="refineryLevel" label="炼厂等级" width="90">
        </el-table-column>
        <el-table-column prop="address" label="炼厂地址" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="orderSerialNumber" label="启用状态" width="80">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.enableMark"
              active-value="ENABLE"
              inactive-value="DISABLE"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="
                (val) => {
                  switchTrigger(val, row);
                }
              "
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderSerialNumber"
          label="启用产品数量"
          width="120"
        >
        </el-table-column>
        <el-table-column label="时间" width="235">
          <template slot-scope="{ row }">
            <p class="gray">
              创建时间 <span>{{ row.createTime }}</span>
            </p>
            <p class="gray">
              更新时间 <span>{{ row.updateTime || " - -" }}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="orderSerialNumber" label="操作" width="150">
          <template slot-scope="{ row }">
            <el-link type="primary" :underline="false" @click="update(row)"
              >修改</el-link
            >
            <el-link type="primary" :underline="false" @click="detail(row)"
              >详情</el-link
            >
            <el-popconfirm
              title="确定删除该条数据吗？"
              icon-color="red"
              @confirm="deleteRow(row)"
            >
              <el-link slot="reference" type="primary" :underline="false"
                >删除</el-link
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination :parameter="parameter" @searchAgain="getByPage" />
    </div>
    <add
      :controlWindows="controlWindows"
      :refineryTypeEnum="refineryTypeEnum"
      @closeWindow="search"
    />

    <el-drawer
      title="详情"
      direction="ltr"
      size="60%"
      :withHeader="false"
      :visible="controlWindows.detail"
    >
      <general-details
        title="详情"
        :isHeader="true"
        v-if="controlWindows.detail"
        :sourceData="oilCompanyMatch"
        :mappingData="mappingData"
        @close="controlWindows.detail = false"
      >
      </general-details>
    </el-drawer>
  </div>
</template>

<script>
import serve from "api/refineryInfo.js";

import add from "./components/add.vue";

import pagination from "components/pagination/index.vue";
import generalDetails from "components/generalDetails/index.vue";

import { refineryTypeEnum } from "utils/dataType.js";

export default {
  data() {
    return {
      refineryTypeEnum: refineryTypeEnum,
      controlWindows: {
        add: false,
        addInfo: {},
        detail: false,
      },

      refineryList: [],
      tableHeight: 0,
      tableData: [],
      total: 0,
      parameter: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        params: {},
      },
      oilCompanyMatch: {},
      mappingData: [
        {
          carTitle: "",
          carItems: [
            { label: "炼厂名称", value: "refineryName" },
            { label: "炼厂类型", value: "refineryType" },
            { label: "启用状态", value: "enableMark" },
            { label: "炼厂等级", value: "refineryLevel" },
            { label: "炼厂地址", value: "address" },
            { label: "创建用户ID", value: "createUser" },
            { label: "创建时间", value: "createTime" },
            { label: "修改用户ID", value: "updateUser" },
            { label: "修改时间", value: "updateTime" },
          ],
        },
      ],
    };
  },
  components: {
    add,
    pagination,
    generalDetails,
  },
  mounted() {
    this.$nextTick(() => {
      this.heightHandle();
    });
    window.addEventListener(
      "resize",
      this.$utils.debounce(this.heightHandle, 500)
    );
  },
  created() {
    this.findByEntity();
    this.getByPage();
  },
  methods: {
    search() {
      this.parameter.currentPage = 1;
      this.getByPage();
    },
    //table list
    getByPage() {
      serve.getByPage(this.parameter).then((res) => {
        this.tableData = res.data.list;
        this.parameter.total = res.data.totalPage;
      });
    },
    //炼厂list
    findByEntity() {
      serve.findByEntity().then((res) => {
        this.refineryList = res.data;
      });
    },
    //新增
    addition() {
      this.controlWindows.addInfo.title = "炼厂入驻";
      this.controlWindows.add = true;
    },
    //修改
    update(row) {
      this.controlWindows.addInfo.title = "炼厂修改";
      Object.assign(this.controlWindows.addInfo, row);
      this.controlWindows.add = true;
    },
    //详情
    detail(row) {
      this.oilCompanyMatch = row;
      this.controlWindows.detail = true;
    },
    //删除
    deleteRow(row) {
      serve
        .deleteRow({
          id: row.id,
        })
        .then((res) => {
          this.$message.success(res.msg);
          this.getByPage();
        });
    },
    //启用禁用
    switchTrigger(val, row) {
      row.enableMark = row.enableMark;
      serve
        .update({
          id: row.id,
          enableMark: val,
        })
        .then((res) => {
          if (res.code === 20000) {
            this.getByPage();
          } else this.$message.error(res.msg);
        });
    },
    //重置
    reset() {
      this.parameter = {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        params: {},
      };
    },
    // table height
    heightHandle() {
      let bodyHeight = document.body.clientHeight;
      let frameHeight = this.obtainElement(".frame").clientHeight;
      let operationHeight = this.obtainElement(".operation").clientHeight;
      let paginationHeight = this.obtainElement(".el-pagination").clientHeight;
      this.tableHeight =
        bodyHeight - frameHeight - operationHeight - paginationHeight - 145;
    },
    obtainElement(className) {
      return document.documentElement.querySelector(className);
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  .frame {
    margin: 20px;
    padding: 20px;
    // width: 100%;
    border-radius: 6px;
    border: 1px solid #e3e3e5;
    background: #fff;
    .el-input,
    .el-select {
      width: 183px;
      height: 40px;
    }
    .el-input + .el-input,
    .el-input + .el-select,
    .el-select + .el-select,
    .el-select + .el-input {
      margin-right: 20px;
      margin-bottom: 15px;
    }
    .mr20 {
      margin-right: 20px;
    }
    .buttons {
      text-align: right;
    }
  }

  .table {
    overflow: hidden;
    margin: 0 20px;
    padding-bottom: 20px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e3e3e5;
    > .operation {
      box-sizing: content-box;
      padding: 15px;
    }
    .gray {
      color: #999;
      span {
        color: #333;
      }
    }
    .el-table {
      margin-bottom: 20px;
      border-radius: 10px 10px 0px 0px;
    }
    .el-link {
      margin-right: 10px;
    }
  }
}
</style>
