<template>
  <div style="border-radius: 16px 16px 0 0">
    <el-form class="select-container">
      <div class="queryBox">
        <el-form-item
          label="客户姓名:"
          label-width="80px"
          style="display: flex"
        >
          <el-input
            v-model="queryParams.custName"
            clearable
            @clear="onSearch"
            @keyup.enter.native="onSearch"
          />
        </el-form-item>
        <el-form-item label="证件号:" label-width="100px" style="display: flex">
          <el-input
            v-model="queryParams.custId"
            clearable
            @clear="onSearch"
            @keyup.enter.native="onSearch"
          />
        </el-form-item>
        <el-form-item
          label="流程状态:"
          label-width="80px"
          style="display: flex"
        >
          <el-select
            v-model="queryParams.processStatus"
            placeholder="全部"
            clearable
            @clear="onSearch"
            @keyup.enter.native="onSearch"
          >
            <el-option
              v-for="(item, index) in processOptions"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </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-table
      ref="multipleTable"
      v-loading="loading"
      :data="tableData"
      class="table"
    >
      <el-table-column type="index" label="序号" align="center" width="55" />
      <el-table-column prop="businessNo" align="center" label="业务编号" />
      <el-table-column prop="custName" align="center" label="客户姓名" />
      <el-table-column prop="custId" align="center" label="证件号" />
      <el-table-column prop="loanWay" align="center" label="贷款用途" />
      <el-table-column
        prop="loanAmount"
        align="center"
        label="贷款金额（元）"
      />
      <el-table-column prop="guarantee" align="center" label="担保方式">
        <template #default="scope">
          <span>{{ scope.row.guarantee }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="processStatus" align="center" label="流程状态">
        <template #default="scope">
          <span :class="getStatusClass(scope.row)">
            {{ scope.row.processStatus | statusFilter }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="custManager" align="center" label="客户经理" />
      <el-table-column label="操作" width="120px">
        <template #default="scope" class="operate">
          <el-button
            v-if="scope.row.processStatus !== '3'"
            type="text"
            style="margin-right: 8px"
            @click.prevent="onDetail(scope.row)"
          >查看</el-button>
          <el-button
            v-if="scope.row.processStatus === '3'"
            type="text"
            style="margin-right: 8px"
            @click.prevent="onEdit(scope.row)"
          >编辑</el-button>
          <el-button
            v-if="scope.row.processStatus === '3'"
            type="text"
            style="margin-right: 8px"
            @click.prevent="scope.row"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  gridCmpmCommonList,
  gridCmpmTransferCreateClaim
} from '@/api/gridSearch/publicPool/index';

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: '已完成',
        2: '已提交',
        3: '未提交'
      };
      return statusMap[status] ?? '已结束';
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 33,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        custId: null,
        custName: null,
        processStatus: null
      },
      processOptions: [],
      tableData: [
        {
          businessNo: 'CS202545684248',
          custName: '张三',
          custId: '3301021*****9901',
          loanWay: '经营',
          loanAmount: '3,000,000.00',
          guarantee: '信用',
          processStatus: '1',
          custManager: '客户经理A'
        },
        {
          businessNo: 'CS202545684248',
          custName: '李四',
          custId: '3301021*****9901',
          loanWay: '消费',
          loanAmount: '3,000,000.00',
          guarantee: '抵押',
          processStatus: '2',
          custManager: '客户经理B'
        },
        {
          businessNo: 'CS202545684248',
          custName: '王五',
          custId: '3301021*****9901',
          loanWay: '经营',
          loanAmount: '3,000,000.00',
          guarantee: '信用',
          processStatus: '0',
          custManager: '客户经理C'
        },
        {
          businessNo: 'CS202545684248',
          custName: '赵六',
          custId: '3301021*****9901',
          loanWay: '经营',
          loanAmount: '3,000,000.00',
          guarantee: '保证',
          processStatus: '3',
          custManager: '客户经理D'
        }
      ],
      dialogVisible: false
    };
  },
  computed: {
    detailInfoObj() {
      return JSON.parse(sessionStorage.getItem('detailInfoObj'));
    }
  },
  watch: {},
  mounted() {
    this.getList();
  },
  methods: {
    getStatusClass(row) {
      const classMap = {
        0: 'red-status-button',
        1: 'green-status-button',
        2: 'blue-status-button',
        3: 'gray-status-button'
      };
      return classMap[row.processStatus] ?? 'red-status-button';
    },
    /** 查询用户列表 */
    getList() {
      // this.loading = true
      // const params = {
      // //   custLevel: this.detailInfoObj.gridLevel,
      //   pageNum: this.queryParams.pageNum,
      //   pageSize: this.queryParams.pageSize,
      //   userName: this.queryParams.tellerId,
      //   custId: this.queryParams.custId,
      //   custName: this.queryParams.custName
      // }
      // gridCmpmCommonList(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)
      //   })
    },
    onSearch() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    onReset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        custId: null,
        custName: null,
        processStatus: null
      };
      this.getList();
    },
    onEdit(row) {
      this.clientForm = {
        custName: row.custName,
        custId: row.custId,
        accountNo: row.accountNo
      };
      this.userDeptList = this.$store.state.user.deptId;
      this.authUser = this.$store.state.user.nickName;
      this.dialogVisible = true;
    },
    onDetail(row) {
      this.$router.push({
        path: '/rate/report/detail'
      });
    },
    onDel(row) {
      this.$router.push({
        path: '/rate/report/detail'
      });
    }
  }
};
</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%;

  ::v-deep .el-form-item__label {
    display: inline-block;
    white-space: nowrap;
  }

  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
}

.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;
  }
}

.blue-status-button {
  border-radius: 30px;
  border: 1px solid blue;
  background-color: rgb(236, 242, 255);
  color: blue;
  padding: 0 5px;
}

.green-status-button {
  border-radius: 30px;
  border: 1px solid green;
  background-color: rgb(231, 245, 237);
  color: green;
  padding: 0 5px;
}

.gray-status-button {
  border-radius: 30px;
  border: 1px solid gray;
  background-color: rgb(242, 243, 245);
  color: gray;
  padding: 0 5px;
}

.red-status-button {
  border-radius: 30px;
  border: 1px solid red;
  background-color: rgb(252, 237, 238);
  color: red;
  padding: 0 5px;
}

.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;
      }
    }
  }
}
</style>
