<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
        <el-form-item prop="keyword">
          <template slot="label">{{ dmT("queryKeyword") }}</template>
          <el-input
            v-model="queryParams.keyword"
            :placeholder="dmT('queryKeywordPh')"
            clearable
            style="width: 200px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item prop="pastureNature">
          <template slot="label">{{ dmT("queryPastureNature") }}</template>
          <el-select v-model="queryParams.pastureNature" :placeholder="dmCommon('pleaseSelect')" clearable style="width: 120px">
            <el-option v-for="item in pastureNatureOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item prop="bizStatus">
          <template slot="label">{{ dmT("queryBizStatus") }}</template>
          <el-select v-model="queryParams.bizStatus" :placeholder="dmCommon('pleaseSelect')" clearable style="width: 120px">
            <el-option v-for="item in bizStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ dmCommon("search") }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ dmCommon("reset") }}</el-button>
          <el-button
            v-hasPermi="['dataModel:pasture:add']"
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >{{ dmCommon("add") }}</el-button>
          <el-button
            v-hasPermi="['dataModel:pasture:remove']"
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="!ids.length"
            @click="handleDeleteBatch"
          >{{ dmCommon("delete") }}</el-button>
          <!-- 导出功能暂未开放
          <el-button
            v-hasPermi="['dataModel:pasture:export']"
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
          >{{ dmCommon("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="dmT('colPastureName')" prop="pastureName" align="center" min-width="100" fixed="left" :show-overflow-tooltip="true" />
        <el-table-column :label="dmT('colPastureNature')" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ pastureNatureLabel(scope.row.pastureNature) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="dmT('colIdCardNo')" align="center" min-width="140" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ maskIdCard(scope.row.idCardNo) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="dmT('colRegion')" align="center" min-width="160" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ formatRegion(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="dmT('colDetailAddress')" prop="detailAddress" align="center" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column :label="dmT('colPersonInCharge')" prop="personInCharge" align="center" width="90" :show-overflow-tooltip="true" />
        <el-table-column :label="dmT('colContactPhone')" align="center" width="120">
          <template slot-scope="scope">
            <span>{{ maskPhone(scope.row.contactPhone) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="dmT('colBizStatus')" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ bizStatusLabel(scope.row.bizStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="dmCommon('colCreate')" align="center" width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime ? parseTime(scope.row.createTime) : $t("dataModel.status.dash") }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="dmCommon('colOp')" align="center" class-name="small-padding fixed-width" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button v-hasPermi="['dataModel:pasture:query']" type="text" size="mini" @click="handleView(scope.row)">{{ dmCommon("view") }}</el-button>
            <el-button v-hasPermi="['dataModel:pasture:edit']" type="text" size="mini" @click="handleEdit(scope.row)">{{ dmCommon("edit") }}</el-button>
            <el-button v-hasPermi="['dataModel:pasture:remove']" type="text" size="mini" @click="handleDelete(scope.row)">{{ dmCommon("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="pastureName" :rules="formRules.pastureName">
              <template slot="label">{{ dmT("formPastureName") }}</template>
              <el-input v-model="form.pastureName" :placeholder="dmT('phPastureName')" maxlength="10" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="pastureNature" :rules="formRules.pastureNature">
              <template slot="label">{{ dmT("formPastureNature") }}</template>
              <el-select v-model="form.pastureNature" :placeholder="dmCommon('pleaseSelect')" style="width: 100%" @change="handleNatureChange">
                <el-option v-for="item in pastureNatureOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="idCardNo" :rules="formRules.idCardNo">
              <template slot="label">{{ dmT("formIdCardNo") }}</template>
              <el-input v-model="form.idCardNo" :placeholder="idCardPlaceholder" maxlength="18" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="regionCodes" :rules="formRules.regionCodes">
              <template slot="label">{{ dmT("formRegion") }}</template>
              <region-cascader
                :province-code.sync="form.provinceCode"
                :province-name.sync="form.provinceName"
                :city-code.sync="form.cityCode"
                :city-name.sync="form.cityName"
                :county-code.sync="form.countyCode"
                :county-name.sync="form.countyName"
                :placeholder="dmCommon('pleaseSelect')"
                @change="handleRegionChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="detailAddress" :rules="formRules.detailAddress">
              <template slot="label">{{ dmT("formDetailAddress") }}</template>
              <el-input v-model="form.detailAddress" :placeholder="dmT('phDetailAddress')" maxlength="50" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="personInCharge" :rules="formRules.personInCharge">
              <template slot="label">{{ dmT("formPersonInCharge") }}</template>
              <el-input v-model="form.personInCharge" :placeholder="dmT('phPersonInCharge')" maxlength="10" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="contactPhone" :rules="formRules.contactPhone">
              <template slot="label">{{ dmT("formContactPhone") }}</template>
              <el-input v-model="form.contactPhone" :placeholder="dmT('phContactPhone')" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="bizStatus" :rules="formRules.bizStatus">
              <template slot="label">{{ dmT("formBizStatus") }}</template>
              <el-select v-model="form.bizStatus" :placeholder="dmCommon('pleaseSelect')" style="width: 100%">
                <el-option v-for="item in bizStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="photoFilePath">
              <template slot="label">{{ dmT("formPhoto") }}</template>
              <el-upload
                list-type="picture-card"
                :class="{ hide: hidePhotoUpload }"
                :action="uploadAction"
                :headers="uploadHeaders"
                :before-upload="beforePhotoUpload"
                :on-success="handlePhotoUploadSuccess"
                :on-error="handleUploadError"
                :on-remove="handlePhotoRemove"
                :limit="1"
                :file-list="photoFileList"
              >
                <i class="el-icon-plus" />
              </el-upload>
              <div class="el-upload__tip">{{ dmT("tipPhoto") }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="remark" :rules="formRules.remark">
              <template slot="label">{{ dmT("formRemark") }}</template>
              <el-input v-model="form.remark" type="textarea" :rows="2" :placeholder="dmT('phRemark')" maxlength="100" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ dmCommon("ok") }}</el-button>
        <el-button @click="cancel">{{ dmCommon("cancel") }}</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="dmCommon('viewTitle')" :visible.sync="viewOpen" width="900px" append-to-body>
      <el-form label-width="130px" size="small">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item :label="dmT('formPastureName')">
              <span>{{ viewRow.pastureName || $t("dataModel.status.dash") }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formPastureNature')">
              <span>{{ pastureNatureLabel(viewRow.pastureNature) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formIdCardNo')">
              <span>{{ viewRow.idCardNo || $t("dataModel.status.dash") }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formRegion')">
              <span>{{ formatRegion(viewRow) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="dmT('formDetailAddress')">
              <span>{{ viewRow.detailAddress || $t("dataModel.status.dash") }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formPersonInCharge')">
              <span>{{ viewRow.personInCharge || $t("dataModel.status.dash") }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formContactPhone')">
              <span>{{ viewRow.contactPhone || $t("dataModel.status.dash") }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formBizStatus')">
              <span>{{ bizStatusLabel(viewRow.bizStatus) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formPhoto')">
              <el-image
                v-if="viewRow.photoFileUrl"
                :src="viewPhotoUrl"
                style="width: 80px; height: 80px"
                fit="cover"
                :preview-src-list="[viewPhotoUrl]"
              />
              <span v-else>{{ $t("dataModel.status.dash") }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="dmT('formRemark')">
              <span>{{ viewRow.remark || $t("dataModel.status.dash") }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('viewCreateBy')">
              <span>{{ viewRow.createBy || $t("dataModel.status.dash") }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmCommon('colCreate')">
              <span>{{ viewRow.createTime ? parseTime(viewRow.createTime) : $t("dataModel.status.dash") }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('viewUpdateBy')">
              <span>{{ viewRow.updateBy || $t("dataModel.status.dash") }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('viewUpdateTime')">
              <span>{{ viewRow.updateTime ? parseTime(viewRow.updateTime) : $t("dataModel.status.dash") }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewOpen = false">{{ dmCommon("close") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth"
import dataModelLocaleMixin from "@/mixins/dataModelLocaleMixin"
import RegionCascader from "@/components/RegionCascader/index.vue"
import {
  listPasture,
  getPasture,
  addPasture,
  updatePasture,
  delPasture
} from "@/api/dataModel/pasture"

const ID_CARD_REG = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/
const USCC_REG = /^[0-9A-Z]{18}$/
const PHONE_REG = /^1[3-9]\d{9}$/

export default {
  name: "Pasture",
  components: { RegionCascader },
  mixins: [dataModelLocaleMixin],
  data() {
    return {
      dmNs: "pasture",
      loading: false,
      open: false,
      viewOpen: false,
      viewRow: {},
      dialogEdit: false,
      formKey: 0,
      total: 0,
      tableList: [],
      ids: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        keyword: undefined,
        pastureNature: undefined,
        bizStatus: undefined
      },
      form: {}
    }
  },
  computed: {
    dialogTitle() {
      return this.dialogEdit ? this.dmT("dialogEdit") : this.dmT("dialogAdd")
    },
    pastureNatureOptions() {
      return [1, 2].map((v) => ({ value: v, label: this.dmT("nature" + v) }))
    },
    bizStatusOptions() {
      return [1, 2, 3].map((v) => ({ value: v, label: this.dmT("bizStatus" + v) }))
    },
    idCardPlaceholder() {
      return this.form.pastureNature === 2 ? this.dmT("phIdCardEnterprise") : this.dmT("phIdCardIndividual")
    },
    uploadAction() {
      return process.env.VUE_APP_BASE_API + "/common/upload"
    },
    uploadHeaders() {
      return { Authorization: "Bearer " + getToken() }
    },
    photoFileList() {
      if (!this.form.photoFileUrl && !this.form.photoFilePath) {
        return []
      }
      const url = this.resolvePhotoUrl(this.form.photoFileUrl, this.form.photoFilePath)
      return [{ name: this.form.photoFilePath || "photo", url: url }]
    },
    hidePhotoUpload() {
      return !!(this.form.photoFilePath || this.form.photoFileUrl)
    },
    viewPhotoUrl() {
      return this.resolvePhotoUrl(this.viewRow.photoFileUrl, this.viewRow.photoFilePath)
    },
    formRules() {
      return {
        pastureName: [
          { required: true, message: this.dmT("ruleNameRequired"), trigger: "blur" },
          { min: 1, max: 10, message: this.dmT("ruleNameLen"), trigger: "blur" }
        ],
        pastureNature: [{ required: true, message: this.dmT("ruleNatureRequired"), trigger: "change" }],
        idCardNo: [
          { required: true, message: this.dmT("ruleIdCardRequired"), trigger: "blur" },
          { validator: this.validateIdCardNo, trigger: "blur" }
        ],
        regionCodes: [
          { required: true, message: this.dmT("ruleRegionRequired"), trigger: "change" },
          { validator: this.validateRegion, trigger: "change" }
        ],
        detailAddress: [{ max: 50, message: this.dmT("ruleDetailLen"), trigger: "blur" }],
        personInCharge: [{ max: 10, message: this.dmT("rulePersonLen"), trigger: "blur" }],
        contactPhone: [
          { required: true, message: this.dmT("rulePhoneRequired"), trigger: "blur" },
          { validator: this.validatePhone, trigger: "blur" }
        ],
        bizStatus: [{ required: true, message: this.dmT("ruleBizStatusRequired"), trigger: "change" }],
        remark: [{ max: 100, message: this.dmCommon("ruleLen100"), trigger: "blur" }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    pastureNatureLabel(v) {
      if (v == null || v === "") {
        return this.$t("dataModel.status.dash")
      }
      return this.dmT("nature" + v) || v
    },
    bizStatusLabel(v) {
      if (v == null || v === "") {
        return this.$t("dataModel.status.dash")
      }
      return this.dmT("bizStatus" + v) || v
    },
    formatRegion(row) {
      if (!row) {
        return this.$t("dataModel.status.dash")
      }
      const parts = [row.provinceName, row.cityName, row.countyName].filter(Boolean)
      return parts.length ? parts.join("") : this.$t("dataModel.status.dash")
    },
    maskIdCard(val) {
      if (!val || val.length < 8) {
        return val || this.$t("dataModel.status.dash")
      }
      return val.slice(0, 4) + "**********" + val.slice(-4)
    },
    maskPhone(val) {
      if (!val || val.length < 7) {
        return val || this.$t("dataModel.status.dash")
      }
      return val.slice(0, 3) + "****" + val.slice(-4)
    },
    resolvePhotoUrl(url, path) {
      if (url) {
        if (url.indexOf("http") === 0) {
          return url
        }
        return process.env.VUE_APP_BASE_API + url
      }
      if (path) {
        return process.env.VUE_APP_BASE_API + path
      }
      return ""
    },
    validateIdCardNo(rule, value, callback) {
      if (!value) {
        callback()
        return
      }
      const v = String(value).trim().toUpperCase()
      const nature = this.form.pastureNature
      if (nature === 2) {
        if (!USCC_REG.test(v)) {
          callback(new Error(this.dmT("ruleUsccInvalid")))
          return
        }
      } else if (!ID_CARD_REG.test(v)) {
        callback(new Error(this.dmT("ruleIdCardInvalid")))
        return
      }
      callback()
    },
    validatePhone(rule, value, callback) {
      if (!value) {
        callback()
        return
      }
      if (!PHONE_REG.test(value)) {
        callback(new Error(this.dmT("rulePhoneInvalid")))
        return
      }
      callback()
    },
    syncRegionCodes() {
      const { provinceCode, cityCode, countyCode } = this.form
      this.form.regionCodes =
        provinceCode && cityCode && countyCode ? [provinceCode, cityCode, countyCode] : []
    },
    handleRegionChange() {
      this.syncRegionCodes()
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.validateField("regionCodes")
        }
      })
    },
    validateRegion(rule, value, callback) {
      this.syncRegionCodes()
      if (!this.form.provinceCode || !this.form.cityCode || !this.form.countyCode) {
        callback(new Error(this.dmT("ruleRegionRequired")))
        return
      }
      callback()
    },
    handleNatureChange() {
      this.form.idCardNo = undefined
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.clearValidate("idCardNo")
        }
      })
    },
    extOf(fileName) {
      if (!fileName || fileName.lastIndexOf(".") < 0) {
        return ""
      }
      return fileName.slice(fileName.lastIndexOf(".") + 1).toLowerCase()
    },
    beforePhotoUpload(file) {
      const ext = this.extOf(file.name)
      if (!["jpg", "jpeg", "png"].includes(ext)) {
        this.$modal.msgError(this.dmT("tipPhoto"))
        return false
      }
      if (file.name.includes(",")) {
        this.$modal.msgError("文件名不能包含英文逗号")
        return false
      }
      if (file.size / 1024 / 1024 >= 10) {
        this.$modal.msgError(this.dmT("tipPhoto"))
        return false
      }
      this.$modal.loading("正在上传图片，请稍候...")
      return true
    },
    handlePhotoUploadSuccess(res) {
      this.$modal.closeLoading()
      if (res.code === 200) {
        this.form.photoFileUrl = res.url
        this.form.photoFilePath = res.fileName
      } else {
        this.$modal.msgError(res.msg || "上传失败")
      }
    },
    handleUploadError() {
      this.$modal.closeLoading()
      this.$modal.msgError("上传失败，请重试")
    },
    handlePhotoRemove() {
      this.form.photoFileUrl = undefined
      this.form.photoFilePath = undefined
    },
    getList() {
      this.loading = true
      listPasture(this.queryParams)
        .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.keyword = undefined
      this.queryParams.pastureNature = undefined
      this.queryParams.bizStatus = undefined
      this.resetForm("queryForm")
      this.handleQuery()
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
    },
    resetFormModel() {
      this.form = {
        id: undefined,
        pastureName: undefined,
        pastureNature: undefined,
        idCardNo: undefined,
        provinceCode: undefined,
        provinceName: undefined,
        cityCode: undefined,
        cityName: undefined,
        countyCode: undefined,
        countyName: undefined,
        regionCodes: [],
        detailAddress: undefined,
        personInCharge: undefined,
        contactPhone: undefined,
        bizStatus: 1,
        photoFileUrl: undefined,
        photoFilePath: undefined,
        remark: undefined
      }
    },
    handleAdd() {
      this.formKey += 1
      this.resetFormModel()
      this.dialogEdit = false
      this.open = true
      this.$nextTick(() => this.resetForm("form"))
    },
    handleEdit(row) {
      getPasture(row.id).then((res) => {
        const data = res.data || {}
        this.formKey += 1
        this.dialogEdit = true
        this.form = {
          id: data.id,
          pastureName: data.pastureName,
          pastureNature: data.pastureNature,
          idCardNo: data.idCardNo,
          provinceCode: data.provinceCode,
          provinceName: data.provinceName,
          cityCode: data.cityCode,
          cityName: data.cityName,
          countyCode: data.countyCode,
          countyName: data.countyName,
          regionCodes:
            data.provinceCode && data.cityCode && data.countyCode
              ? [data.provinceCode, data.cityCode, data.countyCode]
              : [],
          detailAddress: data.detailAddress,
          personInCharge: data.personInCharge,
          contactPhone: data.contactPhone,
          bizStatus: data.bizStatus != null ? data.bizStatus : 1,
          photoFileUrl: data.photoFileUrl,
          photoFilePath: data.photoFilePath,
          remark: data.remark
        }
        this.open = true
        this.$nextTick(() => {
          if (this.$refs.form) {
            this.$refs.form.clearValidate()
          }
        })
      })
    },
    handleView(row) {
      getPasture(row.id).then((res) => {
        this.viewRow = res.data || {}
        this.viewOpen = true
      })
    },
    handleDelete(row) {
      this.$modal
        .confirm(this.$t("dataModel.pasture.confirmDelete", { id: row.id }))
        .then(() => delPasture(row.id))
        .then(() => {
          this.$modal.msgSuccess(this.dmCommon("msgDelOk"))
          this.getList()
        })
        .catch(() => {})
    },
    handleDeleteBatch() {
      if (!this.ids.length) {
        return
      }
      this.$modal
        .confirm(this.dmT("confirmDeleteBatch"))
        .then(() => delPasture(this.ids.join(",")))
        .then(() => {
          this.$modal.msgSuccess(this.dmCommon("msgDelOk"))
          this.getList()
        })
        .catch(() => {})
    },
    handleExport() {
      this.download(
        "dataModel/pasture/export",
        { ...this.queryParams },
        `pasture_${new Date().getTime()}.xlsx`
      )
    },
    buildPayload() {
      return {
        pastureName: this.form.pastureName,
        pastureNature: this.form.pastureNature,
        idCardNo: this.form.idCardNo ? String(this.form.idCardNo).trim().toUpperCase() : undefined,
        provinceCode: this.form.provinceCode,
        provinceName: this.form.provinceName,
        cityCode: this.form.cityCode,
        cityName: this.form.cityName,
        countyCode: this.form.countyCode,
        countyName: this.form.countyName,
        detailAddress: this.form.detailAddress || undefined,
        personInCharge: this.form.personInCharge || undefined,
        contactPhone: this.form.contactPhone,
        bizStatus: this.form.bizStatus,
        photoFileUrl: this.form.photoFileUrl || undefined,
        photoFilePath: this.form.photoFilePath || undefined,
        remark: this.form.remark || undefined
      }
    },
    submitForm() {
      this.syncRegionCodes()
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        const payload = this.buildPayload()
        if (this.dialogEdit) {
          payload.id = this.form.id
          updatePasture(payload).then(() => {
            this.$modal.msgSuccess(this.dmCommon("msgModOk"))
            this.open = false
            this.getList()
          })
        } else {
          addPasture(payload).then(() => {
            this.$modal.msgSuccess(this.dmCommon("msgAddOk"))
            this.open = false
            this.getList()
          })
        }
      })
    },
    cancel() {
      this.open = false
      this.resetFormModel()
    }
  }
}
</script>

<style scoped>
::v-deep.hide .el-upload--picture-card {
  display: none;
}
</style>
