<template>
  <div class="main-content m20">
    <div class="content-header body">
      <el-row style="margin-bottom:10px">
        <el-col :span="16">
          <el-row>
            <label class="label-name_1">注册号/统一社会信用代码：</label>
            <div class="search-input-box_1">
              <el-input v-model="searchForm.paramMap.uniscid" clearable type="text" placeholder="请输入注册号/统一社会信用代码" @keyup.enter.native="search" />
            </div>
          </el-row>
        </el-col>
        <el-col :span="1" :offset="2">
          <div class="btn-box" style="font-size: 14px;float:right;">
            <el-button type="primary" :loading="loading" @click="loadPage()">查询</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-row style="margin-bottom:10px">
      <el-col :offset="22">
        <el-button
          type="primary"
          :loading="loading"
          @click="handleAddClick"
        >添加</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table
        v-loading="loading"
        :data="tableData"
        tooltip-effect="dark"
        :fit="true"
        :row-class-name="tableRowClassName"
        :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
      >
        <el-table-column prop="index" label="序号" min-width="40" align="center" />
        <el-table-column prop="uniscid" label="统一社会信用代码" min-width="180" align="left" />
        <el-table-column prop="entname" label="主体名称" min-width="160" align="left" />
        <el-table-column prop="ancheyear" :show-overflow-tooltip="true" label="年报年度" min-width="80" align="left" />
        <el-table-column prop="begintime" :show-overflow-tooltip="true" label="开始时间" min-width="100" align="left">
          <template #default="scope">
            <span>{{ scope.row.begintime ? $moment(scope.row.begintime).format('YYYY-MM-DD') : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endtime" :show-overflow-tooltip="true" label="结束时间" min-width="120" align="left">
          <template #default="scope">
            <span>{{ scope.row.endtime ? $moment(scope.row.endtime).format('YYYY-MM-DD') : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="allowTime" :show-overflow-tooltip="true" label="允许次数" min-width="70" align="left" />
        <el-table-column :show-overflow-tooltip="true" label="操作" align="left">
          <template #default="scope">
            <el-button type="text" size="mini" @click="handleUpdateClick(scope.row)">修改</el-button>
            <el-button type="text" size="mini" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="text-align:right;margin-top:16px">
      <el-pagination
        :disabled="loading"
        :page-size="pageParam.size"
        :total="pageParam.total"
        :page-sizes="[10, 20, 30]"
        layout="slot,total, sizes, prev, pager, next, jumper"
        :current-page="pageParam.current"
        @size-change="pageSizeChange"
        @current-change="pageIndexChange"
      >
        <span>
          第 {{ pageParam.current }} 页/共 {{ (pageParam.total !== 0 ? parseInt((pageParam.total + pageParam.size - 1) / pageParam.size) : 1) }} 页
        </span>
      </el-pagination>
    </el-row>
    <AddOrEditAuthorizateAnnualReport ref="AddOrEditAuthorizateAnnualReport" @refreshList="loadPage" />
  </div>
</template>

<script>
import AddOrEditAuthorizateAnnualReport from '@/views/comprehensive/components/添加或修改年报修改授权.vue'
import { anModifyList, anModifyDelete } from '@/api/年报授权修改.js'
import { getIsUserProp } from '@/api/force'

export default {
  components: {
    AddOrEditAuthorizateAnnualReport
  },
  data() {
    return {
      loading: false,
      searchForm: {
        paramMap: {
          uniscid: undefined
        }
      },
      orgMarketList: [],
      reasonList: [],
      sliceOptions: [],
      tableData: [],
      pageParam: {
        current: 1,
        total: 0,
        size: 10
      },
      userProp: 0
    }
  },
  computed: {},
  mounted() {
    this.loadPage()
    this.getIsUserProp()
  },
  methods: {
    // 获取用户信息
    getIsUserProp() {
      getIsUserProp().then(res => {
        this.userProp = res.userProp
      })
    },
    handleAddClick() {
      if (this.userProp && this.userProp <= 2) {
        this.$refs.AddOrEditAuthorizateAnnualReport?.openDialog()
      } else {
        this.$message({
          type: 'warning',
          message: '只能由管理员进行年报修改授权'
        })
      }
    },
    handleUpdateClick(row) {
      if (this.userProp && this.userProp <= 2) {
        this.$refs.AddOrEditAuthorizateAnnualReport.updateDialog(row.id)
      } else {
        this.$message({
          type: 'warning',
          message: '只能由管理员进行年报修改授权'
        })
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 当前分页改变
    pageIndexChange(curPage) {
      this.pageParam.current = curPage
      this.loadPage()
    },
    // 分页大小改变
    pageSizeChange(pageSize) {
      this.pageParam.size = pageSize
      this.loadPage()
    },
    // 加载分页
    loadPage() {
      this.loading = true
      anModifyList({
        current: this.pageParam.current,
        size: this.pageParam.size,
        customParamMap: {
          ...this.searchForm.paramMap
        }
      }).then(res => {
        const list = []
        let i = 1
        const pageStart = (this.pageParam.current - 1) * this.pageParam.size
        res.data.records.forEach(each => {
          each.index = pageStart + i++
          list.push(each)
        })
        this.tableData = list
        this.pageParam.total = res.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    deleteItem(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        anModifyDelete(row.id).then(res => {
          if (res.code === 0) {
            this.loadPage()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    updateDialog(row) {
      this.$refs.AddOrEditAuthorizateAnnualReport.updateDialog(row.id)
    }
  }
}
</script>
<style lang="scss" scoped>
.main-content {
  background: #fff;
  padding: 20px;
  margin: 20px;

  .content-header {
    background: white;

    .label-name_1 {
      text-align: right;
      display: inline-block; //转成行内快，才可定义宽度
      width: 200px;
      font-size: $table-content-font-size;
    }

    .search-input-box_1 {
      display: inline-block;
      width: calc(100% - 230px);
    }

    .search-input-box_2 {
      display: inline-block;
      width: calc(100% - 230px);
    }

    .label-name_3 {
      text-align: right;
      display: inline-block; //转成行内快，才可定义宽度
      width: 140px !important;
      font-size: $table-content-font-size;
    }

    .custom {
      width: calc(100% - 150px);
    }

    .search-input {
      cursor: pointer;
    }

    .body {
      padding: 20px 0;
      border-top: none;
      margin-bottom: 40PX;
    }
  }

  .content-body {
    background: white
  }

  .header {
    .title {
      font-weight: 600;
      font-size: 1.2rem;
    }
  }

  .page-box {
    margin: 10PX;
    text-align: right
  }

  .mb10 {
    margin-bottom: 10px;
  }

  .btn-box {
    display: inline-block;
    padding-left: 10px;
  }
}

/deep/ .el-input__inner {
  height: 28px;
}
</style>
