<template>
    <div class="main-contain outpatientChargesManagement">
        <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
        </div>
        <div class=" sign-and-weigh-box" style="background: white">
            <fa-piao-dialog
                    ref="dialog"
                    :titles="Dialog.titles"
                    :formValue="Dialog.formValue"
                    :visibility="Dialog.isVisibility"
                    :type="Dialog.type"
                    :isCreated="Dialog.isCreated"
                    v-on:dialog-comfirm="dialogComfirm"
                    v-on:dialog-cancle="dialogCancle"

            >

            </fa-piao-dialog>
            <el-row :gutter="15">
                <el-col>
                    <div>
                        <el-button
                                size="small"
                                icon="el-icon-circle-plus-outline"
                                style="float: right;margin-bottom: 15px"
                                type="primary"
                                @click="showDialog"
                        >新增
                        </el-button>
                    </div>

                    <el-table
                            :row-style="{ color: '#303133' }"
                            :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266'
            }"
                            :data="faPiaoData"
                            style="width: 100%"
                            border
                            v-loading="loading"
                    >
                        <el-table-column label="发票编码" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.fapiao_number }}
                            </template>
                        </el-table-column>

                        <el-table-column label="发票号码" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.fapiao_code }}
                            </template>
                        </el-table-column>


                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-tooltip
                                        class="item"
                                        effect="dark"
                                        content="编辑"
                                        placement="top"
                                >
                                    <el-button
                                            size="small"
                                            type="primary"
                                            icon="el-icon-edit-outline"
                                            @click="handleEdit(scope.$index, scope.row)"
                                    >
                                    </el-button>
                                </el-tooltip>
                                <el-tooltip
                                        class="item"
                                        effect="dark"
                                        content="删除"
                                        placement="top"
                                >
                                    <el-button
                                            size="small"
                                            type="danger"
                                            icon="el-icon-delete"
                                            @click="handleDelete(scope.$index, scope.row)"
                                    >
                                    </el-button>
                                </el-tooltip>


                                <el-button
                                        size="small"
                                        type="primary"
                                        v-if=" scope.row.is_use == 0"
                                        @click="handleIsUse(scope.$index, scope.row,0)"
                                >未开启
                                </el-button>

                                <el-button
                                        size="small"
                                        type="primary"
                                        v-if=" scope.row.is_use == 1"
                                >已开启
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :page-sizes="[10, 50, 100]"
                            :page-size="10"
                            background
                            align="right"
                            style="margin-top:20px;"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                    >
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
  import { createFaPiao, deleteFaPiao, GetFaPiao, getFaPiaoList, modifyFaPiao, postFaPiaoIsUse } from '@/api/his/his'
  import FaPiaoDialog from './components/faPiaoDialog'
  import BreadCrumb from '@/xt_pages/components/bread-crumb'

  export default {
    components: {
      FaPiaoDialog,
      BreadCrumb
    },
    name: 'diagnosis',
    data() {
      return {
        crumbs: [
          { path: false, name: 'HIS工具' },
          { path: false, name: '发票设置' }
        ],
        signAndWeighBoxPatients: 'sign-and-weigh-box-patients',
        faPiaoData: [],
        total: 0,
        pageTotal: 0,
        pageSelect: 0,

        page: 1,
        limit: 10,
        loading: false,

        manufacturer_code: '',
        editId: '',
        editIndex: '',
        Dialog: {
          titles: '新增',
          isVisibility: false,
          isCreated: 1, //1.创建 2.编辑 3.查看详情
          formValue: {
            fapiao_number: '',
            fapiao_code: '',
            is_use: 0

          },
          resetForm: {
            fapiao_number: '',
            fapiao_code: '',
            is_use: 0
          }
        }
      }
    },
    methods: {
      handleEdit: function(index, row) {
        this.editId = row.id
        this.editIndex = index
        let params = {
          id: row.id
        }
        GetFaPiao(params).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.Dialog.formValue.fapiao_number =
              response.data.data.fapiao_record.fapiao_number
            this.Dialog.formValue.fapiao_code =
              response.data.data.fapiao_record.fapiao_code

            this.Dialog.isCreated = 2
            this.$refs.dialog.show()

          }
        })
      },
      handleDelete: function(index, row) {
        this.$confirm('确认删除这条记录?', '删除记录', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            let params = {
              id: row.id
            }
            deleteFaPiao(params).then(response => {
              if (response.data.state == 0) {
                this.$message.error(response.data.msg)
                return false
              } else {
                this.faPiaoData.splice(index, 1)
                this.$message.success('发票已经删除')
              }
            })
          })
          .catch(() => {
          })
      },
      handleIsUse: function(index, row) {
        this.$confirm('是否开启?', '开启', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            let params = {
              id: row.id,
              is_use: 1
            }
            postFaPiaoIsUse(params).then(response => {
              if (response.data.state == 0) {
                this.$message.error(response.data.msg)
                return false
              } else {
                for (let i =0; i < this.faPiaoData.length; i++){
                  this.faPiaoData[i].is_use = 0
                }
                this.faPiaoData[index].is_use = 1
              }
            })
          })
          .catch(() => {
          })

      },
      showDetails: function(index, row) {
        let params = {
          id: row.id
        }
        GetFaPiao(params).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.Dialog.formValue.fapiao_number =
              response.data.data.fapiao_record.fapiao_number
            this.Dialog.formValue.fapiao_code =
              response.data.data.fapiao_record.fapiao_code

            this.Dialog.isCreated = 3
            this.Dialog.isVisibility = true
          }
        })
      },
      dialogComfirm: function(val) {
        this.$refs.dialog.hide()
        if (val.isCreated == 2) {
          //修改
          let params = {
            fapiao_code: val.fapiao_code,
            fapiao_number: val.fapiao_number,
            id: this.editId
          }
          modifyFaPiao(params).then(response => {
            if (response.data.state == 0) {
              this.$message.error(response.data.msg)
              return false
            } else {
              this.faPiaoData[this.editIndex].fapiao_code =
                response.data.data.fapiao_record.fapiao_code
              this.faPiaoData[this.editIndex].content_code =
                response.data.data.fapiao_record.fapiao_number
              this.faPiaoData[this.editIndex].is_use =
                response.data.data.fapiao_record.is_use

              this.$message.success('修改成功')
            }
          })
        } else if (val.isCreated == 1) {

          //新增
          createFaPiao(val).then(response => {
            if (response.data.state == 0) {
              this.$message.error(response.data.msg)
              return false
            } else {
              this.faPiaoData.unshift(response.data.data.fapiao_record)
              this.$message.success('新增成功')
            }
          })
        }
      }, dialogCancle: function() {
        this.$refs.dialog.hide()
      }, showDialog: function() {
        this.Dialog.formValue = Object.assign(
          {},
          this.Dialog.resetForm
        )
        this.$refs.dialog.show()
        this.Dialog.isCreated = 1
      }, handleSizeChange(val) {
        this.limit = val
        this.getList()
      }, handleCurrentChange(val) {
        this.page = val
        this.getList()
      }, getList() {
        let params = {
          page: this.page,
          limit: this.limit
        }
        this.loading = true
        getFaPiaoList(params).then(response => {
          if (response.data.state == 0) {
            this.loading = false
            this.$message.error(response.data.msg)
            return false
          } else {
            this.loading = false
            this.total = response.data.data.total
            this.faPiaoData = []
            for (let i = 0; i < response.data.data.fapiao_record.length; i++) {
              this.faPiaoData.push(response.data.data.fapiao_record[i])
            }
          }
        })
      }
    },
    created() {
      this.getList()
    }
  }
</script>

<style lang="scss">
    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
        border-color: #d0d3da;
    }
    .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
        background-color: #d0d3da;
    }
</style>
