<template>
  <section class="list">
    <ai-list>
      <ai-title slot="title" title="监测对象" isShowBottomBorder isShowArea v-if="areaId" v-model="areaId" :instance="instance" @change="page.current=1,getTableData()">
        <template #rightBtn>
          <el-button size="small" icon="iconfont iconSetting" type="primary" @click="showSet = true">预警规则</el-button>
        </template>
      </ai-title>
      <template #blank>
        <div class="statistics-top">
          <div class="statistics-top__item" v-for="(item, index) in dataPanes" :key="index">
            <span>{{ item.label }}</span>
            <h2 style="color: #2266FF;">{{ item.v }}</h2>
          </div>
        </div>
        <div class="mainPane">
          <ai-search-bar>
            <template #left>
              <ai-select v-model="status" placeholder="请选择" clearable :selectList="$dict.getDict('fpStatus')" @change="page.current=1,getTableData()"></ai-select>
            </template>
            <template #right>
              <el-input placeholder="姓名/身份证/户主联系方式"  v-model="search.name" size="small"  clearable @change="page.current=1,getTableData()" suffix-icon="iconfont iconSearch"/>
            </template>
          </ai-search-bar>
          <ai-search-bar>
            <template #left>
              <el-button type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
              <el-button icon="iconfont iconDelete" :disabled="!ids.length" @click="handleDelete(ids)">删除</el-button>
            </template>
          </ai-search-bar>
          <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
            :size.sync="page.size" @getList="getTableData" :dict="dict" @selection-change="v=>ids=v.map(e=>e.id)">
            <el-table-column slot="options" label="操作" align="center" fixed="right" width="200">
              <template v-slot="{ row }">
                <el-button type="text" @click="toAdd(row.id)">详情</el-button>
                <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
              </template>
            </el-table-column>
            <el-table-column slot="options" label="状态" align="center" width="200">
              <template v-slot="{ row }">
                <span :class="{'status1': row.status == 1, 'status0': row.status == 2}">{{dict.getLabel('fpStatus', row.status)}}</span>
              </template>
            </el-table-column>
          </ai-table>
        </div>
        <ai-dialog title="预警规则设置" :visible.sync="showSet" :customFooter="true"  :destroyOnClose="true"  border  width="900px">
          <el-form ref="rules" :model="setInfo" :rules="formRules" size="small" label-suffix="：" label-width="200px">
            <el-form-item label="家庭纯收入标准" prop="type0">
              <el-input v-model.number="setInfo.type0" placeholder="请输入" maxlength="8" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="家庭人均纯收入标准" prop="type1">
              <el-input v-model.number="setInfo.type1" placeholder="请输入" maxlength="8" show-word-limit></el-input>
            </el-form-item>
          </el-form>
          <div class="dialog-footer" slot="footer" >
            <el-button size="medium" @click="showSet=false">取消</el-button>
            <el-button type="primary" size="medium" @click="addSet()">确认</el-button>
          </div>
        </ai-dialog>
      </template>
    </ai-list>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    return {
      areaId: "",
      page: {current: 1, size: 10, total: 0},
      search: {inoculationType: "", name: ""},
      ids: [],
      tableData: [],
      staData: {},
      currIndex: 0,
      options: [{ value: '0', label: '无风险'},{ value: '2', label: '未解除'}, { value: '1',  label: '已解除'}],
      status: '',
      showSet: false,
      setInfo: {
        type0: '',
        type1: ''
      },
    }
  },
  computed: {
    ...mapState(['user']),
    showDetail() {
      return this.$route.hash == "#add"
    },
    dataPanes() {
      return [
        {label: "监测家庭户数", v: this.staData.jths || 0},
        {label: "监测对象总人数", v: this.staData.zrs || 0},
        {label: "解除风险人数", v: this.staData.fxxcrs || 0},
        {label: "风险解除率", v: this.staData.jcl || 0},
      ]
    },
    colConfigs() {
      return [
        {type: "selection", align: 'center'},
        {label: "户主姓名", prop: "name", align: 'center'},
        {label: "性别", prop: "sex", dict: 'sex', align: 'center'},
        {
          label: "身份证号", width: "160px", align: 'center',
          render: (h, {row}) => h('span', null, this.idCardNoUtil.hideId(row.idNumber))
        },
        {label: "户主联系方式", prop: "phone", align: 'center'},
        {
          label: "家庭住址", width: "160px", align: 'center',
          render: (h, {row}) => h('span', null, row.addressArea+row.address)
        },
        {label: "风险类型", prop: "riskType", dict: 'fpRiskType', align: 'center'},
        {label: "最后更新时间", prop: "createTime", align: 'center'},
        {slot: "status"},
        {label: "操作人", prop: "createUserName", align: 'center'},
        {slot: "options"},
      ]
    },
    formRules() {
      return {
        type0: [{ required: true, message: "请输入家庭纯收入标准", trigger: "change" }],
        type1: [{ required: true, message: "请输入家庭人均纯收入标准", trigger: "change" }],
      }
    }
  },
  created() {
    this.areaId = JSON.parse(JSON.stringify(this.user.info.areaId))
    this.dict.load('sex', 'fpRiskType', 'fpStatus').then(() => {
      this.getTableData()
      this.getSetInfo()
    })
  },
  methods: {
    getNum() {
      this.instance.post(`/app/apppreventionreturntopoverty/statistics-list`).then(res => {
        if (res?.data) {
          this.staData = res.data
          this.staData.jcl = !this.staData.jths ? '0%' : ((this.staData.fxxcrs / this.staData.jths) * 100).toFixed(2) + '%'
        }
      })
    },
    toAdd(id) {
      this.$emit('change', {
        type: 'Add',
        params: {
          id: id || ''
        }
      })
    },
    addSet() {
      this.$refs["rules"].validate((valid) => {
        if (valid) {
          this.instance.post(`/app/apppreventionreturntopovertyalarmconfig/addOrUpdate`, this.setInfo).then((res) => {
            if (res.code == 0) {
              this.$message({message: '预警规则设置成功', type: 'success'});
              this.getSetInfo()
              this.showSet = false
            }
          });
        } else {
          return false;
        }
      });
    },
    getSetInfo() {
      this.instance.post(`/app/apppreventionreturntopovertyalarmconfig/query`).then((res) => {
        if (res.code == 0) {
          this.setInfo = {...res.data}
        }
      });
    },
    getTableData() {
      this.instance.post(`/app/apppreventionreturntopoverty/list`, null, {
        params: {...this.search, ...this.page, addressAreaId: this.areaId, status: this.status}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records
          this.page.total = res.data.total
          this.tableData.map((item) => {
            item.createTime = item.createTime.substring(0, 10)
          })
          this.getNum()
        }
      })
    },
    handleDelete(ids) {
      ids = ids?.toString()
      this.$confirm("确定要删除该条数据吗?").then(() => {
        this.instance.post(`/app/apppreventionreturntopoverty/delete`, null, {
          params: {ids}
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success("删除成功!");
            this.getTableData();
          }
        })
      }).catch(() => 0)
    },
    resetSearch() {
      this.page.current = 1
      this.search = {}
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  height: 100%;
    .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 .dataPane {
    flex: 1;
    min-width: 0;
    background: #FFFFFF;
    box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
    border-radius: 2px;
    margin-bottom: 16px;
    margin-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;

    &:last-of-type {
      margin-right: 0;
    }
  }

  ::v-deep .mainPane {
    background: #fff;
    padding: 12px 16px;
    .ai-table__header {
      padding: 2px 0;
    }
  }
  .tab-text{
    display: inline-block;
    font-size: 14px;
    width: 150px;
    height: 32px;
    line-height: 32px;
    color: #333;
    cursor: pointer;
  }
  .active-tab{
    color: #26f;
  }
  .status0{
    color: rgb(255, 136, 34);
  }
  .status1{
    color: rgb(46, 162, 34);
  }
}
</style>
