<template>
  <!-- 监控日志 -->
  <div class="jktjDetail from-clues">
    <!-- 头部搜索 -->
    <div class="from-clues-header">
      <el-form ref="form" :model="form" label-width="100px">
        <Breadcrumb />
        <el-row class="mb-5">
          <el-col :span="4">
            <el-form-item label="行政区" class="d-flex">
              <el-select
                v-model="$store.state.user.userInfo.grade === 'county' ? form.pcode = $store.state.user.userInfo.areaCode : form.pcode"
                class="width100" clearable placeholder="行政区" :disabled="$store.state.user.userInfo.grade === 'county'">
                <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否归档" class="d-flex">
              <el-select v-model="form.qqzt" class="width100" clearable placeholder="是否确权">
                <el-option key="gd1" label="已确权" value="1"></el-option>
                <el-option key="gd2" label="未确权" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 操作按钮 -->
          <el-col :span="16" class="btnColRight">
            <btn nativeType="cz" @click="resetForm">重置</btn>
            <btn nativeType="cx" @click="featchData">查询</btn>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 图表 -->
    <div class="form-clues-content">
      <el-form
        ref="form"
        label-width="100px"
        :model="chartData"
        class="form-wrapper">
        <el-form-item label="宗地数量:" >
          <span class="span-item">{{chartData.zdCount}}</span>
        </el-form-item>
        <el-form-item label="国有宗地数量:" >
          <span class="span-item">{{chartData.gyzdCount}}</span>
        </el-form-item>
        <el-form-item label="集体宗地数量:" >
          <span class="span-item">{{chartData.jtzdCount}}</span>
        </el-form-item>
        <el-form-item label="自然幢数量:">
          <span class="span-item">{{chartData.zrzCount}}</span>
        </el-form-item>
        <el-form-item label="户数量:">
          <span class="span-item">{{chartData.hCount}}</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
import bdcdj from "@/api/bdcdj";
export default {
  name: "jktj",
  data () {
    return {
      // 搜索表单
      valueTime: "",
      // 搜索表单
      form: {
        pcode: "",
        qqzt: "1"
      },
      chartData: []
    };
  },
  mounted () {
    this.form.pcode = this.dicData['A20'][0].DCODE
    // 查询业务量
    this.featchData();
  },
  computed: {
    ...mapGetters(["dicData"]),
  },
  methods: {
    /**
     * @description: handleSizeChange
     * @param {*} val
     * @author:
     */
    handleSizeChange (val) {
      this.formData.pageSize = val
      this.featchData()
    },
    /**
     * @description: 截止日期变化
     * @param {*} val
     * @author: renchao
     */
    endTimeChange (val) {
      this.form.receiveEndTime = timeFormat(new Date(val), true)
    },
    /**
     * @description: handleSearch
     * @author:
     */
    handleSearch () {
      this.form.currentPage = 1
      this.tableData.data = []
      if (this.featchData) {
        this.featchData()
      }
    },
    /**
     * @description: handleCurrentChange
     * @param {*} val
     * @author:
     */
    handleCurrentChange (val) {
      this.form.currentPage = val
      this.featchData()
    },
    async featchData() {
      let {result: res} = await bdcdj.getQjdcCount(this.form);
      console.log(res)
      this.chartData = res

    },
    resetForm () {
      if (!this.form) return
      this.featchData()
    }
  },
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.jktjDetail {
  flex-direction: column;

  .rows {
    margin-left: 100px;
  }

  .center {
    line-height: 50vh;
    text-align: center;
    color: #b6b5b5;
  }
}

.form-clues-content {
  margin: 0.1875rem 1.0417rem;
  overflow-y: auto;
  .form-wrapper {
    padding: 0px 120px 0px;
    .el-form-item {
      /deep/.el-form-item__label {
        color: #ffffff;
      }
      ::v-deep .el-input .el-input__inner {
        padding: 0 8px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #6bc1fc;
      }
    }
    .el-form-item--small.el-form-item {
      margin-bottom: 16px;
    }
  }
  .bottom-wrapper {
    padding: 0px 120px 0px;
    text-align: center;
  }
  .span-item {
    color: white;
  }
}
</style>