/*发票管理*/
<template>
  <div class="invoice">
    <el-table
      ref="table"
      v-loading="loading"
      stripe
      size="small"
      height="85%"
      :data="listData"
      element-loading-text="拼命加载中"
      :row-class-name="tableRowClassName"
      @sort-change="sortChange"
    >
      <el-table-column
        v-for="(header, index) in headerData"
        :key="index"
        align="center"
        :prop="header.prop"
        :label="header.label"
        :sortable="header.sortable"
        :width="header.prop == 'index' ? 60 : ''"
      >
        <template slot-scope="scope">
          <span
            v-if="
              header.prop == 'operation' &&
              (scope.row['invoiceState'] == '0' || !scope.row['invoiceState'])
            "
            slot="content"
          >
            <el-checkbox
              v-model="scope.row[header.prop]"
              @change="getChecked"
            />
          </span>
          <span
            v-else-if="
              header.prop == 'operation' && scope.row['invoiceState'] == '1'
            "
            slot="content"
            >--</span
          >
          <span
            v-else-if="
              header.prop == 'operation' && scope.row['invoiceState'] == '2'
            "
            slot="content"
            class="operation"
            @click="viewInvoice(scope.row['pointId'], scope.row['invoiceId'])"
            >查看发票</span
          >
          <span
            v-else-if="
              header.prop == 'createTime'
            "
            slot="content"
            >{{ formatTime(scope.row[header.prop])}}</span
          >
          <span v-else-if="header.prop == 'invoiceState'" slot="content">{{
            scope.row[header.prop] == '0' || !scope.row[header.prop]
              ? '未开票'
              : scope.row[header.prop] == '1'
              ? '开票中'
              : '已开票'
          }}</span>

          <span v-else slot="content">{{ scope.row[header.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination
        :pagination-config="paginationConfig"
        @putPagination="getPagination"
      ></Pagination>
      <el-button
        type="danger"
        size="mini"
        plain
        round
        @click.native.prevent="getInvoice"
        >{{
          checkedList.length > 1
            ? '当前选中' + checkedList.length + '项，合并开票'
            : '开票'
        }}</el-button
      >
    </div>

    <Toast :toast-config="toastConfig" @putToast="getToast" />
    <ViewInvoice :view-config="viewConfig" @putView="getView" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Toast from '@/components/Toast'
import ViewInvoice from './components/ViewInvoice'
import { request } from '@/utils/request'
import { parseTime } from '@/utils/index'
export default {
  name: 'Invoice',
  components: { Pagination, Toast, ViewInvoice },
  data() {
    return {
      paginationConfig: {
        hideSinglePage: false,
        page: 1,
        size: 15,
        sizeList: [10, 15, 30, 50],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
      },
      toastConfig: {
        isShow: false,
        showCancel: false,
        center: false,
        message: '',
      },
      viewConfig: {
        isShow: false,
        dataList: [],
        amount: 0,
      },

      loading: false, // 是显示加载
      headerData: [], // 头部数据
      listData: [], // 数据列表
      checkedList: [], // 选择项
    }
  },
  computed: {},
  created() {
    this.addHeader() // 添加表头文字
    this.getData() // 获取发票列表
  },
  methods: {
    // 添加表头文字
    addHeader() {
      const header = []
      header.push({ label: '序号', prop: 'index' })
      header.push({ label: '描述', prop: 'desc', sortable: 'custom' })
      header.push({ label: '时间', prop: 'createTime', sortable: 'custom' })
      header.push({ label: '金额', prop: 'money', sortable: 'custom' })
      header.push({ label: '状态', prop: 'invoiceState', sortable: 'custom' })
      header.push({ label: '操作', prop: 'operation' })
      this.headerData = header
    },
    // 获取发票列表
    getData() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      setTimeout(() => {
        const params = {
          transCode: 'C00011',
          type: '1', // 类型（0-积分 1-积分充值 2-积分消费_新增子账户上限 3-积分赠送，不传是所有）
          page: this.paginationConfig.page,
          count: this.paginationConfig.size,
        }
        if (this.orderSortName) {
          params.orderSortName = this.orderSortName
        }
        if (this.orderSortType) {
          params.orderSortType = this.orderSortType
        }
        request(params)
          .then((res) => {
            this.listData = []
            loading.close()
            this.listData = res.rows
            this.paginationConfig.total = res.total
            this.listData.map((item, index) => {
              item.index =
                (this.paginationConfig.page - 1) * this.paginationConfig.size +
                index +
                1
              item.money = '￥' + Number(item.money).toFixed(2)
            })
          })
          .catch((err) => {
            loading.close()
          })
      }, 1500)
    },
    // 选中行
    tableRowClassName(row, rowIndex) {
      if (row.row.operation == true) {
        return 'selected'
      } else {
        return ''
      }
    },
    // 查看发票
    viewInvoice(pointId, invoiceId) {
      const params = {
        transCode: 'C00014',
        pointId: pointId,
        invoiceId: invoiceId,
      }
      request(params)
        .then((res) => {
          const arr = res.rows
          arr.map((item, index) => {
            item.money = '￥' + Number(item.money).toFixed(2)
          })
          this.viewConfig = {
            isShow: true,
            total: res.total,
            amount: Number(res.totalMoney).toFixed(2),
            dataList: arr,
          }
        })
        .catch((err) => {})
    },
    // 获取选中项
    getChecked() {
      this.checkedList = []
      this.listData.map((item) => {
        if (item.operation === true) {
          this.checkedList.push(item.pointId)
        }
      })
    },
    // 发票开票申请
    invoice() {
      const params = {
        transCode: 'C00013',
        pointId: this.checkedList.toString(),
      }
      request(params)
        .then((res) => {
          this.toastConfig = {
            isShow: true,
            showCancel: false,
            center: true,
            message: '已申请发票，请耐心等待！',
          }
          this.checkedList = []
          this.getData()
        })
        .catch((err) => {})
    },
    // 开票
    getInvoice() {
      if (this.checkedList.length <= 0) {
        this.toastConfig = {
          isShow: true,
          showCancel: false,
          center: true,
          message: '请选择需要开票项！',
        }
      } else if (this.checkedList.length === 1) {
        this.invoice()
      } else {
        this.toastConfig = {
          isShow: true,
          showCancel: true,
          center: false,
          message: '同时勾选多项时将合并到一张发票上，您确定开发票吗？',
        }
      }
    },
    // 获取分页操作
    getPagination(data) {
      this.paginationConfig = data
      this.getData()
    },
    // 获取Toast操作
    getToast(data) {
      this.toastConfig.isShow = false
      if (
        data &&
        this.toastConfig.message ===
          '同时勾选多项时将合并到一张发票上，您确定开发票吗？'
      ) {
        this.invoice()
      } else if (data) {
        console.log('确定')
      }
    },
    // 获取查看发票操作
    getView(data) {
      this.viewConfig.isShow = false
      if (data) {
        const params = {
          transCode: 'C00015',
          id: data,
        }
        request(params)
          .then((res) => {
            this.toastConfig = {
              isShow: true,
              showCancel: false,
              center: true,
              message: '已补寄发票，请查收邮箱。',
            }
          })
          .catch((err) => {})
      }
    },
    formatTime(time) {
      return parseTime(time)
    },
    // 排序
    sortChange(column, prop, order) {
      if (column.prop == 'desc') {
        this.orderSortName = 'content'
      } else if (column.prop == 'createTime') {
        this.orderSortName = 'create_time'
      } else if (column.prop == 'invoiceState') {
        this.orderSortName = 'invoice_state'
      } else {
        this.orderSortName = column.prop
      }

      this.orderSortType = column.order == 'descending' ? 'desc' : 'asc'
      this.getData()
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.invoice {
  @include w_h(100%, 100%);
  background: $color_f;
  .el-table {
    color: $color_9;
    .operation:hover {
      color: #2cae00;
      cursor: pointer;
    }
  }
  .pagination {
    @include flex();
    padding: 20px;
    font-size: 12px;
    color: $color_9;
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.invoice {
  .el-table {
    .cell {
      white-space: nowrap;
    }
    th {
      color: $color_f;
      background: #004498;
    }
    td,
    th.is-leaf {
      font-size: 12px;
      border: none;
    }
    .selected {
      color: $color_3;
    }
  }

  .el-checkbox {
    &__input.is-checked .el-checkbox__inner {
      background-color: #2cae00;
      border-color: #2cae00;
    }
    &__inner {
      &:hover {
        border-color: #2cae00;
      }
    }
  }
}
</style>
