<template>
  <ai-list class="list">
    <template slot="title">
      <ai-title title="帮扶申报" :instance="instance" isShowBottomBorder isShowArea :disabledLevel="disabledLevel" v-model="areaId" @change="changeArea"></ai-title>
    </template>
    <template slot="content">
      <ai-search-bar>
        <template slot="left">
          <ai-select
              v-model="searchObj.declareReason"
              placeholder="申请帮扶原因"
              clearable
              @change="(page.current = 1), getList()"
              :selectList="dict.getDict('helpDeclarationReason')"
          ></ai-select>
          <ai-select
              v-model="searchObj.declareType"
              placeholder="申报方式"
              clearable
              @change="(page.current = 1), getList()"
              :selectList="dict.getDict('helpDeclarationType')"
          ></ai-select>
          <ai-select
              v-model="searchObj.status"
              placeholder="状态"
              clearable
              @change="(page.current = 1), getList()"
              :selectList="dict.getDict('helpDeclarationStatus')"
          ></ai-select>
        </template>
        <template slot="right">
          <el-input placeholder="申请人姓名/联系方式"
                    v-model="searchObj.name"
                    size="small"
                    v-throttle="() => {page.current = 1, getList()}"
                    clearable
                    @clear="page.current = 1, searchObj.name = '', getList()"
                    prefix-icon="iconfont iconSearch"/>
        </template>
      </ai-search-bar>
      <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="page.total"
          ref="aitableex"
          :current.sync="page.current"
          row-key="id"
          default-expand-all
          :size.sync="page.size"
          @getList="getList"
      >
        <el-table-column slot="options" label="操作" align="center" width="120">
          <template slot-scope="{ row }">
            <el-button type="text" @click="goDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "list",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    return {
      searchObj: {
        declareReason: '',
        declareType: null,
        status: null,
        name: '',
      },
      page: {
        size: 10,
        current: 1,
        total: 0,
      },
      tableData: [],
      shopList: [],
      ids: [],
      areaId: '',
      disabledLevel: 0,
    };
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        {
          prop: "reason", 
          label: "申请帮扶原因"
        },
        {
          prop: "riskDescription",
          label: "返贫致贫风险说明",
        },
        {
          prop: "areaName",
          label: "所在地区",
          width: 120,
          align: "center",
        },
        {
          prop: "name",
          label: "申请人姓名",
          width: 120,
          align: "center",
        },
        {
          prop: "phone",
          label: "联系方式",
          width: 120,
          align: "center",
        },
        {
          prop: "declareType",
          label: "申报方式",
          width: 120,
          align: "center",
          formart: (declareType) =>
              this.$dict.getLabel("helpDeclarationType", declareType),
        },
        {
          prop: "declareTime",
          label: "申报时间",
          width: 120,
          align: "center",
        },
        {
          prop: "status",
          label: "状态",
          width: 120,
          align: "center",
          render: (h, {row}) => {
            return h('span', {style: {color: this.dict.getColor('helpDeclarationStatus', row.status)}}, this.dict.getLabel('helpDeclarationStatus', row.status))
          },
        },
        {slot: "options", label: "操作"},
      ];
    },
  },
  created() {
    this.disabledLevel = this.user.info.areaList.length - 1
    this.areaId = this.user.info.areaId
    this.dict.load('helpDeclarationType', 'helpDeclarationStatus', 'helpDeclarationReason').then(() => {
      this.$nextTick(() => this.getList())
    })
  },
  methods: {
    getList() {
      this.instance.post(`/app/apphelpdeclarationinfo/list`, null, {
        params: {
          ...this.searchObj,
          ...this.page,
          areaId: this.areaId
        },
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records;
          this.tableData.map((item) => {
            if (item.createTime) {
              item.createTime = item.createTime.substring(0, 10)
            } else {
              item.createTime = '-'
            }
          })
          this.page.total = res.data.total;
        }
      });
    },
    reset() {
      this.page.current = 1
      Object.keys(this.searchObj).forEach((e) => {
        this.searchObj[e] = "";
      });
      this.getList();
    },
    goDetail(row) {
      this.$emit('change', {
        type: 'detail',
        params: {
          ...row
        }
      })
    },
    changeArea() {
      this.$nextTick(() => {
        this.reset()
      })
    },
  },
};
</script>

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

  ::v-deep .el-range-editor--small.el-input__inner {
    width: 258px;
  }

  ::v-deep .dateRange {
    .dateLabel {
      height: 32px;
      border: 1px solid #D0D4DC;
      line-height: 32px;
      padding: 0 8px;
      background: #F5F5F5;
    }

    .el-input__inner {
      border-radius: 0;
      transform: translateX(-1px);
    }
  }

  .iconfont {
    cursor: pointer;
    margin-right: 8px;
  }

  .iconCorrect {
    color: #53b43b;
  }

  .iconReject {
    color: #e75555;
    padding: 0 8px;
  }
}
</style>
