<template>
  <basic-container>
    <avue-crud
    :data="tableData"
    :option="invoiceOption"
    :page.sync="page"
    :table-loading="tableLoading"
    @on-load="getList"
    @size-change="sizeChange"
    @current-change="currentChange"
    @search-change="searchVal"
    @selection-change="selectionChange"
    >
      <template  slot-scope="scope" slot="menu">
        <el-button type="text" :disabled='scope.row.invoiceStatus !== "NOT_APPLY"' @click="invioceClick(scope.row)">开票</el-button>
      </template>
      <template slot="menuLeft">
        <el-button
          type="primary"
          size="small"
          @click="allInvoiceSubmit">汇总开票
        </el-button>
      </template>
    </avue-crud>
    <el-dialog  title="开票" center :visible.sync="dialogVisible" width="45%">
      <el-form :model="form" :rules="rules" ref="form"   label-width="100px">
        <el-form-item label="所选积分" prop="nums" required>
          <el-input v-model="form.nums" disabled></el-input>
        </el-form-item>
        <el-form-item label="开票主体" prop="deptName" required>
          <el-input v-model="form.deptName" disabled></el-input>
        </el-form-item>
        <el-form-item label="发票类型" prop="invoiceType">
          <el-select v-model="form.invoiceType" placeholder="请选择">
            <el-option :label="item.label" :value="item.value" v-for="item in invoiceTypeArr" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮寄地址" prop="address">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="收件人姓名" prop="addresseeName">
          <el-input v-model="form.addresseeName"></el-input>
        </el-form-item>
        <el-form-item label="收件人手机" prop="addresseePhone">
          <el-input v-model="form.addresseePhone"  @input="(v)=>(form.addresseePhone=v.replace(/[^\d.]/g,''))"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="invoiceSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getInvoicePark, invoice, catchInfo } from '@/api/account/invoice/index.js'
import { invoiceOption } from '@/const/crud/account/invioce/index.js'
import { getDictType } from "@/api/common";
import { getUserDeptId } from '@/api/admin/user'
import { mapState } from 'vuex'

export default {
  data() {
    return {

      info: {},
      tableData: [],
      invoiceOption,
      page: {
        total: 0, // 总页数
        pageSize: 10,
        pagerCount:0,
      },
      tableLoading: false,
      dialogVisible: false,
      form: {
        nums: '',
        packageIds: [],
        deptId: '',
        deptName: '',
        invoiceType: '',
        address: '',
        addresseeName: '',
        addresseePhone: '',
      },
      rules: {
        invoiceType: [ { required: true, message: '请选择发票类型', trigger: 'change' }],
        address: [ { required: true, message: '请输入邮寄地址', trigger: 'blur' },],
        addresseeName: [ { required: true, message: '请输入收件人姓名', trigger: 'blur' },],
        addresseePhone: [ { required: true, message: '请输入收件人手机', trigger: 'blur' },]
      },
      invoiceTypeArr: [],
      selectList: []
    }
  },
  created() {
    this.getTypeArr()

  },
  mounted() {
    this.getInfo()
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    async getInfo() {
      let arg = {
        deptId: this.userInfo.deptId
      }
      const res = await getUserDeptId(arg)
      this.info = res.data.data[0]
    },
    getTypeArr() {
      getDictType({ type: 'invoice_type' }).then(res => {
        this.invoiceTypeArr = res.data.data
      })
    },
    selectionChange(list) {
      console.log('list', list);
      this.selectList = list
    },
    async  allInvoiceSubmit() {
      if(!this.selectList.length) {
        this.$message.warning('请先选择数据！')
        return
      }
      const res = await catchInfo()
      this.form.address = res.data.data.address
      this.form.addresseeName = res.data.data.addresseeName
      this.form.addresseePhone = res.data.data.addresseePhone
      this.form.invoiceType = res.data.data.invoiceType
      this.form.nums = this.selectList.reduce((sum, row) => sum + row.score, 0)
      this.form.packageIds = this.selectList.map(item => item.scorePackageId)
      this.form.deptId = this.userInfo.deptId
      this.form.deptName = this.info.gsmc
      this.dialogVisible = true
    },
    async getList(page, params) {
      this.tableLoading = true
      let data = Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm
        )
      let res = await getInvoicePark(data)
      if(res.data.code === 0) {
        this.tableData = res.data.data.records
        this.page.total = res.data.data.total
      }
      this.tableLoading = false
    },
    sizeChange(pageSize){
      this.page.pageSize = pageSize;
    },
    currentChange(current){
      this.page.currentPage = current;
    },
    searchVal(form, done) {
      this.searchForm = form;
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    async  invioceClick(row) {
      const res = await catchInfo()
      this.form.address = res.data.data.address
      this.form.addresseeName = res.data.data.addresseeName
      this.form.addresseePhone = res.data.data.addresseePhone
      this.form.invoiceType = res.data.data.invoiceType
      this.form.nums = row.score
      this.form.packageIds[0] = row.scorePackageId
      this.form.deptId = this.userInfo.deptId
      this.form.deptName = this.info.gsmc
      this.dialogVisible = true
    },
    invoiceSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const res = await invoice(this.form)
          if(res.data.code == 0) {
            this.$message.success('申请成功！')
            this.getList(this.page);
            this.dialogVisible = false
          }
        } else {
          return false;
        }
      });
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}

</style>
