<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="投诉单号">
              <j-input placeholder="请输入投诉单号" v-model="queryParam.complaintNo"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-model-item label="状态">
              <a-select style="width: 100%" v-model="queryParam.handleStatus" placeholder="请选择状态">
                <a-select-option v-for="item in dictOptions" :key="item.value"
                  :value="item.value">{{item.label}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-row :gutter="24">
        <a-col :sm="24" :md="12" :xl="14" :style="{ marginBottom: '24px' }">
          <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
            :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
            @change="handleTableChange">
          </a-table>
        </a-col>
        <a-col :sm="24" :md="12" :xl="10" :style="{ marginBottom: '24px' }">
          <div class="pay-cost t-box">
            <h3 class="box-title">投诉</h3>
            <pie :dataSource="repairData" />
            <div class="number">
              <p>全部报修 {{totalNum}}</p>
              <p v-for="(item, index) in repairData" :key="index">{{ item.item }} {{ item.count }}</p>
            </div>
          </div>
        </a-col>
      </a-row>

    </div>
    <!-- table区域-end -->

  </a-card>
</template>

<script>
import { complaintStatistics } from '@/api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { COMPLAINT_STATUS, filterDictTextByStatic } from '@/assets/static.js'
import Pie from '@/components/chart/Pie'

const columns = [
  {
    title: '投诉工单',
    dataIndex: 'complaintNo',
    key: 'complaintNo',
    width: 130,
    align: 'center',
  },
  {
    title: '投诉主题',
    dataIndex: 'complaintTheme',
    key: 'complaintTheme',
    align: 'center',
  },
  // {
  //   title: '问题描述',
  //   dataIndex: 'problemDesc',
  //   key: 'problemDesc',
  //   align: 'center',
  // },
  {
    title: '投诉人',
    dataIndex: 'userName',
    key: 'userName',
    align: 'center',
  },
  {
    title: '联系方式',
    dataIndex: 'userPhone',
    key: 'userPhone',
    align: 'center',
  },
  {
    title: '状态',
    dataIndex: 'handleStatus',
    key: 'handleStatus',
    align: 'center',
    customRender: function (text) {
      return filterDictTextByStatic(COMPLAINT_STATUS, text)
    },
  },
]

export default {
  name: 'PermissionListAsync',
  mixins: [JeecgListMixin],
  components: { Pie },
  data() {
    return {
      dictOptions: COMPLAINT_STATUS,
      // 表头
      columns: columns,
      url: {
        list: '/property-community/property/communityComplaint/list'
      },
      repairData:[],
      totalNum:0
    }
  },
  created() {
    this.onDetail()
  },
  methods: {
    async onDetail(typeCode) {
      let { result } = await complaintStatistics({ typeCode: typeCode })
      this.totalNum = result.totalNum
      this.repairData = [
        // { item: '全部报修', count: result.repairTotal || 0 },
        // { item: '待派单', count: result.waitDispatch || 0 },
        { item: '未完成', count: result.incompleteNum|| 0 },
        { item: '已完成', count: result.finishComplaintNum || 0 },
      ]
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style lang="less" scoped>
.number {
  width: 80%;
  margin: 0 10%;
  display: flex;
  justify-content: space-evenly;
  p {
    font-size: 14px;
    margin: 0;
  }
}
.pay-cost{
  height: 506px;
}
.t-box {
  background: #fff;
  padding: 15px;
  border: 1px solid #e8e8e8;
}
.box-title {
  font-weight: bold;
  margin-bottom: 15px;
  display: inline-block;
  padding-left: 10px;
  border-left: 3px solid #1890ff;
  height: 20px;
  line-height: 20px;
}
</style>