<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model:page="page"
      v-model="form"
      ref="crud"
      :permission="permissionList"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template #menu-left>
        <el-button
          type="primary"
          icon="el-icon-plus"
          plain
          v-if="hasPermission('credit_score_quantification_add')"
          @click="openConfig()"
          >新增
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-upload"
          plain
          v-if="hasPermission('credit_score_quantification_import')"
          @click="handleImport"
          >批量导入
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-download"
          plain
          v-if="hasPermission('credit_score_quantification_template')"
          @click="handleTemplate"
          >下载模板
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-download"
          plain
          v-if="hasPermission('credit_score_quantification_export')"
          @click="handleExport"
          >批量导出
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          plain
          v-if="hasPermission('credit_score_quantification_delete')"
          @click="handleDelete"
          >批量删除
        </el-button>
      </template>
      <template #name="{ row }">
        <el-button type="primary" link @click="openConfig(row, true)">
          {{ row.name }}
        </el-button>
      </template>
      <template #status="{ row }">
        <el-tag :type="statusMap[row.status].type">
          {{ statusMap[row.status].label }}
        </el-tag>
      </template>
      <template #menu="{ row }">
        <el-button
          type="primary"
          text
          icon="el-icon-edit"
          v-if="hasPermission('credit_score_quantification_edit')"
          @click="openConfig(row)"
        >
          编辑
        </el-button>
        <el-button
          type="primary"
          text
          icon="el-icon-position"
          v-if="hasPermission('credit_score_quantification_publish') && row.status !== 1"
          @click="handlePublish(row)"
        >
          发布
        </el-button>
        <el-button
          type="primary"
          text
          :icon="row.status === 1 ? 'el-icon-close' : 'el-icon-check'"
          v-if="hasPermission('credit_score_quantification_status') && row.status !== 3"
          @click="handleStatus(row)"
        >
          {{ row.status === 1 ? '停用' : '启用' }}
        </el-button>
        <el-button
          type="danger"
          text
          icon="el-icon-delete"
          v-if="hasPermission('credit_score_quantification_delete') && row.status === 3"
          @click="rowDel(row)"
        >
          删除
        </el-button>
      </template>
    </avue-crud>

    <el-dialog title="评分量化表数据导入" append-to-body v-model="excelBox" width="555px">
      <avue-form :option="excelOption" v-model="excelForm">
        <template #excelTemplate>
          <el-button type="primary" @click="handleTemplate">
            点击下载<i class="el-icon-download el-icon--right"></i>
          </el-button>
        </template>
      </avue-form>
    </el-dialog>

    <el-dialog
      :title="readonly ? '查看评分量化表' : configForm.id ? '编辑评分量化表' : '新增评分量化表'"
      append-to-body
      v-model="configBox"
      width="88%"
      class="score-dialog"
      @closed="resetConfig"
    >
      <div class="score-config">
        <div class="section-title dialog-section-title">评分量化表</div>
        <el-form
          :model="configForm"
          label-position="right"
          label-width="auto"
          class="base-form"
          :disabled="readonly"
        >
          <el-form-item label="评定表名称" required>
            <el-input v-model="configForm.name" maxlength="30" show-word-limit />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="configForm.remark" type="textarea" maxlength="500" show-word-limit />
          </el-form-item>
        </el-form>

        <div class="section-head">
          <div class="section-title dialog-section-title">评分表</div>
        </div>
        <el-table :data="configForm.categories" border class="config-table">
          <el-table-column label="序号" type="index" width="70" align="center" />
          <el-table-column label="评分类目" prop="categoryName" min-width="180" />
          <el-table-column label="评分项目数" width="140" align="center">
            <template #default="{ row }">{{ row.items.length }}</template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template #default="{ row }">
              <el-button type="primary" text @click="openCategory(row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="section-head standard-head">
          <div class="section-title dialog-section-title">评估标准</div>
          <el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openStandard()">
            添加
          </el-button>
        </div>
        <el-table :data="configForm.standards" border class="config-table">
          <el-table-column label="序号" type="index" width="70" align="center" />
          <el-table-column label="信用等级" prop="creditLevel" width="120" align="center" />
          <el-table-column label="得分率" width="160" align="center">
            <template #default="{ row }"
              >{{ row.scoreRateLower }}% - {{ row.scoreRateUpper }}%</template
            >
          </el-table-column>
          <el-table-column label="最大资金使用额度(万元)" width="210" align="center">
            <template #default="{ row }">
              {{ row.creditLimitLower }} - {{ row.creditLimitUpper }}
            </template>
          </el-table-column>
          <el-table-column label="标准说明" prop="standardDescription" min-width="320" />
          <el-table-column label="操作" width="160" align="center">
            <template #default="{ row, $index }">
              <el-button type="primary" text @click="openStandard(row, $index)">编辑</el-button>
              <el-button type="danger" text v-if="!readonly" @click="removeStandard($index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <el-button @click="configBox = false">{{ readonly ? '关闭' : '取消' }}</el-button>
        <el-button type="primary" v-if="!readonly" @click="saveConfig">保存</el-button>
      </template>
    </el-dialog>

    <el-dialog
      title="评分类目详情"
      append-to-body
      v-model="categoryBox"
      width="82%"
      class="score-dialog"
    >
      <div class="category-detail">
        <div class="category-line">评分类目：{{ currentCategory.categoryName }}</div>
        <div class="section-head">
          <span></span>
          <el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openItem()">
            添加
          </el-button>
        </div>
        <el-table :data="currentCategory.items" border class="config-table">
          <el-table-column label="序号" type="index" width="70" align="center" />
          <el-table-column label="评分项目" prop="itemName" width="180" />
          <el-table-column label="得分说明" prop="scoreDescription" min-width="260" />
          <el-table-column label="选项数" width="100" align="center">
            <template #default="{ row }">{{ row.options.length }}</template>
          </el-table-column>
          <el-table-column label="操作" width="160" align="center">
            <template #default="{ row, $index }">
              <el-button type="primary" text @click="openItem(row, $index)">编辑</el-button>
              <el-button type="danger" text v-if="!readonly" @click="removeItem($index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <el-button type="primary" @click="categoryBox = false">保存</el-button>
      </template>
    </el-dialog>

    <el-dialog title="评分项目详情" append-to-body v-model="itemBox" width="76%">
      <el-form :model="itemForm" label-position="right" label-width="auto" :disabled="readonly">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="评分项目" required>
              <el-input v-model="itemForm.itemName" maxlength="20" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="得分说明">
              <el-input v-model="itemForm.scoreDescription" maxlength="300" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="选项描述">
          <el-input v-model="itemForm.optionDescription" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item label="选项" required>
          <div class="option-editor">
            <div class="option-row" v-for="(option, index) in itemForm.options" :key="index">
              <el-input v-model="option.optionName" maxlength="100" placeholder="选项描述" />
              <el-input-number v-model="option.score" :min="0" :precision="2" placeholder="分值" />
              <span class="score-unit">分</span>
              <el-button
                type="danger"
                text
                v-if="!readonly && itemForm.options.length > 1"
                @click="removeOption(index)"
              >
                删除
              </el-button>
            </div>
            <el-button type="primary" text v-if="!readonly" @click="addOption">+添加选项</el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="itemBox = false">取消</el-button>
        <el-button type="primary" v-if="!readonly" @click="saveItem">保存</el-button>
      </template>
    </el-dialog>

    <el-dialog title="评估标准设置" append-to-body v-model="standardBox" width="76%">
      <el-form :model="standardForm" label-position="right" label-width="auto" :disabled="readonly">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="信用等级" required>
              <el-select v-model="standardForm.creditLevel" placeholder="请选择信用等级" clearable>
                <el-option
                  v-for="item in creditLevelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="得分率(%)" required>
              <div class="range-input">
                <el-input-number
                  v-model="standardForm.scoreRateLower"
                  :min="0"
                  :max="100"
                  :precision="0"
                />
                <span>至</span>
                <el-input-number
                  v-model="standardForm.scoreRateUpper"
                  :min="0"
                  :max="100"
                  :precision="0"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="得分率每增加" required>
              <el-input-number v-model="standardForm.scoreRateIncrease" :min="0" :precision="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="最大资金使用额度(万元)" required>
              <div class="range-input">
                <el-input-number v-model="standardForm.creditLimitLower" :min="0" :precision="2" />
                <span>至</span>
                <el-input-number v-model="standardForm.creditLimitUpper" :min="0" :precision="2" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="额度增加" required>
              <el-input-number v-model="standardForm.creditLimitIncrease" :min="0" :precision="2" />
              <span class="score-unit">万元</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="标准说明">
          <el-input
            v-model="standardForm.standardDescription"
            type="textarea"
            maxlength="500"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="standardBox = false">取消</el-button>
        <el-button type="primary" v-if="!readonly" @click="saveStandard">保存</el-button>
      </template>
    </el-dialog>
  </basic-container>
</template>

<script>
import {
  getList,
  getDetail,
  submit,
  remove,
  publish,
  changeStatus,
} from '@/api/vehicle/credit-score-quantification';
import { exportBlob } from '@/api/common';
import { downloadXls } from '@/utils/util';
import { openImportDialog } from '@/utils/import-excel';
import { getToken } from '@/utils/auth';
import { mapGetters } from 'vuex';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

export default {
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      data: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      configBox: false,
      categoryBox: false,
      itemBox: false,
      standardBox: false,
      excelBox: false,
      readonly: false,
      excelForm: {},
      configForm: this.emptyConfig(),
      currentCategory: { items: [] },
      currentItemIndex: -1,
      currentStandardIndex: -1,
      itemForm: this.emptyItem(),
      standardForm: this.emptyStandard(),
      statusMap: {
        1: { label: '正常', type: 'success' },
        2: { label: '停用', type: 'info' },
        3: { label: '草稿', type: 'warning' },
      },
      creditLevelOptions: ['A', 'B', 'C', 'D', 'E', 'F'].map(item => ({
        label: item,
        value: item,
      })),
      option: {
        height: 'auto',
        calcHeight: 32,
        dialogWidth: 760,
        labelPosition: 'right',
        tip: false,
        searchShow: true,
        searchMenuSpan: 24,
        searchIcon: true,
        searchIndex: 8,
        searchMenuPosition: 'right',
        border: true,
        index: true,
        indexLabel: '序号',
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        selection: true,
        dialogClickModal: false,
        menuWidth: 300,
        column: [
          {
            label: '评定表名称',
            prop: 'name',
            slot: true,
            minWidth: 180,
            search: true,
            maxlength: 30,
            rules: [{ required: true, message: '请输入评定表名称', trigger: 'blur' }],
          },
          {
            label: '备注',
            prop: 'remark',
            minWidth: 260,
            overHidden: true,
          },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            search: true,
            slot: true,
            dataType: 'number',
            dicData: [
              { label: '正常', value: 1 },
              { label: '停用', value: 2 },
              { label: '草稿', value: 3 },
            ],
          },
          {
            label: '创建时间',
            prop: 'createTime',
            type: 'datetime',
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            minWidth: 160,
          },
          {
            label: '创建开始时间',
            prop: 'createTimeStart',
            type: 'date',
            format: 'YYYY-MM-DD 00:00:00',
            valueFormat: 'YYYY-MM-DD 00:00:00',
            hide: true,
            display: false,
          },
          {
            label: '创建结束时间',
            prop: 'createTimeEnd',
            type: 'date',
            format: 'YYYY-MM-DD 23:59:59',
            valueFormat: 'YYYY-MM-DD 23:59:59',
            hide: true,
            display: false,
          },
        ],
      },
      excelOption: {
        labelPosition: 'right',
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '模板上传',
            prop: 'excelFile',
            type: 'upload',
            drag: true,
            loadText: '模板上传中，请稍等',
            span: 24,
            propsHttp: {
              res: 'data',
            },
            tip: '请上传 .xls,.xlsx 标准格式文件',
            action:
              '/blade-transport/credit-score-quantification/import-credit-score-quantification',
          },
          {
            label: '模板下载',
            prop: 'excelTemplate',
            formslot: true,
            span: 24,
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(['permission', 'userInfo']),
    isAdmin() {
      const authority = this.userInfo.authority || '';
      return authority.includes('admin');
    },
    permissionList() {
      return {
        addBtn: false,
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    },
  },
  methods: {
    hasPermission(code) {
      return this.isAdmin || this.validData(this.permission[code], false);
    },
    emptyConfig() {
      return {
        name: '',
        remark: '',
        standardDescription: '',
        status: 3,
        categories: this.defaultCategories(),
        standards: [],
      };
    },
    defaultCategories() {
      return [
        { categoryCode: 'basic', categoryName: '基础得分项', sort: 1, items: [] },
        { categoryCode: 'plus', categoryName: '加分项目', sort: 2, items: [] },
        { categoryCode: 'minus', categoryName: '减分项目', sort: 3, items: [] },
      ];
    },
    emptyItem() {
      return {
        itemName: '',
        scoreDescription: '',
        optionDescription: '',
        options: [{ optionName: '', score: 0 }],
      };
    },
    emptyStandard() {
      return {
        creditLevel: '',
        scoreRateLower: undefined,
        scoreRateUpper: undefined,
        scoreRateIncrease: undefined,
        creditLimitLower: undefined,
        creditLimitUpper: undefined,
        creditLimitIncrease: undefined,
        standardDescription: '',
      };
    },
    normalizeDetail(detail) {
      const categories = this.defaultCategories();
      const map = {};
      (detail.categories || []).forEach(category => {
        map[category.categoryCode] = {
          ...category,
          items: (category.items || []).map(item => ({
            ...item,
            options:
              item.options && item.options.length ? item.options : [{ optionName: '', score: 0 }],
          })),
        };
      });
      return {
        ...detail,
        categories: categories.map(category => map[category.categoryCode] || category),
        standards: detail.standards || [],
      };
    },
    openConfig(row, readonly = false) {
      this.readonly = readonly;
      if (row && row.id) {
        getDetail(row.id).then(res => {
          this.configForm = this.normalizeDetail(res.data.data);
          this.configBox = true;
        });
        return;
      }
      this.configForm = this.emptyConfig();
      if (row && row.name) {
        this.configForm.name = row.name;
      }
      this.configBox = true;
    },
    resetConfig() {
      this.readonly = false;
      this.configForm = this.emptyConfig();
    },
    openCategory(category) {
      this.currentCategory = category;
      this.categoryBox = true;
    },
    openItem(row, index = -1) {
      this.currentItemIndex = index;
      this.itemForm = row ? JSON.parse(JSON.stringify(row)) : this.emptyItem();
      this.itemBox = true;
    },
    saveItem() {
      if (!this.itemForm.itemName || !this.itemForm.itemName.trim()) {
        this.$message.warning('请输入评分项目');
        return;
      }
      if (!this.itemForm.options.length) {
        this.$message.warning('至少添加1条档位选项');
        return;
      }
      const item = JSON.parse(JSON.stringify(this.itemForm));
      if (this.currentItemIndex >= 0) {
        this.currentCategory.items.splice(this.currentItemIndex, 1, item);
      } else {
        this.currentCategory.items.push(item);
      }
      this.itemBox = false;
    },
    removeItem(index) {
      this.currentCategory.items.splice(index, 1);
    },
    addOption() {
      this.itemForm.options.push({ optionName: '', score: 0 });
    },
    removeOption(index) {
      this.itemForm.options.splice(index, 1);
    },
    openStandard(row, index = -1) {
      this.currentStandardIndex = index;
      this.standardForm = row ? JSON.parse(JSON.stringify(row)) : this.emptyStandard();
      this.standardBox = true;
    },
    hasDuplicateCreditLevel(creditLevel, currentIndex = -1) {
      const level = String(creditLevel || '').trim();
      return this.configForm.standards.some(
        (item, index) => index !== currentIndex && String(item.creditLevel || '').trim() === level
      );
    },
    isValidCreditLevel(creditLevel) {
      return this.creditLevelOptions.some(item => item.value === String(creditLevel || '').trim());
    },
    saveStandard() {
      if (!this.standardForm.creditLevel) {
        this.$message.warning('请选择信用等级');
        return;
      }
      if (!this.isValidCreditLevel(this.standardForm.creditLevel)) {
        this.$message.warning('信用等级只能选择A/B/C/D/E/F');
        return;
      }
      if (this.hasDuplicateCreditLevel(this.standardForm.creditLevel, this.currentStandardIndex)) {
        this.$message.warning('信用等级不能重复');
        return;
      }
      if (
        [
          this.standardForm.scoreRateLower,
          this.standardForm.scoreRateUpper,
          this.standardForm.scoreRateIncrease,
          this.standardForm.creditLimitLower,
          this.standardForm.creditLimitUpper,
          this.standardForm.creditLimitIncrease,
        ].some(value => value === undefined || value === null || value === '')
      ) {
        this.$message.warning('请完整填写评估标准必填项');
        return;
      }
      if (Number(this.standardForm.scoreRateLower) >= Number(this.standardForm.scoreRateUpper)) {
        this.$message.warning('得分率下限必须小于上限');
        return;
      }
      const standard = JSON.parse(JSON.stringify(this.standardForm));
      standard.creditLevel = String(standard.creditLevel || '').trim();
      if (this.currentStandardIndex >= 0) {
        this.configForm.standards.splice(this.currentStandardIndex, 1, standard);
      } else {
        this.configForm.standards.push(standard);
      }
      this.standardBox = false;
    },
    removeStandard(index) {
      this.configForm.standards.splice(index, 1);
    },
    validateConfig() {
      if (!this.configForm.name || !this.configForm.name.trim()) {
        this.$message.warning('请输入评定表名称');
        return false;
      }
      const basic = this.configForm.categories.find(item => item.categoryCode === 'basic');
      if (!basic || basic.items.length === 0) {
        this.$message.warning('至少配置1个基础得分项目');
        return false;
      }
      for (const category of this.configForm.categories) {
        for (const item of category.items) {
          if (!item.options || item.options.length === 0) {
            this.$message.warning(`${item.itemName}至少存在1条档位选项`);
            return false;
          }
        }
      }
      const creditLevels = this.configForm.standards
        .map(item => String(item.creditLevel || '').trim())
        .filter(Boolean);
      if (creditLevels.some(level => !this.isValidCreditLevel(level))) {
        this.$message.warning('评估标准中的信用等级只能选择A/B/C/D/E/F');
        return false;
      }
      if (new Set(creditLevels).size !== creditLevels.length) {
        this.$message.warning('评估标准中的信用等级不能重复');
        return false;
      }
      return true;
    },
    saveConfig() {
      if (!this.validateConfig()) return;
      submit(this.configForm).then(() => {
        this.configBox = false;
        this.onLoad(this.page);
        this.$message({ type: 'success', message: '操作成功!' });
      });
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => remove(row.id))
        .then(() => {
          this.onLoad(this.page);
          this.$message({ type: 'success', message: '操作成功!' });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('仅草稿状态量表可删除，确定删除所选数据?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => remove(this.ids))
        .then(() => {
          this.onLoad(this.page);
          this.$message({ type: 'success', message: '操作成功!' });
          this.$refs.crud.toggleSelection();
        });
    },
    handlePublish(row) {
      this.$confirm('发布前将校验所有评分项目、档位选项和评估标准，是否继续？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => publish(row.id))
        .then(() => {
          this.onLoad(this.page);
          this.$message({ type: 'success', message: '发布成功!' });
        });
    },
    handleStatus(row) {
      const nextStatus = row.status === 1 ? 2 : 1;
      const actionName = nextStatus === 1 ? '启用' : '停用';
      this.$confirm(`是否确认${actionName}该量表？`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => changeStatus(row.id, nextStatus))
        .then(() => {
          this.onLoad(this.page);
          this.$message({ type: 'success', message: '操作成功!' });
        });
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    },
    handleImport() {
      openImportDialog(this, '评分量化表');
    },
    handleExport() {
      this.$confirm('是否导出评分量化表数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        NProgress.start();
        exportBlob(
          '/blade-transport/credit-score-quantification/export-credit-score-quantification',
          this.buildExportParams()
        )
          .then(res => {
            downloadXls(res.data, `评分量化表${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
          })
          .finally(() => {
            NProgress.done();
          });
      });
    },
    buildExportParams() {
      return {
        ...this.query,
        ids: this.ids,
        [this.website.tokenHeader]: getToken(),
      };
    },
    handleTemplate() {
      exportBlob(
        `/blade-transport/credit-score-quantification/export-template?${
          this.website.tokenHeader
        }=${getToken()}`
      ).then(res => {
        downloadXls(res.data, '评分量化表模板.xlsx');
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.score-config {
  padding: 4px 12px 12px;
}

.base-form {
  max-width: 1080px;
  margin: 10px auto 28px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 12px;

  .section-title {
    margin: 0;
  }
}

.section-title {
  margin: 18px 0 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
  color: #303133;
}

.standard-head {
  margin-top: 36px;
}

.config-table {
  width: 100%;
}

.category-line {
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 600;
  color: #606266;
}

.option-editor {
  width: 100%;
}

.option-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 190px 32px 70px;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.range-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.score-unit {
  margin-left: 8px;
  color: #606266;
}

:deep(.score-dialog .el-dialog__body) {
  max-height: 70vh;
  overflow: auto;
}
</style>
