<template>
  <div class="contradiction-div">
    <div class="search-div">
      <Form size="large" ref="formInline" :model="formInline" inline :label-width="70" label-position="left">
        <FormItem v-if="formInline.areaNameList.length > 1" :label-width="0" style="margin-bottom: 0;">
          <Button @click="goBackList()">返回</Button>
        </FormItem>
        <FormItem label="所属地区:" style="margin-bottom: 0">
          <Alert type="warning">{{ formInline.areaNameList.join("/") }}</Alert>
        </FormItem>
        <FormItem label="受理时间:" style="margin-bottom: 0">
          <DatePicker v-model="formInline.date" :options="optionsDisabled" format="yyyy-MM-dd" type="daterange" placeholder="请选择受理时间" style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem style="margin-bottom: 0">
          <Button type="primary" @click="handleSubmit()">搜索</Button>
          <Button @click="handleReset()" style="margin-left: 8px">重置</Button>
        </FormItem>
      </Form>
    </div>
    <Alert>
      综治中心受理总量：<span class="text-b">{{ zzzxTotalCount }}</span>；横向部门受理总量：<span class="text-b">{{ hxbmTotalCount }}</span>。
    </Alert>
    <Table stripe :columns="columns1" :data="tableList">
      <template slot-scope="{ row, index }" slot="name">
        <!-- 列表第一个是本级 -->
        <span v-if="index === 0 && params.pageNo === 1">{{ row.name }}本级</span>
        <!-- type：5 表示是社区、乡级别 或者 （综治中心和横向部门都为 0）不可点击 -->
        <span v-else-if="row.type === '5' || (row.zzzxCount === 0 && row.hxbmCount === 0)">{{ row.name }}</span>
        <Button v-else :disabled="loading" style="color: #57a3f3;" type="text" @click="handleAreaClick(row)">{{ row.name }}</Button>
      </template>
    </Table>
    <Page class="page_style"  :total="params.totalRecord" :current="params.pageNo"
          :page-size="params.pageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="changePageSize"/>
  </div>
</template>

<script>
// 矛盾纠纷数据来源统计表
import { getReportUnitStatisticCountList, getReportUnitStatisticTotalCount } from '@/api/contradiction'
import { formatDate } from '@/libs/util'
export default {
  name: 'DataSourcesStatisticalTable',
  data () {
    return {
      formInline: {
        areaList: [],
        areaNameList: [],
        pageList: [],
        date: ['', '']
      },
      params: {
        areaId: '',
        createStartTime: '',
        createEndTime: '',
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      zzzxTotalCount: 0,
      hxbmTotalCount: 0,
      tableList: [],
      columns1: [
        { title: '受理地区', slot: 'name', align: 'center' },
        { title: '综治中心', key: 'zzzxCount', align: 'center' },
        { title: '横向部门', key: 'hxbmCount', align: 'center' }
      ],
      optionsDisabled: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now() || date && date.valueOf() < Date.now() - 31536000000
        }
      },
      loading: false
    }
  },
  computed: {
    company_id () {
      return this.$store.state.user.severUserInfo.company_id
    },
    company_name () {
      return this.$store.state.user.severUserInfo.company_name
    }
  },
  mounted () {
    if (this.formInline.areaList.length === 0) {
      this.areaListPush()
    }
    this.getTotalNum()
    this.getList()
  },
  methods: {
    checkDate () {
      this.params.areaId = this.formInline.areaList.length === 0 ? this.company_id : this.formInline.areaList[this.formInline.areaList.length - 1]
      this.params.createStartTime = this.formInline.date && this.formInline.date.length > 0 && this.formInline.date[0] ? formatDate(this.formInline.date[0], 'YYYY-MM-DD') : '',
      this.params.createEndTime = this.formInline.date && this.formInline.date.length > 0 && this.formInline.date[1] ? formatDate(this.formInline.date[1], 'YYYY-MM-DD') : ''
    },
    getTotalNum () {
      this.checkDate()
      const params = {
        areaId: this.params.areaId,
        createStartTime: this.params.createStartTime,
        createEndTime: this.params.createEndTime
      }
      getReportUnitStatisticTotalCount(params).then(res => {
        this.zzzxTotalCount = res.data.data.zzzxTotalCount
        this.hxbmTotalCount = res.data.data.hxbmTotalCount
      })
    },
    getList () {
      this.checkDate()
      getReportUnitStatisticCountList(this.params).then(res => {
        this.tableList = res.data.data.results
        this.params.pageNo = res.data.data.pageNo
        this.params.pageSize = res.data.data.pageSize
        this.params.totalRecord = res.data.data.totalRecord
      }).finally(() => {
        this.loading = false
      })
    },
    handleSubmit () {
      this.getList()
      this.getTotalNum()
    },
    handleReset () {
      this.formInline.date = ['', '']
      this.handleSubmit()
    },
    changePageNo (pageNo) {
      if (pageNo) this.params.pageNo = pageNo
      this.formInline.pageList[this.formInline.pageList.length - 1] = {
        pageNo: this.params.pageNo,
        pageSize: this.params.pageSize
      }
      this.handleSubmit()
    },
    changePageSize (pageSize) {
      this.params.pageSize = pageSize
      this.formInline.pageList[this.formInline.pageList.length - 1] = {
        pageNo: this.params.pageNo,
        pageSize: this.params.pageSize
      }
      this.changePageNo()
    },
    areaListPush (company_id, company_name) {
      if (!company_id && !company_name) {
        this.formInline.pageList.push({ pageNo: JSON.parse(JSON.stringify(this.params.pageNo)), pageSize: JSON.parse(JSON.stringify(this.params.pageSize)) })
        this.formInline.areaList.push(this.company_id)
        this.formInline.areaNameList.push(this.company_name)
        this.params.pageNo = 1
        this.params.pageSize = 10
      } else {
        this.formInline.pageList.push({ pageNo: 1, pageSize: 10 })
        this.formInline.areaList.push(company_id)
        this.formInline.areaNameList.push(company_name)
        this.params.pageNo = 1
        this.params.pageSize = 10
      }
    },
    areaListSplice () {
      this.formInline.pageList.splice(this.formInline.pageList.length - 1, 1)
      this.formInline.areaList.splice(this.formInline.areaList.length - 1, 1)
      this.formInline.areaNameList.splice(this.formInline.areaNameList.length - 1, 1)
    },
    handleAreaClick (row) {
      this.loading = true
      this.areaListPush(row.areaId, row.name)
      this.handleSubmit()
    },
    goBackList () {
      this.areaListSplice()
      if (this.formInline.pageList.length === 0) {
        this.params.pageNo = 1
        this.params.pageSize = 10
      } else {
        this.params.pageNo = this.formInline.pageList[this.formInline.pageList.length - 1].pageNo
        this.params.pageSize = this.formInline.pageList[this.formInline.pageList.length - 1].pageSize
      }
      this.handleSubmit()
    }
  }
}
</script>

<style scoped lang="less">
.contradiction-div {
  padding: 10px;
  .search-div {
    width: 100%;
    padding: 15px 30px 15px 15px;
    border: 1px solid skyblue;
    border-radius: 5px;;
    background-color: #f6fdfd;
    margin-bottom: 15px;
  }
}
.text-b {
  font-weight: 600;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
</style>
