<script setup>
import { ref, onMounted, nextTick, computed, watch } from "vue";

import mPage from "@/components/mPage.vue";
import { raiInterface } from "@/api/api.js";
import { ElMessage } from "element-plus";

import { Search } from "@element-plus/icons-vue";

const page_no = ref(sessionStorage.getItem("interviewListBack") ? JSON.parse(sessionStorage.getItem("interviewListBack")).page_no : 1);
const total = ref(0); //条数
const PageSize = ref(10); //每页显示几条
const dataList = ref([]); //表格的列表
const keyWord = ref("");
const sellerName = ref("");
const sellerList = ref([]);
const dialogVisiblepartica = ref(false);
const detailList = ref(null);

const roleIdentity = computed(() => {
  return localStorage.getItem("RoleIdentity");
});

function sellerNameChange() {
  page_no.value = 1;
  getsDataList();
}
//列表表格
function getsDataList() {
  raiInterface
    .breakAppointmentList({
      CurrentIndex: page_no.value,
      PageSize: PageSize.value,
      KeyWord: keyWord.value,
      SellerName: sellerName.value,
    })
    .then((res) => {
      if (res.Ret !== 200) return;
      dataList.value = res.Data.List;
      total.value = res.Data.Paging.Totals;
    });
}
//分页
function handleCurrentChange(page) {
  page_no.value = page;
  getsDataList();
}
function detail(id) {
  raiInterface.breakAppointmentDetail({ UserId: id }).then((res) => {
    if (res.Ret !== 200) return;
    dialogVisiblepartica.value = true;
    nextTick(() => {
      detailList.value = res.Data.List;
    });
  });
}
function confirmPerson() {
  dialogVisiblepartica.value = false;
}
function sellerNameListList() {
  raiInterface.sellerNameListList().then((res) => {
    if (res.Ret === 200) {
      sellerList.value = res.Data.List;
    }
  });
}
function switchChange(id) {
  raiInterface
    .signUpRestrictUid({
      UserId: id,
    })
    .then((res) => {
      if (res.Ret === 200) {
        ElMessage.success("操作成功");
      } else {
        getsDataList();
      }
    });
}

watch(
  () => keyWord.value,
  () => {
    page_no.value = 1;
    getsDataList();
  }
);

onMounted(() => {
  getsDataList();
  sellerNameListList();
});
</script>

<template>
  <div class="container-appointment">
    <!-- 头部el-card -->
    <el-card style="margin-bottom: 20px">
      <div class="top-card-box">
        <div></div>
        <div>
          <el-input style="width: 521px" v-model="keyWord" placeholder="请输入手机号/公司名称" clearable :prefix-icon="Search"> </el-input>
        </div>
      </div>
    </el-card>
    <!-- 内容el-card -->
    <el-card>
      <div>
        <el-select v-model="sellerName" @change="sellerNameChange" placeholder="所属销售" clearable>
          <el-option v-for="item in sellerList" :key="item.SellerName" :label="item.SellerName" :value="item.SellerName"></el-option>
        </el-select>
      </div>
      <!-- 表格部分 -->
      <el-table :data="dataList" style="width: 100%; margin-top: 20px" border="">
        <el-table-column prop="RealName" align="center" label="姓名"></el-table-column>
        <el-table-column prop="Mobile" align="center" label="手机号"></el-table-column>
        <el-table-column prop="CompanyName" align="center" label="公司名称"></el-table-column>
        <el-table-column prop="SellerName" align="center" label="所属销售"></el-table-column>
        <el-table-column prop="BreakAppointmentNum" align="center" label="爽约次数"></el-table-column>
        <el-table-column prop="" align="center" label="操作">
          <template #default="scope">
            <span class="editsty" @click="detail(scope.row.UserId)">查看详情</span>
          </template>
        </el-table-column>
        <el-table-column width="170" prop="" align="center" label="报名限制">
          <template #default="scope">
            <el-switch :disabled="roleIdentity === 'rai_seller'" @change="switchChange(scope.row.UserId)" v-model="scope.row.Operation" active-text="已限制" inactive-text="不限制"> </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </el-card>
    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="dialogVisiblepartica" customClass="custom-appoinetdialog" :before-close="confirmPerson">
      <template #header>
        <div style="display: flex; align-items: center">
          <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
          <span style="font-size: 16px">爽约详情</span>
        </div>
      </template>
      <div>
        <el-table max-height="260px" :data="detailList" border style="width: 100%; margin-top: 10px">
          <el-table-column width="250" prop="ActivityName" align="center" label="活动名称"></el-table-column>
          <el-table-column prop="ChartPermissionName" align="center" label="行业"></el-table-column>
          <el-table-column prop="ActivityTypeName" align="center" label="活动类型"></el-table-column>
          <el-table-column width="230" prop="ActivityTimeText" align="center" label="活动时间"></el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="confirmPerson">知道了</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.container-appointment {
  .custom-appoinetdialog {
    width: 800px;
  }
  .top-card-box {
    display: flex;
    justify-content: space-between;
  }
  .el-switch__label {
    color: #606266;
    font-size: 14px;
    font-weight: 400;
  }
  .is-active {
    color: #409eff !important;
  }
}
</style>
