<template>
  <div class="app-container">
    <card-table :loading="loading" :modalData="quotationList" :searchParams="queryParams" :tableSearch="true"
                labelWidth="120px" @columnSearch="handleQuery" @pagination="getList" @resetList="resetQuery" @selection-change="handleSelectionChange">
      <template #operations="{ selections }">
        <el-button icon="el-icon-search" size="mini" type="primary" @click="getList">{{ $t('common.search') }}
        </el-button>
        <el-button icon="el-icon-refresh" plain size="mini" @click="resetQuery">{{ $t('common.reset') }}
        </el-button>
        <el-button icon="el-icon-download" plain size="mini" @click="handleExport">{{ $t('common.export') }}
        </el-button>
      </template>
      <template #default="{ list }">
        <el-table-column align="center" type="selection" width="55"/>
        <el-table-column align="center" type="index" label="No." width="55"/>
        <!--项目编号-->
        <Column :label="$t('project.projectNo')" :showSearch="true" prop="projectNo" :min-width="200"/>
        <!--区域-->
        <Column :label="$t('project.area')" prop="areaId" :showSearch="true" searchType="select" :searchDict="areaList" :min-width="200" :selectMore="true"/>
        <!--项目名称-->
        <Column :label="$t('project.projectName')" :showSearch="true" prop="projectName"/>
        <!--报价编号-->
        <Column :label="$t('quotation.quotationNo')" prop="quotationNo" :min-width="200" :showSearch="true"/>
        <!--电梯类型-->
        <Column :label="$t('paraLibrary.elevatorType')" prop="elevatorTypeId" :showSearch="true" searchType="select" :searchDict="dict.type.elevator_type" :min-width="200"/>
        <!--日期-->
        <Column :label="$t('common.date')" prop="date" :min-width="300" :showSearch="true" searchType="dateRange"/>
        <!--评审项目-->
        <Column :label="$t('quotation.reviewProject')" prop="markupName" :showSearch="true" :min-width="300" :selectMore="true"/>
        <!--关联参数信息-->
        <Column :label="$t('quotation.relatedParamInfo')" prop="relatedParaInfo" :showSearch="true" :min-width="300"/>
        <!--非标理由-->
        <Column :label="$t('quotation.nonstandardReason')" prop="nonStandardReason" :showSearch="true" :min-width="300"/>
        <!--技术意见（电气）-->
        <Column :label="$t('quotation.techAdvice') + '('+$t('quotation.electric')+')'" prop="solution" :showSearch="true" :min-width="300"/>
        <!--技术意见（机械）-->
        <Column :label="$t('quotation.techAdvice') + '('+$t('quotation.machine')+')'" prop="solutionMachine" :showSearch="true" :min-width="300"/>
      </template>
    </card-table>
  </div>
</template>

<script>
import Column from "@/components/element/table/Column.vue";
import {parseTime} from "@/utils/ruoyi";
import {mapGetters} from "vuex";
import {listNonstandardStatistics} from "@/api/business/quotation/priceDetail";
import {getAllAreaList} from "@/api/user/area";

const labelSuffix = {
  chinese: "",
  english: "US",
  russia: "RU",
  spanish: "ES",
};

export default {
  name: "NonstandardStatistics",
  inject: ["main"],
  components: {Column},
  dicts: [
    "elevator_type",
  ],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 非多个禁用
      multiple: true,
      single: true,
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 报价列表
      quotationList: [],
      // 国家列表
      countryList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        projectNo: null,
        areaId: [],
        projectName: null,
        quotationNo: null,
        elevatorTypeId: [],
        date: [],
        markupName: null,
        relatedParaInfo: null,
        nonStandardReason: null,
        solution: null,
      },
      language: null,
      areaList: [],
    };
  },
  async created() {
    this.language = this.$i18n.locale;
    this.getList();
    this.getAreaList();
  },
  computed: {
    ...mapGetters(["userId"]),
    localLabelSuffix() {
      return labelSuffix[this.$i18n.locale] || "";
    },
  },
  activated() {
    this.getList();
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 查询区域
    getAreaList() {
      this.areaList = []
      getAllAreaList().then(response => {
        if (response.data) {
          response.data.forEach(item => {
            this.areaList.push({
              label: item['areaName' + this.localLabelSuffix],
              value: item.areaId
            })
          })
        }
      });
    },
    /** 查询区域列表 */
    getList() {
      console.log("查詢參數", this.queryParams);
      this.queryParams.language = this.language
      this.loading = true;
      listNonstandardStatistics(this.queryParams)
        .then((response) => {
          this.quotationList = response.rows;
          this.queryParams.total = response.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.projectNo = null;
      this.queryParams.areaId = [];
      this.queryParams.projectName = null;
      this.queryParams.quotationNo = null;
      this.queryParams.elevatorTypeId = [];
      this.queryParams.date = [];
      this.queryParams.beginTime = null;
      this.queryParams.endTime = null;
      this.queryParams.markupName = null;
      this.queryParams.relatedParaInfo = null;
      this.queryParams.nonStandardReason = null;
      this.queryParams.solution = null;
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;

      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      console.log('导出文件', this.ids)
      let param = {
        ...this.queryParams,
      }
      param.ids = this.ids
      param.pageNum = null
      param.pageSize = null
      console.log('导出参数', param)
      let fileName = this.$t('quotation.nonstandardStatistics') + parseTime(new Date(), '{y}{m}{d}') + '.xlsx'
      this.download("/business/price/detail/nonstandard/export", param, fileName);
    },
  },
};
</script>

<!--style-->
<style scoped>
::v-deep .el-dialog__body {
  padding-bottom: 0px;
}

.w-100 {
  width: 100%;
}

.mb16 {
  margin-bottom: 16px;
}

.ml20 {
  margin-left: 20px;
}

.card-title {
  font-family: Arial, Arial;
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
  line-height: 18px;
}
</style>
