<template>
  <div id="root">
    <el-form :model="formInline" inline="true" class="demo-form-inline">
      <el-form-item label="选择房子">
        <el-select v-model="formInline.phaseId" placeholder="请选择期" @change="buildSelectChange(0)">
          <el-option
            v-for="item in phaseList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
        <el-select v-model="formInline.buildingId" placeholder="请选择栋" @change="buildSelectChange(1)">
          <el-option
            v-for="item in buildingList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
        <el-select v-model="formInline.unitId" placeholder="请选择单元" @change="buildSelectChange(2)">
          <el-option
            v-for="item in unitList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
        <el-select v-model="formInline.levelId" placeholder="楼层" @change="buildSelectChange(3)">
          <!--<el-option label="选择楼层" value="-1" />-->
          <el-option
            v-for="item in levelList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
        <el-select v-model="formInline.roomNoId" placeholder="请选择户">
          <el-option
            v-for="item in roomNoList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="收费单说明">
        <el-input
          v-model="formInline.billInvoiceExplain"
          style="width: 300px;"
          placeholder="请输入内容"/>
      </el-form-item>
      <el-form-item label="收费金额">
        <el-input v-model="formInline.payPrice" placeholder="请输入金额"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加到下表</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="tableLoading"
      :data="list"
      border
      style="width: 100%">
      <el-table-column
        label="房屋信息"
        align="center"
        width="180">
        <template slot-scope="scope">
          <!--{{ scope.row.phase + '期' + scope.row.building + '栋' + scope.row.unit + '单元' + scope.row.roomNo + '户号' }}-->
          {{ scope.row.phase + scope.row.building + scope.row.unit + scope.row.roomNo }}
        </template>
      </el-table-column>
      <el-table-column
        prop="ownerName"
        label="户主姓名"
        align="center"
        width="180"/>
      <el-table-column
        prop="billInvoiceExplain"
        align="center"
        label="收费单说明"/>
      <el-table-column
        prop="payPrice"
        align="center"
        label="收费金额(元)">
        <template slot-scope="scope">{{ showPayPrice(scope.row.payPrice) }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="deleteById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="foot-button">
      <el-button type="primary" @click="updateBillInvoiceStatus">提交以上收费单</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      formInline: {
        billId: '', //  收费项id
        phaseId: '',
        buildingId: '',
        unitId: '',
        levelId: '',
        roomNoId: '',
        worthOf: '', // 催缴日期
        billInvoiceExplain: '', // 收费单说明
        payPrice: '' // 收费金额
      },
      list: [], // 数据
      buildingList: [], // seletc 楼栋集合
      unitList: [], // seletc 单元集合
      levelList: [], // seletc 层 集合
      roomNoList: [], //  seletc 户号集合
      phaseList: [], // 期 集合
      ids: [], // id集合
      tableLoading: false // 表格加载圈
    }
  },
  mounted() {
    // 获取期
    this.getPhase()
    this.formInline.billId = this.$route.query.id
    // 查询数据
    this.getTempBillInvoice()
  },
  methods: {
    onSubmit() {
      if (this.formInline.phase === '') {
        this.$message.error('期/区')
        return
      }
      if (this.formInline.building === '') {
        this.$message.error('栋')
        return
      }
      if (this.formInline.unit === '') {
        this.$message.error('单元')
        return
      }
      if (this.formInline.levelId === '') {
        this.$message.error('楼层')
        return
      }
      if (this.formInline.roomNo === '') {
        this.$message.error('户号')
        return
      }
      // if (this.formInline.worthOf === '') {
      //   this.$message.error('催缴日期')
      //   return
      // }
      if (this.formInline.billInvoiceExplain === '') {
        this.$message.error('收费单说明')
        return
      }
      if (this.formInline.payPrice === '') {
        this.$message.error('收费金额')
        return
      }
      this.$store.dispatch('AddTempBillInvoice', this.formInline).then(res => {
        const resCode = res.code
        if (resCode === '0') {
          this.getTempBillInvoice()
          return
        }
        this.$message.error(res.message)
      }).catch(() => {
        console.log('AddTempBillInvoice error')
      })
    },
    getTempBillInvoice() { // 查询前台批量添加的收费单, 状态是作废
      this.tableLoading = true
      this.$store.dispatch('GetTempBillInvoice', this.formInline.billId).then(res => {
        this.ids = []
        const resData = res.data
        this.list = resData
        for (const i in resData) {
          this.ids.push(resData[i].id)
        }
        this.tableLoading = false
      }).catch(() => {
        console.log('GetTempBillInvoice error')
        this.tableLoading = false
      })
    },
    updateBillInvoiceStatus() { // 由前台批量添加收费单, 默认定为 作废
      if (this.ids.length === 0) {
        this.$message.error('没有可提交数据')
        return
      }
      this.$store.dispatch('UpdateBillInvoiceStatus', this.ids).then(res => {
        const resCode = res.code
        if (resCode === '0') {
          this.$message.success(res.message)
          this.$router.push({ name: 'bill-info', query: { id: this.formInline.billId }})
          return
        }
        this.$message.error(res.message)
      }).catch(() => {
        console.log('UpdateBillInvoiceStatus error')
      })
    },
    getPhase() { // 获取期
      this.formInline.phaseId = ''
      this.$store.dispatch('GetPhaseList', this.formInline).then((res) => {
        this.phaseList = res.data
      }).catch(() => {
        console.log('error phase BuildingAddress')
      })
    },
    getBuild() { // 获取楼栋
      this.formInline.buildingId = ''
      this.$store.dispatch('GetBuildingList', this.formInline).then((res) => {
        this.buildingList = res.data
      }).catch(() => {
        console.log('error building BuildingAddress')
      })
    },
    getUnit() { // 获取单元
      this.formInline.unitId = ''
      this.$store.dispatch('GetUnitList', this.formInline).then((res) => {
        this.unitList = res.data
      }).catch(() => {
        console.log('error unit BuildingAddress')
      })
    },
    getLevel() { // 获取楼层
      this.formInline.levelId = ''
      this.$store.dispatch('GetLevelList', this.formInline).then((res) => {
        this.levelList = res.data
      }).catch(() => {
        console.log('error level BuildingAddress')
      })
    },
    getRoomNo() { // 获取户号
      this.formInline.roomNoId = ''
      this.$store.dispatch('GetRoomNoList', this.formInline).then((res) => {
        this.roomNoList = res.data
      }).catch(() => {
        console.log('error roomNo BuildingAddress')
      })
    },
    buildSelectChange(value) { // select 的 change
      switch (value) {
        case 0: // 查询栋
          this.buildingList = []
          this.unitList = []
          this.levelList = []
          this.roomNoList = []
          this.formInline.buildingId = ''
          this.formInline.unitId = ''
          this.formInline.levelId = ''
          this.formInline.roomNoId = ''
          this.getBuild()
          break
        case 1: // 查询 单元
          this.unitList = []
          this.levelList = []
          this.roomNoList = []
          this.formInline.unitId = ''
          this.formInline.levelId = ''
          this.formInline.roomNoId = ''
          this.getUnit()
          break
        case 2: // 查询 楼层
          this.levelList = []
          this.roomNoList = []
          this.formInline.levelId = ''
          this.formInline.roomNoId = ''
          this.getLevel()
          break
        case 3: // 查询 户号
          this.roomNoList = []
          this.formInline.roomNoId = ''
          this.getRoomNo()
          break
      }
    },
    formatDate(val) {
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      // var hour = value.getHours()
      // var minutes = value.getMinutes()
      // var seconds = value.getSeconds()
      // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
      return year + '-' + month + '-' + day
    },
    deleteById(id) { // 删除
      this.$store.dispatch('DeleteTempBillInvoice', id).then(res => {
        const resCode = res.code
        if (resCode === '0') {
          this.$message.success(res.message)
          this.getTempBillInvoice()
          return
        }
        this.$message.error(res.message)
      }).catch(() => {
        console.log('DeleteTempBillInvoice error')
      })
    },
    showPayPrice(payPrice) { //  转换金额
      const price = payPrice / 100
      return price
    }
  }
}
</script>

<style scoped>
#root {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.foot-button {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
