<template>
  <section class="scoreFamily">
    <ai-list v-show="!detailShow">
      <template slot="title">
        <ai-title title="家庭积分" :isShowBottomBorder="true" :instance="instance" :isShowArea="true" @change="getList()" v-model="areaId"></ai-title>
      </template>
      <template slot="content">
        <ai-search-bar bottomBorder>
          <template slot="left">
            <el-select size="small" v-model="searchObj.isPositive" placeholder="积分是否大于0" clearable @change="page.current = 1,getList()">
              <el-option
                v-for="(item,i) in isPositiveList"
                :key="i"
                :label="item.dictName"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </template>
          <template slot="right">
            <el-input
              v-model="searchObj.con"
              size="small"
              placeholder="户主姓名"
              v-throttle="() => {page.current = 1, getList()}"
              @clear="page.current = 1, searchObj.con = '', getList()"
              clearable
              suffix-icon="iconfont iconSearch" />
          </template>
        </ai-search-bar>
        <ai-search-bar class="mt10">
          <template slot="left">
            <ai-download :instance="instance" type="primary" url="/app/appvillagerintegraldetail/listExport" :params="params" fileName="家庭积分"></ai-download>
          </template>
        </ai-search-bar>
        <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="page.total"
          ref="aitableex"
          :current.sync="page.current"
          :size.sync="page.size"
          @getList="getList">
          <el-table-column label="操作" slot="options" fixed="right" align="center" width="180">
            <template v-slot="{row}">
              <div class="table-options">
                <el-button type="text" title="家庭成员" @click="familyMember(row)" :disabled="!$permissions('app_appvillagerintegralfamilymember_edit')">家庭成员</el-button>
                <el-button type="text" :disabled="!$permissions('app_appvillagerintegralfamily_detail')" title="详情" @click="goDetail(row)">详情</el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <detail v-if="detailShow" @goBack="goBack" :detailInfo='detailInfo' :instance='instance' :dict='dict'></detail>
    <ai-dialog class="family-list"
        title="成员列表"
        :visible.sync="addMemberVisible"
        :customFooter="true"
        :destroyOnClose="true"
        width="780px">
      <ai-table
          :tableData="familyList"
          :col-configs="familycolConfigs"
          :total="familyPage.total"
          :current.sync="familyPage.current"
          :size.sync="familyPage.size"
          :isShowPagination="false"
          @getList="familyMember(rowInfo)">
        <el-table-column label="与户主关系" slot="householdRelation" align="center" width="120">
          <template v-slot="{row}">
            <span v-if="row.householdName == 1">户主</span>
            <span v-else>{{dict.getLabel('householdRelation', row.householdRelation)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" slot="personType" align="center" width="120">
          <template v-slot="{row}">户籍居民</template>
        </el-table-column>
        <el-table-column label="身份证号" slot="idNumber" align="center" width="165">
          <template v-slot="{row}">
            <ai-id mode="show" :show-eyes="false" :value="row.idNumber"/>
          </template>
        </el-table-column>
      </ai-table>
      <div class="dialog-footer" slot="footer">
        <el-button @click="addMemberVisible=false" size="medium">关 闭</el-button>
      </div>
    </ai-dialog>
  </section>
</template>

<script>
import {mapState} from 'vuex';
import detail from './detail'

export default {
  name: 'AppScoreFamily',
  label: "家庭积分",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  components: {detail},
  data() {
    return {
      areaId: '',
      searchObj: {
        personType: '',
        villageGroup: '',
        status: '',
        con: '',
        isPositive: '',
      },
      isPositiveList: [{
        dictName: '是',
        dictValue: '1'
      }, {
        dictName: '否',
        dictValue: '0'
      }],
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      familyPage: {
        current: 1,
        size: 100,
        total: 0
      },
      exportParams: {},
      tableData: [],
      dialog: {
        title: '添加家庭',
        visible: false
      },
      dialogInfo: {
        personType: '0',
        name: '',
        idNumber: '',
        phone: '',
        villageGroup: '',
        status: '',
        areaId: '',
        householdRelation: '',
        avatar: ''
      },
      addMemberVisible: false,
      detailShow: false,
      personUrl: '',
      familyList: [],
      familyId: '',
      detailInfo: {},
      rowInfo: {}

    }
  },
  computed: {
    ...mapState(['user']),
    params () {
      return {
        ...this.searchObj,
        areaId: this.areaId,
        exportType: 0
      }
    },
    colConfigs() {
      return [
        {
          prop: 'name',
          label: '户主',
        },
        {
          prop: 'phone',
          align: 'center',
          label: '联系电话',
        },
        {
          prop: 'householdAreaName',
          align: 'center',
          label: '所在村',
        },
        {
          prop: 'familyIntegral',
          align: 'center',
          label: '家庭积分',
        },
        {
          prop: 'familyUsedIntegral',
          align: 'center',
          label: '已用积分',
        },
        {
          prop: 'familySurplusIntegral',
          align: 'center',
          label: '剩余积分',
        },
        {
          prop: 'familyNum',
          align: 'center',
          label: '成员数',
        },
      ]
    },
    familycolConfigs() {
      return [
        // {
        //   prop: 'householdRelation',
        //   align: 'center',
        //   label: '与户主关系',
        //   render(h, {row}) {
        //     return h('span', {}, _.$dict.getLabel('householdRelation', row.householdRelation))
        //   }
        // },
        {
          slot: 'householdRelation',
        },
        {
          prop: 'residentType',
          align: 'center',
          label: '类型',
          formart: v => this.dict.getLabel('residentType', v)
        },
        {
          prop: 'name',
          align: 'center',
          label: '姓名',
        },
        {
          prop: 'idNumber',
          align: 'center',
          slot: 'idNumber',
          label: '身份证号',
          width: 165,
        },
        {
          prop: 'phone',
          align: 'center',
          label: '联系电话',
          width: 120,
        }

      ]
    },
  },
  created() {
    this.areaId = this.user.info.areaId;
    this.dict.load('integralVillageGroup', 'integralRuleStatus', 'householdRelation', 'residentType');
    this.getList();
  },
  methods: {
    getList() {
      this.instance.post("/app/appresident/familyIntegral", null, {
        params: {
          ...this.searchObj,
          ...this.page,
          areaId: this.areaId
        }
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.records
          this.page.total = res.data.total
        }
      })
    },
    familyMember(row) {
      this.rowInfo = {...row}
      this.familyId = row.id;
      this.instance.post(`/app/appresident/detail?id=${row.id}`).then(res => {
        if (res.code == 0) {
          this.familyList = res.data.family;
          this.familyPage.total = res.data.family.length;
          this.addMemberVisible = true;
        }
      })

    },
    goBack() {
      this.detailShow = false;
    },
    goDetail(row) {
      this.detailInfo = {...row};
      this.detailShow = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.scoreFamily {
  height: 100%;
  background: #f3f6f9;
  overflow: auto;

  .form_div {
    width: 380px;
  }

  .add_btn {
    color: #5088FF;
    font-size: 14px;
    line-height: 36px;
    text-align: right;

    span {
      cursor: pointer;
    }

    span:nth-child(2) {
      margin-left: 4px;
    }

  }

  .iconfont {
    cursor: pointer;
  }

  .iconAll_Profile {
    padding: 0 8px;
  }
  .family-list{
    ::v-deep .el-table--small{
      font-size: 14px!important;
    }
  }
}
</style>
