<template>
    <div style="border-radius: 16px 16px 0 0;">
      <el-radio-group v-model="approvalType" style="width:100%" class="header-radio">
      <el-radio-button label="2">审批历史列表</el-radio-button>
        <el-radio-button label="1" v-hasPermi="['gridSearch:approvalList:noApproval']">待审批列表</el-radio-button>
      </el-radio-group>
      <el-form class="select-container" v-show="showSearch" @submit.native.prevent>
        <div class="queryBox">
          <el-form-item label="客户唯一标识:" label-width="100px" style="display: contents">
            <el-input v-model="queryParams.keyword" style="width:100%" placehloder="请输入客户名/客户号" clearable @clear="onSearch" @keyup.enter.native="onSearch"></el-input>
          </el-form-item>
          <el-form-item label="移交网络:" label-width="80px" style="display: contents">
            <el-radio-group style="width:100%" v-model="queryParams.gridType" @change="onSearch">
              <el-radio label="retail">零售</el-radio>
              <el-radio label="corporate">公司</el-radio>
              <el-radio label="corporate_account" v-if="is875">公司账户</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form style="margin-bottom: 8px">
        <el-button type="primary" v-if="approvalType === '1'" @click="transferBatch" :disabled="multipleSelection.length === 0">批量审批</el-button>
        <right-toolbar :showSearch.sync="showSearch" :columns="columns" @queryTable="getList"></right-toolbar>
      </el-form>
      <el-table ref="multipleTable" v-loading="loading" :data="tableData" :row-key="getRowKey" class="table" @selection-change="handleSelectionChange">
        <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
        <el-table-column v-if="columns[0].visible" prop="custId" label="客户号">
        <template #default="scope">
          <el-button type="text" @click="handlePushCust(scope.row)">{{ scope.row.custId }}</el-button>
        </template>
        </el-table-column>
        <el-table-column v-if="columns[2].visible" prop="custName" label="客户姓名"></el-table-column>
        <el-table-column v-if="columns[1].visible" prop="transferLabel" label="审批类型">
          <template #default="scope">
            <span>{{ scope.row.transferLabel === '0' ? '移交' : '认领' }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns[3].visible" prop="prevUser" label="前客户经理柜员号">
        </el-table-column>
        <el-table-column v-if="columns[4].visible" prop="nextUser" label="新客户经理柜员号"></el-table-column>
        <el-table-column v-if="columns[5].visible" prop="transferStatus" label="移交状态">
        <template #default="scope">
            <span>{{ transferOption[scope.row.transferStatus] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="approvalType === '1'">
            <template class="operate" #default="scope">
            <el-button type="text" @click.prevent="onTransfer(scope.row)" style="margin-right: 8px">审批</el-button>
            </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      <el-dialog
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        append-to-body
        width="60%"
        title="客户审批">
          <div v-if="!batchVisible">
            <span v-if="detailList.transferLabel==='0'">客户 {{ detailList.custName }} 将从 {{ detailList.prevUser }} 移交到 {{ detailList.nextUser }}</span>
            <span v-else>客户 {{ detailList.custName }} 将由 {{ detailList.nextUser }} 认领</span>
          </div>
          <div v-if="batchVisible" style="max-height: 500px; overflow: auto; padding: 10px">
            <div v-for="(item, index) in multipleSelection" :key="index" style="height: 40px">
              <span v-if="item.transferLabel==='0'">客户 {{ item.custName }} 将从 {{ item.prevUser }} 移交到 {{ item.nextUser }}</span>
              <span v-else>客户 {{ item.custName }} 将由 {{ item.nextUser }} 认领</span>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="okHandler(false)">拒绝</el-button>
            <el-button type="primary" @click="okHandler(true)">通过</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import { gridCmpmTransferListApprove, gridCmpmTransferApprove, gridCmpmTransferListHistory } from '@/api/gridSearch/approvalList/index'
import { cloneDeep, isEmpty } from 'lodash'
import { getUserListByDeptIds } from "@/api/grid/region.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return{
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: null,
        gridType: 'retail'
      },
      tableData: [],
      multipleSelection: [],
      columns: [
        { label: `客户号`, visible: true, name: 'custId' },
        { label: `审批类型`, visible: true, name: 'transferLabel' },
        { label: `客户姓名`, visible: true, name: 'custName' },
        { label: `前客户经理柜员号`, visible: true, name: 'prevUser' },
        { label: `新客户经理柜员号`, visible: true, name: 'nextUser' },
        { label: `移交状态`, visible: true, name: 'transferStatus' }
      ],
      dialogVisible: false,
      detailList: [],
      gridType: 'retail',
      batchVisible: false,
      batchData: [],
      approvalType: "2",
      transferOption: {
        '-1': '拒绝',
        '0': '网点审批中',
        '1': '支行审批中',
        '2': '总行审批中',
        '3': '通过'
      }
    }
  },
  mounted() {
    this.getList()
    console.log(222, this.$store.state)
  },
  computed: {
    ...mapGetters(["roles", 'userName']),
    // 海宁
    is875() {
      return this.userName.slice(0, 3) === '875'
    },
    detailInfoObj() {
      return JSON.parse(sessionStorage.getItem('detailInfoObj'))
    }
  },
  watch: {
    approvalType(val) {
      this.getList()
    }
  },
  methods: {
    /** 查询用户列表 */
    getList() {
        this.loading = true
        const params = {
        //   custLevel: this.detailInfoObj.gridLevel,
          gridType: this.gridType,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          keyword: this.queryParams.keyword,
          gridType: this.queryParams.gridType
        }
        if (this.approvalType === '1') {
          gridCmpmTransferListApprove(params)
          .then((res) => {
            console.log(res)
            this.tableData = res?.rows
            this.total = res.total
          })
          .catch((err) => console.error(err))
          .finally(() => {
            setTimeout(() => {
              this.loading = false
            }, 100)
          })
        } else {
          gridCmpmTransferListHistory(params)
          .then((res) => {
            console.log(res)
            this.tableData = res?.rows
            this.total = res.total
          })
          .catch((err) => console.error(err))
          .finally(() => {
            setTimeout(() => {
              this.loading = false
            }, 100)
          })
        }
        
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      getRowKey(row) {
        return row.id
      },
      onSearch() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      onReset() {
        this.queryParams.pageNum = 1
        this.queryParams.keyword = null
        this.queryParams.gridType = 'retail'
        this.getList()
      },
      onTransfer(row) {
        this.detailList = row
        this.dialogVisible = true
      },
      transferBatch() {
        this.batchVisible = true
        this.dialogVisible = true
      },
      handleCancel() {
        this.dialogVisible = false
        this.batchVisible = false
      },
      okHandler(approveResult) {
        let idList = []
        if (this.batchVisible) {
          idList = this.multipleSelection.map(item => item.id)
        } else {
          idList = [this.detailList.id]
        }
        gridCmpmTransferApprove({
          idList: idList,
          approveResult: approveResult
        }).then(res => {
          this.$message.success(res.msg)
          this.dialogVisible = false
          this.batchVisible = false
          this.$refs.multipleTable.clearSelection()
          this.multipleSelection = []
          this.getList()
        })
      },
      handlePushCust(row) {
        let path = ''
        if (row.custType === '0') {
          // 零售
          path = '/360charts/indexcharts'
        } else if (row.custType === '1') {
          // 商户
          path = '/360charts/commercial'
        } else if (row.custType === '2') {
          // 企业
          path = '/360charts/firm'
        }
        if (!path) return
        this.$router.push({
          path,
          query: {
            custId: row.custId,
            selectedTab: '0',
            backUrl: '/gridSearch/approvalList'
          }
        })
      }
  }
}
</script>

<style  lang="scss" scoped>
.select-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px;
}
.queryBox {
  display: flex;
  justify-content: space-between;
  width: 80%;
  gap: 10px;
  ::v-deep .el-form-item__label {
    display: inline-block;
    white-space: nowrap;
  }
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
    width: 100%
  }
}
.table {
  width: 100%;
  margin: 20px;
  text-align: center;
  vertical-align: middle;
}
a {
  margin: 5px;
}
.dialog-input {
  width: 80%
}
.user-info {
  margin-bottom: 5px;
  margin-left: 26px;
  display: flex;
  align-items: center;

  ::v-deep .vue-treeselect__control {
    width: 320px !important;
    height: 32px;
  }

  span {
    width: 70px !important;
    margin-right: 10px;
    font-size: 14px;
    color: #606266;

    &::before {
      content: "*";
      left: -3px;
      color: #ff4d42;
      position: relative;
      top: 2px;
    }
  }

  .input-box {
    width: 320px !important;
  }
}

.header-radio {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ebebeb;

      .btn-disabled {
        ::v-deep .el-radio-button__inner {
          background-color: #e7e7e7;
        }
      }

      .el-radio-button {
        flex: 1;

        ::v-deep .el-radio-button__inner {
          width: 100%;
          border: none;
          font-weight: 400;
          letter-spacing: 0.44px;
          line-height: 25px;
          font-size: 16px;
          color: #666666;
          padding: 11px 0 12px 0;
        }

        ::v-deep
          .el-radio-button__orig-radio:checked
          + .el-radio-button__inner {
          background-color: #4886f8;
          font-weight: 400;
          color: #ffffff;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }

        &:nth-child(2) {
          &::before,
          &::after {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 21px;
            width: 1px;
            background: #ebebeb;
            z-index: 1;
          }

          &::after {
            right: 1px;
          }
        }

        &.is-active {
          &::before,
          &::after {
            content: none;
          }
        }
      }
    }
.cust-user {
  padding: 5px;
  border: 1px solid blue
}
</style>