<template>
  <div id="root">
    <div class="bill-info-title">
      <div class="title-info">收费组名称: {{ billName }}</div>
      <div class="title-info">收费组说明: {{ billExplain }}</div>
      <div class="title-info">截止时间: {{ formatDate(endDate) }}</div>
      <el-button type="info" @click="updateBill">修改</el-button>
    </div>
    <div class="bill-info-search">
      <span style="font-size: 14px; color: #606266;">收费情况</span>
      <el-form :model="formInline" inline="true" class="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.ownerName"/>
        </el-form-item>
        <el-form-item label="缴费状态">
          <el-select v-model="formInline.billStatus" placeholder="请选择">
            <el-option label="未缴费" value="0"/>
            <el-option label="已线上缴费" value="1"/>
            <el-option label="已线下缴费" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="缴费人姓名">
          <el-input v-model="formInline.payName"/>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="cleanQuery">清空</el-button>
          <el-button type="primary" @click="getBillInvoice">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bill-info-operation">
      <el-button type="primary" @click="addBillInvoice">添加更多收费单</el-button>
      <el-button type="danger" @click="deleteBeachIds">删除</el-button>
      <el-button type="primary" @click="offlinePayment">设置为已线下缴费</el-button>
      <el-button type="success" @click="exportExcel">导出数据</el-button>
      <div style="height: 40px; line-height: 40px; margin-left: 10px; font-size: 14px; color: #606266;">未缴户主费用可以直接点击 收费金额数字 修改，已缴费户主无法修改，需要线下多退少补</div>
    </div>
    <el-table
      v-loading="tableLoading"
      ref="multipleTable"
      :data="list"
      style="width: 100%; margin-top: 20px;"
      border
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"
        align="center"/>
      <el-table-column
        prop="id"
        label="收费单号"
        width="55"
        align="center">
        <!--<template slot-scope="scope">{{ scope.row.date }}</template>-->
      </el-table-column>
      <el-table-column
        prop="name"
        label="房屋信息"
        align="center">
        <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"
        show-overflow-tooltip/>
      <el-table-column
        prop="billInvoiceExplain"
        label="收费单说明"
        width="300"
        align="center">
        <template slot-scope="scope">
          <span style="color: #409EFF;cursor: pointer" @click="ediBillInvoiceExplain(scope.row)">{{ scope.row.billInvoiceExplain === null ? '-' : scope.row.billInvoiceExplain }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="payPrice"
        label="金额(元)"
        align="center">
        <template slot-scope="scope">
          <span style="color: #409EFF;cursor: pointer" @click="ediPayPrice(scope.row)">{{ showPayPrice(scope.row.payPrice) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="billStatement"
        label="订单号"
        align="center" width="170"/>
      <el-table-column
        prop="billStatus"
        label="缴费状态"
        align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.billStatus === '0'" style="color: red;">
            {{ showBillStatus(scope.row.billStatus) }}
          </span>
          <span v-else>
            {{ showBillStatus(scope.row.billStatus) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="billStatus"
        label="缴费途径"
        align="center">
        <template slot-scope="scope">
          {{ showPayType(scope.row.payType) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="payName"
        label="缴费人"
        align="center"/>
      <el-table-column
        prop="payDate"
        label="缴费时间"
        align="center">
        <template slot-scope="scope"> {{ formatDate(scope.row.payDate) }} </template>
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="新建时间"
        align="center">
        <template slot-scope="scope"> {{ formatDate(scope.row.createDate) }} </template>
      </el-table-column>
      <el-table-column
        prop="createUserName"
        label="新建人"
        align="center"/>
      <el-table-column
        prop="updateUserName"
        label="修改人"
        align="center"/>
      <el-table-column
        prop="updateDate"
        label="修改时间"
        align="center">
        <template slot-scope="scope"> {{ formatDate(scope.row.updateDate) }} </template>
      </el-table-column>
    </el-table>
    <div class="pagination-info">
      <el-pagination
        :current-page="formInline.pageNum"
        :page-sizes="[10, 20, 40, 80, 100]"
        :page-size="formInline.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      formInline: {
        billId: '', // 缴费项目id
        phaseId: '',
        buildingId: '',
        unitId: '',
        levelId: '',
        roomNoId: '',
        ownerName: '',
        billStatus: '',
        payName: '',
        pageSize: 10,
        pageNum: 1
      },
      billName: '', // 缴费组说明
      billExplain: '', // 缴费组说明
      endDate: '', // 缴费组截止时间
      list: [], // 数据列表
      total: 0,
      buildingList: [], // seletc 楼栋集合
      unitList: [], // seletc 单元集合
      levelList: [], // seletc 层 集合
      roomNoList: [], //  seletc 户号集合
      phaseList: [], // 期 集合
      deleteIds: [], // 需要删除的id集合
      tableLoading: false // 表格加载圈
    }
  },
  mounted() {
    // 获取期
    this.getPhase()
    this.formInline.billId = this.$route.query.id
    this.getBillInvoice()
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
      this.deleteIds = []
      for (const i in val) {
        this.deleteIds.push(val[i].id)
      }
    },
    cleanQuery() { // 清空
      this.formInline.phaseId = ''
      this.formInline.buildingId = ''
      this.formInline.unitId = ''
      this.formInline.roomNoId = ''
      this.formInline.ownerName = ''
      this.formInline.billStatus = ''
      this.formInline.payName = ''
      this.getBillInvoice()
    },
    getBillInvoice() {
      this.tableLoading = true
      this.$store.dispatch('GetBillInvoiceList', this.formInline).then(res => {
        const resData = res.data
        this.list = resData.list
        this.formInline.pageNum = resData.pageNum
        this.formInline.pageSize = resData.pageSize
        this.total = resData.total
        this.billName = resData.billName
        this.billExplain = resData.billExplain
        this.endDate = resData.endDate
        this.tableLoading = false
      }).catch(() => {
        console.log('GetBillInvoiceList error')
        this.tableLoading = false
      })
    },
    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) {
      if (val === null) {
        return ''
      }
      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
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formInline.pageSize = val
      this.getBillInvoice()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formInline.pageNum = val
      this.getBillInvoice()
    },
    updateBill() { // 跳转修改bill标题页面 bill-info-edi
      this.$router.push({ name: 'bill-info-edi', query: { id: this.formInline.billId }})
    },
    deleteBeachIds() { // 批量删除
      if (this.deleteIds.length <= 0) {
        this.$message.error('请至少选择一行数据')
        return
      }
      this.$store.dispatch('DeleteBillInvoiceById', this.deleteIds).then(res => {
        const code = res.code
        if (code === '0') {
          this.$message.success(res.message)
          this.getBillInvoice()
          return
        }
        this.$message.error(res.message)
      }).catch(() => {
        console.log('DeleteBillInvoiceById error')
      })
    },
    showBillStatus(val) {
      let str = ''
      switch (val) {
        case '0':
          str = '未缴费'
          break
        case '1':
          str = '已缴费'
          break
        case '3':
          str = '正在支付中'
          break
      }
      return str
    },
    offlinePayment() { // 设置线下缴费
      this.$store.dispatch('BillInvoiceOfflinePayment', this.deleteIds).then(res => {
        const resCode = res.code
        if (resCode === '0') {
          this.$message.success(res.message)
          this.getBillInvoice()
          return
        }
        this.$message.error(res.message)
      }).catch(() => {
        console.log('BillInvoiceOfflinePayment error')
      })
    },
    ediPayPrice(obj) { // 修改金额
      const payPrice = obj.payPrice
      this.$prompt('请输入金额', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: payPrice / 100,
        inputPattern: /^\d+\.?\d{0,2}$/, // /^\d+\.?\d{0,2}$/ 保留两位小数, /^\d+$/ 不保留小数
        inputErrorMessage: '请输入有效的金额'
      }).then(({ value }) => {
        // this.$message({
        //   type: 'success',
        //   message: '你的金额是: ' + value
        // })
        this.updateBillInvoiceIdPayPrice(obj.id, value)
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '取消输入'
        // })
      })
    },
    ediBillInvoiceExplain(obj) { // 修改收费单说明
      const billInvoiceExplain = obj.billInvoiceExplain
      this.$prompt('请输入收费单说明', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: billInvoiceExplain,
        inputValue: billInvoiceExplain
      }).then(({ value }) => {
        // this.$message({
        //   type: 'success',
        //   message: '你的金额是: ' + value
        // })
        this.updateBillInvoiceIdBillInvoiceExplain(obj.id, value)
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '取消输入'
        // })
      })
    },
    updateBillInvoiceIdPayPrice(id, payPrice) { // 根据缴费单id, 修改金额
      const data = []
      data.id = id
      data.payPrice = payPrice
      this.$store.dispatch('UpdateBillInvoiceIdPayPrice', data).then(res => {
        const resCode = res.code
        if (resCode === '0') {
          this.$message.success(res.message)
          this.getBillInvoice()
          return
        }
        this.$message.error(res.message)
      }).catch(() => {
        console.log('UpdateBillInvoiceIdPayPrice error')
      })
    },
    updateBillInvoiceIdBillInvoiceExplain(id, billInvoiceExplain) { // 根据缴费单id, 修改收费单说明
      const data = []
      data.id = id
      data.billInvoiceExplain = billInvoiceExplain
      this.$store.dispatch('UpdateBillInvoiceIdBillInvoiceExplain', data).then(res => {
        const resCode = res.code
        if (resCode === '0') {
          this.$message.success(res.message)
          this.getBillInvoice()
          return
        }
        this.$message.error(res.message)
      }).catch(() => {
        console.log('UpdateBillInvoiceIdPayPrice error')
      })
    },
    addBillInvoice() {
      // 如果是 收费已完成 的收费项, 则不允许跳进添加页面
      // this.$store.dispatch('GetBillByIdInfo', this.formInline.billId).then(res => {
      //   const resCode = res.code
      //   if (resCode === '0') {
      //     const billStatus = res.data.billStatus
      //     if (billStatus === '1') {
      //       this.$message.error('不能给收费已完成的收费组添加收费单!')
      //       return
      //     }
      //     this.$router.push({ name: 'bill-info-add', params: { id: this.formInline.billId }})
      //   }
      // }).catch(() => {
      //   console.log('GetBillByIdInfo error')
      // })

      this.$router.push({ name: 'bill-info-add', query: { id: this.formInline.billId }})
    },
    showPayPrice(payPrice) { //  转换金额
      const price = payPrice / 100
      return price
    },
    exportExcel() {
      this.$store.dispatch('ExportBillInvoiceExcel', this.formInline.billId).then(res => {
        const url = window.URL.createObjectURL(new Blob([res]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '缴费单.xls')
        document.body.appendChild(link)
        link.click()
      }).catch(() => {
        console.log('error ExportBillInvoiceExcel')
      })
    },
    showPayType(payType) { // 缴费途径
      let str = ''
      switch (payType) {
        case '0':
          str = '微信支付'
          break
        case '1':
          str = '线下缴费'
          break
        case '2':
          str = '支付宝缴费'
          break
      }

      return str
    }
  }
}
</script>

<style scoped>
.bill-info-title {
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
}
.title-info {
  font-weight: bold;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #606266;
}
.bill-info-search {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
}
.form-inline {
  margin-top: 10px;
}
.bill-info-operation {
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
}
.pagination-info {
  display: flex;
  justify-content: flex-end;
}
</style>
