<template>
  <div id="enterprise_info" class="body">
    <div style="height: 50px">
      <el-row type="flex" :gutter="20">
        <el-col :span="5">
          <el-input
              v-model="searchEntTaxId"
              clearable
              prefix-icon="el-icon-search"
              placeholder="请输入企业税号"
              class="ent_input"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-input
              v-model="searchEntName"
              clearable
              prefix-icon="el-icon-search"
              placeholder="请输入企业名称"
              class="ent_input"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-input
              v-model="searchEntUserName"
              clearable
              prefix-icon="el-icon-search"
              placeholder="请输入企业用户名称"
              class="ent_input"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-input
              v-model="searchEntUserMobile"
              clearable
              prefix-icon="el-icon-search"
              placeholder="请输入企业用户手机号"
              class="ent_input"
          ></el-input>
        </el-col>
        <el-col :span="16">
          <el-button v-on:click="getEntList" type="primary">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <div style="flex: 1">
      <el-container>
        <el-table
            :data="entList"
            border
            style="width: 100%;flex: 1"
            :height="tableHeight"
            ref="table"
        >
          <el-table-column prop="entName" label="企业名称" width="160"></el-table-column>
          <el-table-column prop="entTaxId" label="企业税号" width="160"></el-table-column>
          <el-table-column prop="entShortName" label="企业简称" width="160"></el-table-column>
          <el-table-column
              prop="entType"
              label="企业类型"
              width="100"
              :formatter="getEntType"
          ></el-table-column>
          <el-table-column prop="entAddress" label="企业地址" width="160"></el-table-column>
          <el-table-column prop="entContactPerson" label="企业联系人" width="100"></el-table-column>
          <el-table-column prop="entPhone" label="企业电话" width="120"></el-table-column>
          <el-table-column prop="entTaxOfficeCode" label="企业税局" width="120"></el-table-column>
          <el-table-column
              prop="serviceStatus"
              label="企业服务状态"
              width="120"
              :formatter="getServerStatus"
          ></el-table-column>
          <el-table-column prop="availableTaxes" label="可用税率" width="160"></el-table-column>
          <el-table-column prop="bankAccountName" label="银行" width="160"></el-table-column>
          <el-table-column prop="bankAccountNumber" label="银行账号" width="160"></el-table-column>
          <el-table-column prop="payees" label="收款人" width="160"></el-table-column>
          <el-table-column prop="reviewers" label="审核者" width="160"></el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button @click="enterpriseInfoEdit(scope.row)" type="primary" size="small" style="margin: 5px">编辑
              </el-button>
              <el-button @click="userChangeShow(scope.row)" type="primary" size="small" style="margin: 5px">用户变更
              </el-button>
              <el-button @click="passwordResetShow(scope.row)" type="primary" size="small" style="margin: 5px">密码重置
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-container>
    </div>
    <div style="height: 50px">
      <el-row type="flex" :gutter="20">
        <el-col :span="12"></el-col>
        <el-col :span="12">
          <div style="text-align:right">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="totalNumber"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="用户信息变更" :visible.sync="isShowUserInfo" v-on:close="userInfoClose">
      <user_info_change ref="userInfoChange" :userInfoChange="this"/>
      <div slot="footer" class="customer">
        <el-button class="invoice_button" type="primary" v-on:click="userInfoChange">确 定</el-button>
        <el-button class="invoice_button" type="primary" v-on:click="userInfoCancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="密码重置" :visible.sync="isShowPasswordReset" v-on:close="passwordResetClose">
      <password_reset ref="passwordReset" :passwordReset="this"/>
      <div slot="footer" class="customer">
        <el-button class="invoice_button" type="primary" v-on:click="passwordReset">确 定</el-button>
        <el-button class="invoice_button" type="primary" v-on:click="passwordResetCancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑企业信息" :visible.sync="dialogVisible" center v-on:opened="entInfoPageOpen">
      <enterprise_info_change ref="enterpriseInfoChange" :enterpriseInfoChange="this"/>
      <div slot="footer" class="customer">
        <el-button class="invoice_button" type="primary" v-on:click="entInfoPageClose">取 消</el-button>
        <el-button class="invoice_button" type="primary" v-on:click="entEditSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { AxiosRequestData } from '../../data/axios_request'
import cache from '@/utils/cache'
import UserInfoChange from '@/pages/enterprise_info/components/user_info_change'
import PasswordReset from '@/pages/enterprise_info/components/password_reset'
import EnterpriseInfoChange from '@/pages/enterprise_info/components/enterprise_info_change'

export default {
  name: 'enterprise_info',
  components: {
    'user_info_change': UserInfoChange,
    'password_reset': PasswordReset,
    'enterprise_info_change': EnterpriseInfoChange
  },
  data() {
    return {
      searchEntName: '',
      searchEntTaxId: '',
      searchEntUserName: '',
      searchEntUserMobile: '',
      dialogVisible: false,
      account: '',
      token: '',
      entList: [],
      pageNum: 1,
      pageSize: 10,
      totalNumber: 0,
      totalPage: 0,
      pageSizes: [10, 30, 50, 100],
      entName: '',
      entTaxId: '',
      tableHeight: '',
      isShowUserInfo: false,
      isShowPasswordReset: false,
      entUserMobile: '',
      rowInfo: {}
    }
  },
  created() {
    this.tableHeight = window.innerHeight - 250
    let user = JSON.parse(cache.getLocal('user'))
    this.account = user.account
    this.token = cache.getToken()
    this.getEntList()
  },
  mounted() {
    this.tableHeight = window.innerHeight - 250
    window.onresize = () => {
      return (() => {
        this.tableHeight = window.innerHeight - 250
      })()
    }
  },
  methods: {
    // 获取企业类型
    getEntType(row, column, cellValue) {
      if (cellValue === 1) {
        return '一般纳税人'
      }
      if (cellValue === 2) {
        return '小规模纳税人'
      }
      if (cellValue === 3) {
        return '起征点以下纳税人'
      } else {
        return ''
      }
    },
    // 获取企业的服务状态
    getServerStatus(row, column, cellValue) {
      if (cellValue === 1) {
        return '待初始化'
      }
      if (cellValue === 2) {
        return '初始化成功'
      }
      if (cellValue === 3) {
        return '服务状态有效'
      }
      if (cellValue === 4) {
        return '欠费'
      } else {
        return ''
      }
    },
    // 显示用户信息变更页面
    userChangeShow(row) {
      this.entUserMobile = row.entUserMobile
      this.isShowUserInfo = true
      this.$refs.userInfoChange.getUserPhone(row.entUserMobile, this.account)
    },
    // 用户信息变更页面关闭
    userInfoClose() {
      this.$refs.userInfoChange.userInfoCancel('ruleForm')
    },
    // 用户信息变更页面取消
    userInfoCancel() {
      this.isShowUserInfo = false
      this.$refs.userInfoChange.userInfoCancel('ruleForm')
    },
    // 用户信息变更
    userInfoChange() {
      this.$refs.userInfoChange.changeUserInfo('ruleForm')
    },
    // 显示密码重置页面
    passwordResetShow(row) {
      this.entUserMobile = row.entUserMobile
      this.isShowPasswordReset = true
      this.$refs.passwordReset.getServerPhone(this.account, row.entUserMobile)
    },
    // 密码重置页面关闭
    passwordResetClose() {
      this.$refs.passwordReset.passwordChangeClose('ruleForm')
    },
    // 密码重置页面取消
    passwordResetCancel() {
      this.isShowPasswordReset = false
      this.$refs.passwordReset.passwordChangeClose('ruleForm')
    },
    // 密码重置
    passwordReset() {
      this.$refs.passwordReset.changePassword('ruleForm')
    },
    // 变更每页显示的数据条数
    handleSizeChange(val) {
      this.pageSize = val
      this.getEntList()
    },
    // 翻页
    handleCurrentChange(val) {
      this.pageNum = val
      this.getEntList()
    },
    // 获取企业列表信息
    async getEntList() {
      if (this.account && this.token) {
        const url = '/auth/isp/user/finUserEntInfo'
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              entName: this.searchEntName,
              entTaxId: this.searchEntTaxId,
              entUserName: this.searchEntUserName,
              entUserMobile: this.searchEntUserMobile,
              mobile: this.account,
              pageNum: this.pageNum,
              pageSize: this.pageSize
            },
            false,
            2
        )
        if (response) {
          if (response.code === 0) {
            console.log(response)
            this.totalNumber = response.data.total
            this.totalPage = response.data.pages
            this.entList = response.data.records
          }
        }
      }
    },
    // 编辑企业信息
    enterpriseInfoEdit(row) {
      this.rowInfo = row
      this.dialogVisible = true
    },
    // 企业信息编辑页面打开
    entInfoPageOpen() {
      this.$refs.enterpriseInfoChange.getEntInfo()
    },
    // 编辑页面关闭
    entInfoPageClose() {
      this.dialogVisible = false
      this.getEntList()
    },
    // 编辑企业信息保存
    entEditSave() {
      this.$refs.enterpriseInfoChange.entEditSave()
    }
  }
}
</script>

<style scoped>
.body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ent_input {
  width: 250px;
}

.edit_layout {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
</style>
