<template>
  <section class="pointsDetails">
    <ai-list isTabs>
      <template slot="content">
        <ai-search-bar bottomBorder>
          <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 HH:mm:ss" format="yyyy-MM-dd"></el-date-picker>
          </template>
          <template slot="right">
            <el-input
              v-model="search.familyName"
              class="search-input"
              size="small"
              placeholder="对象、户主、事件类型"
              clearable
              @keyup.enter.native="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"
          ref="aitableex"
          :current.sync="search.current"
          :size.sync="search.size"
          @getList="getList">
          <el-table-column slot="changeIntegral" label="积分" align= "center">
            <template slot-scope="{ row }">
              <span>{{row.changeIntegral > 0 ? '+' : ''}}{{row.changeIntegral}}</span>
            </template>
          </el-table-column>
          <el-table-column slot="doType" label="类型" align= "center">
            <template slot-scope="{ row }">
              <span>{{ dict.getLabel('integralDetailType', row.bizType) }}</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="详情"
                :disabled="!$permissions('app_appvillagerintegraldetail_detail')"
                @click="viewItem(row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog
      title="详情"
      :visible.sync="dialog.visible"
      :customFooter="true"
      :destroyOnClose="true"
      width="720px"
    >
      <div class="form_content">
        <div class="form_info">
          <span class="form_label">户主：</span>
          <span class="form_value">{{dialogInfo.familyName}}</span>
        </div>
        <div class="form_info">
          <span class="form_label">事项：</span>
          <span class="form_value">{{dialogInfo.ruleName}}</span>
        </div>
        <div class="form_flex form_info">
          <div>
            <span class="form_label">积分：</span>
            <span class="form_value">{{dialogInfo.changeIntegral >= 0 ? '增加' : '减少'}}<span style="color:#2266FF">{{Math.abs(dialogInfo.changeIntegral)}}</span>分</span>
          </div>
          <!-- <div>
            <span class="form_label">途径：</span>
          <span class="form_value">{{$dict.getLabel("integralDetailBizType", dialogInfo.bizType)}}</span>
          </div> -->
        </div>
        <!-- <div class="form_info">
          <span class="form_label">{{dialogInfo.bizType == 1 ? '申诉' : '申报'}}说明：</span>
          <span
            class="form_value"
          >{{dialogInfo.description}}</span>
        </div>
        <div class="form_info">
          <span class="form_label">照片：</span>
          <span class="form_value" v-if="dialogInfo.fileList && dialogInfo.fileList.length">
            <ai-uploader  :disabled="true" :instance="instance" v-model="dialogInfo.fileList" :limit="9" ></ai-uploader>
          </span>
          <span class="form_value" v-else>-</span>
        </div> -->
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialog.visible=false" size="medium">关闭</el-button>
      </div>
    </ai-dialog>
  </section>
</template>

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

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

  data() {
    return {
      searchDotime: [],
      search: {
        current: 1,
        size: 10,
        familyName: '',
        doTimeStart: null,
        doTimeEnd: null
      },
      total: 10,
      colConfigs: [
        { prop: "residentName", label: "对象", width:160 },
        { prop: "familyName", label: "户主", align: "center", width:160 },
        {
          prop: "ruleName",
          label: "事件类型",
          "show-overflow-tooltip": true,
          width:420
        },
        {
          prop: "doTime",
          label: "时间",
          width:200
        },
        // {
        //   prop: "doType",
        //   label: "类型",
        //   align: "center",
        //   width: 100,
        //   render: (h, params) => {
        //     return h(
        //       "span",
        //       {
        //         class: "status-" + params.row.doType,
        //       },
        //       this.$dict.getLabel("integralIntegralType", params.row.doType)
        //     );
        //   },
        // },
        { slot: "doType", label: "类型", width: 100},
        { slot: "changeIntegral", label: "积分", width: 100},
        // {
        //   prop: "bizType",
        //   label: "途径",
        //   align: "center",
        //   width: 100,
        //   formart: (bizType) =>
        //   this.$dict.getLabel("integralDetailBizType", bizType) || '-',
        // },
        { slot: "options", label: "操作", align: "center" },
      ],
      tableData: [],
      dialog: {
        visible: false,
      },
      dialogInfo: {},
    };
  },

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

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

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

    viewItem(row) {
      this.dialog.visible = true
      this.instance.post(`/app/appvillagerintegraldetail/queryDetailById?id=${row.id}`, null, {}).then((res) => {
          if (res.code == 0) {
            this.dialogInfo = res.data
            console.log(this.dialogInfo)
          }
        });
    },

    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;
  .form_content {
    .form_flex {
      display: flex;
      div {
        flex: 1;
      }
    }
    .form_info {
      margin-bottom: 8px;
    }
    .form_label {
      display: inline-block;
      color: #999;
      vertical-align: top;
      width: 70px;
      text-align: right;
    }
    .form_value {
      display: inline-block;
      color: #333;
      width: calc(100% - 70px);
      // img {
      //   width: 100px;
      //   height: 100px;
      //   margin: 0 8px 8px 0;
      // }
    }
  }
  .form_div {
    padding-top: 24px;
    border-top: 1px solid #eee;
  }
  .status-0 {
    color: #FF4466;
  }

  .status-1 {
    color: #2EA222;
  }

  .status-2 {
    color: #999999;
  }
}
</style>
