<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.householdName" placeholder="是否户主" clearable @change="page.current = 1,getList()">
              <el-option
                v-for="(item,i) in householdNameList"
                :key="i"
                :label="item.dictName"
                :value="item.dictValue">
              </el-option>
            </el-select>
            <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="个人姓名"
              @keyup.enter.native="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?exportType=1" :params="params" fileName="个人积分"></ai-download>
          </template>
        </ai-search-bar>
        <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="page.total"
          style="margin-top: 12px;"
          :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"
        tableSize="small"
        @getList="familyMember(rowInfo)">
        <el-table-column label="与户主关系" slot="householdRelation" align="center" width="120">
          <template v-slot="{row}">
            <span v-if="row.householdIdNumber == row.idNumber">户主</span>
            <span v-else>{{dict.getLabel('householdRelation', row.householdRelation)}}</span>
          </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: 'scorePersonal',
  label: "个人积分",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  components: {detail},
  data() {
    return {
      areaId: '',
      searchObj: {
        householdName: '',
        con: '',
        isPositive: ''
      },
      householdNameList: [{
        dictName: '是',
        dictValue: '1'
      }, {
        dictName: '否',
        dictValue: '0'
      }],
      isPositiveList: [{
        dictName: '是',
        dictValue: '1'
      }, {
        dictName: '否',
        dictValue: '0'
      }],
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      familyPage: {
        current: 1,
        size: 10,
        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: 1
      }
    },
    colConfigs() {
      return [
        {
          prop: 'name',
          label: '姓名',
        },
        {
          prop: 'phone',
          align: 'center',
          label: '联系电话',
        },
        {
          prop: 'residentType',
          align: 'center',
          label: '类型',
          formart: v => this.dict.getLabel('residentType', v)
        },
        {
          prop: 'householdAreaName',
          align: 'center',
          label: '所在村'
        },
        {
          prop: 'personalIntegral',
          align: 'center',
          label: '个人积分',
        },
        {
          prop: 'personalUsedIntegral',
          align: 'center',
          label: '已用积分',
        },
        {
          prop: 'householdName',
          align: 'center',
          label: '是否户主',
          formart: v => v === '1' ? '是' : '否'
        }
      ]
    },
    familycolConfigs() {
      return [
        {
          prop: 'householdRelation',
          align: 'center',
          slot: 'householdRelation',
          label: '与户主关系',
          width: 165,
        },

        // {
        //   prop: 'householdRelation',
        //   align: 'center',
        //   label: '与户主关系',
        //   render(h, {row}) {
        //     return h('span', {}, _.$dict.getLabel('householdRelation', row.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,
        }

      ]
    },
    formRules() {
      let IdNumberPass = (rule, value, callback) => {
        if (value) {
          console.log(this.idCardNoUtil);
          if (this.idCardNoUtil.checkIdCardNo(value)) {
            callback();
          } else {
            callback(new Error("身份证号格式错误"));
          }
        } else {
          callback(new Error("请输入身份证号"));
        }
      };
      if (this.dialog.title.indexOf('家庭') != -1) {

        return {
          personType: [{required: true, message: "请选择类型", trigger: 'change'}],
          name: [{required: true, message: "请填写户主", trigger: 'change'}],
          idNumber: [{required: true, validator: IdNumberPass, trigger: 'change'}],
          phone: [{required: true, message: "请填写联系电话", trigger: 'blur'}],
          villageGroup: [{required: true, message: "请选择所属组", trigger: 'change'}],
          status: [{required: true, message: "请选择状态", trigger: 'change'}],
          householdRelation: [{required: true, message: "请选择与户主关系", trigger: 'change'}]
        }
      } else {
        return {
          personType: [{required: true, message: "请选择类型", trigger: 'change'}],
          name: [{required: true, message: "请填写户主", trigger: 'change'}],
          idNumber: [{required: true, validator: IdNumberPass, trigger: 'change'}],
          villageGroup: [{required: true, message: "请选择所属组", trigger: 'change'}],
          status: [{required: true, message: "请选择状态", trigger: 'change'}],
          householdRelation: [{required: true, message: "请选择与户主关系", trigger: 'change'}]
        }
      }
    }
  },
  created() {
    this.areaId = this.user.info.areaId;
    this.dict.load('integralVillageGroup', 'integralRuleStatus', 'integralPersonType', 'householdRelation', 'residentType');
    this.getList();
  },
  methods: {
    getList() {
      this.instance.post("/app/appresident/personalIntegral", null, {
        params: {
          ...this.searchObj,
          ...this.page,
          areaId: this.areaId
        }
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.records.map(v => {
            return v
          })
          this.page.total = res.data.total
        }
      })
    },
    typeChange(val) {
      val == '0' ? this.personUrl = '/app/appresident/list?fileStatus=0' : this.personUrl = '/app/apprecurrentpopulation/list?fileStatus=0';
      this.dialogInfo.name = "";
      this.dialogInfo.idNumber = "";
      this.dialogInfo.phone = "";
      this.dialogInfo.avatar = "";
      this.dialogInfo.areaId = "";
    },
    add() {
      this.dialog.visible = true;
      this.dialog.title = '添加家庭';
    },
    addFamily() {
      this.dialog.visible = true;
      this.dialog.title = '添加成员';
    },

    init(formName) {
      this.$refs[formName].clearValidate();
      Object.keys(this.dialogInfo).forEach(e => {
        this.dialogInfo[e] = ''
      })
      this.dialogInfo.personType = '0';
      this.personUrl = '';
    },

    familyMember (row) {
      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>
