<template>  
  <div class="container applicationApproval" 
    v-loading.body="dialogLoading"
    element-loading-text="拼命加载中">
    <bread-crumb :bread-crumb-list="breadCrumbList"></bread-crumb>
    <div class="containerIn" ref="tableDataRef">
      <!-- 搜索查询 -->
      <div class="searchTop" style="padding: 10px;">
        <search-form 
          :search-form="searchForm"
          :type-value="typeValue"
          @submit="search" 
          style="padding:0;float:left;">
        </search-form>
        <!-- <el-button style="height: 36px;margin: 0;float:right;" type="success" @click="handleExportData" :disabled="true"><i class="el-icon-upload2 el-icon--left"></i>导出</el-button> -->
      </div>
      <!-- 列表内容 -->
      <table-form
        v-loading.body="isLoadingTableData"
        :colData="colData" 
        :data="tableData" 
        :colWidth="120"
        :max-height="height"
        :row-key="rowKey"
        :submiting="submiting"
        border 
        :stripe="true"
        :sortable="sortable"
        >
        <el-table-column
          v-for="item in colData"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          :sortable="item.sortable || sortable">

          <template slot-scope="scope">
            <div v-if="item.prop == 'applystatus'">
              <el-tooltip class="item" effect="dark" content="审批" placement="bottom">
                <i class="el-icon-edit" @click="handleapplystatusEdit($event,scope.row)" v-show="scope.row.applystatus==='0'"></i>
              </el-tooltip>
              <span></span>
              <span v-show="scope.row.applystatus !== '0'"  :class="scope.row.applystatus !== '0' && scope.row.applystatus !== '1' ? 'redStyle': ''">{{ (scope.row.applystatus === '0') ? '未审批': (scope.row.applystatus === '1') ? '审批通过': '审批未通过'}}</span>
            </div>
            <div v-else-if="item.prop == 'applySysUrl'">
              <p v-for="value in scope.row.applySysUrl" :key="value">{{value}}</p>
            </div>
            <!-- <div v-else-if="item.prop == 'nameCn'">
              {{scope.row.serviceinfo.nameCn}}
            </div>
            <div v-else-if="item.prop == 'urls'">
              {{scope.row.serviceinfo.urls}}
            </div> -->
            <div v-else>
              {{ scope.row[item.prop] }}
            </div>
          </template>
        </el-table-column>

        <el-table-column slot="fixedColumn" label="操作" fixed="right" width="146" align="center">
          <template slot-scope="scope">
            <el-button style="display:inline-block;margin-left:4px;"
              size="mini"
              plain=""
              @click="handleCheck($event, scope.row)">
              查看
            </el-button>
            <el-popover style="display:inline-block;margin-left:2px;"
              ref="popover"
              trigger="click"
              placement="top"
              width="160"
              v-model="scope.row.visible">
              <p style="font-size:14px;padding: 6px 0;">确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" @click="scope.row.visible = false">取消</el-button>
                <el-button type="primary" size="mini" :loading="submiting" @click="handleDelete(scope.row, scope.$index)">确定</el-button>
              </div>

              <div slot="reference">
                <el-button
                  size="mini"
                  plain=""
                  type="danger"
                  :disabled="scope.row.applystatus === '2'"
                  @click.stop.prevent="scope.row.visible = true">
                  删除
                </el-button>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </table-form>
      <!-- 分页 -->
      <el-row type="flex" justify="end" class="tableBottom">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-row>
    </div>
    <!-- 审批状态 -->
    <my-dialog 
      v-if="dialogOnoff" 
      :check-id="checkId"
      @dialog-sure="sureRegister"
      @dialog-cancel="cancelRegister"
      >
    </my-dialog>
    
    <!-- 查看详情 -->
    <check-dialog
      v-if="checkDialogOnoff"
      :check-id="checkId"
      @dialog-cancel="cancelCheckDialog">
    </check-dialog>
  </div>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb.vue'
import SearchForm from '@/components/SearchForm.vue'
import TableForm from '@/components/Table.vue'
import MyDialog from './otherComponent/ApprovalDialog.vue'
import CheckDialog from './otherComponent/ApprovalCheckDialog.vue'

import Api from '@/api/index.js'

export default {
  name: 'ApplicationApproval',
  components: {
    BreadCrumb,
    SearchForm,
    TableForm,
    MyDialog,
    CheckDialog
  },
  data() {
    return {
      dialogLoading: false,
      isLoadingTableData: false,
      dialogOnoff: false,
      formData: {},
      colData: [],
      // 搜索
      searchForm: {
        typeOptions: [],
        inputLabel: '',
        inputPlaceholder: '',
        selectLabel: '',
        selectPlaceholder: ''
      },
      typeValue: '0',
      responseData: null,
      tableData: null,
      currentPage: 1,
      total: null,
      pageSize: 15,
      pageSizes: [15, 30, 50, 100],
      breadCrumbList: [],
      // 查询
      userguid: '', // 登录id
      serviceName: '', // 关键字
      // systemId: '',// 系统id
      status: '0', // 审批状态
      startDate: '', // 开始日期
      endDate: '', // 结束日期
      submiting: false,
      rowKey: 'domainId',
      sortable: true,

      checkId: [],
      checkDialogOnoff: false,
      height: '330'
    }
  },
  computed: {
    gisopUserInfo() {
      return this.$store.state.gisopUserInfo
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.handleFn)
  },
  mounted() {
    this.init()
  },
  watch: {
    gisopUserInfo(val) {
      if (val.userguid === undefined) {
        return false
      } else {
        this.userguid = val.userguid.trim()
        this.getApplicationApprovalList()
      }
    }
  },
  methods: {
    // 初始数据
    init() {
      this.colData = [
        { prop: 'servicename', label: '名称', width: 150, align: 'center' },
        { prop: 'applySysUrl', label: '源地址', align: 'center' },
        { prop: 'visiturl', label: '使用地址', align: 'center' },
        {
          prop: 'applypeoplename',
          label: '申请用户',
          width: 114,
          align: 'center'
        },
        { prop: 'applyname', label: '申请系统', width: 114, align: 'center' },
        { prop: 'applytime', label: '申请时间', width: 114, align: 'center' },
        { prop: 'applystatus', label: '审批状态', width: 104, align: 'center' }
      ]
      this.breadCrumbList = [{ title: '服务管理' }, { title: '平台服务申请审批' }]
      this.searchForm = {
        typeOptions: [
          {
            // 类型选择列表
            value: '',
            label: '所有记录'
          },
          {
            value: '0',
            label: '未审批'
          },
          {
            value: '1',
            label: '审批通过'
          },
          {
            value: '-1',
            label: '审批未通过'
          }
        ],
        inputLabel: '关键字',
        inputPlaceholder: '请输入服务名称关键字',
        selectLabel: '审批状态',
        selectPlaceholder: '选择审批状态'
      }
      this.userguid = this.gisopUserInfo.userguid
      if (this.userguid === undefined) {
        return false
      } else {
        this.userguid = this.userguid.trim()
        this.getApplicationApprovalList()
      }
      // 钩子
      this.$nextTick(() => {
        this.handleFn()
      })

      window.addEventListener('resize', this.handleFn)
    },
    // resize的函数
    handleFn() {
      let _this = this
      _this.height = _this.$refs.tableDataRef.clientHeight - 130
    },
    // 获取列表数据
    getApplicationApprovalList() {
      this.isLoadingTableData = true // index, pageSize, name, directoryid, auditstatus, sdate, edate, userid

      Api.getApplicationApprovalList(
        this.currentPage,
        this.pageSize,
        this.serviceName,
        '',
        this.status,
        this.startDate,
        this.endDate,
        ''
      )
        .then(data => {
          this.isLoadingTableData = false
          let datas = data.data
          if (data.status === 0) {
            if (datas.total > 0) {
              this.total = datas.total
              datas.result.forEach(item => {
                if (item.applySysUrl === null) {
                  item.applySysUrl = ['']
                } else {
                  item.applySysUrl = item.applySysUrl.split(',')
                }
              })
              this.tableData = datas.result
              // console.log(this.tableData)
            } else {
              this.tableData = []
              this.total = null
              this.$message({
                type: 'warning',
                message: '获取数据为空！'
              })
            }
          } else {
            this.$message({
              type: 'error',
              message: '获取数据失败！'
            })
          }
        })
        .catch(res => {
          this.isLoadingTableData = false

          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
    },
    // 列表查询
    search(data) {
      this.serviceName = data[0]
      this.status = data[1]
      // this.systemId = data[2]

      if (data[2].length !== 0) {
        this.startDate = data[2][0]
        this.endDate = data[2][1]
      } else {
        this.startDate = ''
        this.endDate = ''
      }
      this.currentPage = 1
      this.getApplicationApprovalList()
    },
    // 审批状态————确定
    sureRegister(FormData) {
      this.dialogLoading = true

      Api.editApplicationApprovalService(FormData).then(
        data => {
          this.dialogLoading = false
          this.dialogOnoff = false
          if (data.status === 0) {
            this.getApplicationApprovalList()
            this.$message({
              type: 'success',
              message: '审批成功'
            })
          } else {
            this.$message({
              type: 'warning',
              message: '审批失败'
            })
          }
        },
        data => {
          // error callback
          alert(data)
        }
      )
    },
    // 取消或关闭注册弹窗
    cancelRegister() {
      this.dialogOnoff = false
    },
    // 查看详情
    handleCheck(e, row) {
      this.checkId = []
      this.checkId.push(row.applyid)
      this.checkId.push(row.id)
      this.checkId.push(row.applyname)

      this.checkDialogOnoff = true
    },
    // 取消查看信息
    cancelCheckDialog() {
      this.checkDialogOnoff = false
    },
    // 表单删除行的操作
    handleDelete(row, idx) {
      let ids = row.applyid
      this.submiting = true
      Api.deleteApplicatApprovalService(ids)
        .then(data => {
          if (data.status === 0) {
            console.log('sucess')
            this.$message({
              type: 'success',
              message: '删除成功!',
              duration: 2000
            })
            this.submiting = false
            this.getApplicationApprovalList()
          } else {
            this.submiting = false
            this.$message({
              type: 'error',
              message: '删除失败，请重试!',
              duration: 2000
            })
          }
        })
        .catch(res => {
          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })

      row.visible = false
    },
    // 审批状态
    handleapplystatusEdit(e, rowData) {
      this.checkId = []
      this.checkId.push(rowData.applyid)
      this.checkId.push(rowData.id)
      this.dialogOnoff = true
    },
    // 导出
    /* handleExportData () { 
        // let url = ''

        // url = Api.baseUrl + '/maintenance/ManagerService/exportMapInfoApplicatApprovalExcelService?userguid='+this.userguid+"&serviceName="+this.serviceName+"&status="+this.status+"&appid="+this.systemId+"&startDate="+this.startDate+"&endDate="+this.endDate

        // console.log(url)

        // window.open(url)
      }, */
    // 分页操作
    handleSizeChange(val) {
      this.pageSize = val
      if (this.tableData !== null) {
        this.getApplicationApprovalList()
      }
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      if (this.tableData !== null) {
        this.getApplicationApprovalList()
      }
    }
  }
}
</script>

<style lang="scss">
.applicationApproval {
  .el-icon-edit {
    cursor: pointer;
  }
  .tableBottom {
    padding: 15px 10px 0;
  }
  .redStyle {
    color: red;
  }
}
</style>
