<script setup lang="ts">
defineOptions({
  name: "evaluateChangeManageObject"
});
import { getState, getStateType, assessmentStatus } from "@/config/tag";
import { ref, reactive, onMounted } from "vue";
import {
  getAssessmentQuotaDetails,
  delAssessmentObject,
  getAssessmentObjectDetails
} from "@/api/assessment";
import { getTemplateInfoList } from "@/api/templateInfo";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { treeDept, postListTreeWithUserApi } from "@/api/department";
import { Search } from "@element-plus/icons-vue";
import messagePerson from "./message.vue";
import dayjs from "dayjs";
const $props = defineProps({
  message: {
    type: Object
  }
});
const valSelection = ref(false);
const messageData = ref({});
const initParams = reactive({
  params: {
    pageNumber: 1,
    pageSize: 10,
    userName: "",
    modelName: "",
    quotaName: "",
    assessmentId: "",
    orderField: "",
    orderType: ""
  },
  objParams: {
    pageNumber: 1,
    pageSize: 10,
    userName: "",
    modelName: "",
    quotaName: "",
    assessmentId: "",
    orderField: "",
    orderType: ""
  },
  indexParams: {
    pageNumber: 1,
    pageSize: 10,
    userName: "",
    modelName: "",
    quotaName: "",
    assessmentId: "",
    orderField: "",
    orderType: ""
  },
  tmpParams: {
    page: 1,
    pageSize: 100
  },
  total: 0,
  total1: 0,
  list: [],
  Indexlist: [],
  tmpList: []
});
onMounted(() => {
  console.log("dsafa", messageData.value);
  Object.assign(messageData.value, $props.message);
  initParams.params.assessmentId = $props.message.id;
  initParams.objParams.assessmentId = $props.message.id;
  initParams.indexParams.assessmentId = $props.message.id;
  getAssessmentQuotaDetailsApi();
  getTemplateInfoListApi();
  postListTreeWithUserApi();
  getAssessmentObjectDetailsApi();
  console.log("onMounted", $props.message);
});
// 指标分页查询
const getAssessmentQuotaDetailsApi = async () => {
  const res = await getAssessmentQuotaDetails(initParams.indexParams);
  console.log("getAssessmentQuotaDetailsApi", res);
  if (res.code === 200) {
    initParams.Indexlist = res.data.records;
    initParams.total1 = res.data.totalRow;
  }
};
// 考核模板
const getTemplateInfoListApi = async () => {
  const { data, code } = await getTemplateInfoList(initParams.params);
  if (code == 200) {
    initParams.tmpList = data.records;
  }
};
// 删除
const delParams = reactive({
  assessmentId: "",
  objectAddVoList: [
    {
      assessmentObjectId: "",
      assessmentObjectName: ""
    }
  ]
});
// 被考核对象
const addPersonParams = reactive({
  assessmentId: "",
  objectAddVoList: [
    {
      assessmentObjectId: "",
      assessmentObjectName: ""
    }
  ]
});
const aaa = ref();
const delAssessmentObjectApi = async () => {
  if (valSelection.value) {
    ElMessageBox.confirm(
      "该员工考核删除后不可恢复，请谨慎操作！",
      "确定删除该员工考核吗？",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    ).then(async () => {
      const { code, msg } = await delAssessmentObject(delParams);
      if (code === 200) {
        getAssessmentQuotaDetailsApi();
        ElMessage.success("删除成功");
      } else {
        ElMessage.error(msg);
      }
    });
  } else {
    ElMessage.warning("请选择要删除的考核对象");
  }
};
// 批量选中
const changeSelection = val => {
  if (val) {
    valSelection.value = true;
    delParams.assessmentId = messageData.value.id;
    addPersonParams.assessmentId = messageData.value.id;
    val.forEach((item, index) => {
      delParams.objectAddVoList.forEach((item1, index1) => {
        if (index == index1) {
          item1.assessmentObjectId = item.id;
          item1.assessmentObjectName = item.name;
        }
      });
    });
  }
};
const router = useRouter();
const activeName = ref("first");
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    show: false
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    show: false
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    show: false
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    show: false
  }
];
// 批量导入
const addsImport = () => {
  router.push({ name: "importIndex", query: { ...messageData.value } });
};
const publishShow = ref(true);
const publish = () => {
  publishShow.value = false;
  ElMessage({
    message: "成功",
    type: "success"
  });
};
// 添加被考核人
const dialogVisibleAdd = ref(false);
const handleRreeSelect = data => {
  console.log("1111111", data);
};
const dialogVisibleAddShow = () => {
  dialogVisibleAdd.value = true;
};
// 跳转对应科室
const GoView = row => {
  router.push("/evaluate/children/change/mould/view");
};
// 考核对象
const objList = ref([]);
const getAssessmentObjectDetailsApi = async () => {
  const { data, msg, code } = await getAssessmentObjectDetails(
    initParams.objParams
  );
  if (code === 200) {
    objList.value = data.records;
    initParams.total = data.totalRow;
  }
  console.log("考核对象", data);
};
const handleSizeChange = (val: number) => {
  initParams.objParams.pageSize = val;
  getAssessmentObjectDetailsApi();
};
const handleCurrentChange = (val: number) => {
  initParams.objParams.pageNumber = val;
  getAssessmentObjectDetailsApi();
};
// 指标
const handleSizeIndexChange = (val: number) => {
  initParams.indexParams.pageSize = val;
  getAssessmentQuotaDetailsApi();
};
const handleCurrentIndexChange = (val: number) => {
  initParams.indexParams.pageNumber = val;
  getAssessmentQuotaDetailsApi();
};
</script>

<template>
  <div class="w-full">
    <div class="w-full flex items-center justify-between">
      <div class="flex items-center justify-between mt-2">
        <div class="bg-icon">
          <div>
            <el-icon><Tickets /></el-icon>
          </div>
        </div>
        <div>
          <div class="flex items-center justify-between">
            <h5>{{ messageData.name }}</h5>
            <el-tag :type="getStateType(messageData.assessmentStatus)">
              {{ assessmentStatus(messageData.assessmentStatus) }}
            </el-tag>
          </div>
          <el-text type="info" class="text-xs">
            {{ messageData.cycleValue }}
          </el-text>
        </div>
      </div>
      <div class="mr-10">
        <Auth :value="['公布考核结果']">
          <el-button v-if="publishShow" type="primary" @click="publish"
            >公布考核结果</el-button
          >
        </Auth>
      </div>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="考核对象" name="first">
        <div class="w-full flex items-center justify-between">
          <div class="w-1/2 flex items-center justify-between">
            <el-text class="w-1/5">考核模板</el-text>
            <el-select
              v-model="initParams.objParams.modelName"
              placeholder="请选择"
              filterable
              clearable
              style="width: 250px"
              @change="getAssessmentObjectDetailsApi"
            >
              <el-option
                v-for="itemTmp in initParams.tmpList"
                :key="itemTmp.id"
                :label="itemTmp.tpName"
                :value="itemTmp.tpName"
              />
            </el-select>
            <el-input
              v-model="initParams.objParams.userName"
              class="ml-2"
              clearable
              placeholder="搜索人员"
              :prefix-icon="Search"
              @change="getAssessmentObjectDetailsApi"
            />
          </div>
          <div class="mr-10">
            <el-button type="primary" plain>批量调整执行人</el-button>
            <el-button type="primary" plain>批量重置流程</el-button>
            <Auth :value="['批量删除']">
              <el-button type="primary" plain @click="delAssessmentObjectApi">
                批量删除
              </el-button>
            </Auth>
            <Auth :value="['添加被考核人']">
              <el-button type="primary" plain @click="dialogVisibleAddShow"
                >添加被考核人</el-button
              >
            </Auth>
          </div>
        </div>
        <el-table
          :data="objList"
          style="width: 100%"
          max-height="250"
          @selection-change="changeSelection"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="realName" label="人员" width="100" />
          <el-table-column prop="userName" label="工号" width="180" />
          <el-table-column prop="deptName" label="科室" width="180" />
          <el-table-column
            prop="assessmentModelName"
            label="考核模板"
            width="300"
          />
          <el-table-column prop="name" label="更新时间" width="150">
            <template #default="{ row }">
              {{ dayjs(row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <!-- <el-button link :icon="Edit" /> -->
              <el-icon @click="GoView(row)"><View /></el-icon>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex justify-between item-center">
          <div class="float-left mt-5 ml-2 total">
            <!-- 共{{ initParams.total }}条数据 -->
          </div>
          <div class="float-right mt-5 mr-8">
            <el-pagination
              v-model:current-page="initParams.objParams.pageNumber"
              v-model:page-size="initParams.objParams.pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="initParams.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="考核指标" name="second">
        <div class="w-full flex items-center justify-between">
          <div class="w-1/2 flex items-center justify-between">
            <el-text class="w-1/5">考核模板</el-text>
            <el-input
              v-model="initParams.indexParams.userName"
              class="ml-1"
              placeholder="搜索人员"
              @change="getAssessmentQuotaDetailsApi"
            />
            <el-input
              v-model="initParams.indexParams.quotaName"
              class="ml-2"
              placeholder="搜索指标名称"
              :prefix-icon="Search"
              @change="getAssessmentQuotaDetailsApi"
            />
          </div>
          <div class="mr-10">
            <Auth :value="['批量导入指标']">
              <el-button type="primary" plain @click="addsImport"
                >批量导入</el-button
              >
            </Auth>
          </div>
        </div>
        <el-table
          :data="initParams.Indexlist"
          style="width: 100%"
          max-height="250"
          @selection-change="changeSelection"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="realName" label="人员" width="100" />
          <el-table-column prop="userName" label="工号" width="180" />
          <el-table-column prop="deptName" label="部门" width="180" />
          <el-table-column prop="name" label="指标名称" width="180" />
          <el-table-column prop="scoreRule" label="评价标准" width="180" />
          <el-table-column prop="source" label="数据来源" width="180" />
          <el-table-column prop="targetValue" label="目标值" width="180" />
          <el-table-column prop="finalValue" label="完成值" width="180" />
          <el-table-column prop="score" label="得分" width="180" />
          <el-table-column prop="updateTime" label="更新时间" width="150">
            <template #default="{ row }">
              {{ dayjs(row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default>
              <!-- <el-icon @click="GoView(row)"><View /></el-icon> -->-
            </template>
          </el-table-column>
        </el-table>
        <div class="flex justify-between item-center">
          <div class="float-left mt-5 ml-2 total">
            <!-- 共{{ initParams.total1 }}条数据 -->
          </div>
          <div class="float-right mt-5 mr-8">
            <el-pagination
              v-model:current-page="initParams.indexParams.pageNumber"
              v-model:page-size="initParams.indexParams.pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="initParams.total1"
              @size-change="handleSizeIndexChange"
              @current-change="handleCurrentIndexChange"
            />
          </div>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="统计分析" name="third">
      </el-tab-pane> -->
      <el-tab-pane label="基础信息" name="fourth">
        <!-- 延迟加载获取id -->
        <messagePerson v-if="messageData.id" :id="messageData.id" />
      </el-tab-pane>
    </el-tabs>
    <!-- 添加被考核人 -->
    <el-dialog v-model="dialogVisibleAdd" title="添加被考核人" width="744">
      <div>
        <el-form
          ref="ruleFormRef"
          label-position="top"
          label-width="auto"
          :model="addPersonParams"
        >
          <el-form-item label="维度权重" label-position="top">
            <el-tree-select
              v-model="aaa"
              :data="treeDept"
              multiple
              :props="{
                label: 'userName',
                value: 'userCode',
                children: 'childrenRes'
              }"
              :render-after-expand="false"
              show-checkbox
              check-strictly
              check-on-click-node
              style="width: 240px"
              @node-click="handleRreeSelect"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer w-full flex justify-between mt-4">
          <div>
            <el-button>取消</el-button>
            <el-button type="primary"> 确认 </el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.bg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  margin-right: 5px;
  background: #00a870;
  border-radius: 5px;

  div {
    // border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 60%;
    color: #00a870;
    background: #fff;
    border-radius: 2px;
  }
}
</style>