<template>
  <div class="enterprise-recharge-details">
    <div class="frame">
      <el-form :model="parameter.params" :inline="true">
        <!-- 企业名称 -->
        <autocomplete
          class="mr20"
          :params="parameter.params"
          :config="configAutocomplete"
        />
        <!-- 总公司名称 -->
        <autocomplete
          :params="parameter.params"
          :config="configAutocompleteHead"
        />

        <el-select
          v-model="parameter.params.parentMark"
          placeholder="是否为主体公司"
          clearable
        >
          <el-option label="主体公司" value="0" />
          <el-option label="分公司" value="1" />
        </el-select>
        <el-select
          v-model="parameter.params.companyNature"
          placeholder="企业性质"
          clearable
        >
          <el-option
            v-for="(item, index) in companyNatureTypeEnum.slice(1)"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="parameter.params.enableMark"
          placeholder="启用标识"
          clearable
        >
          <el-option label="禁用" value="0" />
          <el-option label="启用" value="1" />
        </el-select>

        <el-select
          v-model="parameter.params.auditMark"
          placeholder="审核标识"
          clearable
        >
          <el-option
            v-for="(item, index) in auditMarkEnum.slice(1)"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <!-- <el-select
          v-model="parameter.params.companyType"
          placeholder="账户类型"
          clearable
        >
          <el-option
            v-for="(item, index) in companyTypeEnum"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->

        <!-- 企业负责人或联系方式 -->
        <autocomplete
          :params="parameter.params"
          :config="configAutocompleteLeader"
        />

        <el-select
          v-model="parameter.params.companyDockType"
          placeholder="公司对接类型"
          clearable
          @keyup.enter.native="getByPage"
        >
          <el-option label="对接客户" :value="0" />
          <el-option label="平台客户" :value="1" />
        </el-select>
      </el-form>

      <div class="buttons">
        <el-button @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
    <div class="table">
      <div class="operation">
        <el-button @click="addition">添加</el-button>
      </div>
      <!-- 列表开始 -->
      <el-table
        :max-height="tableHeight"
        stripe
        :data="tableData"
        fit
        style="width: 100%"
        @sort-change="sortHandler"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />

        <el-table-column label="序号" type="index" :index="indexMethod" />

        <el-table-column prop="name" label="企业名称" width="200">
          <template slot-scope="{ row }">
            <div class="display: flex">
              <el-tag v-if="row.parentMark === 0" effect="dark">总公司</el-tag>
              <el-tag v-else effect="dark">分公司</el-tag>
              <div>
                <span> {{ row.name }}<br /> </span>
                <span> NO:{{ row.id }} </span>
              </div>
            </div>
          </template>
        </el-table-column>
        // TODO
        <el-table-column label="加价策略">
          <template slot-scope="{ row }">
            <p>
              {{ row.oilsPriceStrategy === "1" ? "费率" : "增减" }}:{{
                row.oilsPriceScale
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="consumRebateStrategy" label="折返策略">
          <template slot-scope="{ row }">
            <p
              v-if="
                row.consumRebateStrategy == 'TYFL' ||
                row.consumRebateStrategy == 'SITE_lEVEL'
              "
            >
              <span>{{
                row.consumRebateStrategy == "TYFL" ? "统一费率" : "油站等级"
              }}</span>
              <span>{{ row.consumRebateScale || "0" }}</span>
            </p>
            <p v-if="row.consumRebateStrategy == 'TYSSFL'">
              {{ row.consumRebateStrategy == "TYSSFL" ? "统一升数" : "未知" }}
              <span>{{
                row.consumRebateScale ? row.consumRebateScale + "元/L" : "0"
              }}</span>
            </p>
            <p
              v-if="
                !['TYFL', 'SITE_lEVEL', 'TYSSFL'].includes(
                  row.consumRebateStrategy
                )
              "
            >
              暂无
            </p>
          </template>
        </el-table-column>
        <el-table-column label="企业性质">
          <template slot-scope="{ row }">
            {{
              companyNatureTypeEnum.find(
                (item) => item.value == row.companyNature
              ).label
            }}
          </template>
        </el-table-column>
        <el-table-column label="账户类型">
          <template slot-scope="{ row }">
            {{
              row.companyType === "0"
                ? "柴油账户"
                : row.companyType === "1"
                ? "汽油账户"
                : row.companyType === "2"
                ? "LNG账户"
                : row.companyType === "3"
                ? "尿素账户"
                : "油批账户"
            }}
          </template>
        </el-table-column>
        <el-table-column label="公司对接类型">
          <template slot-scope="{ row }">
            {{
              row.companyDockType === 0
                ? "对接客户"
                : row.companyDockType === 1
                ? "平台客户"
                : "暂无"
            }}
          </template>
        </el-table-column>
        <el-table-column label="启用状态">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.enableMark"
              :active-value="1"
              :inactive-value="0"
              @change="
                (val) => {
                  enableMark(val, row);
                }
              "
            ></el-switch>
          </template>
        </el-table-column>
        <!-- <el-table-column label="联动分油">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.shareDistribute"
              active-color="#13ce66"
              inactive-color="row.parentMark == 0 ? '#999' : '#ff4949'"
              :active-value="1"
              :inactive-value="0"
              :disabled="row.parentMark == 0"
              @change="enableMarkOpem(row)"
            ></el-switch>
          </template>
        </el-table-column> -->
        <el-table-column label="审核标识">
          <template slot-scope="{ row }">
            <el-tag
              :type="
                auditMarkEnum.find((item) => item.value == row.auditMark).type
              "
              effect="dark"
              >{{
                auditMarkEnum.find((item) => item.value == row.auditMark).label
              }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="企业负责人">
          <template slot-scope="{ row }">
            {{ row.userName || "企业负责人" }} <br />
            {{ row.phone || "暂无电话" }}
          </template>
        </el-table-column>
        <el-table-column label="创建信息" width="160">
          <template slot-scope="{ row }">
            {{ row.createUserName || "创建人" }} <br />
            {{ row.createTime || "创建时间" }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="130" align="center">
          <template slot-scope="{ row }">
            <span class="el-dropdown-link" @click="detail(row)">详情</span>
            <el-dropdown
              @command="
                (val) => {
                  commandMore(val, row);
                }
              "
            >
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-permission="['company:info:base']"
                  command="base"
                >
                  基础资料
                </el-dropdown-item>
                <el-dropdown-item
                  command="attestation"
                  v-if="row.auditMark === 0"
                  v-permission="['company:info:auth']"
                >
                  认证信息
                </el-dropdown-item>
                <el-dropdown-item
                  v-permission="['company:info:auth']"
                  command="bank"
                >
                  银行信息
                </el-dropdown-item>
                <el-dropdown-item
                  v-permission="['company:info:finance']"
                  command="finance"
                >
                  财务信息
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件结束 -->
      <!-- 分页 -->
      <pagination :parameter="parameter" @searchAgain="getByPage" />
    </div>

    <!-- 新增 -->
    <add
      :controlWindows="controlWindows"
      :companyNatureTypeEnum="companyNatureTypeEnum.slice(1)"
      @closeWindow="search"
    />
    <!-- 认证 -->
    <attestation :controlWindows="controlWindows" @closeWindow="search" />
    <!-- 银行 -->
    <bank :controlWindows="controlWindows" @closeWindow="search" />
    <!-- 财务 -->
    <finance :controlWindows="controlWindows" @closeWindow="search" />

    <!-- 详情 -->
    <el-drawer
      title="详情"
      direction="ltr"
      size="60%"
      :withHeader="false"
      :visible.sync="controlWindows.detail"
    >
      <general-details
        title="详情"
        :isHeader="true"
        v-if="controlWindows.detail"
        :sourceData="oilCompanyMatch"
        :mappingData="mappingData"
        @close="controlWindows.detail = false"
      >
        <template #parentMark>
          <p>
            {{ oilCompanyMatch[0].parentMark === 0 ? "主体公司" : "分公司" }}
          </p>
        </template>
        <template #companyNature>
          <p>
            <!-- {{
              companyNatureTypeEnum.find(
                (item) => item.value === oilCompanyMatch[0].companyNature
              ).label
            }} -->
          </p>
        </template>
        <template #companyDockType>
          <p v-if="oilCompanyMatch[0].companyDockType === null"></p>
          <p v-else>
            {{
              oilCompanyMatch[0].companyDockType == 0 ? "对接客户" : "平台客户"
            }}
          </p>
        </template>
        <template #enableMark>
          <p>
            {{ oilCompanyMatch[0].enableMark == 0 ? "禁用" : "启用" }}
          </p>
        </template>
        <template #auditMark>
          <p>
            {{
              auditMarkEnum.find(
                (item) => item.value == oilCompanyMatch[0].auditMark
              ).label
            }}
          </p>
        </template>
        <template #getInfoName>
          <p>
            {{ oilCompanyMatch[0].name }}
          </p>
        </template>

        <template #businessLienceImg>
          <el-image
            style="width: 100px; height: 100px"
            :src="oilCompanyMatch[1].businessLienceImg"
          />
        </template>
        <template #settlementModes>
          <p v-if="oilCompanyMatch[2]">
            {{ settlementModesEnum[oilCompanyMatch[2].settlementModes] }}
          </p>
        </template>
        <template #defaultShare>
          <p v-if="oilCompanyMatch[2]">
            {{ oilCompanyMatch[2].defaultShare === 1 ? "共享" : "不共享" }}
          </p>
        </template>
        <template #accountState>
          <p v-if="oilCompanyMatch[3]">
            {{
              companyTypeEnum.find(
                (item) => item.value === oilCompanyMatch[3].accountState
              ).label
            }}
          </p>
        </template>
        <template #accountType>
          <p v-if="oilCompanyMatch[3]">
            {{ oilCompanyMatch[3].accountType == 0 ? "基础账户" : "" }}
          </p>
        </template>
      </general-details>
    </el-drawer>

    <!-- 修改弹窗 -->
    <!-- <el-dialog
      v-el-drag-dialog
      title="修改"
      :visible.sync="updateDialog"
      width="55%"
    >
      <OilCompanyInfoUpdate
        v-if="updateDialog"
        :oil-company-info="oilCompanyInfo"
        @getByPage="getByPage"
        @closeDialog="closeDialog"
      />
    </el-dialog> -->

    <!-- 添加弹窗 -->
    <!-- <el-dialog
      v-el-drag-dialog
      title="添加"
      :visible.sync="addDialog"
      width="55%"
    >
      <OilCompanyInfoAdd
        v-if="addDialog"
        @getByPage="getByPage"
        @closeDialog="closeDialog"
      />
    </el-dialog> -->

    <!-- 添加认证信息弹窗 -->
    <!-- <el-drawer :visible.sync="addAuthDialog" size="70%">
      <OilCompanyAuthAdd
        v-if="addAuthDialog"
        :oil-company-info="oilCompanyInfo"
        @getByPage="getByPage"
        @closeDialog="closeDialog"
      />
    </el-drawer> -->
  </div>
</template>

<script>
import serve from "api/customerManagement/companyManagement.js";
import commonServe from "api/common.js";

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

import add from "./components/add.vue";
import attestation from "./components/attestation.vue";
import bank from "./components/bank.vue";
import finance from "./components/finance.vue";

import { rechargeTypeEnum, rechargeStatusEnum } from "utils/dataType.js";

export default {
  components: {
    add,
    attestation,
    bank,
    finance,

    pagination,
    autocomplete,
    generalDetails,
  },
  data() {
    return {
      controlWindows: {
        add: false,
        addInfo: {},
        detail: false,
        attestation: false,
        bank: false,
        finance: false,
      },
      tableData: [],
      // userList: [],
      // oilCompanyAuth: {},
      tableHeight: 0,

      // 查询参数
      queryParams: {},
      addDialog: false, // 添加弹窗
      updateDialog: false, // 修改弹窗
      oilCompanyInfo: {},

      rechargeTypeEnum: rechargeTypeEnum,
      rechargeStatusEnum: rechargeStatusEnum,

      tableData: [],
      configAutocomplete: {
        serveTarget: commonServe.getRefineryCompanyList,
        autocompleteKey: "name",
        labelKey: "name",
        valueKey: "name",
        placeholder: "企业名称",
        querykey: "companyName",
      },
      configAutocompleteHead: {
        serveTarget: commonServe.getRefineryCompanyList,
        autocompleteKey: "name",
        labelKey: "name",
        valueKey: "name",
        placeholder: "总公司名称",
        querykey: "name",
      },
      configAutocompleteLeader: {
        serveTarget: commonServe.liekQuery,
        labelKey: ["id", "nickName", "phone"],
        valueKey: "id",
        placeholder: "企业负责人姓名或联系方式",
        querykey: "businessLeader",
      },
      //
      parameter: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        params: {},
      },
      companyTypeEnum: [
        {
          label: "柴油账户",
          value: "0",
        },
        {
          label: "汽油账户",
          value: "1",
        },
        {
          label: "LNG账户",
          value: "2",
        },
        {
          label: "尿素账户",
          value: "3",
        },
        {
          label: "油批账户",
          value: "4",
        },
      ],
      auditMarkEnum: [
        {
          value: null,
          label: "",
        },
        {
          label: "未提交",
          value: "0",
          type: "dark",
        },
        {
          label: "审核通过",
          value: "1",
          type: "success",
        },
        {
          label: "待审核",
          value: "2",
          type: "warning",
        },
        {
          label: "审核不通过",
          value: "-1",
          type: "danger",
        },
      ],
      companyNatureTypeEnum: [
        {
          value: null,
          label: "",
        },
        {
          label: "零售客户",
          value: "0",
        },
        {
          label: "外请客户",
          value: "1",
        },
        {
          label: "渠道客户",
          value: "2",
        },
        {
          label: "存量客户",
          value: "3",
        },
        {
          label: "批发客户",
          value: "4",
        },
        {
          label: "LNG客户",
          value: "5",
        },
        {
          label: "推广业务",
          value: "6",
        },
      ],
      settlementModesEnum: {
        1: "充值返利",
        2: "消费返利",
        3: "充值返利+消费返利",
      },
      oilCompanyMatch: {},
      mappingData: [
        {
          carTitle: "基础信息",
          // 标记
          carItems: [
            { label: "企业名称", value: "name" },
            { label: "企业简称", value: "abbreviaName" },
            { label: "公司性质", value: "parentMark" },
            { label: "企业性质", value: "companyNature" },
            { label: "公司对接类型", value: "companyDockType" },
            { label: "启用标识", value: "enableMark" },
            { label: "审核标识", value: "auditMark" },
            { label: "审核说明", value: "auditRemarks" },
          ],
        },
        {
          carTitle: "认证信息",
          carItems: [
            { label: "公司名称", value: "getInfoName" },
            { label: "省份名称", value: "provinceName" },
            { label: "城市名称", value: "cityName" },
            { label: "区县名称", value: "areaName" },
            { label: "详细地址", value: "address" },
            { label: "法人代表", value: "companyLegalPerson" },
            { label: "注册资本", value: "registeredCapital" },
            { label: "经营范围", value: "businessScope" },
            { label: "经营资质", value: "businessQualia" },
            { label: "联系方式", value: "contactPhone" },
            { label: "企业网址", value: "website" },
            { label: "营业执照号码", value: "businessLienceId" },
            { label: "营业执照照片", value: "businessLienceImg" },
            { label: "GScode", value: "gsCode" },
          ],
        },
        {
          carTitle: "财务信息",
          carItems: [
            { label: "结算方式", value: "settlementModes" },
            { label: "充值返利费率", value: "rechargeRebate" },
            { label: "消费返利叠加费率", value: "consumptionRebate" },
            { label: "结账周期", value: "billingCycle" },
            { label: "是否开启企业共享额度", value: "defaultShare" },
            { label: "默认单次额度上限", value: "defaultOnceUp" },
            { label: "默认单日加油额度上限", value: "defaultDayUp" },
            { label: "创建人编号", value: "createUser" },
            { label: "创建时间", value: "createTime" },
          ],
        },
        {
          carTitle: "账户信息",
          carItems: [
            { label: "账户状态", value: "accountState" },
            { label: "账户类型", value: "accountType" },
            { label: "账户总余额", value: "balance" },
            { label: "待还总金额", value: "totalChargeAmount" },
            { label: "账户充值余额", value: "rechargeBalance" },
            { label: "充值返利余额", value: "rechargeRebateBalance" },
            { label: "消费返利余额", value: "consumeRebateBalance" },
            { label: "累计充值金额", value: "totalRechargeAmount" },
            { label: "累计充值返利金额", value: "totalRechargeRebateAmount" },
            { label: "累计消费返利金额", value: "totalConsumeRebateAmount" },
            { label: "累计开票金额", value: "totalInvoiceAmount" },
            { label: "创建人编号", value: "createUser" },
            { label: "创建时间", value: "createTime" },
          ],
        },
      ],
    };
  },
  created() {
    this.getByPage();
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable && this.$refs.multipleTable.doLayout();
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.heightHandle();
    });
    window.addEventListener(
      "resize",
      this.$utils.debounce(this.heightHandle, 500)
    );
  },
  methods: {
    search() {
      this.parameter.currentPage = 1;
      this.getByPage();
    },
    getByPage() {
      this.parameter.params.companyType = "4";
      serve.getByPage(this.parameter).then((res) => {
        this.tableData = res.data.list;
        this.parameter.total = res.data.totalCount;
      });
    },

    enableMarkOpem(row) {},

    //新增
    addition() {
      this.controlWindows.addInfo = {
        title: "添加",
      };
      this.controlWindows.add = true;
    },

    //更多
    commandMore(val, row) {
      if (val === "base") {
        commonServe.getInfo(row.id).then((res) => {
          this.controlWindows.addInfo = {
            title: "修改",
            ...res.data,
          };
          this.controlWindows.add = true;
        });
      }
      if (val === "attestation") {
        commonServe.getByCompanyIdAuth(row.id).then((res) => {
          this.controlWindows.addInfo = {
            ...res.data,
            // 由于该接口没有查询auditmark 而旧逻辑是通过auditmark来区分对认证信息是新增还是修改
            // 因此此处使用列表接口返回的auditmark覆盖掉该接口返回的auditmark
            auditMark: row.auditMark,
            title: row.auditMark == 0 ? "新增认证信息" : "修改认证信息",
          };
          this.controlWindows.attestation = true;
          console.log(this.controlWindows.attestation);
        });
      }
      if (val === "bank") {
        commonServe.getByCompanyIdBankCard(row.id).then((res) => {
          this.controlWindows.addInfo = {
            title: res.data.length ? "修改财务信息" : "新增财务信息",
            id: row.id,
            list: res.data,
          };
          this.controlWindows.bank = true;
        });
      }
      if (val === "finance") {
        commonServe.getByCompanyIdFinance(row.id).then((res) => {
          if (res.data) {
            this.controlWindows.addInfo = {
              currentType: "update",
              title: "修改财务信息",
              ...res.data,
            };
          } else {
            commonServe.getInfo(row.id).then((res) => {
              this.controlWindows.addInfo = {
                currentType: "add",
                title: "新增财务信息",
                ...res.data,
              };
            });
          }
          this.controlWindows.finance = true;
        });
      }
    },
    detail(row) {
      Promise.allSettled([
        commonServe.getInfo(row.id),
        commonServe.getByCompanyIdAuth(row.id),
        commonServe.getByCompanyIdFinance(row.id),
        commonServe.getByCompanyIdAccount(row.id),
      ]).then((res) => {
        this.oilCompanyMatch = [];
        res.forEach((item) => {
          let result = item.status === "fulfilled" ? item.value.data : null;
          this.oilCompanyMatch.push(result);
        });
        console.log("this.oilCompanyMatch", this.oilCompanyMatch);
        this.controlWindows.detail = true;
      });
      // });
    },
    // 启用禁用点击
    // enableMark(val, row) {
    //   row.enableMark = val == 1 ? 0 : 1;
    //   update.updateBatchEnable([row]).then((res) => {
    //     if (!res.code === 20000) {
    //       this.$message.error(res.msg);
    //       return;
    //     }
    //     this.getByPage();
    //   });
    // },
    //重置
    reset() {
      Object.assign(this.parameter, {
        currentPage: 1,
        pageSize: 10,
        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;
    },

    indexMethod(index) {
      return index + 1;
    },
    sortHandler(column) {
      // 排序查询
      // console.log(column.column.sortable);
      // const key = column.column.sortable;
      // const value = column.order;
      // this.page.sorted = {};
      // this.page.sorted[key] = value;
      // this.getByPage();
    },
    addition() {
      // 跳转到添加
      // this.oilCompanyInfo = {};
      // this.addDialog = true;
      this.controlWindows.add = true;
    },
    handleSelectionChange(val) {
      // 选择表格数据
      this.multipleSelection = val;
    },
    obtainElement(className) {
      return document.documentElement.querySelector(className);
    },
  },
};
</script>

<style lang="scss" scoped>
.enterprise-recharge-details {
  .pft14 {
    font-size: 14px;
  }
  .frame {
    margin: 20px;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #e3e3e5;
    background: #fff;

    .el-input,
    .el-select {
      width: 183px;
      height: 40px;
    }

    .el-autocomplete + .el-input,
    .el-input + .el-autocomplete,
    .el-autocomplete + .el-select,
    .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-dropdown-link {
      margin-right: 10px;
      cursor: pointer;
      color: #409eff;

      &.special {
        margin-right: 0;
      }
    }

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