<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2022-11-16 21:01:51
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2022-12-07 08:42:20
 * @FilePath: /fe-manage/src/views/examine/ProjectReviewedN.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 待审核项目页面 projectviewedn-->
<template>
  <div class="projectviewedn">
    <div class="tmpl">
      <div class="tmpl_header">
        <div class="tmplh_inp">
          <div class="inpbox">
            <div class="inpbox1">
              <a-input
                v-model:value="valueproj"
                style="
                  width: 270px;
                  height: 40px;
                  border-radius: 8px;
                  margin-right: 14px;
                "
                placeholder="请输入项目名称/所属项目"
              />
            </div>
            <div class="inpbox1">
              <a-input
                v-model:value="valuename"
                style="
                  width: 270px;
                  height: 40px;
                  border-radius: 8px;
                  margin-right: 14px;
                "
                placeholder="请输入项目经理"
              />
            </div>
            <div class="inpbox1">
              <a-input
                v-model:value="valuecreater"
                style="
                  width: 270px;
                  height: 40px;
                  border-radius: 8px;
                  margin-right: 14px;
                "
                placeholder="请输入创建人"
              />
            </div>
            <!--            <div class="inpbox1">-->
            <!--              <a-range-picker v-model:value="valueDate" style="border-radius: 8px; height: 40px; margin-left: 5px"-->
            <!--                :placeholder="['      开始时间', '        结束时间']" @change="rankTimeChange" />-->
            <!--            </div>-->
            <div class="select addTimeBox">
							<div class="addTime">提交时间：</div>
							<a-range-picker
								v-model:value="searchParam"
								style="width: 420px"
								format="YYYY-MM-DD"
								separator="至"
								:placeholder="['      开始时间', '        结束时间']"
							/>
						</div>
          </div>
        </div>
        <div class="tmplh_btn" style="margin-top:50px;">
          <div class="btn btn1" @click="getProjList">
            <div class="search"></div>
            <div class="btnText btnText1">搜索</div>
          </div>
          <div class="btn btn2" @click="reset">
            <div class="search"></div>
            <div class="btnText btnText2">重置</div>
          </div>
        </div>
      </div>
      <div class="tmpl_body">
        <div class="tmpl_tabbox">
          <a-table
            :columns="columns1"
            :data-source="tableData1"
            :loading="loading"
            expandRowByClick="true"
            @expand="expandTable"
            :pagination="false"
            :scroll="{ x: 1300 }"
          />
        </div>
        <div class="tableBox">
          <div class="pa">
            <a-pagination
              v-if="total > 10"
              :showSizeChanger="false"
              show-quick-jumper
              :pageSize="pageSize"
              v-model:current="currentPage"
              :total="total"
              class="pagination"
              @change="changePagination"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 审核项目页面 -->
    <project-audit
      v-model:ProjAuditvisible="ProjAuditvisible"
      v-model:chooseProject="chooseProject"
      v-model:chooseCreateId="chooseCreateId"
      v-model:chooseCreater="chooseCreater"
      v-model:finishdFun="getProjList"
    />
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from "vue";
import ProjectAudit from "../../components/drawers/ProjectAudit";
import { auditlist } from "../../api/indexAudit";
import dayjs from "dayjs";

export default {
  name: "ProjectViewedN",
  components: { ProjectAudit },
  setup() {
    const state = reactive({
      loading:false,
      optionsproj: [
        {
          value: "jack",
          label: "Jack",
        },
        {
          value: "rose",
          label: "rose",
        },
      ],
      valueproj: null,
      valuecreater: null,
      valuename: null,
      valueDate: undefined,
      ProjAuditvisible: false,
      currentPage: 1,
      total: null,
      pageSize: 10,
      chooseProject: null, //要审核的项目
      chooseCreateId: null,
      chooseCreater: null,
      columns1: [
       // {
        //  title: "序号",
        //  dataIndex: "number",
       //   key: "number",
       //   align: "center",
      //  },
        {
          title: "项目名称",
          dataIndex: "name",
          key: "name",
          align: "center",
          ellipsis: true,
          width:"20%",
        },
        {
          title: "所属项目",
          dataIndex: "topName",
          key: "topName",
          align: "center",
          ellipsis: true,
          width:"20%",
          customRender: ({ record: { gaName, faName, name } }) => (
              <div>
                {faName
                    ? gaName !== null
                        ? gaName + "/" + faName
                        : faName
                    : name}
              </div>
          ),
        },
        {
          title: "项目经理",
          dataIndex: "manager",
          key: "manager",
          align: "center",
          ellipsis: true,
          width:"10%",
        },
        {
          title: "审核状态",
          dataIndex: "status",
          key: "status",
          align: "center",
          ellipsis: true,
          width:"10%",
          customRender: () => <div>待审核</div>,
        },
        {
          title: "创建人",
          dataIndex: "createName",
          key: "createName",
          align: "center",
          ellipsis: true,
          width:"10%",
        },
        {
          title: "提交时间",
          dataIndex: "processTime",
          key: "processTime",
          align: "center",
          ellipsis: true,
          width:"10%",
        },

        {
          title: "操作",
          dataIndex: "opt",
          key: "opt",
          align: "center",
          ellipsis: true,
          width:"20%",
          customRender: (value) => {
            return (
              <div>
                <span
                  style="cursor:pointer;color:#387DF7"
                  onClick={() => {
                    showProjAudit(
                      value.record.projectId,
                      value.record.createId,
                      value.record.createName
                    );
                  }}
                >
                  审核
                </span>
              </div>
            );
          },
        },
      ],
      tableData1: [],
      searchParam:[]
    });
    const showProjAudit = (id, createId, creater) => {
      state.ProjAuditvisible = true;
      state.chooseProject = id;
      state.chooseCreateId = createId;
      state.chooseCreater = creater;
    };
    const getProjList = () => {
      state.loading=true
      let objn = {
        beginTime:state.searchParam.length!==0? dayjs(new Date(state.searchParam[0]).getTime()).format("YYYY-MM-DD"): "",
				endTime:state.searchParam.length!==0? dayjs(new Date(state.searchParam[1]).getTime()).format("YYYY-MM-DD"): "",
        createName: state.valuecreater,
        manager: state.valuename,
        name: state.valueproj,
        pageNo: state.currentPage,
        pageSize: state.pageSize,
        status: 1,
      };
      console.log(objn)
      auditlist(objn)
        .then((res) => {
          console.log("获取待审核项目成功", res);
          let result = res.data.data;
          state.total = result.total;
          // state.tableData1 = result.rows

          let numdata = [];
          result.rows.map((value, index) => {
            let obj = value;
            obj.number = index + 1 + (state.currentPage - 1) * 10;
            numdata.push(obj);
          });

          state.tableData1 = numdata;
          state.loading=false
          // setProjList(result.rows);
        })
        .catch((err) => {
          console.log("获取待审核项目失败", err);
        });
    };
    const changePagination = (pagina) => {
      state.currentPage = pagina;
      getProjList();
    };
    const reset = () => {
      state.searchParam = [];
      (state.valueproj = ""),
        (state.valuecreater = ""),
        (state.valuename = ""),
        (state.valueDate = undefined);
      getProjList();
    };
    onMounted(() => {
      getProjList();
    });
    return {
      ...toRefs(state),
      showProjAudit,
      getProjList,
      changePagination,
      reset,
    };
  },
};
</script>
<style lang="scss">
.addTimeBox {
	top: 4px;
	position: relative;
	display: flex;
	align-items: center;

	.addTime {
		position: absolute;
		z-index: 10;
		margin-left: 10px;
		color: rgba(0, 0, 0, 0.4);
	}

	.ant-picker {
		padding-left: 85px;
	}

	.ant-picker-range .ant-picker-active-bar {
		margin-left: 85px;
	}
}

.projectviewedn {
  width: 100%;

  .tmpl {
    width: 100%;

    .tmpl_header {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 32px;

      margin-left: 32px;
      margin-right: 32px;

      .tmplh_inp {
        .inpbox {
          display: flex;
          flex-wrap: wrap;
          margin-top: 42px;

          .inpbox1 {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 24px;
            margin-top: 10px;

            .ant-select-selector {
              border-radius: 8px;
              width: 270px;
              height: 40px;
              padding-top: 5px;
            }

            span {
              white-space: nowrap;
            }
          }
        }
      }

      .tmplh_btn {
        display: flex;
        // margin-left: 38px;
        margin-top: 32px;

        .btn {
          padding: 0px 26px 0px 26px;
          height: 38px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 14px;
          cursor: pointer;
          flex-shrink: 0;

          .search {
            background-size: 100%;
          }

          .btnText {
            font-size: 14px;
            font-weight: 400;
            line-height: 36px;
            margin-left: 5px;
          }

          .btnText1 {
            color: rgb(255, 255, 255);
          }

          .btnText2 {
            color: rgba(64, 158, 255, 1);
          }
        }

        .btn1 {
          background: #4ea6ff;

          .search {
            width: 15px;
            height: 17px;
            background-image: url("../../assets/images/courseManage/search0.png");
          }
        }

        .btn2 {
          background: #ffffff;
          border: 1px solid #4ea6ff;

          .search {
            width: 16px;
            height: 18px;
            background-image: url("../../assets/images/courseManage/reset1.png");
          }
        }

        .btn1:hover {
          background: rgb(255, 255, 255);
          border: 1px solid #4ea6ff;

          .search {
            background-image: url("../../assets/images/courseManage/search1.png");
          }

          .btnText {
            color: rgba(64, 158, 255, 1);
          }
        }

        .btn2:hover {
          background: rgba(64, 158, 255, 1);

          .search {
            background-image: url("../../assets/images/courseManage/reset0.png");
          }

          .btnText {
            color: #ffffff;
          }
        }
      }
    }

    .tmpl_body {
      padding: 0px 30px;

      .tmpl_tabbox {
        .operation {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #4ea6ff;

          .nselect {
            justify-content: center;
            align-items: center;
            display: flex;

            .jc {
              margin-left: 20px;
              white-space: nowrap;
              cursor: pointer;
            }
          }
        }
      }

      .pa {
        width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>