<template>
  <div class="app-container">
    <div class="account-title" style="margin-bottom: 16px;align-items: center;display: flex;width:97.6vw">
        {{ '价格明细' }}
        <div style="margin-left: auto;">
          <el-button @click="cancel" icon="el-icon-remove-outline">{{ $t('common.cancel') }}</el-button>
        </div>
    </div>
    <card-table :loading="loading" :modalData="reviewResultList" :searchParams="queryParams"
                labelWidth="120px" @pagination="getList" :max-height="600">
      <template #operations="{ selections }">
        <el-form class="account-form" :model="reviewForm">
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 电梯类型 -->
              <el-form-item :label="$t('paraLibrary.elevatorType')" prop="elevatorType">
                <el-select :disabled="true" v-model="reviewForm.elevatorType" style="width:20vw;">
                  <el-option v-for="item in dict.type.elevator_type" :key="item.value"
                             :label="item.label" :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!--电梯型号 -->
              <el-form-item :label="$t('elevatorModel.elevatorModel')" prop="elevatorModelId">
                <el-select :disabled="true" v-model="reviewForm.elevatorModelId" style="width:20vw;">
                  <el-option v-for="dict in allElevatorModelList" :key="Number(dict.value)"
                             :label="dict.label" :value="Number(dict.value)"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!--数量 -->
              <el-form-item :label="$t('quotation.count')" prop="elevatorNumber">
                <el-input :disabled="true" v-model="reviewForm.elevatorNumber" style="width:20vw;">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #default="{ list }">
        <el-table-column align="center" type="index" label="No." width="55"/>
        <!--评审项目-->
        <Column :label="$t('quotation.reviewProject')" prop="markupName" :min-width="200"/>
        <!--单价-->
        <Column :label="$t('quotation.unitPriceLabel')" prop="price" ::min-width="120" align="right">
          <template #default="{ row }">
            {{ numFormat(row.price) }}
          </template>
        </Column>
        <!--数量-->
        <Column :label="$t('quotation.count')" prop="quantity" :min-width="80"/>
        <!--单位-->
        <Column :label="$t('quotation.unit')" prop="unit" :min-width="100"/>
        <!--总价-->
        <Column :label="$t('quotation.totalPriceLabel')" prop="total" :min-width="120" align="right">
          <template #default="{ row }">
            {{ numFormat(row.total) }}
          </template>
        </Column>
        <!--关联参数信息-->
        <Column :label="$t('quotation.relatedParamInfo')" prop="relatedParaInfo" :min-width="300" searchType="dateRange"/>
        <!--系统评审结果-->
        <Column :label="$t('quotation.systemReviewResult')" prop="systemCheckResult" :min-width="140">
          <template #default="{ row }">
            <span v-if="row.systemCheckResult === '00'" style="color: #218AFC">{{ convertCheckResult(row.systemCheckResult) }}</span>
            <span v-else style="color: #D71943">{{ convertCheckResult(row.systemCheckResult) }}</span>
          </template>
        </Column>
        <!--理由-->
        <Column :label="$t('quotation.reason')" prop="nonStandardReason" :min-width="300"/>
      </template>
      <template #statistic>
          <div class="statistic">
            <p>{{$t('quotation.total')}}：{{ numFormat(originalBasicPrice + originalOptionalPrice) }} ({{ numFormat(originalBasicPrice) }} + {{ numFormat(originalOptionalPrice) }})</p>
            <p>{{$t('quotation.discountTotal')}}：{{ numFormat(basicPrice + optionalPrice) }} ({{ numFormat(basicPrice) }} + {{ numFormat(optionalPrice) }}) {{$t('quotation.discountRate')}}：{{ discountFlag ? $t('quotation.totalPriceLabel'): $t('quotation.basicPrice')}} {{ discountRate }}%</p>
        </div>
      </template>
    </card-table>


  </div>
</template>

<script>
import Column from "@/components/element/table/Column.vue";
import {mapGetters} from "vuex";
import {listAllPriceDetail} from "@/api/business/quotation/priceDetail";
import {listModelNewAll} from "@/api/business/crm/elevatorModel";

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

export default {
  name: "SysQuotation/:id(\\d+)",
  inject: ["main"],
  components: {Column},
  dicts: [
    "elevator_type",
    "system_check_result",
  ],
  data() {
    return {
      // 电梯规格Id
      specificationId: null,
      elevatorType: null,
      elevatorModelId: null,
      elevatorNumber: null,
      // 页面表单
      reviewForm: {
        elevatorType: null,
        elevatorModelId: null,
        elevatorNumber: null,
      },
      allElevatorModelList: [],
      // 遮罩层
      loading: true,
      // 非多个禁用
      multiple: true,
      single: true,
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 报价列表
      reviewResultList: [],
      language: null,
      queryParams: {
        total: 0
      },
      originalBasicPrice: 0,
      originalOptionalPrice: 0,
      basicPrice: 0,
      optionalPrice: 0,
      discountFlag: false,
      discountRate: 0,
    };
  },
  async created() {
    this.specificationId = this.$route.query && this.$route.query.specificationId;
    this.elevatorType = this.$route.query && this.$route.query.elevatorType;
    this.elevatorModelId = this.$route.query && this.$route.query.elevatorModelId;
    this.elevatorNumber = this.$route.query && this.$route.query.elevatorNumber;
    this.reviewForm = {
      elevatorType: this.elevatorType,
      elevatorModelId: Number(this.elevatorModelId),
      elevatorNumber: this.elevatorNumber,
    }
    this.language = this.$i18n.locale;
    await this.initElevatorModel();
    await this.getList();
  },
  computed: {
    ...mapGetters(["userId"]),
    localLabelSuffix() {
      return labelSuffix[this.$i18n.locale] || "";
    },
  },
  async activated() {

  },
  methods: {
    // 梯形初始化
    async initElevatorModel() {
      let form = {
        needAll: true
      }
      const response = await listModelNewAll(form);
      if (response.rows) {
        response.rows.forEach(item => {
          this.allElevatorModelList.push(
            {
              'label': item.elevatorModel,
              'value': item.id,
            }
          )
        })
      }
    },
    cancel() {
      this.$tab.closePage();
    },
    /** 查询区域列表 */
    getList() {
      let form = {
        specificationId: this.specificationId
      }
      this.loading = true
      this.reviewResultList = []
      listAllPriceDetail(form).then(response => {
        this.reviewResultList = response.rows
        this.queryParams.total = 0
        this.loading = false


        let originalBasicPrice = 0
        let originalOptionalPrice = 0
        let basicPrice = 0
        let optionalPrice = 0
        response.rows.forEach(({ total, defaultRate = 100, discountFlag = false }, index) => {
          this.discountRate = defaultRate
          this.discountFlag = discountFlag
          if (index === 0) {
            originalBasicPrice += total
            basicPrice += total * defaultRate / 100
          } else {
            originalOptionalPrice += total
            optionalPrice += total * (discountFlag ? defaultRate: 100) / 100
          }
        })
        this.originalBasicPrice = originalBasicPrice
        this.originalOptionalPrice = originalOptionalPrice
        this.basicPrice = Math.round(basicPrice)
        this.optionalPrice = Math.round(optionalPrice)
      })
    },
    convertCheckResult(status) {
      if (!status) return '-'
      const check = this.dict.type.system_check_result.filter(item => item.value == status)
      if (check && check.length > 0) {
        return check[0].label
      } else {
        return '-'
      }
    },
  },
};
</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;
}
.account-title {
    font-family: Arial, Arial;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
  }
</style>
