<template>
  <ai-list class="AppAssessment">
    <template slot="title">
      <ai-title title="工作考核" isShowBottomBorder :hideLevel="hideLevel" :isShowArea="true" v-model="search.areaId" :instance="instance" @change="onChange"></ai-title>
    </template>
    <template slot="content">
      <div class="statistics-top">
        <div class="statistics-top__item">
          <span>监测家庭户数</span>
          <h2 style="color: #2266FF;">{{ totalInfo['监测家庭户数'] }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>监测对象总数</span>
          <h2 style="color: #22AA99;">{{ totalInfo['监测对象总数'] }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>解除风险人数</span>
          <h2 style="color: #F8B425">{{ totalInfo['解除风险人数'] }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>解除风险户数</span>
          <h2 style="color: red">{{ totalInfo['解除风险户数'] }}</h2>
        </div>
      </div>
      <div class="info">
        <ai-card title="饮用水和三保障情况">
          <template #content>
            <ai-wrapper label-width="120px">
              <ai-info-item label="住房安全" :value="info['住房安全']"></ai-info-item>
              <ai-info-item label="饮水安全" :value="info['饮水安全']"></ai-info-item>
              <ai-info-item label="失学辍学" :value="info['失学辍学']"></ai-info-item>
              <ai-info-item label="未参加医疗保险" :value="info['未参加医疗保险']"></ai-info-item>
              <ai-info-item label="低收入家庭" :value="info['低收入家庭']"></ai-info-item>
              <ai-info-item label="低于人均收入" :value="info['低于人均收入']"></ai-info-item>
            </ai-wrapper>
          </template>
        </ai-card>
        <ai-card title="本月网格员走访进度">
          <template #right>
            <el-button type="text" @click="toList">全部</el-button>
          </template>
          <template #content>
            <div class="progress-wrapper">
              <div class="progress">
                <div class="item" v-for="(item, index) in logList" :key="index">
                  <h2>{{ item.createUserName }}</h2>
                  <el-progress :percentage="item.finishRate"></el-progress>
                </div>
              </div>
            </div>
          </template>
        </ai-card>
      </div>
      <ai-card title="帮扶走访情况">
        <template #content>
          <ai-search-bar bottomBorder>
            <template #left>
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="search.beginDate"
                type="date"
                size="small"
                unlink-panels
                placeholder="请选择开始日期"
                @change="search.current = 1, getList()" />
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="search.endDate"
                type="date"
                size="small"
                unlink-panels
                placeholder="请选择结束日期"
                @change="search.current = 1, getLogCount()" />
              <ai-select
                v-model="search.isGird"
                clearable
                placeholder="请选择是否关联网格"
                :selectList="visitDict"
                @change="search.current = 1, getLogCount()">
              </ai-select>
              <ai-select
                v-model="search.isVisit"
                clearable
                placeholder="请选择走访次数"
                :selectList="girdDict"
                @change="search.current = 1, getLogCount()">
              </ai-select>
              <!-- <ai-download :instance="instance" url="/app/apppreventionreturntopovertyriskperson/export" :params="search" fileName="帮扶走访" :disabled="tableData.length == 0">
                <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
              </ai-download> -->
            </template>
            <template #right>
              <el-input
                v-model="search.name"
                size="small"
                placeholder="户主姓名/身份证号/网格员"
                clearable
                v-throttle="() => {search.current = 1, getLogCount()}"
                @clear="search.current = 1, search.name = '', getLogCount()"
                suffix-icon="iconfont iconSearch">
              </el-input>
            </template>
          </ai-search-bar>
          <ai-table
            :tableData="tableData"
            :col-configs="colConfigs"
            :total="total"
            tableSize="small"
            border
            style="margin-top: 12px;"
            :current.sync="search.current"
            :size.sync="search.size"
            @selection-change="(v) => (ids = v.map((e) => e.id))"
            @getList="getLogCount">
          </ai-table>
        </template>
      </ai-card>
    </template>
  </ai-list>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'Statistics',

    props: {
      instance: Function,
      dict: Object
    },

    data() {
      return {
        search: {
          current: 1,
          size: 10,
          name: '',
          areaId: '',
          beginDate: '',
          endDate: '',
          isVisit: '',
          isGird: ''
        },
        visitDict: [{
          dictName: '否',
          dictValue: '0'
        }, {
          dictName: '是',
          dictValue: '1'
        }],
        girdDict: [{
          dictName: '等于0次',
          dictValue: '0'
        }, {
          dictName: '大于0次',
          dictValue: '1'
        }],
        logList: [],
        info: {},
        ids: [],
        total: 10,
        hideLevel: 3,
        totalInfo: {},
        tableData: []
      }
    },

    computed: {
      ...mapState(['user']),

      colConfigs () {
        return [
          { prop: 'name', label: '户主姓名', align: 'left' },
          { prop: 'sex', label: '性别', align: 'center', formart: v => this.dict.getLabel('sex', v) },
          { prop: 'idNumber', label: '身份证号', align: 'center' },
          { prop: 'householdPhone', label: '户主联系方式', align: 'center' },
          { prop: 'address', label: '家庭住址', align: 'center' },
          { prop: 'status', label: '状态', align: 'center', formart: v => this.dict.getLabel('fpRiskPersonStatus', v) },
          { prop: 'girdMemberName', label: '网格员', align: 'center' },
          { prop: 'girdMemberPhone', label: '网格员电话', align: 'center' },
          { prop: 'visitCount', label: '走访次数', align: 'center' }
        ]
      }
    },

    created () {
      this.search.areaId = this.user.info.areaId
      this.hideLevel = this.user.info.areaList.length - 1

      this.dict.load('fpRiskPersonStatus', 'sex').then(() => {
        this.getLogCount()
      })
      this.getTotal()
      this.getList()
    },

    methods: {
      getList() {
        this.instance.post(`/app/apppreventionreturntopovertylogstatistic/list`, null, {
          params: {
            size: 15,
            current: 1
          }
        }).then(res => {
          if (res.code == 0) {
            this.logList = res.data.records.map(v => {
              return {
                ...v,
                finishRate: Number((v.finishRate * 100).toFixed(1))
              }
            })
          }
        })
      },

      getLogCount() {
        this.instance.post(`/app/apppreventionreturntopovertylog/service-rating-list`, null, {
          params: {
            ...this.search
          }
        }).then(res => {
          if (res.code == 0) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },

      onChange () {
        this.getTotal()
        this.getLogCount()
      },

      getTotal() {
        this.instance.post(`/app/statistics/preventionreturntopoverty/povertyReportNumber`, null, {
          params: {
            ...this.search
          }
        }).then(res => {
          if (res.code == 0) {
            this.totalInfo = res.data
          }
        })

        this.instance.post(`/app/statistics/preventionreturntopoverty/drinkingWaterCount`, null, {
          params: {
            ...this.search
          }
        }).then(res => {
          if (res.code == 0) {
            this.info = res.data
          }
        })
      },

      removeAll () {
        var id = this.ids.join(',')
        this.remove(id)
      },

      remove(id) {
        this.$confirm('确定删除该数据？').then(() => {
          this.instance.post(`/app/appmininotice/delete?ids=${id}`).then(res => {
            if (res.code == 0) {
              this.$message.success('删除成功！')
              this.getList()
            }
          })
        })
      },

      toList () {
        this.$emit('change', {
          type: 'List',
          params: {
            id: ''
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .AppAssessment {
    .info {
      display: flex;
      justify-content: space-between;

      .ai-card {
        flex: 1;
        height: 300px;
        overflow-y: auto;

        &:first-child {
          margin-right: 20px;
        }

        .progress {
          overflow-y: auto;
          height: 190px;

          .item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;

            .el-progress {
              flex: 1;
            }

            h2 {
              width: 90px;
              margin-right: 30px;
              font-size: 14px;
              text-align: right;
              color: #333;
            }
          }
        }
      }
    }

    .statistics-top {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      & > div {
        flex: 1;
        height: 96px;
        line-height: 1;
        margin-right: 20px;
        padding: 16px 24px;
        background: #FFFFFF;
        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
        border-radius: 4px;

        &:last-child {
          margin-right: 0;
        }

        h3 {
          font-size: 24px;
        }

        span {
          display: block;
          margin-bottom: 16px;
          color: #888888;
          font-size: 16px;
        }
      }
    }

    ::v-deep .ai-list__content {
      width: 100%;
      .ai-list__content--right {
        width: 100%!important;

        .ai-list__content--right-wrapper {
          padding: 0!important;
          background: transparent!important;
          box-shadow: none!important;
        }
      }
    }
  }
</style>
