<template>
  <section class="pointsDetails">
    <ai-list>
      <template slot="content">
        <ai-search-bar>
          <template slot="left">
            <el-date-picker size="small" v-model="searchDotime" type="daterange" range-separator="至" @change="timeChange"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
          </template>
          <template slot="right">
            <el-input
                v-model="search.partyName"
                class="search-input"
                size="small"
                placeholder="搜索党员"
                clearable
                v-throttle="() => {search.current = 1, getList()}"
                @clear="search.current = 1, getList()"
                suffix-icon="iconfont iconSearch"/>
          </template>
        </ai-search-bar>
        <ai-table
            :tableData="tableData"
            :col-configs="colConfigs"
            :total="total" :dict="dict"
            :current.sync="search.current"
            :size.sync="search.size"
            @getList="getList">
          <el-table-column slot="integral" label="积分" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.integralType == 1 ? '+' : '-' }}{{ row.integral }}</span>
            </template>
          </el-table-column>
          <el-table-column slot="options" label="操作" align="center" fixed="right" width="120">
            <template slot-scope="{ row }">
              <el-button
                  type="text"
                  title="详情"
                  @click="viewItem(row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog title="详情" :visible.sync="dialog" :customFooter="true" :destroyOnClose="true" width="720px">
      <ai-wrapper>
        <ai-info-item label="党员：" :value="dialogInfo.partyName" isLine/>
        <ai-info-item label="事件：" :value="dict.getLabel('partyIntegralDetailType',dialogInfo.type)" dict/>
        <ai-info-item label="类型：">
          {{ dialogInfo.integralType == 1 ? '加分' : '减分' }}
        </ai-info-item>
        <ai-info-item label="分值：" :value="dialogInfo.integral" isLine/>
        <ai-info-item label="时间：" :value="dialogInfo.createTime" isLine/>
      </ai-wrapper>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialog=false">关闭</el-button>
      </div>
    </ai-dialog>
  </section>
</template>

<script>
export default {
  name: "pointsDeclaration",

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

  data() {
    return {
      searchDotime: [],
      search: {
        current: 1,
        size: 10,
        partyName: '',
        startTime: null,
        endTime: null,
      },
      total: 10,
      colConfigs: [
        {prop: "partyName", label: "对象", width: "150px"},
        {prop: "remark", label: "调整说明",},
        {prop: "createTime", label: "时间", align: "center"},
        {prop: "integralType", label: "类型", align: "center", render: (h, {row}) => h('span', `${row.integralType == 0 ? '减分' : '加分'}`)},
        {slot: "integral", label: "积分", align: "center",},
        {slot: "options", label: "操作", align: "center"},
      ],
      tableData: [],
      dialog: false,
      dialogInfo: {},
    };
  },

  mounted() {
    this.$dict.load(["integralDeclareDoType","integralDetailType","partyIntegralDetailType"]).then(() => {
      this.getList();
    });
  },

  methods: {
    getList() {
      this.instance.post(`/app/apppartyintegralinfo/list`, null, {
        params: {
          ...this.search,
        },
      })
      .then((res) => {
        if (res?.data) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      });
    },

    timeChange() {
      if (this.searchDotime) {
        this.search.startTime = this.searchDotime[0]
        this.search.endTime = this.searchDotime[1]
      } else {
        this.search.startTime = null
        this.search.endTime = null
      }
      this.search.current = 1
      this.getList()
    },

    viewItem(row) {
      this.dialog = true
      this.instance.post(`/app/apppartyintegralinfo/queryDetailById?id=${row.id}`).then((res) => {
        if (res?.data) {
          this.dialogInfo = res.data
        }
      });
    },

    onReset() {
      this.search.current = 1
      this.search.doTimeStart = null
      this.search.doTimeEnd = null
      this.search.familyName = ''
      this.searchDotime = []
      this.getList();
    },
  },
};
</script>

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

  
}
</style>
