<template>
  <div class="page_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="page_content">
      <div class="inner-container apaas_scroll_min">
        <bg-form-gap title="注册信息"></bg-form-gap>
        <bg-detail-table2 class="register_info" :list="instanceData.approveBasicInfo">
          <!-- <template v-slot:approvalStatus="{ data }">
          <p class="detail-module">
            <span>{{ data.label }}</span>
            <span>{{ data.value }}</span>
          </p>
        </template> -->
        </bg-detail-table2>
        <bg-form-gap title="审批"></bg-form-gap>
        <div class="approve">
          <div class="header">
            <div class="left">
              <span class="approve_person">平台运营者审批</span>
              <span class="approve_status">待审批</span>
            </div>
            <div class="right">
              <span class="label">申请时间：</span>
              <span class="value">{{ instanceData.approveBasicInfo[5].value }}</span>
            </div>
          </div>
          <el-form
            ref="approveFormRef"
            :model="instanceData.formData"
            :rules="instanceData.rules"
            label-width="80px"
            class="approveForm">
            <el-form-item label="审批单位">
              <el-input disabled v-model="userInfo.organization_name" maxlength="20" />
            </el-form-item>
            <el-form-item label="审批人">
              <el-input disabled v-model="userInfo.contact_name" maxlength="20" />
            </el-form-item>
            <el-form-item label="审批结果" prop="status">
              <el-radio-group v-model="instanceData.formData.status">
                <el-radio :label="1"> 通过 </el-radio>
                <el-radio :label="2"> 驳回 </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审批意见" prop="comments">
              <el-input
                placeholder="请输入"
                rows="5"
                maxlength="200"
                v-model="instanceData.formData.comments"
                show-word-limit
                type="textarea" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="operate_btns">
        <el-button type="default" @click="cancel"> 取消 </el-button>
        <el-button type="primary" @click="save"> 保存 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onBeforeMount, computed, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
// import { dateStringTransform } from "@/services/helper";
import store from "@/store";

const route = useRoute();
const router = useRouter();
const approveFormRef = ref(null);
const instanceData = reactive({
  approveBasicInfo: [
    {
      key: "organization_name",
      label: "所属组织",
      value: "",
      // slot: "approvalStatus",
    },
    {
      key: "business_name",
      label: "业务系统名称",
      value: "",
    },
    {
      key: "system_account",
      label: "账号",
      value: "",
    },
    {
      key: "phone",
      label: "手机号",
      value: "",
    },
    {
      key: "develop_name",
      label: "开发厂商名称",
      value: "",
    },
    {
      key: "created_time",
      label: "提交时间",
      value: "",
    },
    {
      key: "contact_name",
      label: "联系人",
      value: "",
    },
    {
      key: "contact_phone",
      label: "联系人手机号",
      value: "",
    },
    {
      key: "business_desc",
      label: "业务系统描述",
      value: "",
    },
  ],
  formData: {
    status: "",
    comments: "",
  },
  rules: {
    status: [
      {
        required: true,
        message: "请选择",
      },
    ],
  },
});
const userInfo = computed(() => {
  return store.state.userInfo;
});
onBeforeMount(() => {
  getApproveInfo();
});
const getApproveInfo = () => {
  axios
    .get(`/apaas/system/v5/user/approval/detail/${route.query.id}`)
    .then((res) => {
      if (res.data.code == 200) {
        const result = res.data.data || {};
        instanceData.approveBasicInfo.forEach((item) => {
          // if (item.key === "created_time") {
          //   item.value = dateStringTransform(result[item.key]);
          //   return;
          // }
          item.value = result[item.key];
        });
      } else {
        ElMessage.error(res.data.data);
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
//取消
const cancel = () => {
  router.push("/develop/systemApproval");
};
//保存
const save = () => {
  approveFormRef.value.validate((val) => {
    if (val) {
      const params = {
        ...instanceData.formData,
        id: +route.query.id,
      };
      axios.post(`/apaas/system/v5/user/approval`, params).then((res) => {
        if (res.data.code == "200") {
          ElMessage.success("操作成功");
          router.push("/develop/systemApproval");
        } else {
          ElMessage.error(res.data.data);
        }
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.page_content {
  position: relative;
  padding: 24px 0 80px 24px;

  .inner-container {
    width: 100%;
    height: 100%;
    padding-bottom: 16px;
    overflow: auto;
  }
  .register_info {
    margin-bottom: 24px;
    width: 960px;
  }
  .approve {
    overflow: hidden;
    width: 1127px;
    height: 378px;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #e3e4ef;

    .header {
      display: flex;
      justify-content: space-between;
      height: 38px;
      padding: 0 16px;
      border-bottom: 1px solid #e3e4ef;
      background-color: #f9fafc;

      .left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 150px;
        height: 100%;
        .approve_person {
          display: inline-block;
          width: 98px;
          font-size: 14px;
          font-weight: 600;
          color: #242c43;
        }
        .approve_status {
          display: inline-block;
          width: 46px;
          height: 18px;
          font-size: 12px;
          text-align: center;
          color: #e56600;
          background-color: #fcf0e6;
          border-radius: 3px;
          border: solid 1px #f2b380;
        }
      }
      .right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 210px;
        height: 100%;
        font-size: 14px;
        color: #7784a6;
        .value {
          color: #242c43;
        }
      }
    }
    .approveForm {
      padding: 24px 24px 0 24px;
      :deep() .el-form-item {
        margin-bottom: 24px;
      }
      :deep() .el-form-item__label,
      :deep() .el-radio__label {
        color: var(--el-text-color-primary);
      }
    }
  }
  .operate_btns {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    padding-right: 16px;
    line-height: 64px;
    text-align: right;
    border-top: solid 1px #e6e9ef;
    .el-button {
      width: 92px;
      & + .el-button {
        margin-left: 16px;
      }
    }
  }
}
.apaas_scroll_min::-webkit-scrollbar {
  width: 6px;
  height: 4px;
}
</style>
