<template>
  <div class="claim">
    <div class="taskTop">
      <div class="taskTop_left">
        <div class="taskTop_left_item active">
          我认领的成果<i class="el-icon-arrow-down" />
        </div>
      </div>
      <div class="taskTop_right">
        <el-input v-model="searchValue" placeholder="搜素客户证件号添加认领">
          <el-button
            slot="append"
            :loading="buttonLoading"
            icon="el-icon-search"
            @click="handleAdd"
          />
        </el-input>
      </div>
    </div>

    <div class="table-box">
      <el-table
        ref="tableRef"
        :data="tableData"
        style="widht: 100%"
        ighlight-current-row
      >
        <el-table-column label="认领客户经理" prop="nickName" min-width="160">
          <template slot-scope="scope">
            {{ scope.row.nickName }}-{{ scope.row.userName }}
          </template>
        </el-table-column>
        <el-table-column label="客户类型" prop="custType" min-width="160">
          <template slot-scope="scope">
            {{ custTypeDict[scope.row.custType] || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="客户名称" prop="custName" min-width="160" />
        <el-table-column label="证件号" prop="custIdc" min-width="160" />
        <el-table-column
          label="完成时间"
          prop="completeTime"
          min-width="160"
        />=
        <el-table-column label="营销成果" prop="modelName" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleDetail(scope)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handlepageChange"
      />
    </div>

    <el-dialog
      title="认领成果"
      :visible.sync="showClaimDialog"
      width="700px"
      append-to-body
    >
      <el-table :data="resultList" style="widht: 100%">
        <el-table-column label="客户类型" prop="custType">
          <template slot-scope="scope">
            {{ custTypeDict[scope.row.custType] || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="客户名称" prop="custName" />
        <el-table-column label="证件号" prop="custIdc" min-width="200px" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleConfirmClaim(scope.row)"
            >认领</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      title="营销成果"
      :visible.sync="showDetailDialog"
      width="600px"
      append-to-body
    >
      <el-table :data="detailList" style="widht: 100%">
        <el-table-column label="产品名称" prop="prodName" />
        <el-table-column label="产品状态" prop="flag">
          <template>
            <el-tag type="success">已完成</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  getClaimList,
  getClaimCust,
  claimCust,
  getClaimDetail
} from '@/api/task/taskList.js'
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchValue: '',
      custTypeDict: {
        0: '个人',
        1: '企业',
        2: '商户'
      },
      showClaimDialog: false,
      showDetailDialog: false,
      buttonLoading: false,
      resultList: [],
      detailList: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const params = {
        page: this.currentPage,
        pageSize: this.pageSize
      }

      getClaimList(params).then((res) => {
        if (res.code === 200) {
          this.tableData = res.rows || []
          this.total = res.total
        }
      })
    },
    resetList() {
      this.currentPage = 1
      this.getData()
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getData()
    },

    handlepageChange(newPage) {
      this.currentPage = newPage
      this.getData()
    },

    handleAdd() {
      this.buttonLoading = true
      getClaimCust({ custIdc: this.searchValue })
        .then((res) => {
          if (res.code === 200) {
            this.resultList =
              Array.isArray(res.data) && res.data.length > 0
                ? [res.data[0]]
                : []
            this.showClaimDialog = true
          }
        })
        .finally(() => {
          this.buttonLoading = false
        })
    },

    handleConfirmClaim(row) {
      claimCust({ custIdc: row.custIdc }).then((res) => {
        if (res.code === 200) {
          this.$message.success('认领成功')
          this.showClaimDialog = false
          this.resetList()
        }
      })
    },

    handleDetail(scope) {
      getClaimDetail({
        custIdc: scope.row.custIdc,
        userName: scope.row.userName
      }).then((res) => {
        this.detailList = res.data || []
        this.showDetailDialog = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.taskTop {
  margin: 24px 0;
  display: flex;
  justify-content: space-between;

  .taskTop_left {
    display: flex;
  }

  .taskTop_left_item {
    width: 150px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    cursor: pointer;

    &.active {
      border-bottom: 4px solid rgb(64, 149, 229);
    }
  }

  .el-icon-arrow-down {
    margin-left: 15px;
    font-size: 16px;
    color: rgb(64, 149, 229);
  }

  .taskTop_right {
    display: flex;
  }
}
.table-box {
  .el-pagination {
    float: right;
    margin-top: 8px;
  }
}
</style>
