<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
        <el-form-item prop="statYear">
          <template slot="label">{{ cpT("queryStatYear") }}</template>
          <el-date-picker
            v-model="queryParams.statYear"
            type="year"
            value-format="yyyy"
            :placeholder="cpT('queryStatYearPh')"
            clearable
            style="width: 140px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ cpCommon("search") }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ cpCommon("reset") }}</el-button>
          <el-button
            v-hasPermi="['commonProsperity:achievement:add']"
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >{{ cpCommon("add") }}</el-button>
          <el-button
            v-hasPermi="['commonProsperity:achievement:remove']"
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="!ids.length"
            @click="handleDeleteBatch"
          >{{ cpCommon("delete") }}</el-button>
          <!-- 导出功能暂未开放
          <el-button
            v-hasPermi="['commonProsperity:achievement:export']"
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
          >{{ cpCommon("export") }}</el-button>
          -->
        </el-form-item>
      </el-form>
    </el-card>

    <br />

    <el-card shadow="never">
      <el-table v-loading="loading" :data="tableList" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center" fixed="left" />
        <el-table-column :label="cpT('colStatPeriod')" prop="statPeriod" align="center" width="100" fixed="left" />
        <el-table-column :label="cpT('colCollectiveIncome')" align="center" min-width="130">
          <template slot-scope="scope">
            <span>{{ formatMoney(scope.row.collectiveEconomyIncome) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="cpT('colEmploymentDriven')" align="center" min-width="120">
          <template slot-scope="scope">
            <span>{{ formatIntWithUnit(scope.row.employmentDrivenCount, 'unitPerson') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="cpT('colNewJobs')" align="center" min-width="120">
          <template slot-scope="scope">
            <span>{{ formatIntWithUnit(scope.row.newJobPositions, 'unitGe') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="cpT('colEnvProjects')" align="center" min-width="130">
          <template slot-scope="scope">
            <span>{{ formatIntWithUnit(scope.row.envProjectCount, 'unitGe') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="cpT('colGreenArea')" align="center" min-width="120">
          <template slot-scope="scope">
            <span>{{ formatArea(scope.row.newGreenArea) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="cpT('colCulturalHeritage')" align="center" min-width="120">
          <template slot-scope="scope">
            <span>{{ formatIntWithUnit(scope.row.culturalHeritageCount, 'unitPerson') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="cpT('colEthnicIntegration')" align="center" min-width="130">
          <template slot-scope="scope">
            <span>{{ formatIntWithUnit(scope.row.ethnicIntegrationProjectCount, 'unitGe') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="cpT('colEthnicUnity')" align="center" min-width="130">
          <template slot-scope="scope">
            <span>{{ formatIntWithUnit(scope.row.ethnicUnityActivityCount, 'unitGe') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="cpT('colDigitalRate')" align="center" min-width="120">
          <template slot-scope="scope">
            <span>{{ formatRate(scope.row.digitalPlatformUsageRate) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="cpT('colBrandCount')" align="center" min-width="130">
          <template slot-scope="scope">
            <span>{{ formatIntWithUnit(scope.row.regionalPublicBrandCount, 'unitGe') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="cpT('colBrandPremium')" align="center" min-width="120">
          <template slot-scope="scope">
            <span>{{ formatRate(scope.row.brandPremiumRate) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="cpCommon('colCreate')" align="center" width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime ? parseTime(scope.row.createTime) : $t('commonProsperity.status.dash') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="cpCommon('colOp')" align="center" class-name="small-padding fixed-width" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button v-hasPermi="['commonProsperity:achievement:query']" type="text" size="mini" @click="handleView(scope.row)">{{ cpCommon("view") }}</el-button>
            <el-button v-hasPermi="['commonProsperity:achievement:edit']" type="text" size="mini" @click="handleEdit(scope.row)">{{ cpCommon("edit") }}</el-button>
            <el-button v-hasPermi="['commonProsperity:achievement:remove']" type="text" size="mini" @click="handleDelete(scope.row)">{{ cpCommon("delete") }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <el-dialog :title="dialogTitle" :visible.sync="open" width="900px" append-to-body @close="cancel">
      <el-form :key="formKey" ref="form" :model="form" label-width="130px">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item prop="statPeriod" :rules="formRules.statPeriod">
              <template slot="label">{{ cpT("formStatPeriod") }}</template>
              <el-date-picker
                v-model="form.statPeriod"
                type="month"
                value-format="yyyy-MM"
                :placeholder="cpT('phStatPeriod')"
                style="width: 100%"
              />
              <!-- <div class="el-form-item__tip">{{ cpT("tipStatPeriod") }}</div> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="collectiveEconomyIncome" :rules="formRules.collectiveEconomyIncome">
              <template slot="label">{{ cpT("formCollectiveIncome") }}</template>
              <div class="cp-input-with-unit">
                <el-input-number v-model="form.collectiveEconomyIncome" :min="0" :precision="2" :step="1" controls-position="right" class="cp-input-with-unit__input" />
                <span class="cp-input-with-unit__suffix">{{ cpCommon("unitWanYuan") }}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="employmentDrivenCount" :rules="formRules.employmentDrivenCount">
              <template slot="label">{{ cpT("formEmploymentDriven") }}</template>
              <div class="cp-input-with-unit">
                <el-input-number v-model="form.employmentDrivenCount" :min="0" :precision="0" :step="1" controls-position="right" class="cp-input-with-unit__input" />
                <span class="cp-input-with-unit__suffix">{{ cpCommon("unitPerson") }}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="newJobPositions" :rules="formRules.newJobPositions">
              <template slot="label">{{ cpT("formNewJobs") }}</template>
              <div class="cp-input-with-unit">
                <el-input-number v-model="form.newJobPositions" :min="0" :precision="0" :step="1" controls-position="right" class="cp-input-with-unit__input" />
                <span class="cp-input-with-unit__suffix">{{ cpCommon("unitGe") }}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="envProjectCount" :rules="formRules.envProjectCount">
              <template slot="label">{{ cpT("formEnvProjects") }}</template>
              <div class="cp-input-with-unit">
                <el-input-number v-model="form.envProjectCount" :min="0" :precision="0" :step="1" controls-position="right" class="cp-input-with-unit__input" />
                <span class="cp-input-with-unit__suffix">{{ cpCommon("unitGe") }}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="newGreenArea" :rules="formRules.newGreenArea">
              <template slot="label">{{ cpT("formGreenArea") }}</template>
              <div class="cp-input-with-unit">
                <el-input-number v-model="form.newGreenArea" :min="0" :precision="2" :step="0.1" controls-position="right" class="cp-input-with-unit__input" />
                <span class="cp-input-with-unit__suffix">{{ cpCommon("unitMu") }}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="culturalHeritageCount" :rules="formRules.culturalHeritageCount">
              <template slot="label">{{ cpT("formCulturalHeritage") }}</template>
              <div class="cp-input-with-unit">
                <el-input-number v-model="form.culturalHeritageCount" :min="0" :precision="0" :step="1" controls-position="right" class="cp-input-with-unit__input" />
                <span class="cp-input-with-unit__suffix">{{ cpCommon("unitPerson") }}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="ethnicIntegrationProjectCount" :rules="formRules.ethnicIntegrationProjectCount">
              <template slot="label">{{ cpT("formEthnicIntegration") }}</template>
              <div class="cp-input-with-unit">
                <el-input-number v-model="form.ethnicIntegrationProjectCount" :min="0" :precision="0" :step="1" controls-position="right" class="cp-input-with-unit__input" />
                <span class="cp-input-with-unit__suffix">{{ cpCommon("unitGe") }}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="ethnicUnityActivityCount" :rules="formRules.ethnicUnityActivityCount">
              <template slot="label">{{ cpT("formEthnicUnity") }}</template>
              <div class="cp-input-with-unit">
                <el-input-number v-model="form.ethnicUnityActivityCount" :min="0" :precision="0" :step="1" controls-position="right" class="cp-input-with-unit__input" />
                <span class="cp-input-with-unit__suffix">{{ cpCommon("unitGe") }}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="digitalPlatformUsageRate" :rules="formRules.digitalPlatformUsageRate">
              <template slot="label">{{ cpT("formDigitalRate") }}</template>
              <div class="cp-input-with-unit">
                <el-input-number v-model="form.digitalPlatformUsageRate" :min="0" :max="1" :precision="2" :step="0.01" controls-position="right" class="cp-input-with-unit__input" />
                <span class="cp-input-with-unit__suffix">{{ cpCommon("unitRatio") }}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="regionalPublicBrandCount" :rules="formRules.regionalPublicBrandCount">
              <template slot="label">{{ cpT("formBrandCount") }}</template>
              <div class="cp-input-with-unit">
                <el-input-number v-model="form.regionalPublicBrandCount" :min="0" :precision="0" :step="1" controls-position="right" class="cp-input-with-unit__input" />
                <span class="cp-input-with-unit__suffix">{{ cpCommon("unitGe") }}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="brandPremiumRate" :rules="formRules.brandPremiumRate">
              <template slot="label">{{ cpT("formBrandPremium") }}</template>
              <div class="cp-input-with-unit">
                <el-input-number v-model="form.brandPremiumRate" :min="0" :max="1" :precision="2" :step="0.01" controls-position="right" class="cp-input-with-unit__input" />
                <span class="cp-input-with-unit__suffix">{{ cpCommon("unitRatio") }}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="remark">
              <template slot="label">{{ cpT("formRemark") }}</template>
              <el-input v-model="form.remark" type="textarea" :rows="2" maxlength="500" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ cpCommon("ok") }}</el-button>
        <el-button @click="cancel">{{ cpCommon("cancel") }}</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="cpCommon('viewTitle')" :visible.sync="viewOpen" width="720px" append-to-body>
      <el-form label-width="140px" size="small">
        <el-form-item :label="cpT('formStatPeriod')">
          <span>{{ viewRow.statPeriod || $t("commonProsperity.status.dash") }}</span>
        </el-form-item>
        <el-form-item :label="cpT('formCollectiveIncome')">
          <span>{{ formatMoney(viewRow.collectiveEconomyIncome) }}</span>
        </el-form-item>
        <el-form-item :label="cpT('formEmploymentDriven')">
          <span>{{ formatIntWithUnit(viewRow.employmentDrivenCount, 'unitPerson') }}</span>
        </el-form-item>
        <el-form-item :label="cpT('formNewJobs')">
          <span>{{ formatIntWithUnit(viewRow.newJobPositions, 'unitGe') }}</span>
        </el-form-item>
        <el-form-item :label="cpT('formEnvProjects')">
          <span>{{ formatIntWithUnit(viewRow.envProjectCount, 'unitGe') }}</span>
        </el-form-item>
        <el-form-item :label="cpT('formGreenArea')">
          <span>{{ formatArea(viewRow.newGreenArea) }}</span>
        </el-form-item>
        <el-form-item :label="cpT('formCulturalHeritage')">
          <span>{{ formatIntWithUnit(viewRow.culturalHeritageCount, 'unitPerson') }}</span>
        </el-form-item>
        <el-form-item :label="cpT('formEthnicIntegration')">
          <span>{{ formatIntWithUnit(viewRow.ethnicIntegrationProjectCount, 'unitGe') }}</span>
        </el-form-item>
        <el-form-item :label="cpT('formEthnicUnity')">
          <span>{{ formatIntWithUnit(viewRow.ethnicUnityActivityCount, 'unitGe') }}</span>
        </el-form-item>
        <el-form-item :label="cpT('formDigitalRate')">
          <span>{{ formatRate(viewRow.digitalPlatformUsageRate) }}</span>
        </el-form-item>
        <el-form-item :label="cpT('formBrandCount')">
          <span>{{ formatIntWithUnit(viewRow.regionalPublicBrandCount, 'unitGe') }}</span>
        </el-form-item>
        <el-form-item :label="cpT('formBrandPremium')">
          <span>{{ formatRate(viewRow.brandPremiumRate) }}</span>
        </el-form-item>
        <el-form-item :label="cpT('formRemark')">
          <span>{{ viewRow.remark || $t("commonProsperity.status.dash") }}</span>
        </el-form-item>
        <el-form-item :label="cpT('viewCreateBy')">
          <span>{{ viewRow.createBy || $t("commonProsperity.status.dash") }}</span>
        </el-form-item>
        <el-form-item :label="cpCommon('colCreate')">
          <span>{{ viewRow.createTime ? parseTime(viewRow.createTime) : $t("commonProsperity.status.dash") }}</span>
        </el-form-item>
        <el-form-item :label="cpT('viewUpdateBy')">
          <span>{{ viewRow.updateBy || $t("commonProsperity.status.dash") }}</span>
        </el-form-item>
        <el-form-item :label="cpT('viewUpdateTime')">
          <span>{{ viewRow.updateTime ? parseTime(viewRow.updateTime) : $t("commonProsperity.status.dash") }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewOpen = false">{{ cpCommon("close") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commonProsperityLocaleMixin from "@/mixins/commonProsperityLocaleMixin"
import {
  listCommonProsperityAchievement,
  getCommonProsperityAchievement,
  addCommonProsperityAchievement,
  updateCommonProsperityAchievement,
  delCommonProsperityAchievement
} from "@/api/commonProsperity/achievement"

const STAT_PERIOD_REG = /^\d{4}-(0[1-9]|1[0-2])$/

export default {
  name: "CommonProsperityAchievement",
  mixins: [commonProsperityLocaleMixin],
  data() {
    return {
      cpNs: "achievement",
      loading: false,
      open: false,
      viewOpen: false,
      viewRow: {},
      dialogEdit: false,
      formKey: 0,
      total: 0,
      tableList: [],
      ids: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        statYear: undefined
      },
      form: {}
    }
  },
  computed: {
    dialogTitle() {
      return this.dialogEdit ? this.cpT("dialogEdit") : this.cpT("dialogAdd")
    },
    formRules() {
      const intRule = (msgKey) => [
        { required: true, message: this.cpT(msgKey), trigger: "blur" },
        { validator: this.validateNonNegativeInt, trigger: "blur" }
      ]
      const rateRule = (msgKey) => [
        { required: true, message: this.cpT(msgKey), trigger: "blur" },
        { validator: this.validateRate, trigger: "blur" }
      ]
      return {
        statPeriod: [
          { required: true, message: this.cpT("ruleStatPeriodRequired"), trigger: "change" },
          { validator: this.validateStatPeriod, trigger: "change" }
        ],
        collectiveEconomyIncome: [
          { required: true, message: this.cpT("ruleCollectiveIncomeRequired"), trigger: "blur" },
          { validator: this.validateNonNegativeNumber, trigger: "blur" }
        ],
        employmentDrivenCount: intRule("ruleEmploymentDrivenRequired"),
        newJobPositions: intRule("ruleNewJobsRequired"),
        envProjectCount: intRule("ruleEnvProjectsRequired"),
        newGreenArea: [
          { required: true, message: this.cpT("ruleGreenAreaRequired"), trigger: "blur" },
          { validator: this.validateNonNegativeNumber, trigger: "blur" }
        ],
        culturalHeritageCount: intRule("ruleCulturalHeritageRequired"),
        ethnicIntegrationProjectCount: intRule("ruleEthnicIntegrationRequired"),
        ethnicUnityActivityCount: intRule("ruleEthnicUnityRequired"),
        digitalPlatformUsageRate: rateRule("ruleDigitalRateRequired"),
        regionalPublicBrandCount: intRule("ruleBrandCountRequired"),
        brandPremiumRate: rateRule("ruleBrandPremiumRequired")
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    dash() {
      return this.$t("commonProsperity.status.dash")
    },
    formatMoney(val) {
      if (val == null || val === "") {
        return this.dash()
      }
      return val + " " + this.cpCommon("unitWanYuan")
    },
    formatArea(val) {
      if (val == null || val === "") {
        return this.dash()
      }
      return val + " " + this.cpCommon("unitMu")
    },
    formatRate(val) {
      if (val == null || val === "") {
        return this.dash()
      }
      return (Number(val) * 100).toFixed(2) + "%"
    },
    formatIntWithUnit(val, unitKey) {
      if (val == null || val === "") {
        return this.dash()
      }
      return val + " " + this.cpCommon(unitKey)
    },
    validateStatPeriod(rule, value, callback) {
      if (!value) {
        callback()
        return
      }
      if (!STAT_PERIOD_REG.test(value)) {
        callback(new Error(this.cpT("ruleStatPeriodRequired")))
      } else {
        callback()
      }
    },
    validateNonNegativeInt(rule, value, callback) {
      if (value == null || value === "") {
        callback()
        return
      }
      const n = Number(value)
      if (!Number.isInteger(n) || n < 0) {
        callback(new Error(this.cpCommon("ruleNonNegativeInteger")))
      } else {
        callback()
      }
    },
    validateNonNegativeNumber(rule, value, callback) {
      if (value == null || value === "") {
        callback()
        return
      }
      if (Number(value) < 0) {
        callback(new Error(this.cpCommon("ruleNonNegativeNumber")))
      } else {
        callback()
      }
    },
    validateRate(rule, value, callback) {
      if (value == null || value === "") {
        callback()
        return
      }
      const n = Number(value)
      if (n < 0 || n > 1) {
        callback(new Error(this.cpCommon("ruleRateRange")))
      } else {
        callback()
      }
    },
    getList() {
      this.loading = true
      const params = { ...this.queryParams }
      if (params.statYear) {
        params.statYear = String(params.statYear).substring(0, 4)
      }
      listCommonProsperityAchievement(params)
        .then((res) => {
          this.tableList = res.rows || []
          this.total = res.total != null ? res.total : 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams.statYear = undefined
      this.resetForm("queryForm")
      this.handleQuery()
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
    },
    resetFormModel() {
      this.form = {
        id: undefined,
        statPeriod: undefined,
        collectiveEconomyIncome: 0,
        employmentDrivenCount: 0,
        newJobPositions: 0,
        envProjectCount: 0,
        newGreenArea: 0,
        culturalHeritageCount: 0,
        ethnicIntegrationProjectCount: 0,
        ethnicUnityActivityCount: 0,
        digitalPlatformUsageRate: 0,
        regionalPublicBrandCount: 0,
        brandPremiumRate: 0,
        remark: undefined
      }
    },
    toNumberFields(data) {
      return {
        collectiveEconomyIncome: data.collectiveEconomyIncome != null ? Number(data.collectiveEconomyIncome) : 0,
        employmentDrivenCount: data.employmentDrivenCount != null ? Number(data.employmentDrivenCount) : 0,
        newJobPositions: data.newJobPositions != null ? Number(data.newJobPositions) : 0,
        envProjectCount: data.envProjectCount != null ? Number(data.envProjectCount) : 0,
        newGreenArea: data.newGreenArea != null ? Number(data.newGreenArea) : 0,
        culturalHeritageCount: data.culturalHeritageCount != null ? Number(data.culturalHeritageCount) : 0,
        ethnicIntegrationProjectCount: data.ethnicIntegrationProjectCount != null ? Number(data.ethnicIntegrationProjectCount) : 0,
        ethnicUnityActivityCount: data.ethnicUnityActivityCount != null ? Number(data.ethnicUnityActivityCount) : 0,
        digitalPlatformUsageRate: data.digitalPlatformUsageRate != null ? Number(data.digitalPlatformUsageRate) : 0,
        regionalPublicBrandCount: data.regionalPublicBrandCount != null ? Number(data.regionalPublicBrandCount) : 0,
        brandPremiumRate: data.brandPremiumRate != null ? Number(data.brandPremiumRate) : 0
      }
    },
    handleAdd() {
      this.formKey += 1
      this.resetFormModel()
      this.dialogEdit = false
      this.open = true
      this.$nextTick(() => this.resetForm("form"))
    },
    handleEdit(row) {
      getCommonProsperityAchievement(row.id).then((res) => {
        const data = res.data || {}
        this.formKey += 1
        this.dialogEdit = true
        this.form = {
          id: data.id,
          statPeriod: data.statPeriod,
          remark: data.remark,
          ...this.toNumberFields(data)
        }
        this.open = true
        this.$nextTick(() => {
          if (this.$refs.form) {
            this.$refs.form.clearValidate()
          }
        })
      })
    },
    handleView(row) {
      getCommonProsperityAchievement(row.id).then((res) => {
        this.viewRow = res.data || {}
        this.viewOpen = true
      })
    },
    handleDelete(row) {
      this.$modal
        .confirm(this.$t("commonProsperity.achievement.confirmDelete", { id: row.id }))
        .then(() => delCommonProsperityAchievement(row.id))
        .then(() => {
          this.$modal.msgSuccess(this.cpCommon("msgDelOk"))
          this.getList()
        })
        .catch(() => {})
    },
    handleDeleteBatch() {
      if (!this.ids.length) {
        return
      }
      this.$modal
        .confirm(this.cpT("confirmDeleteBatch"))
        .then(() => delCommonProsperityAchievement(this.ids.join(",")))
        .then(() => {
          this.$modal.msgSuccess(this.cpCommon("msgDelOk"))
          this.getList()
        })
        .catch(() => {})
    },
    handleExport() {
      const params = { ...this.queryParams }
      if (params.statYear) {
        params.statYear = String(params.statYear).substring(0, 4)
      }
      this.download(
        "commonProsperity/achievement/export",
        params,
        `common_prosperity_achievement_${new Date().getTime()}.xlsx`
      )
    },
    buildPayload() {
      return {
        statPeriod: this.form.statPeriod,
        collectiveEconomyIncome: this.form.collectiveEconomyIncome,
        employmentDrivenCount: this.form.employmentDrivenCount,
        newJobPositions: this.form.newJobPositions,
        envProjectCount: this.form.envProjectCount,
        newGreenArea: this.form.newGreenArea,
        culturalHeritageCount: this.form.culturalHeritageCount,
        ethnicIntegrationProjectCount: this.form.ethnicIntegrationProjectCount,
        ethnicUnityActivityCount: this.form.ethnicUnityActivityCount,
        digitalPlatformUsageRate: this.form.digitalPlatformUsageRate,
        regionalPublicBrandCount: this.form.regionalPublicBrandCount,
        brandPremiumRate: this.form.brandPremiumRate,
        remark: this.form.remark || undefined
      }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        const payload = this.buildPayload()
        if (this.dialogEdit) {
          payload.id = this.form.id
          updateCommonProsperityAchievement(payload).then(() => {
            this.$modal.msgSuccess(this.cpCommon("msgModOk"))
            this.open = false
            this.getList()
          })
        } else {
          addCommonProsperityAchievement(payload).then(() => {
            this.$modal.msgSuccess(this.cpCommon("msgAddOk"))
            this.open = false
            this.getList()
          })
        }
      })
    },
    cancel() {
      this.open = false
      this.resetFormModel()
    }
  }
}
</script>

<style scoped>
.cp-input-with-unit {
  display: flex;
  align-items: center;
  width: 100%;
}
.cp-input-with-unit__input {
  flex: 1;
  width: 0;
}
.cp-input-with-unit__input ::v-deep.el-input-number {
  width: 100%;
}
.cp-input-with-unit__suffix {
  flex-shrink: 0;
  margin-left: 8px;
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
}
</style>
