<template>
  <div class="water-analysis-page1">
    <el-table
      :key="isFlag"
      :data="tableData"
      v-loading="tableLoading"
      stripe
      max-height="500"

    >
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column
        label="项目类型编码"
        align="center"
        prop="projectTypeCode"
        show-overflow-tooltip
      />
      <el-table-column
        label="项目类型名称"
        align="center"
        prop="projectTypeName"
        show-overflow-tooltip
      />
      <el-table-column
        label="所属类型"
        align="center"
        prop="ownership"
        width="160"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <dict-tag :options="ownership" :value="row.ownership" />
        </template>
      </el-table-column>
      <el-table-column
        label="描述"
        align="center"
        prop="remark"
        show-overflow-tooltip
      />
      <el-table-column label="是否启用" align="center" prop="status">
        <template #default="{ row }">
          {{ row.status == 0 ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="280" align="center">
        <template #default="{ row }">
          <el-button icon="Connection" link type="primary" @click="onCheck(row, 0,'配置')"
            >配置</el-button
          >
          <el-button icon="View" link type="primary" @click="onCheck(row, 1,'详情')"
            >详情</el-button
          >
          <el-button icon="Edit" link type="warning" @click="onCheck(row, 2,'修改')"
            >修改</el-button
          >
          <el-button icon="Delete" link type="danger" @click="onCheck(row, 3)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="FormList.totals > 0"
      :total="FormList.totals"
      v-model:page="FormList.pageNum"
      v-model:limit="FormList.pageSize"
      @pagination="getInfoList(FormList)"
    />
    <el-dialog
      v-model="visible"
      :title="'项目类型维护'+title"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      width="50%"
    >
      <tableDalgo
        ref="tableDalgoRef"
        v-if="visible"
        @onModalClose="onModalClose"
        :typeList="typeList"
      ></tableDalgo>
      <template #footer>
        <div class="dialog-footer">
          <el-button v-if="typeList?.type != 1" type="primary" @click="submit"
            >保存</el-button
          >
          <el-button @click="visible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="visible1"
      title="配置"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      width="50%"
      class="noHidden"
    >
      <template v-if="visible1">
        <div class="btns">
          <el-button type="primary" plain icon="Plus" @click="openDialog({}, 'add')">新增</el-button>
        </div>
        <el-table
          class="table"
          :data="list"
          v-loading="loading"
          stripe
          element-loading-text="数据加载中..."
        >
        <el-table-column label="项目内容类型" align="center" prop="projectContentType" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ findText('project_content_type', row.projectContentType) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目内容(key)" align="center" prop="propertyKey" show-overflow-tooltip />
        <el-table-column label="项目内容名称" align="center" prop="propertyName" show-overflow-tooltip />
        <el-table-column label="排序" align="center" prop="sort" show-overflow-tooltip />
        <el-table-column label="操作" align="center" width="150" fixed="right">
          <template #default="{ row, $index }">
            <el-button type="primary" link size="small" @click="openDialog(row, 'view')">查看</el-button>
            <el-button type="primary" link size="small" @click="openDialog(row, 'edit')">修改</el-button>
            <el-button type="danger" link size="small" @click="del(row, $index)">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submit1"
            >保存</el-button
          >
          <el-button @click="closeDialog">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
    v-model="visible2"
    :title="`${configOpts.text}配置`"
    :close-on-click-modal="false"
    width="50%"
    :before-close="closeDialog2"
    class="dialog"
  >
    <el-form
      ref="ruleForm"
      :model="form"
      :rules="rules"
      class="dialogForm"
      :disabled="configOpts.type === 'view'"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目内容类型:" prop="projectContentType" class="formItem">
            <el-select
              v-model="form.projectContentType"
              placeholder="请选择项目内容类型"
              style="width: 100%"
            >
              <el-option
                v-for="dict in project_content_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目内容key:" prop="propertyKey" class="formItem">
            <el-input v-model="form.propertyKey" placeholder="请输入项目内容key" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目内容名称:" prop="propertyName" class="formItem">
            <el-input v-model="form.propertyName" placeholder="请输入项目内容名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序:" prop="sort" class="formItem">
            <el-input v-model="form.sort" placeholder="请输入排序" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer v-if="configOpts.type !== 'view'">
      <div class="dialog-footer">
        <el-button type="primary" @click="submit2">保存</el-button>
        <el-button @click="closeDialog2">取消</el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>
<script setup>
import { defineExpose,ref, reactive, shallowRef } from "vue";
import { required } from '@/utils/validate-helper'
import {
  getInfo,
  projectInfoDelete,
  projectInfoGet,
  projectItemDescriptionConfigAddBatch,
  getProjectItemDescriptionConfigList
} from "@/api/xmlxwh";
import tableDalgo from "./tableDalgo.vue";
import { downloadBlob, formatDate, formatMonths } from "@/utils/projectTable";
import emgBox1 from "@/utils/ElMessageBox1";
import { ElMessageBox, ElMessage } from "element-plus";
import { FileSystemList } from "@/api/project/tenderReview";
import { optTextMap } from '@/utils/map'
import { inheritAttr } from '@/utils/v3'
import { useDicts } from '@/hooks'
const { proxy } = getCurrentInstance();
const { ownership } = proxy.useDict("ownership");
const { project_content_type, findText } = useDicts(proxy)

const tableDalgoRef = ref();
let visible = ref(false);
let isFlag = ref(1);
const title=ref('')
const FormList = ref({
  pageNum: 1,
  pageSize: 10,
});
let dataForm = reactive({
  date: formatMonths(new Date()),
  tableData: "",
  tableDateTwo: "",
  tableLoading: true,
});
let { date, tableData, tableDateTwo, tableLoading } = toRefs(dataForm);
const visible1 = ref(false)
const list = ref([])
const loading = ref(false)
const configOpts = reactive({
  type: '',
  text: ''
})
const form = reactive({
  projectTypeId: '',
  projectContentType: '',
  propertyKey: '',
  propertyName: '',
  sort: ''
})
const rules = reactive({
  projectContentType: required('项目内容类型'),
  propertyKey: required('项目内容'),
  propertyName: required('项目内容名称'),
  sort: required('排序')
})
let row = {}
const visible2 = ref(false)
const outRow = shallowRef({})
//获取列表数据
const getInfoList = async (prams) => {
  tableLoading.value = true;
  let { data, total } = await getInfo(prams);
  tableData.value = data;
  FormList.value.totals = total;
  setTimeout(() => {
    tableLoading.value = false;
  }, 1000);
};
//搜索
const search = (p) => {
  getInfoList(p);
};
defineExpose({ search });
// 查看上报数据
let typeList = ref({});
const onCheck = (row, ty,t) => {
  title.value=t
  if (ty == 1 || ty == 2) {
    projectInfoGet(row.id).then(({ code, data }) => {
      if (code == 200) {
        typeList.value = { ...data, type: ty };
        FileSystemList({
          refId: row.id,
          refType: "proProjectType",
        }).then(({ data }) => {
          typeList.value.fileList1 = data;
          visible.value = true;
        });
      }
    });
  } else if (ty == 3) {
    emgBox1(row.id, projectInfoDeleteM, "您确定删除吗？");
  } else if(ty === 0) {
    visible1.value = true
    outRow.value = row
    form.projectTypeId = row.id
    getList(row.id)
  }
};
//删除
const projectInfoDeleteM = async (id) => {
  let { code } = await projectInfoDelete(id);
  if(code==200){
    ElMessage({
          type: "success",
          message: '操作成功',
        });
     getInfoList(FormList.value);
  }
};
//撤回操作
const Returncnfiorm = async (id) => {
  let { code } = await projectInfoDelete(id);
};
function onModalClose() {
  visible.value = false;
  console.log("object", 3444)

  getInfoList(FormList.value);
}
function submit() {
  tableDalgoRef.value.submit();
}

const submit1 = async () => {
  const params = {
    projectTypeId: outRow.value.id,
    saveRequestList: list.value
  }
  const res = await projectItemDescriptionConfigAddBatch(params)
  if(res?.code !== 200) return
  proxy.$modal.msgSuccess('操作成功！')
  closeDialog()
}
const openDialog = (data, opt) => {
  row = data
  configOpts.type = opt
  configOpts.text = optTextMap.get(opt)
  visible2.value = true
  nextTick(() => {
    inheritAttr(data, form)
    console.log(form)
  })
}

const closeDialog = () => {
  visible1.value = false
}

const submit2 = () => {
  proxy.$refs.ruleForm.validate(async (valid, fields) => {
    if (valid) {
      if(configOpts.type === 'add') {
        list.value.push({ ...form })
      } else {
        inheritAttr(form, row)
      }
      // proxy.$modal.msgSuccess('操作成功！')
      closeDialog2()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const del = (row, index) => {
  proxy.$modal
  .confirm("是否确认删除？")
  .then(async () => {
    list.value.splice(index, 1)
  })
  .catch(() => {});
}

const closeDialog2 = () => {
  proxy.$refs.ruleForm.resetFields()
  visible2.value = false
  row = {}
}

const getList = async (id) => {
  const res = await getProjectItemDescriptionConfigList({ projectTypeId: id })
  if(res?.code !== 200) return
  list.value = res?.data || []
}

onMounted(() => {
  getInfoList(FormList.value);
});
</script>
<style lang="scss" scoped>
.water-analysis-page1 {
  height: 90vh;
  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    font-size: 18px;
    color: rgb(255, 255, 255);
    background-color: rgb(22, 132, 252);
    border-left: 1px solid rgb(22, 132, 252);
  }
  ::v-deep(.formItem) {
    .el-form-item__label {
      width: 110px;
      word-break: keep-all;
    }
  }
}
:deep(.el-dialog__body) {
  background-color: #eef1fb;
  height: 450px;
  overflow: hidden;
}

:deep(.noHidden) {
  .el-dialog__body {
    overflow: visible;
    height: auto;
  }
}

.btns {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
</style>