<template>
  <div class="con-boxs">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="selsectValue" clearable :placeholder="$t('pages.affairsHall.myApply.choose')">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{ $t('pages.affairsHall.myApply.query') }}</el-button>
      </el-form-item>
    </el-form>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>{{ $t('pages.affairsHall.myApply.Ongoing') }}</span>
      </div>
      <template>
        <el-table
          :data="unfinishedCount"
          style="width: 100%">
          <el-table-column
            prop="index"
            :label="$t('pages.affairsHall.myApply.index')">
          </el-table-column>
          <el-table-column
            prop="name"
            :label="$t('pages.affairsHall.myApply.matter')">
          </el-table-column>
          <el-table-column
            prop="personal_name"
            :label="$t('pages.affairsHall.myApply.people')">
          </el-table-column>
          <el-table-column
            prop="class_name"
            :label="$t('pages.affairsHall.myApply.peopleclass')">
          </el-table-column>
          <el-table-column
            prop="apply_time"
            :label="$t('pages.affairsHall.myApply.submitTime')">
          </el-table-column>
          <el-table-column
            prop="status"
            :label="$t('pages.affairsHall.myApply.Approvalresults')">
          </el-table-column>
          <el-table-column
            prop="approve_time1"
            :label="$t('pages.affairsHall.myApply.Approvaltime')">
          </el-table-column>
        </el-table>
      </template>
    </el-card>
    <el-card class="box-card cardmar" shadow="never">
      <div slot="header" class="clearfix">
        <span>{{ $t('pages.affairsHall.myApply.Completed') }}</span>
      </div>
      <template>
        <el-table
          :data="finishedCount"
          style="width: 100%">
          <el-table-column
            prop="index"
            :label="$t('pages.affairsHall.myApply.index')">
          </el-table-column>
          <el-table-column
            prop="name"
            :label="$t('pages.affairsHall.myApply.matter')">
          </el-table-column>
          <el-table-column
            prop="personal_name"
            :label="$t('pages.affairsHall.myApply.people')">
          </el-table-column>
          <el-table-column
            prop="class_name"
            :label="$t('pages.affairsHall.myApply.peopleclass')">
          </el-table-column>
          <el-table-column
            prop="apply_time"
            :label="$t('pages.affairsHall.myApply.submitTime')">
          </el-table-column>
          <el-table-column
            prop="status"
            :label="$t('pages.affairsHall.myApply.Approvalresults')">
          </el-table-column>
          <el-table-column
            prop="approve_time1"
            :label="$t('pages.affairsHall.myApply.Approvaltime')">
          </el-table-column>
        </el-table>
      </template>
    </el-card>
  </div>
</template>

<script>
import cAction from '@action'
export default {
  data () {
    return {
      selsectValue: '',
      options: [],
      formInline: {
        user: '',
        region: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }],
      unfinishedCount: [],
      finishedCount: []
    }
  },
  created () {
    // this.getInfo()
    this.getSelect()
    this.onSubmit()
  },
  methods: {
    getSelect () {
      cAction.Affairs.getAffairsType().then(data => {
        for (let i = 0; i < data.length; i++) {
          this.options.push({ label: data[i].affair_name, value: data[i].id })
        }
      }).catch(e => {
        this.$message.error(e.message)
      })
    },
    onSubmit () {
      cAction.Affairs.getAffairsData({ affair_id: this.selsectValue }).then(data => {
        this.unfinishedCount = []
        this.finishedCount = []
        let num1 = 0
        let num2 = 0
        for (let i = 0; i < data.length; i++) {
          if (data[i].status === -1) {
            data[i].status = '未审核'
            num1++
            data[i].index = parseInt(num1)
            data[i].personal_name = data[i].form.personal_name
            data[i].class_name = data[i].form.class_name
            data[i].name = this.screenId(data[i].affair_id)
            this.unfinishedCount.push(data[i])
          } else {
            num2++
            data[i].index = parseInt(num2)
            data[i].status = data[i].status === 1 || data[i].status === 2 ? '通过' : '未通过'
            data[i].personal_name = data[i].form.personal_name
            data[i].class_name = data[i].form.class_name
            data[i].name = this.screenId(data[i].affair_id)
            this.finishedCount.push(data[i])
          }
        }
      }).catch(e => {
        this.$message.error(e.message)
      })
    },
    screenId (id) {
      for (let i = 0; i < this.options.length; i++) {
        if (this.options[i].value === id) {
          return this.options[i].label
        }
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.con-boxs{
  margin: 0.3rem;
  padding: 0.3rem 0.3rem 0.15rem 0.3rem;
  background: #ffffff;
  overflow: hidden;
  position: relative;
  .min-title{
    line-height: 30px;
    margin-top: 20px;
  }
  .cardmar{
    margin-top: 20px;
  }
}
</style>
