<template>
  <div class="orderCustomer">
    <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"
            icon="el-icon-search"
            :loading="buttonLoading"
            @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="startTime"
          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="showOrderDialog"
      width="600px"
      append-to-body
    >
      <el-form label-width="120px">
        <el-form-item label="客户名称：">
          {{ orderForm.custName }}
        </el-form-item>
        <el-form-item label="统信码：">
          {{ orderForm.custIdc }}
        </el-form-item>
        <el-form-item label="预约时长：">
          <span>七天</span>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="handleCancelAdd">取消</el-button>
        <el-button type="primary" @click="handleConfirmAdd">确定</el-button>
      </span>
    </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 slot-scope="scope">
            <el-tag :type="scope.row.flag === 'true'? 'success' : 'default'">{{
              scope.row.flag === "true" ? "已完成" : "未完成"
            }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAppointmentList,
  getAppointmentCust,
  addAppiontment,
  getAllProds,
  getClaimProd
} from '@/api/task/taskList.js'
import cloneDeep from 'lodash/cloneDeep'
export default {
  data() {
    return {
      tableData: [],
      productList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchValue: '',
      custTypeDict: {
        0: '个人',
        1: '企业',
        2: '商户'
      },
      showOrderDialog: false,
      showDetailDialog: false,
      buttonLoading: false,
      orderForm: {},
      allProdList: [],
      detailList: []
    }
  },
  mounted() {
    this.getData()
    this.getProds()
  },
  methods: {
    getData() {
      const params = {
        page: this.currentPage,
        pageSize: this.pageSize
      }

      getAppointmentList(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
      getAppointmentCust({ custIdc: this.searchValue })
        .then((res) => {
          if (res.code === 200) {
            this.orderForm = res.data || {}
            this.showOrderDialog = true
          }
        })
        .finally(() => {
          this.buttonLoading = false
        })
    },

    handleCancelAdd() {
      this.showOrderDialog = false
    },

    handleConfirmAdd() {
      addAppiontment({ ...this.orderForm }).then((res) => {
        if (res.code === 200) {
          this.$message.success('预约成功并添加任务！')
          this.searchValue = ''
          this.showOrderDialog = false
          this.resetList()
        }
      })
    },

    getProds() {
      getAllProds().then((res) => {
        if (res.code === 200) {
          this.allProdList = res.data || []
        }
      })
    },

    handleDetail(scope) {
      getClaimProd({ custIdc: scope.row.custIdc }).then((res) => {
        const finishCode = res.data.map((item) => item.prodCode)

        const result = cloneDeep(this.allProdList).map((item) => {
          return {
            ...item,
            flag: finishCode.includes(item.prodCode) ? 'true' : 'false'
          }
        })

        this.detailList = result || []
        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>
