<template>
  <div class="control" v-loading.fullscreen.lock="loading" element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0, 0.6)">
    <el-page-header class="header" @back="goBack(route, '/spongePerformance/management')">
      <template #content>
        <span class="title">{{ year }}年</span>
      </template></el-page-header
    >
    <div class="body">
      <el-form ref="ruleForm" :model="form">
        <!-- {{ year }} -->
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="指标名称:" prop="itemContent">
              <el-input style="width: 240px" clearable v-model="form.itemContent" placeholder="请输入指标名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" icon="Search" @click="getTableData({ configId: controlId })"> 搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-button
              type="primary"
              icon="Plus"
              style="float: right"
              :disabled="type == 'view'"
              @click="openDialog({}, '1', 'add', '一级指标')"
            >
              新增一级指标
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        default-expand-all
        ref="tableRef"
        :data="treeData"
        :max-height="700"
        element-loading-text="数据加载中..."
        row-key="id"
        v-loading="tableLoading"
        :span-method="objectSpanMethod"
      >
        <el-table-column label="一级指标" prop="itemContent" width="120" show-overflow-tooltip>
          <template #default="{ row }">
            <span style="float: left" v-html="ShowDae(row.itemLevel == '1' ? row.itemContent : '')"></span>
          </template>
        </el-table-column>
        <el-table-column label="二级指标" prop="itemContent" width="120" show-overflow-tooltip>
          <template #default="{ row }">
            <span style="float: left" v-html="ShowDae(row.itemLevel == '2' ? row.itemContent : '')"></span>
          </template>
        </el-table-column>
        <el-table-column label="三级指标" prop="itemContent" width="150" show-overflow-tooltip>
          <template #default="{ row }">
            <span
              style="color: #108ee9; float: left"
              @click="openDialog(row, row.itemLevel, 'view')"
              v-html="ShowDae(row.itemLevel == '3' ? row.itemContent : '')"
            ></span>
          </template>
        </el-table-column>
        <el-table-column label="目标" prop="itemTarget" width="140px"> </el-table-column>
        <el-table-column label="单位" prop="itemUnit" width="120px"> </el-table-column>
        <el-table-column label="说明" prop="itemComment" width="110px"> </el-table-column>
        <el-table-column label="分值" prop="itemScore" width="90px"> </el-table-column>
        <el-table-column label="算法" prop="itemAlgorithm">
          <template #default="{ row }">
            <span>{{ row.itemAlgorithm === 'auto' ? '自动' : '手动' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="启用时间" prop="enableDatetime" show-overflow-tooltip width="160px" />
        <el-table-column label="停用时间" prop="stopDatetime" show-overflow-tooltip width="160px" />
        <el-table-column label="修改人" prop="updateBy" show-overflow-tooltip />
        <el-table-column label="修改日期" prop="updateTime" show-overflow-tooltip width="160px" />
        <el-table-column label="状态" prop="status" width="90px">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              active-value="1"
              inactive-value="0"
              @change="
                val => {
                  statusChange(row, val);
                }
              "
              :disabled="row.statusDisabled || type == 'view'"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              link
              v-if="row.itemLevel == '1'"
              @click="openDialog(row, row.itemLevel * 1 + 1 + '', 'add', '二级指标')"
              :disabled="type == 'view'"
              >新增二级指标</el-button
            >
            <el-button
              type="primary"
              link
              v-if="row.itemLevel == '2'"
              @click="openDialog(row, row.itemLevel * 1 + 1 + '', 'add', '三级指标')"
              :disabled="type == 'view'"
              >新增三级指标</el-button
            >
            <el-button type="primary" link @click="openDialog(row, row.itemLevel, 'view')">查看</el-button>
            <el-button type="warning" link @click="openDialog(row, row.itemLevel, 'edit')" :disabled="type == 'view'">修改</el-button>
            <el-button type="danger" link @click="delClick(row)" :disabled="type == 'view'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="visible" :close-on-click-modal="false" width="30%" :before-close="close" class="dialog" :title="operateInfo.text">
      <el-form
        ref="dialogFormRef"
        :model="dialogForm"
        :rules="dialogFormRules"
        :disabled="operateInfo.type == 'view' || type == 'view'"
        label-width="auto"
      >
        <el-row>
          <el-col :span="20" :offset="2" v-if="operateInfo.itemLevel == '1'">
            <el-form-item label="一级指标:" prop="itemContent">
              <el-input v-model="dialogForm.itemContent" placeholder="请输入一级指标" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="operateInfo.itemLevel == '2'">
          <el-col :span="12">
            <el-form-item label="二级指标:" prop="itemContent">
              <el-input v-model="dialogForm.itemContent" placeholder="请输入二级指标" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="operateInfo.itemLevel == '3'">
          <el-col :span="12">
            <el-form-item label="三级指标:" prop="itemContent">
              <el-input v-model="dialogForm.itemContent" placeholder="请输入三级指标" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分值:" prop="itemScore">
              <el-input v-model.number="dialogForm.itemScore" placeholder="请输入分值" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目标:" prop="itemTarget">
              <el-input v-model="dialogForm.itemTarget" placeholder="请输入目标" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位:" prop="itemUnit">
              <el-input v-model="dialogForm.itemUnit" placeholder="请输入单位" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="说明:" prop="itemComment">
              <el-input v-model="dialogForm.itemComment" placeholder="请输入说明" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="算法:" prop="itemAlgorithm">
              <el-select clearable v-model="dialogForm.itemAlgorithm" placeholder="请选择算法" style="width: 100%" @change="ProjectChange">
                <el-option v-for="dict in ProjectListData" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId">
              <el-tree-select
                v-model.number="dialogForm.deptId"
                :data="deptOptions"
                :props="{ value: 'id', label: 'label', children: 'children' }"
                value-key="id"
                placeholder="请选择归属部门"
                check-strictly
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联菜单:" prop="itemDataType">
              <el-select
                clearable
                v-model="dialogForm.itemDataType"
                placeholder="请选关联菜单"
                style="width: 100%"
                @change="detailDataTypeListChange"
                value-key="code"
              >
                <el-option v-for="i in detailDataTypeList" :key="i.code" :label="i.name" :value="i.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联目标:" prop="itemDataField">
              <el-select clearable v-model="dialogForm.itemDataField" placeholder="请选关联目标" style="width: 100%">
                <el-option v-for="i in sourceTypeList" :key="i.code" :label="i.name" :value="i.code" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer v-if="operateInfo.type !== 'view'">
        <div class="dialog-footer">
          <el-button type="primary" @click="submit(1)">确定</el-button>
          <!-- <el-button type="success" @click="submit(2)" v-if="dialogForm.status == '0'">启用</el-button>
          <el-button type="danger" @click="submit(3)" v-if="dialogForm.status == '1'">停用</el-button> -->
          <el-button @click="close">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, nextTick, onMounted, reactive } from 'vue';
import { v4 as uuidv4 } from 'uuid';
import useUserStore from '@/store/modules/user';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  getAssessTargetConfigControllerItem,
  assessTargetConfigControllerItemBatchUpdate,
  assessTargetConfigOpen,
  assessTargetConfigClose,
  deleteConfigControllerItem,
  detailDataType,
  assessTargetConfigEdit,
  performanceConfigCopy,
  performanceConfigEnable,
  performanceConfigEnableAndDisable,
} from '@/api/spongePerformance/management.js';
import { deptTreeSelect } from '@/api/system/user';

import useTable from '../mixins';
import upload from '../upload.vue';
const route = useRoute();
const { proxy } = getCurrentInstance();
const { controlId } = route.params;
console.log(controlId, 'controlIdcontrolId');
let { type, status, name, engineeringType, year } = route.query;
const statusText = ref(status == '1' ? '停用' : '启用');
const {
  form,
  treeData,
  visible,
  curRow,
  operateInfo,
  getTreeCurRow,
  search,
  // resetQuery,
  goBack,
  // statusChange,
  setStatusDisabled,
  getSortIsDisabled,
  ascHandle,
  descHandle,
  expand,
} = useTable(proxy, uuidv4);
const submitDate = ref();
const dialogForm = ref({});
const loading = ref(false);
const deptOptions = ref(undefined);
const tableLoading = ref(false);
const ProjectListData = reactive([
  { label: '自动', value: 'auto' },
  { label: '手填', value: 'manual' },
]);
const detailDataTypeList = ref([]);
const sourceTypeList = ref([]);
form.configId = controlId;
const dialogFormRules = reactive({
  itemContent: [{ required: true, trigger: 'blur', message: '指标不能为空' }],
  itemScore: [{ required: true, trigger: 'blur', message: '分值不能为空' }],
  itemTarget: [{ required: true, trigger: 'blur', message: '目标不能为空' }],
});
// this.page.searchCode 是指的搜索的关键词
function ShowDae(val) {
  if (val.indexOf(form.itemContent) !== -1 && form.itemContent !== '') {
    return val.replace(form.itemContent, '<font color="#000" style="background:#ffff00">' + form.itemContent + '</font>');
  } else {
    return val;
  }
}

const openDialog = (row, level, type, text = '') => {
  if (type != 'add') dialogForm.value = row;
  curRow.value = row;
  console.log('row', row);
  submitDate.value = row;
  operateInfo.itemLevel = level;
  operateInfo.type = type;
  operateInfo.text = (row?.itemContent || '') + text + (type == 'add' ? '新增' : type == 'view' ? '查看' : '编辑');
  visible.value = true;
  let arr = detailDataTypeList.value.filter(i => {
    return i.code == row?.itemDataType;
  });
  sourceTypeList.value = arr[0]?.childPerformanceConfigDataList;
};
function resetQuery() {
  form.itemContent = '';
  getTableData(form);
}

function getSourceTypeList(x, y) {
  let arr = x.filter(i => {
    return i.code == y;
  });
  return arr[0];
}
//确定
const submit = type => {
  proxy.$refs.dialogFormRef.validate(async valid => {
    if (valid && type == 1) {
      const treeDataCurRow = getTreeCurRow(treeData.value, curRow.value);
      const row = {
        parentId: submitDate.value.id,
        configId: controlId,
        itemDataType: dialogForm.value.itemDataType?.code,
        ...dialogForm.value,
      };
      if (operateInfo.type == 'add') {
        let { data, code } = await assessTargetConfigControllerItemBatchUpdate(row);
        getTableData(form);
        proxy.$refs.tableRef.toggleRowExpansion(treeDataCurRow, true);
      } else if (operateInfo.type == 'edit') {
        let { data, code } = await assessTargetConfigEdit(row);
        getTableData(form);
      }
      close();
    } else if (valid && type == 2) {
      proxy.$modal
        .confirm(`是否启用?`)
        .then(async () => {
          let { data } = await performanceConfigEnable(submitDate.value.id);
          getTableData(form);
        })
        .catch(() => {});
    } else {
      proxy.$modal
        .confirm(`是否停用?`)
        .then(async () => {
          let { data } = await performanceConfigDisable(submitDate.value.id);
          getTableData(form);
        })
        .catch(() => {});
    }
  });
};
//删除
const delClick = async ({ id }) => {
  proxy.$modal
    .confirm(`是否确认删除${id}?`)
    .then(async () => {
      let { data } = await deleteConfigControllerItem(id);
      getTableData(form);
    })
    .catch(() => {});
};
const getTableData = async p => {
  tableLoading.value = true;
  const res = await getAssessTargetConfigControllerItem(p);
  tableLoading.value = false;
  if (res?.code !== 200) return;
  treeData.value = res?.data || [];
  setFields(treeData.value, '0');
  setSort(treeData.value);
  setStatusDisabled(treeData.value);
  nextTick(() => {
    expand();
  });
  console.log(treeData.value, '111');
};
const setFields = (data, level) => {
  for (const item of data) {
    item.level = level;
    switch (level) {
      case '0':
        item.sort = item.evaluationTypeRank;
        break;
      case '1':
        item.sort = item.controlItemRank;
        break;
      case '2':
        item.sort = item.evaluationCriterionRank;
        break;
      default:
        break;
    }
    if (item.children) {
      setFields(item.children, level * 1 + 1 + '');
    }
  }
};
const setSort = data => {
  data.sort((a, b) => {
    return b.sort - a.sort;
  });
  for (const item of data) {
    if (item.children) {
      setSort(item.children);
    }
  }
};
const setParams = data => {
  for (const item of data) {
    if (item.level == '0') {
      item.evaluationTypeRank = item.sort;
    } else if (item.level == '1') {
      item.controlItemRank = item.sort;
    } else if (item.level == '2') {
      item.evaluationCriterionRank = item.sort;
    }
    if (item.children) {
      setParams(item.children);
    }
  }
};
const statusChange = (v, m) => {
  console.log('v', v);
  if (v.status == '1') {
    statusText.value = '启用';
  } else {
    statusText.value = '停用';
  }
  proxy.$modal
    .confirm(`是否确认${statusText.value}?`)
    .then(async () => {
      const { data, code } = await performanceConfigEnableAndDisable(v.id);
      getTableData({
        configId: controlId,
      });
      proxy.$modal.msgSuccess('操作成功！');
    })
    .catch(() => {
      getTableData({
        configId: controlId,
      });
    });
};
const detailDataTypeM = async () => {
  let { data } = await detailDataType();
  detailDataTypeList.value = data;
  // detailDataTypeList.value.forEach((i)=>{
  //   i.label=i.name
  // })
  // console.log("detailDataTypeList", detailDataTypeList)
};
function detailDataTypeListChange(v) {
  let arr = detailDataTypeList.value.filter(i => {
    return i.code == v;
  });
  sourceTypeList.value = arr[0].childPerformanceConfigDataList;
  dialogForm.value.itemDataField = '';
}
const close = () => {
  visible.value = false;
  proxy.$refs.dialogFormRef.resetFields();
  getTableData({ configId: controlId });
};
/** 搜索部门下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then(response => {
    deptOptions.value = response.data;
  });
}
//复制
async function copy({ configId, year }) {
  let { data, code } = await performanceConfigCopy({ sourceConfigId: configId, targetYear: year });
  if (code == 200) getTableData({ configId: controlId });
}
// 表数据合并
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 6) {
    if ([2, 3].includes(rowIndex)) {
      return {
        rowspan: rowIndex === 2 ? 2 : 0,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 1,
        colspan: 1,
      };
    }
  }
};
onMounted(() => {
  getTableData({
    configId: controlId,
  });
  getDeptTree();
  detailDataTypeM();
});
</script>
<style lang="scss" scoped>
@import './index.scss';
.title {
  font-size: 16px;
  color: #c6c6c6;
}
</style>