<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="farmType">
          <template slot="label">{{ dmT("queryFarmType") }}</template>
          <el-select v-model="queryParams.farmType" :placeholder="dmCommon('pleaseSelect')" clearable style="width: 120px">
            <el-option v-for="item in farmTypeOptions" :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:sync']"
            type="warning"
            plain
            icon="el-icon-refresh"
            size="mini"
            :loading="syncing"
            @click="handleSync"
          >{{ dmT("btnSync") }}</el-button>
        </el-form-item>
      </el-form>
      <div v-if="lastSyncHint" class="pasture-sync-hint">{{ lastSyncHint }}</div>
    </el-card>

    <br />

    <el-card shadow="never">
      <el-table v-loading="loading" :data="tableList" border>
        <template slot="empty">
          <span>{{ dmT("emptyList") }}</span>
        </template>
        <el-table-column :label="dmT('colPastureName')" prop="pastureName" align="center" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column :label="dmT('colFarmType')" align="center" width="90">
          <template slot-scope="scope">
            <span>{{ farmTypeLabel(scope.row.farmType) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="dmT('colCounty')" prop="county" align="center" min-width="100" :show-overflow-tooltip="true" />
        <el-table-column :label="dmT('colTown')" prop="town" align="center" min-width="100" :show-overflow-tooltip="true" />
        <el-table-column :label="dmT('colPersonInCharge')" align="center" width="90" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ maskPerson(scope.row.personInCharge) }}</span>
          </template>
        </el-table-column>
        <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="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="80" 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>
          </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="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 || dash }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formFarmType')">
              <span>{{ farmTypeLabel(viewRow.farmType) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="dmT('formIntroduction')">
              <span class="pasture-view-text">{{ viewRow.introduction || dash }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formLongitude')">
              <span>{{ formatCoord(viewRow.longitude) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formLatitude')">
              <span>{{ formatCoord(viewRow.latitude) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="dmT('formDetailAddress')">
              <span>{{ viewRow.detailAddress || dash }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formPersonInCharge')">
              <span>{{ viewRow.personInCharge || dash }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formContactPhone')">
              <span>{{ viewRow.contactPhone || dash }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formCounty')">
              <span>{{ viewRow.county || dash }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formTown')">
              <span>{{ viewRow.town || dash }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formFloorArea')">
              <span>{{ viewRow.floorArea || dash }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formScaleBreeding')">
              <span>{{ viewRow.scaleBreeding || dash }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="dmT('formBreedSpecies')">
              <span>{{ viewRow.breedSpecies || dash }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmCommon('colCreate')">
              <span>{{ viewRow.createTime ? parseTime(viewRow.createTime) : dash }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formDataSource')">
              <span>{{ dataSourceLabel(viewRow.dataSource) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="dmT('formLastSyncTime')">
              <span>{{ viewRow.lastSyncTime ? parseTime(viewRow.lastSyncTime) : dash }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="dmT('formRemark')">
              <span class="pasture-view-text">{{ viewRow.remark || 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 dataModelLocaleMixin from "@/mixins/dataModelLocaleMixin"
import { listPasture, getPasture, syncPasture } from "@/api/dataModel/pasture"

export default {
  name: "Pasture",
  mixins: [dataModelLocaleMixin],
  data() {
    return {
      dmNs: "pasture",
      loading: false,
      syncing: false,
      viewOpen: false,
      viewRow: {},
      lastSyncHint: "",
      total: 0,
      tableList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        keyword: undefined,
        farmType: undefined
      }
    }
  },
  computed: {
    dash() {
      return this.$t("dataModel.status.dash")
    },
    farmTypeOptions() {
      return [
        { value: "1", label: this.dmT("farmType1") },
        { value: "2", label: this.dmT("farmType2") }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    farmTypeLabel(v) {
      if (v == null || v === "") {
        return this.dash
      }
      const key = String(v)
      if (key === "1") {
        return this.dmT("farmType1")
      }
      if (key === "2") {
        return this.dmT("farmType2")
      }
      return key
    },
    dataSourceLabel(v) {
      if (!v) {
        return this.dash
      }
      if (v === "third_party") {
        return this.dmT("dataSourceThirdParty")
      }
      return v
    },
    formatCoord(val) {
      if (val == null || val === "") {
        return this.dash
      }
      return String(val)
    },
    maskPerson(val) {
      if (!val) {
        return this.dash
      }
      const s = String(val)
      if (s.length <= 1) {
        return s
      }
      if (s.length === 2) {
        return `${s[0]}*`
      }
      return `${s[0]}*${s.slice(-1)}`
    },
    maskPhone(val) {
      if (!val || val.length < 7) {
        return val || this.dash
      }
      return val.slice(0, 3) + "****" + val.slice(-4)
    },
    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.farmType = undefined
      this.resetForm("queryForm")
      this.handleQuery()
    },
    handleView(row) {
      getPasture(row.id).then((res) => {
        this.viewRow = res.data || {}
        this.viewOpen = true
      })
    },
    handleSync() {
      this.runSyncWithLoading(() => syncPasture())
        .then((res) => {
          const data = res.data || {}
          this.$modal.msgSuccess(
            this.dmT("syncSummary", {
              insert: data.insertCount != null ? data.insertCount : 0,
              update: data.updateCount != null ? data.updateCount : 0,
              fail: data.failCount != null ? data.failCount : 0
            })
          )
          if (data.failCount > 0 && data.failMessages && data.failMessages.length) {
            this.$modal.msgWarning(data.failMessages.join("；"))
          }
          if (data.syncTime) {
            this.lastSyncHint = this.dmT("syncTimeHint", { time: this.parseTime(data.syncTime) })
          }
          this.getList()
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped>
.pasture-sync-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
}

.pasture-view-text {
  white-space: pre-wrap;
  word-break: break-word;
}
</style>
