<template>
  <div class="cardsDetails">
    <div class="tableBox">
      <n-data-table
        :data="data"
        :columns="columns"
        :single-line="false"
        remote="true"
        :pagination="pagination"
      />
    </div>
    <n-modal
      v-model:show="showModal"
      :show-icon="false"
     preset="card"
      title="问题情况"
      :style="{ width: '800px' }"
    >
      <n-button
        style="margin-bottom: 10px"
        v-if="info.doneStatus == 0"
        @click="handleClick('add')"
        >新增问题</n-button
      >
      <n-data-table
        :data="modalData"
        :columns="modalColumns"
        :single-line="false"
      />
    </n-modal>
    <n-modal
      v-model:show="showModal2"
      :show-icon="false"
     preset="card"
      title="新增问题"
      :style="{ width: '500px' }"
    >
      <n-form
        ref="formRef"
        :label-width="80"
        label-placement="left"
        :model="formValue"
        :rules="rules"
      >
        <n-form-item label="问题描述" path="problemDes">
          <n-input
            v-model:value="formValue.problemDes"
            placeholder="输入问题描述"
          />
        </n-form-item>
        <n-form-item label="问题图片" path="fileList">
          <n-upload
            v-model:file-list="formValue.fileList"
            accept=".jpg,.png,.jpeg,.svg,.gif"
          >
            <n-button>上传问题图片</n-button>
          </n-upload>
        </n-form-item>
      </n-form>
      <template #action>
        <n-space>
          <n-button @click="() => (showModal2 = false)">取消</n-button>
          <n-button
            type="primary"
            @click="handleClick('sure')"
            >确定</n-button
          >
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script>
import { reactive, ref, toRefs, h, onMounted } from "vue";
import { NInput, NButton, NTag, useDialog, NImage } from "naive-ui";

export default {
  name: "cardsDetails",
  props: {
    info: Object,
    title: String,
  },
  setup(props) {
    const dialog = useDialog();
    const data = ref([]);
    const state = reactive({
      columns: [
        {
          title: "类别",
          key: "type",
          align: "center",
          rowSpan: (rowData, rowIndex) => (rowIndex === 0 ? 10 : 1),
        },
        {
          title: "赋值",
          key: "assignment",
          align: "center",
          width: "70",
          rowSpan: (rowData, rowIndex) => (rowIndex === 0 ? 10 : 1),
        },
        {
          title: "序号",
          key: "No",
          align: "center",
          rowSpan: (rowData, rowIndex) =>
            rowIndex === 1 ? 2 : rowIndex === 3 ? 2 : rowIndex === 5 ? 3 : 1,
          // rowSpan: (rowData, rowIndex) => (rowIndex === 3 ? 2 : 1),
        },
        {
          title: "项目",
          key: "project",
          align: "center",
          rowSpan: (rowData, rowIndex) =>
            rowIndex === 1 ? 2 : rowIndex === 3 ? 2 : rowIndex === 5 ? 3 : 1,
          // rowSpan: (rowData, rowIndex) => (rowIndex === 3 ? 2 : 1),
        },
        {
          title: "考核内容",
          key: "content",
          align: "center",
          rowSpan: (rowData, rowIndex) =>
            rowIndex === 3 ? 2 : rowIndex === 5 ? 3 : 1,
        },
        {
          title: "标准分值",
          key: "standardScore",
          align: "center",
          rowSpan: (rowData, rowIndex) =>
            rowIndex === 3 ? 2 : rowIndex === 5 ? 3 : 1,
        },

        {
          title: "评分标准",
          key: "scoringCriteria",
          align: "center",
          // rowSpan: (rowData, rowIndex) => (rowIndex === 3 ? 2 : 1),
        },
        {
          title: "实际得分",
          key: "score",
          align: "center",
          render(row, index) {
            if (props.info.doneStatus == 1) {
              return h(
                NTag,
                {
                  bordered: false,
                  color: {
                    color: "transparent",
                  },
                },
                {
                  default: row.score,
                }
              );
            } else {
              return h(NInput, {
                value: row.score,
                onUpdateValue(v) {
                  data.value[index].score = v;
                },
              });
            }
          },
        },
        {
          title: "发现问题",
          key: "question",
          align: "center",
          render(row, index) {
            return h(
              NButton,
              {
                text: true,
                size: "small",
                onClick: () => handleClick("show", row),
              },
              { default: () => row.question }
            );
          },
        },
      ],
      pagination: {
        page: 1,
        pageSize: 10,
        showSizePicker: true,
        pageSizes: [10, 20, 50],
        showQuickJumper: true,
        onChange: (page) => {
          pagination.page = page;
        },
        onPageSizeChange: (pageSize) => {
          pagination.pageSize = pageSize;
          pagination.page = 1;
        },
      },
      // 弹窗相关
      showModal: false,
      modalColumns: [],
      modalData: [],
      // 新增弹窗
      showModal2: false,
      formValue: {
        problemDes: "",
        fileList: [],
      },
      //查看图片弹窗
      src: "",
    });
    // 获取表格数据
    const getTableData = () => {
      data.value = [
        {
          type: "河道水利工程运营",
          assignment: 150,
          No: 1,
          project: "河道安全",
          standardScore: "10分",
          content:
            "在设计洪水标准（水位或流量）以下无工程病害、 无工程隐患，河道、堤防工程无安全事故。",
          scoringCriteria:
            "1.各类工程中有病险及轻微隐患的，每处扣2分； 2.发生较大隐患的，每起扣10分。",
          score: "10",
          question: 1,
        },
        {
          type: "河道水利工程运营",
          assignment: 150,
          No: 2,
          project: "防汛管理",
          standardScore: "10分",
          content:
            "认真做好汛前防汛检查；落实各项度汛措施；各种基础资料、设备齐全,且有专人管理；重要险工段应有抢险预案，各种图表（包括防汛指挥图、调度运用计划图表及险工段、物资调度等图表）准确规范且悬挂整齐、美观，交通、运输、通讯、报警等设施齐全，汛期畅通。",
          scoringCriteria:
            "防汛岗位责任制不落实扣10分；防汛办事机构不健全扣10分；调度运用计划执行不当的扣5分。",
          score: "10",
          question: 0,
        },
        {
          type: "河道水利工程运营",
          assignment: 150,
          No: 2,
          project: "防汛管理",
          standardScore: "10分",
          content:
            "各种防汛责任制落实，防汛岗位责任制明确；防汛办事机构健全；正确执行经批准的汛期调度运用计划；抢险队伍机动能力强、人员素质高。",
          scoringCriteria:
            "1.未作汛前检查的扣2分； 2.度汛措施不落实的扣2分； 3.基础资料、设备不全管理不当扣2分； 4.重要险工段无抢险预案的扣",
          score: "10",
          question: 0,
        },
        {
          type: "河道水利工程运营",
          assignment: 150,
          No: 3,
          project: "河道清障",
          standardScore: "30分",
          content:
            "道管护范围内阻水建，筑物的数量、位置、设障单位等情况清楚；及时提出清障方案并负责完成清障任务。",
          scoringCriteria:
            "未建立阻水建筑物情况说明表的扣5分；未建立清障计划或方案的扣5分；满分10分。",
          score: "10",
          question: 1,
        },
        {
          type: "河道水利工程运营",
          assignment: 150,
          No: 3,
          project: "河道清障",
          standardScore: "30分",
          content:
            "道管护范围内阻水建，筑物的数量、位置、设障单位等情况清楚；及时提出清障方案并负责完成清障任务。",
          scoringCriteria: "发现一处未及时清理扣2分，满分20分；",
          score: "16",
          question: 1,
        },
        {
          type: "河道水利工程运营",
          assignment: 150,
          No: 4,
          project: "河道水工建筑物",
          standardScore: "10分",
          content:
            "河道整治工程（护坡、护岸、护脚等）质量达到设计要求； 无缺损、无坍塌、无松动； 工程整洁美观、道路畅通。",
          scoringCriteria:
            "无河道整治工程（护坡、护岸、护脚等）巡检记录表的扣2分；",
          score: "2",
          question: 0,
        },
        {
          type: "河道水利工程运营",
          assignment: 150,
          No: 4,
          project: "河道水工建筑物",
          standardScore: "10分",
          content:
            "河道整治工程（护坡、护岸、护脚等）质量达到设计要求； 无缺损、无坍塌、无松动； 工程整洁美观、道路畅通。",
          scoringCriteria: "无工程缺损、坍塌等工程处理措施手册的扣2分",
          score: "2",
          question: 0,
        },
        {
          type: "河道水利工程运营",
          assignment: 150,
          No: 4,
          project: "河道水工建筑物",
          standardScore: "10分",
          content:
            "河道整治工程（护坡、护岸、护脚等）质量达到设计要求； 无缺损、无坍塌、无松动； 工程整洁美观、道路畅通。",
          scoringCriteria:
            "工程缺损、坍塌未及时处理的，每发现一次未及时处理扣3分，总共6分；",
          score: "6",
          question: 0,
        },
      ];
      console.log(data.value);
    };
    // 弹窗展示
    const handleClick = (type, row, i) => {
      switch (type) {
        case "show":
          state.showModal = true;
          if (props.info.doneStatus == 0) {
            state.modalColumns = [
              {
                title: "问题描述",
                key: "problemDes",
              },
              {
                title: "现场图片",
                key: "imgList",
                render(row) {
                  const img = row.imgList.map((item, index) => {
                    return h(NImage, {
                      width: 48,
                      src: item,
                      style: {
                        margin: "5px",
                      },
                    });
                  });
                  return img;
                },
              },
              {
                title: "操作",
                key: "actions",
                render(row) {
                  return h(
                    NButton,
                    {
                      text: true,
                      size: "small",
                      type: "primary",
                      onClick: () => handleClick("delete", row),
                    },
                    { default: () => "移除" }
                  );
                },
              },
            ];
            getModalData();
          } else {
            state.modalColumns = [
              {
                title: "问题描述",
                key: "problemDes",
              },
              {
                title: "建议修改措施",
                key: "proposal",
              },
              {
                title: "现场图片",
                key: "imgList",
                render(row) {
                  const img = row.imgList.map((item, index) => {
                    return h(NImage, {
                      width: 48,
                      src: item,
                      style: {
                        margin: "5px",
                      },
                    });
                  });
                  return img;
                },
              },
            ];
            getModalData();
          }
          break;
        case "add":
          state.showModal2 = true;
          break;
        case "delete":
          console.log(1111);
          dialog.info({
            title: "提示",
            content: `您想移除${row.problemDes}吗?`,
            positiveText: "确定",
            negativeText: "取消",
            onPositiveClick: () => {},
            onNegativeClick: () => {},
          });
          break;
      }
      // if (props.info.doneStatus == 1 && row.question != 0) {
      //   state.showModal = true;
      //   getModalData();
      // }else{

      // }
    };
    // 获取弹窗展示数据
    const getModalData = () => {
      state.modalData = [
        {
          problemDes: "COD故障",
          proposal: "检查监测仪表，联系生产厂家",
          imgList: [
            "src/assets/Imgs/weixiufenxi1.png",
            "src/assets/Imgs/weixiufenxi2.png",
            "src/assets/Imgs/weixiufenxi3.png",
          ],
        },
        {
          problemDes: "4-6精细格栅数据传输不正常",
          proposal: "检查监测仪表，联系生产厂家",
          imgList: ["src/assets/Imgs/weixiufenxi1.png"],
        },
      ];
    };
    onMounted(() => {
      getTableData();
    });
    return {
      data,
      ...toRefs(state),
      getTableData,
      handleClick,
    };
  },
};
</script>

<style lang="less" scoped>
.cardsDetails {
  .btnBox {
    display: flex;
    justify-content: flex-end;
  }
  .tableBox {
    margin-top: 10px;
    padding: 10px;
    width: 100%;
    border: 1px solid;
    border-color: var(--color-Invert);
    .title {
      padding: 0 20px;
      display: flex;
      align-items: center;
      height: 50px;
      border-bottom: 1px solid;
      border-color: var(--color-Invert);
      .name {
        font-size: 22px;
        font-family: Source Han Sans CN;
      }
      .common {
        width: 120px;
        height: 46px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-radius: 5px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        color: #ffffff;
        .font16 {
          font-size: 16px;
        }
      }
      .score {
        margin: 0 10px 0 30px;
        background: url("../../../../assets/Imgs/total_score_bg.png") no-repeat
          center;
      }
      .ques {
        background: url("../../../../assets/Imgs/ques_bg.png") no-repeat center;
      }
    }
  }
}
</style>