<template>
  <div id="resultsPublicity_IssueResults">
    <div id="ButtonsList">
      <n-space>
        <n-button type="info" size="small" @click="GongZuo()"> 发送 </n-button>
        <n-button type="info" size="small" @click="success()"> 回退 </n-button>
        <n-button type="info" size="small" @click="Seenow()">
          查看当前节点
        </n-button>
        <n-button type="info" size="small" @click="SeeHistory()">
          查看历史记录
        </n-button>
        <n-button @click="clearCom()" size="small">返回</n-button>
      </n-space>
    </div>
    <div id="InputBox">
      <n-space>
        <div></div>
        <div class="InputBox1 InputBox1_1">
          <p class="P1">参考对象</p>
          <p class="P2">西渠闸门</p>
        </div>
        <div class="InputBox1 InputBox1_2">
          <p class="P1">考核类型</p>
          <p class="P2">常规考核</p>
        </div>
        <div class="InputBox1 InputBox1_3">
          <p class="P1">考核分数</p>
          <p class="P2">78.5</p>
        </div>
        <div class="InputBox1 InputBox1_4">
          <p class="P1">发现问题数量</p>
          <p class="P2">13</p>
        </div>
      </n-space>
      <div class="TextearyInput">
        <n-input
          v-model:value="value"
          type="textarea"
          placeholder="整改意见："
          :autosize="{
            minRows: 4,
            maxRows: 4,
          }"
        />
      </div>
    </div>
    <div id="RI_Content">
      <n-space>
        <div
          class="RI_Content_btn"
          :class="{ RI_Content_btn_click: isActive }"
          @click="RI_Content_btnCLick(true)"
        >
          考核成绩一览表
        </div>
        <div
          class="RI_Content_btn"
          :class="{ RI_Content_btn_click: !isActive }"
          @click="RI_Content_btnCLick(false)"
        >
          整改问题清单
        </div>
      </n-space>
      <div id="ComBox">
        <CardsDetails :info="cardInfo" title="" v-if="isActive" />
        <RICom v-else />
      </div>
    </div>
    <n-modal v-model:show="showModal">
      <n-card
        style="width: 1200px"
        title="当前审批节点"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <n-image width="1200" src="src/assets/Imgs/lingshi/123.png" />
        <template #footer>
          当前节点参与者： 张三 李四
          <n-space justify="end">
            <n-button type="info" @click="showModal = false"> 确定 </n-button>
            <n-button @click="showModal = false">取消</n-button>
          </n-space>
        </template>
      </n-card>
    </n-modal>

    <n-modal v-model:show="showModal2">
      <n-card
        style="width: 800px"
        title="工作流发送"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <n-form
          ref="formRef"
          :model="model"
          label-placement="left"
          label-width="auto"
          require-mark-placement="right-hanging"
          :size="size"
          :style="{
            maxWidth: '640px',
          }"
        >
          <n-form-item label="审批意见:">
            <n-input
              v-model:value="model.textareaValue"
              placeholder="填写审批意见"
              type="textarea"
              :autosize="{
                minRows: 3,
                maxRows: 5,
              }"
            />
          </n-form-item>
          <n-form-item label="选择下一步参与者:">
            <n-checkbox-group v-model:value="model.cities">
              <n-space item-style="display: flex;">
                <n-checkbox value="Beijing" label="张三" />
                <n-checkbox value="Shanghai" label="李四" />
                <n-checkbox value="Guangzhou" label="王五" />
              </n-space>
            </n-checkbox-group>
          </n-form-item>
        </n-form>
        <template #footer>
          <n-space justify="end">
            <n-button type="info" @click="showModal2 = false"> 确定 </n-button>
            <n-button @click="showModal2 = false">取消</n-button>
          </n-space>
        </template>
      </n-card>
    </n-modal>

    <n-modal v-model:show="showModal3">
      <n-card
        style="width: 1400px"
        title="审批记录"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <n-data-table
          :data="modalData"
          :columns="modalColumns"
          :single-line="false"
        />
        <template #footer>
          <n-space justify="end">
            <n-button type="info" @click="showModal3 = false"> 确定 </n-button>
            <n-button @click="showModal3 = false">取消</n-button>
          </n-space>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from "vue";
import { useMessage } from "naive-ui";

import CardsDetails from "./components/CardsDetails_copy.vue";
import RICom from "./components/RI_com.vue";
export default {
  name: "resultsPublicity_IssueResults",
  components: {
    CardsDetails,
    RICom,
  },
  setup(props, context) {
    const message = useMessage();
    const allData = reactive({
      value: null,
      isActive: true,
      cardInfo: {
        doneStatus: 1,
      },
      showModal: false,
      showModal2: false,
      showModal3: false,
      model: {
        textareaValue: null,
        cities: ["Beijing"],
      },
      modalColumns: [
        {
          title: "序号",
          key: "A0",
          width: 80,
          align: "center",
        },
        {
          title: "推进节点",
          key: "A1",
          width: 150,
          align: "center",
        },
        {
          title: "下一步开始",
          key: "A2",
          width: 200,
          align: "center",
        },
        {
          title: "时间",
          key: "A3",
          width: 200,
          align: "center",
        },
        {
          title: "处理人",
          key: "A4",
          width: 200,
          align: "center",
        },
        {
          title: "处理意见",
          key: "A5",
          align: "center",
        },
      ],
      modalData: [
        {
          A0: "1",
          A1: "发送考核内容",
          A2: "开始考核",
          A3: "2022/03/08",
          A4: "张三",
          A5: "开始考核",
        },
        {
          A0: "2",
          A1: "开始考核",
          A2: "考核检查审批",
          A3: "--",
          A4: "处理中",
          A5: "",
        },
        {
          A0: "3",
          A1: "",
          A2: "",
          A3: "",
          A4: "",
          A5: "",
        },
      ],
    });
    function RI_Content_btnCLick(bol) {
      allData.isActive = bol;
    }
    function success() {
      message.success("操作成功");
    }
    function Seenow() {
      allData.showModal = true;
    }
    function GongZuo() {
      allData.showModal2 = true;
    }
    function SeeHistory() {
      allData.showModal3 = true;
    }
    onMounted(() => {});
    function clearCom() {
      context.emit("update:FatherTalk");
    }
    return {
      clearCom,
      ...toRefs(allData),
      RI_Content_btnCLick,
      success,
      Seenow,
      GongZuo,
      SeeHistory,
    };
  },

  methods: {},
};
</script>
<style lang="less" scoped>
#resultsPublicity_IssueResults {
  width: 100%;
  height: 100%;

  #ButtonsList {
    width: 100%;
    height: 42px;
    line-height: 42px;
    display: inline-block;
  }
  #InputBox {
    display: inline-block;
    width: 100%;
    height: 230px;

    .InputBox1 {
      width: 370px;
      height: 110px;
      line-height: 40px;
      font-size: 16px;

      .P1 {
        width: 237px;
        height: 60px;
        line-height: 53px;
        font-size: 36px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #fefefe;
        margin-left: 130px;
        text-align: center;
      }
      .P2 {
        width: 237px;
        height: 40px;
        font-size: 31px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
        margin-left: 130px;
        text-align: center;
      }
    }
    .InputBox1_1 {
      background: url("../../../assets/Imgs/jixiao/kaoheduixiang.png");
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
    .InputBox1_2 {
      background: url("../../../assets/Imgs/jixiao/kaoheleixing.png");
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
    .InputBox1_3 {
      background: url("../../../assets/Imgs/jixiao/kaohefenshu.png");
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
    .InputBox1_4 {
      background: url("../../../assets/Imgs/jixiao/faxianwenti.png");
      background-size: 100% auto;
      background-repeat: no-repeat;
    }

    .TextearyInput {
      width: 1520px;
      height: 100px;
      float: left;
      margin-left: 10px;
      margin-top: 10px;
    }
  }

  #RI_Content {
    display: inline-block;
    width: 100%;
    height: calc(100% - 270px);
    box-sizing: border-box;
    padding-top: 10px;
    // border: 1px solid;

    .RI_Content_btn {
      width: 124px;
      height: 29px;
      border-radius: 6px;
      background: #e4eaec;
      text-align: center;
      line-height: 29px;
      color: #999999;
      cursor: pointer;
    }

    .RI_Content_btn_click {
      background: #145bf7;
      color: white;
    }
    #ComBox {
      width: 100%;
      height: calc(100% - 30px);
      overflow: auto;
    }
  }
}
</style>