<template>
  <el-container>
    <el-main>
      <!-- 查询 -->
      <el-form v-if="isSearchVisible" ref="formData" :model="formData" label-width="auto">
        <div class="form-container-div">
          <el-form-item label="企业名" prop="companyName">
            <el-input v-model="formData.companyName"></el-input>
          </el-form-item>
          <el-form-item label="法人姓名">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="组织机构代码" prop="companyNo">
            <el-input v-model="formData.companyNo"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-select v-model="formData.state">
              <el-option v-for="(item, index) in stateOptions" :key="index" :label="item.name" :value="item.type"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="form-container-div">
          <el-form-item label="申请时间" prop="submitTime">
            <CustomChoiceDatePicker @handelChange="handleSubmitTime"></CustomChoiceDatePicker>
          </el-form-item>
          <el-form-item label="审核时间" prop="auditTime">
            <CustomChoiceDatePicker @handelChange="handleAuditTime"></CustomChoiceDatePicker>
          </el-form-item>
          <div>
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </div>
        </div>
      </el-form>

      <!-- 操作按钮 -->
      <ActionButton
        :open-delete="false"
        add-btn-text="批量手动审核"
        add-btn-icon="el-icon-document-copy"
        @handle-add="openBulkDialog"
        @handle-refresh="_fetchData(true)"
        @handle-search="isSearchVisible = !isSearchVisible">
      </ActionButton>

      <!-- 数据 -->
      <el-table ref="tableData" :data="tableData" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="80" align="center"></el-table-column>
        <el-table-column label="记录ID" prop="uid" align="center"></el-table-column>
        <el-table-column label="企业名" prop="companyName" align="center"></el-table-column>
        <el-table-column label="法人姓名" prop="companyRegistrar" align="center"></el-table-column>
        <el-table-column label="组织机构代码" prop="companyNo" align="center"></el-table-column>
        <el-table-column label="营业执照" align="center">
          <template slot-scope="scope">
            <el-button type="success" size="mini" plain :disabled="scope.row.companyPic === undefined || scope.row.companyPic.length === 0 " @click="openPic(scope.row)">
              <svg-icon icon-class="audit"></svg-icon>
              <span style="margin-left: 6px;">查看图片</span>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span :style="{ color: scope.row.companyVerify === '3' ? '#FF494A' :
                            scope.row.companyVerify === '2' ? '#FFBB00' :
                            scope.row.companyVerify === '1' ? '#0DB903' : '', cursor: 'pointer'
            }" @click="openStateDialog(scope.row)">{{ scope.row.idVerifiedText }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" prop="companySubmitTime" align="center"></el-table-column>
        <el-table-column label="审核时间" prop="companyAuditTime" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <CustomButton type="primary" tip-text="审核" is-svg icon="audit" @onClick="openAuditDialog(scope.row)"></CustomButton>
            <CustomButton type="primary" tip-text="查看明细" is-svg icon="detail" @onClick="openDetailDialog(scope.row)"></CustomButton>
<!--            <CustomButton type="danger" tip-text="删除" is-svg icon="delete" @onClick="openDeleteDialog(scope.row)"></CustomButton>-->
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <el-footer>
      <el-pagination :current-page="currentPage" :page-sizes="[5, 10, 15, 20, 30]" :page-size="limit" layout="total, prev, pager, next, sizes, jumper" :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    </el-footer>

    <!-- 明细操作弹窗 -->
    <StateDialog :show-dialog="isStateVisible"
                  :dialog-title="stateDialogTitle"
                  :select-item="stateSelectItem"
                  @handle-close="isStateVisible = false"></StateDialog>
    <!-- 审核操作弹窗 -->
    <AuditDialog :show-dialog="isAuditVisible"
                 :dialog-title="auditTitle"
                 :select-item="auditSelectItem"
                 :audit-options="auditOptions"
                 @handle-close="isAuditVisible = false"
                 @handle-success="_fetchData">
    </AuditDialog>
    <!-- 明细弹窗 -->
    <DetailDialog :show-dialog="isDetailVisible"
                  :select-item="detailSelectItem"
                  @handle-success="_fetchData"
                  @handle-close="isDetailVisible = false">
    </DetailDialog>

  </el-container>
</template>

<script>
import CustomButton from '@/components/CustomButton/index'
import CustomChoiceDatePicker from '@/components/CustomChoiceDatePicker/index'
import StateDialog from './components/state-dialog'
import AuditDialog from './components/audit-dialog'
import DetailDialog from './components/detail-dialog'
import { fetchDataList } from '@/api/master-info-manage/company-authentication'
import ActionButton from '@/components/ActionButton'
/**
 * 站长信息管理 -> 企业认证
 */
export default {
  components: { ActionButton, CustomButton, CustomChoiceDatePicker, StateDialog, DetailDialog, AuditDialog },
  data() {
    return {
      // UI控制参数
      isSearchVisible: false,
      // 明细dialog参数
      isDetailVisible: false,
      detailSelectItem: {},
      // 状态dialog参数
      isStateVisible: false,
      stateDialogTitle: '状态详情',
      stateSelectItem: {},
      // 审核弹窗参数
      isAuditVisible: false,
      auditTitle: '审核',
      auditSelectItem: {},
      // 请求参数
      formData: {
        // 企业名
        companyName: '',
        // 法人姓名
        companyRegistrar: '',
        // 组织机构代码
        companyNo: '',
        // 状态
        state: '',
        // 申请时间
        submitTime: '',
        // 审核时间
        auditTime: ''
      },
      // 分页数据
      totalCount: 0,
      currentPage: 1,
      limit: 20,
      // 返回的数据
      tableData: [],
      // 选中的数据
      multipleSelection: [],
      // 下拉数据
      stateOptions: [],
      auditOptions: []
    }
  },
  created() {
    this._fetchData()
  },
  methods: {

    // 查看营业照片
    openPic(row) {
      this.$hevueImgPreview(row.companyPic)
    },
    // 批量审核
    openBulkDialog() {
      // TODO 等后台修改接口是否使用
      // if (this.multipleSelection.length === 0) {
      //   this.$message.warning('请选择数据～')
      //   return false
      // }
    },
    // 查看明细
    openDetailDialog(row) {
      this.detailSelectItem = row
      this.isDetailVisible = true
    },
    // 查看状态
    openStateDialog(row) {
      this.isStateVisible = true
      this.stateSelectItem = row
    },
    // 审核
    openAuditDialog(row) {
      this.isAuditVisible = true
      this.auditSelectItem = row
    },
    // 提交表单
    submitForm() {
      this._fetchData()
    },
    // 重置表单
    resetForm() {
      this.$refs.formData.resetFields()
    },
    handleSubmitTime(val) {
      this.formData.submitTime = val[0] + ' - ' + val[1]
    },
    handleAuditTime(val) {
      this.formData.auditTime = val[0] + ' - ' + val[1]
    },
    // 表格选中的数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // limit 改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.limit = val
      this._fetchData()
    },
    // 当前页面改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this._fetchData()
    },
    // 初始化数据
    _fetchData(needToast = false) {
      const params = {}
      params.companyName = this.formData.companyName
      params.companyRegistrar = this.formData.companyRegistrar
      params.companyNo = this.formData.companyNo
      params.state = this.formData.state
      params.submitTime = this.formData.submitTime
      params.auditTime = this.formData.auditTime
      params.p = this.currentPage
      params.limit = this.limit
      fetchDataList(params).then(resp => {
        if (resp.code === 0) {
          if (needToast) this.$message.success('刷新成功～')
          this.tableData = resp.data.userList
          this.stateOptions = resp.data.state
          this.auditOptions = resp.data.audit
          this.totalCount = parseInt(resp.data.total)
        } else {
          this.$message.error(resp.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-container {
    width: 100%;
    .el-main {
      width: 100%;
      // 头部查询
      .form-container-div {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
    .el-footer {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
