<template>
  <div class="customer-wrap">
    <el-button
      type="primary"
      style="float: right; margin-bottom: 16px"
      :disabled="selectedRows.length <= 0"
      @click="handleBatchApprove"
    >批量审批</el-button>
    <div class="main_table">
      <el-table
        v-loading="Loading"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55px" />
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          align="center"
          :prop="item.prop"
          :label="item.label"
          show-overflow-tooltip
        />
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleViewMap(scope.row)"
            >查看地图</el-button>
            <el-button
              type="text"
              @click="handleApproveDrawer(scope.row)"
            >审批</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="->,total,prev,pager,next,sizes"
        :total="total"
        :current-page="pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 审批 -->
    <el-drawer
      title=""
      :visible.sync="showApprove"
      :size="550"
      :with-header="false"
      direction="rtl"
      :append-to-body="true"
      :wrapper-closable="false"
    >
      <div class="follow-main">
        <div class="collapse" @click="cancelApprove">
          <span>收起>></span>
        </div>
        <div class="common-title">审批流程</div>
        <div class="block">
          <el-timeline>
            <el-timeline-item color="#0bbd87">
              <div class="name">申请人：{{ approveInfo.updateByName }}</div>
              <div class="status">
                状态：<span>已提交</span>申请时间：<span>{{
                  approveInfo.createTime
                }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item color="#4886f8">
              <div class="name">
                审批人：总行{{ approveInfo.opsDeptName }}管理员
              </div>
              <div class="status">状态：<span>审批中</span></div>
            </el-timeline-item>
          </el-timeline>
        </div>
        <el-form ref="formApprove" :model="formApprove" class="my-form">
          <span class="btbz">*</span>
          <el-form-item label="审批意见" prop="auditRemark">
            <el-input
              v-model="formApprove.auditRemark"
              style="width: 300px"
              type="textarea"
              placeholder="请输入"
              :maxlength="200"
              :show-word-limit="true"
            />
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button type="primary" @click="onSubmitPass">通过</el-button>
          <el-button
            type="danger"
            class="handle-btn"
            @click="onSubmitReject"
          >拒绝</el-button>
        </div>
      </div>
    </el-drawer>

    <!-- 批量审批 -->
    <el-dialog
      title="批量审批"
      :visible.sync="showBatchApproveDialog"
      width="500px"
    >
      <el-form
        ref="batchForm"
        :model="formApprove"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="审批意见" prop="auditRemark">
          <el-input
            v-model="formApprove.auditRemark"
            style="width: 300px"
            type="textarea"
            placeholder="请输入"
            :maxlength="200"
            :show-word-limit="true"
          />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button
          type="primary"
          @click="handleOnBatchSubmitPass"
        >通过</el-button>
        <el-button
          type="danger"
          @click="handleOnBatchSubmitReject"
        >拒绝</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { placeColumns } from './list'
import { getApproveList } from '@/api/approveCenter/placeApprove.js'
import { approveApi } from '@/api/grid/draw-area'
import { businessBelongList } from '@/views/grid/create/utils'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      tableColumns: [],
      Loading: false,
      tableData: [{}],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      showApprove: false,
      showBatchApproveDialog: false,
      formApprove: {
        auditRemark: ''
      },
      rules: {
        auditRemark: [
          { required: true, message: '请输入审批意见', trigger: 'blur' }
        ]
      },
      approveInfo: {},
      selectedRows: []
    }
  },
  created() {
    this.tableColumns = placeColumns
    this.init()
  },
  methods: {
    init() {
      this.Loading = true
      const params = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      getApproveList(params).then((res) => {
        if (res.code == '200') {
          this.tableData = res.rows.map((item) => {
            const index = businessBelongList.findIndex(
              (i) => i.key === item.opsDept
            )
            return {
              ...item,
              opsDeptName: index > -1 ? businessBelongList[index].label : '',
              // auditStatusName:item.auditStatus == '0'?'审批中':
              //                 item.auditStatus == '1'?'通过':
              //                 item.auditStatus == '2'?'拒绝':'',
              approveName:
                item.nickName && item.userName
                  ? `${item.nickName}-${item.userName}`
                  : item.nickName || item.userName
            }
          })

          this.total = res.total
          this.Loading = false
        }
      })
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection || []
    },
    handleBatchApprove() {
      this.formApprove.auditRemark = ''
      this.showBatchApproveDialog = true
      console.log(this.selectedRows)
    },
    handleOnBatchSubmitPass() {
      this.$refs.batchForm.validate((valid) => {
        if (valid) {
          const params = this.selectedRows.map((item) => {
            return {
              layerId: item.layerId,
              shapeId: item.shapeId,
              auditRemark: this.formApprove.auditRemark,
              auditStatus: '1'
            }
          })

          approveApi(params).then((res) => {
            if (res.code == 200) {
              Message.success('审批完成')
              this.formApprove.auditRemark = ''
              this.showBatchApproveDialog = false
              this.init()
              this.$emit('getDrawCount')
            }
          })
        }
      })
    },
    handleOnBatchSubmitReject() {
      this.$refs.batchForm.validate((valid) => {
        if (valid) {
          const params = this.selectedRows.map((item) => {
            return {
              layerId: item.layerId,
              shapeId: item.shapeId,
              auditRemark: this.formApprove.auditRemark,
              auditStatus: '2'
            }
          })

          approveApi(params).then((res) => {
            if (res.code == 200) {
              Message.success('审批完成')
              this.formApprove.auditRemark = ''
              this.showBatchApproveDialog = false
              this.init()
              this.$emit('getDrawCount')
            }
          })
        }
      })
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.init()
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage
      this.init()
    },
    // 查看地图
    handleViewMap(row) {
      this.$router.push({
        path: '/grid/create/draw-area'
        // query:{
        // fromPage:'approveCenter',
        // layerId:'22',
        // shapeId:'103'
        // }
      })
      this.$store.commit('SET_LAYER_INFO', {
        // layerColor: "#418430",
        layerId: row.layerId,
        layerName: row.layerName,
        shapeId: row.shapeId,
        fromPage: 'approveCenter'
      })
    },
    // 审批
    handleApproveDrawer(row) {
      this.approveInfo = row
      this.approveInfo.updateByName = row.approveName
      this.formApprove.auditRemark = row.auditRemark
      this.showApprove = true
    },
    // 收起
    cancelApprove() {
      this.formApprove.auditRemark = ''
      this.showApprove = false
    },
    // 审批
    handleApprove(type) {
      approveApi([
        {
          layerId: this.approveInfo.layerId,
          shapeId: this.approveInfo.shapeId,
          auditRemark: this.formApprove.auditRemark,
          auditStatus: type
        }
      ]).then((res) => {
        if (res.code == 200) {
          Message.success('审批完成')
          this.formApprove.auditRemark = ''
          this.showApprove = false
          this.init()
          this.$emit('getDrawCount')
        }
      })
    },
    // 审批通过
    onSubmitPass() {
      if (!this.formApprove.auditRemark) {
        Message.warning('请输入审批意见')
        return
      }
      this.handleApprove('1')
    },
    // 审批拒绝
    onSubmitReject() {
      if (!this.formApprove.auditRemark) {
        Message.warning('请输入审批意见')
        return
      }
      this.handleApprove('2')
    }
  }
}
</script>
<style lang="scss" scoped>
.follow-main {
  padding: 10px 47px;
  .title {
    font-weight: bold;
  }
  .common-title {
    position: relative;
    color: #222222;
    line-height: 35px;
    font-weight: 600;
    font-size: 16px;
    padding-left: 10px;
    margin: 0;
    margin-bottom: 10px;
    &::before {
      position: absolute;
      top: 50%;
      transform: translatey(-50%);
      left: 0;
      content: "";
      width: 3px;
      background-color: #4886f8;
      height: 16px;
      border-radius: 2px;
    }
    //  margin-left: -6px;
  }
  .dialog-footer {
    text-align: center;
  }
  ::v-deep .el-form-item__label {
    min-width: 80px;
  }
  .collapse {
    position: fixed;
    right: 550px;
    background: #fff;
    height: 100px;
    font-size: 14px;
    color: #4886f8;
    margin-left: 2px;
    display: flex;
    align-items: center;
    top: 38%;
    cursor: pointer;
    padding-left: 5px;
    border-radius: 10px 0 0 10px;
  }
  .block {
    .name {
      font-size: 14px;
      color: #606266;
    }
    .status {
      color: #b9b9b9;
      font-size: 12px;
      margin-top: 5px;
      padding-left: 2px;
    }
  }
  .my-form {
    display: flex;
  }
  .btbz {
    color: #ff4d42;
    display: inline-block;
    line-height: 40px;
    margin-right: -10px;
  }
}
</style>
