<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, '/preassess/examineManage')">
      <template #content>
        <span class="title">{{ name }}</span>
      </template>
    </el-page-header>
    <div class="body">
      <el-form ref="ruleForm" :model="form">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="评价标准:" prop="name">
              <el-input v-model="form.name" placeholder="请输入评价标准"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" icon="Search" @click="search">
                查询</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-button
              type="primary"
              style="float: right;margin-left: 10px;"
              @click="save"
              :disabled="type === 'view'"
            >保存</el-button>
            <el-button
              type="primary"
              style="float: right;margin-left: 10px;"
              @click="enable"
              :disabled="type === 'view'"
            >{{ statusText }}</el-button>
            <el-button
              type="primary"
              icon="Plus"
              style="float: right"
              :disabled="type === 'view'"
              @click="openDialog({}, '0', 'add')"
            >
              新增评价类型</el-button>
            <upload
              class="upload"
              style="float: right"
              action="/prod-api/sponge/assessTargetConfigControllerItem/exportTargetConfigControllerItem"
              :data="{ targetId: controlId }"
              :disabled="type === 'view'"
              @success="(data) => { uploadSuccess(data) }"
            >
              <el-button
                type="primary"
                icon="Upload"
                :disabled="type === 'view'"
              >
              导入</el-button>
            </upload>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        ref="tableRef"
        :data="treeData"
        stripe
        :max-height="670"
        element-loading-text="数据加载中..."
        row-key="nodeCode"
        v-loading="tableLoading"
      >
        <!-- <el-table-column type="index" width="55" label="序号" align="center" /> -->
        <el-table-column label="评价类型" prop="evaluationType" width="140px">
          <template #default="{ row }">
            <span>{{ row.level === '0' ? row.evaluationType : ''}}</span>
          </template>
        </el-table-column>
        <el-table-column label="控制项" prop="controlItem" width="120px">
          <template #default="{ row }">
            <span>{{ row.level === '1' ? row.controlItem : ''}}</span>
          </template>
        </el-table-column>
        <el-table-column label="评价标准" prop="evaluationCriterion" width="280px">
          <template #default="{ row, $index }">
            <div v-html="formatSearch(row, $index, row.evaluationCriterion)" v-if="row.level === '2'"></div>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="是否需要评价" align="center" prop="evaluationOpen" width="110px">
          <template #default="{ row }">
            <el-switch
              v-model="row.evaluationOpen"
              active-value="true"
              inactive-value="false"
              :disabled="type === 'view'"
            />
          </template>
        </el-table-column>
        <el-table-column label="启用状态" align="center" 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="启用时间" align="center" prop="enableTime" show-overflow-tooltip width="160px" />
        <el-table-column label="停用时间" align="center" prop="stopTime" show-overflow-tooltip width="160px" />
        <el-table-column label="修改人" align="center" prop="updateBy" show-overflow-tooltip />
        <el-table-column label="修改日期" align="center" prop="updateTime" show-overflow-tooltip width="160px" />
        <el-table-column label="排序" align="center" width="110px" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              link
              :disabled="getSortIsDisabled(row, 'ascending') || type === 'view'"
              @click="ascHandle(row)"
            >升序</el-button>
            <el-button
              type="primary"
              link
              :disabled="getSortIsDisabled(row, 'descending') || type === 'view'"
              @click="descHandle(row)"
            >降序</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="260" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              link v-if="row.level === '0'"
              @click="openDialog(row, row.level * 1 + 1 + '', 'add')"
              :disabled="type === 'view'"
            >新增控制项</el-button>
            <el-button
              type="primary"
              link
              v-if="row.level === '1'"
              @click="openDialog(row, row.level * 1 + 1 + '', 'add')"
              :disabled="type === 'view'"
            >新增评价标准</el-button>
            <el-button
              type="primary"
              link
              v-if="row.level === '2'"
              @click="copy(row)"
              :disabled="type === 'view'"
            >复制</el-button>
            <el-button
              type="primary"
              link
              @click="openDialog(row, row.level, 'view')"
            >查看</el-button>
            <el-button
              type="primary"
              link
              @click="openDialog(row, row.level, 'edit')"
              :disabled="type === 'view'"
            >修改</el-button>
            <el-button
              type="danger"
              link
              @click="del(row)"
              :disabled="type === 'view'"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      v-model="visible"
      :title="`${operateInfo.text}`"
      :close-on-click-modal="false"
      :width="operateInfo.width"
      :before-close="close"
      class="dialog"
    >
      <el-form
        ref="dialogFormRef"
        :model="dialogForm"
        :rules="dialogFormRules"
        v-if="operateInfo.level"
        :disabled="operateInfo.type === 'view' || type === 'view'"
      >
        <el-row>
          <el-col :span="20" :offset="2" v-if="operateInfo.level === '0'">
            <el-form-item label="评价类型:" prop="evaluationType">
              <el-input v-model="dialogForm.evaluationType" placeholder="请输入评价类型"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="operateInfo.level === '1'">
          <el-col :span="12">
            <el-form-item label="控制项:" prop="controlItem">
              <el-input v-model="dialogForm.controlItem" placeholder="请输入控制项"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评价类型:" prop="evaluationType">
              <el-input v-model="dialogForm.evaluationType" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="operateInfo.level === '2'">
          <el-col :span="12">
            <el-form-item label="评价标准:" prop="evaluationCriterion">
              <el-input v-model="dialogForm.evaluationCriterion" placeholder="请输入评价标准"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="控制项:" prop="controlItem">
              <el-input v-model="dialogForm.controlItem" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评价类型:" prop="evaluationType">
              <el-input v-model="dialogForm.evaluationType" :disabled="true" />
            </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">保存</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 {
  getAssessTargetConfigControllerItem,
  assessTargetConfigControllerItemBatchUpdate,
  assessTargetConfigOpen,
  assessTargetConfigClose
}
from '@/api/preassess/examineManage.js'
import { optTextMap } from '@/utils/map'
import { inheritAttr } from '@/utils/v3'
import useTable from '../mixins'
import upload from '../upload.vue'
const route = useRoute();
const { proxy } = getCurrentInstance();
const { controlId } = route.params
let { type, status, name, engineeringType } = route.query
const statusText = ref(status ==='1' ? '停用' : '启用')
const {
  form,
  treeData,
  visible,
  curRow,
  operateInfo,
  getTreeCurRow,
  search,
  resetQuery,
  goBack,
  close,
  statusChange,
  setStatusDisabled,
  getSortIsDisabled,
  copy,
  del,
  ascHandle,
  descHandle,
  formatSearch,
  expand,
  checkData
} = useTable(proxy, uuidv4)
const dialogForm = reactive({
  evaluationType: '',
  controlItem: '',
  evaluationCriterion: ''
})
const loading = ref(false)
const tableLoading = ref(false)

const dialogFormRules = reactive({
  evaluationType: [
    { required: true, trigger: "blur", message: "评价类型不能为空" }
  ],
  controlItem: [
    { required: true, trigger: "blur", message: "控制项不能为空" }
  ],
  evaluationCriterion: [
    { required: true, trigger: "blur", message: "评价标准不能为空" }
  ]
})

const operateMap = new Map([
  ['0', { width: '24%', text: '评价类型' }],
  ['1', { width: '48%',text: '控制项' }],
  ['2', { width: '48%',text: '评价标准' }],
])
const openDialog = (row, level, type) => {
  console.log(row)
  curRow.value = row
  operateInfo.level = level
  operateInfo.type = type
  operateInfo.text = optTextMap.get(type) + operateMap.get(level).text
  operateInfo.width = operateMap.get(level).width
  visible.value = true
  nextTick(() => {
    setDialogForm(row, level, type)
  })
}

const setDialogForm = (row, level, type) => {
  inheritAttr(row, dialogForm)
  switch (level) {
    case '1':
      dialogForm.evaluationType = row.evaluationType
      break;
    case '2':
      dialogForm.evaluationType = row.evaluationType
      dialogForm.controlItem = row.controlItem
    default:
      break;
  }
}

const submit = () => {
  console.log(operateInfo, dialogForm)
  proxy.$refs.dialogFormRef.validate((valid) => {
    if(valid) {
      const treeDataCurRow = getTreeCurRow(treeData.value, curRow.value)
      const row = {
        assessTargetConfigId: controlId,
        evaluationType: '',
        controlItem: '',
        evaluationCriterion: '',
        evaluationOpen: 'false',
        enableTime: '',
        stopTime: proxy.moment().format("YYYY-MM-DD HH:mm:ss"),
        updateBy: useUserStore().name,
        updateTime: proxy.moment().format("YYYY-MM-DD HH:mm:ss"),
        status: '0',
        parentNodeCode: '0'
      }
      if(operateInfo.type === 'add'){
        row.nodeCode = uuidv4()
        row.level = operateInfo.level
        switch (operateInfo.level) {
          case '0':
            row.evaluationType = dialogForm.evaluationType
            row.statusDisabled = false
            treeData.value.unshift(row)
            row.sort = treeData.value.length
            break;
          case '1':
            row.evaluationType = dialogForm.evaluationType
            row.controlItem = dialogForm.controlItem
            row.parentNodeCode = curRow.value.nodeCode
            row.statusDisabled = curRow.value.status === '0'
            if(!treeDataCurRow.children) treeDataCurRow.children = []
            row.sort = treeDataCurRow.children.length + 1
            treeDataCurRow.children.unshift(row)
            break;
          case '2':
            row.evaluationType = dialogForm.evaluationType
            row.controlItem = dialogForm.controlItem
            row.evaluationCriterion = dialogForm.evaluationCriterion
            row.parentNodeCode = curRow.value.nodeCode
            row.statusDisabled = curRow.value.status === '0'
            if(!treeDataCurRow.children) treeDataCurRow.children = []
            row.sort = treeDataCurRow.children.length + 1
            treeDataCurRow.children.unshift(row)
            break;
          default:
            break;
        }
        nextTick(() => {
          proxy.$refs.tableRef.toggleRowExpansion(treeDataCurRow, true)
        })
      } else if(operateInfo.type === 'edit'){
        switch (operateInfo.level) {
          case '0':
            treeDataCurRow.evaluationType = dialogForm.evaluationType
            if(treeDataCurRow?.children?.length){
              for (const item of treeDataCurRow.children) {
                item.evaluationType = treeDataCurRow.evaluationType
                if(item?.children?.length){
                  for (const it of item.children) {
                    it.evaluationType = treeDataCurRow.evaluationType
                  }
                }
              }
            }
            break;
          case '1':
            treeDataCurRow.controlItem = dialogForm.controlItem
            if(treeDataCurRow?.children?.length){
              for (const item of treeDataCurRow.children) {
                item.controlItem = treeDataCurRow.controlItem
              }
            }
            break;
          case '2':
            treeDataCurRow.evaluationCriterion = dialogForm.evaluationCriterion
            break;
          default:
            break;
        }
      }
      close()
    }
  })
}

const getTableData = async () => {
  tableLoading.value = true
  const res = await getAssessTargetConfigControllerItem(controlId)
  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)
}

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 save = async () => {
  loading.value = true
  let params = JSON.parse(JSON.stringify(treeData.value))
  const flag = checkData(params)
  if(flag) return proxy.$modal.msgError('表格数据至少要填写到评价标准')
  setParams(params)
  console.log(params)
  const res = await assessTargetConfigControllerItemBatchUpdate(params)
  loading.value = false
  if(res?.code !== 200) return
  proxy.$modal.msgSuccess('操作成功！')
}

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 enable = () => {
  proxy.$modal
  .confirm(`是否确认${statusText.value}?`)
  .then(async () => {
    let method = status === '1' ? assessTargetConfigClose : assessTargetConfigOpen
    const formData = new FormData()
    formData.append('id', controlId)
    formData.append('engineeringType', engineeringType)
    formData.append('assessType', 'control')
    const res = await method(formData)
    if(res?.code !== 200) return
    proxy.$modal.msgSuccess('操作成功！')
    if(status === '1'){
      status = '0'
      statusText.value = '启用'
    } else {
      status = '1'
      statusText.value = '停用'
    }
  })
  .catch(() => {});
}

const uploadSuccess = (data) => {
  console.log(data)
  if(data) getTableData()
}

onMounted(() => {
  getTableData()
})
</script>

<style lang="scss" scoped>
.control {
  padding: 10px;
  height: 92vh;
  overflow-y: hidden;
  .header {
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
    border: 1px solid #e4e7ed;
    margin-bottom: 10px;
    .title {
      font-size: 16px;
    }
    ::v-deep(.el-page-header__header) {
      .el-page-header__left {
        .el-page-header__back {
          .el-page-header__icon {
            font-size: 20px;
            font-weight: 700;
          }
          .el-page-header__title {
            font-size: 16px;
          }
        }
      }
    }
  }
  .body {
    height: calc(100% - 74px);
    overflow: auto;
    overflow-x: hidden;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
    border: 1px solid #e4e7ed;
    padding: 20px;
    ::v-deep(.el-table) {
      .light {
          background-color: rgb(252, 247, 0);
        }
    }
  }
}

::v-deep(.dialog) {
  .el-dialog__body {
    padding-bottom: 20px !important;
  }
  .el-dialog__footer {
    padding-top: 0 !important;
  }
}

</style>