<template>
  <div class="detail_contain">
    <p class="now_page_title">
      我的服务 / 审批的服务 /
      <span>服务详情</span>
    </p>
    <div class="info_contain">
      <service-header :data="service_header_arr"></service-header>
      <div class="type_box">
        <div class="type_title">
          <div
            v-for="(item, index) in service_arr"
            :key="index + 1000"
            class="type_select"
            @click="now_service = index"
            :style="
              now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
            "
          >
            {{ item }}
          </div>
        </div>
        <div class="type_box_select">
          <info-list
            @download="download"
            :list_arr="now_service == 0 ? list_arr : servicead_arr[now_user]"
          >
            <table-um
              :headers="header_arr"
              :datas="zd_table_arr"
              slot="zd_table"
            ></table-um>
            <process-card
              type="approval"
              :data="approval_arr[now_user]"
              slot="sp_card"
              v-if="
                (now_user == 1 &&
                  service_header_arr['first'][2].text !== '待审批') ||
                now_user == 2
              "
            ></process-card>
            <div
              class="info_contain1"
              slot="sp_result"
              v-if="service_header_arr['first'][2].text == '待审批'"
            >
              <el-form
                ref="form"
                :rules="rules"
                :model="form"
                label-width="0px"
              >
                <el-form-item prop="result">
                  <p class="formname">审批结果：</p>
                  <el-select v-model="form.result" placeholder="请选择">
                    <el-option
                      v-for="item in resultoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="option">
                  <p class="formname">审批意见：</p>
                  <el-input
                    v-model="form.option"
                    placeholder="请输入审批意见"
                  ></el-input>
                </el-form-item>
                <el-form-item class="btnsty">
                  <el-button @click="onSubmit('form')" class="right"
                    >提交</el-button
                  >
                  <el-button class="right" @click="backpage">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </info-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import serviceHeader from "@/components/service-header";
import infoList from "@/components/infoList";
import tableUm from "@/components/table/table-um";
import processCard from "@/components/process-card";
import { mapGetters, mapState } from "vuex";
export default {
  props: {},
  components: {
    serviceHeader,
    infoList,
    tableUm,
    processCard,
  },
  data() {
    return {
      form: {
        result: "",
        option: "",
      },
      id: "",
      zd_table_arr: [],
      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
      rules: {
        result: [{ required: true, message: "请选择意见", trigger: "change" }],
        option: [
          { required: true, message: "请输入意见", trigger: "blur" },
          {
            min: 0,
            max: 200,
            message: "长度应小于200个字符",
            trigger: "blur",
          },
        ],
      },
      resultvalue: "",
      resultoptions: [
        {
          label: "通过",
          value: 1,
        },
        {
          label: "不通过",
          value: -1,
        },
      ],
      approval_arr: [
        [],
        [],
        [
          // {
          //     title:'一级审批',
          //     result:'',
          //     arr:[
          //         {
          //             title:'审批时间：',
          //             info:''
          //         },
          //         {
          //             title:'审批单位：',
          //             info:''
          //         },
          //         {
          //             title:'审批人：',
          //             info:''
          //         },
          //         {
          //             title:'审批意见：',
          //             info:''
          //         },
          //     ]
          // },
        ],
      ],
      header_arr: [
        {
          prop: "name",
          label: "字段名称",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "field_type",
          label: "字段编码",
          width: "100px",
          align: "center",
        },
        {
          prop: "show_type",
          label: "字段类型",
          width: "100px",
          align: "center",
        },
        {
          prop: "descript",
          label: "字段说明",
          minWidth: "30%",
          align: "left",
        },
        {
          prop: "example",
          label: "字段示例数值",
          width: "120px",
          align: "left",
        },
      ],
      color_arr: ["#e15260", '"#ef9433', "#515fe7"],
      service_header_arr: {
        id: "",
        isMap: false,
        isProcess: false,
        name: "",
        first: [
          {
            name: "服务类型",
            text: "",
          },
          {
            name: "服务领域",
            text: "",
          },
          {
            name: "审批状态",
            text: "",
            color: "#ef9433",
          },
        ],
        second: [
          {
            name: "申请时间",
            text: "",
          },
        ],
        fixed: false,
      },
      service_arr: ["服务申请信息", "服务审批"],
      now_service: 0,
      servicead_arr: [
        [],
        [
          {
            title: "审批信息：",
            prop: "title",
            type: "solt",
            solt_name: "sp_card",
          },
          {
            title: "一级审批：",
            prop: "title",
            type: "solt",
            solt_name: "sp_result",
          },
        ],
        [
          {
            title: "审批信息：",
            prop: "title",
            type: "solt",
            solt_name: "sp_card",
          },
          {
            title: "二级审批：",
            prop: "title",
            type: "solt",
            solt_name: "sp_result",
          },
        ],
      ],
      list_arr: [
        {
          title: "申请单位：",
          info: "",
        },
        {
          title: "申请人：",
          info: "",
        },
        {
          title: "申请人联系电话：",
          info: "",
        },
        {
          title: "业务系统名称：",
          info: "",
        },
        {
          title: "业务系统访问地址：",
          info: "",
        },
        {
          title: "场景描述：",
          info: "",
        },
        {
          title: "申请文件：",
          info: "",
          url: "",
          type: "down",
        },
        {
          title: "申请内容：",
          info: "",
          type: "solt",
          solt_name: "zd_table",
        },
        {
          title: "申请时长：",
          info: "",
        },
        {
          title: "申请规格：",
          info: "",
        },
        {
          title: "总价：",
          info: "",
        },
      ],
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["level"]),
    ...mapState(["userInfo"]),
  },
  created() {
    console.log(this.level);
    if (this.userInfo) {
      this.now_user = this.level;
      this.get_service_info();
    } else {
      this.getCurrentUser();
    }
  },
  mounted() {},
  methods: {
    getCurrentUser() {
      this.$api.user.getNowUser().then(({ data }) => {
        if (data.success == 1) {
          this.$store.commit("userInfofun", data.data);
          this.now_user = this.level;
          this.get_service_info();
          console.log(this.level);
        } else {
          console.log(data.errMsg);
        }
      });
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.set_approval();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    backpage() {
      this.$router.back(-1);
    },
    set_approval() {
      this.$http
        .post("/apaas/service/v3/service/approval/applied/approval", {
          apply_id: this.id,
          state: this.form.result,
          message: this.form.option,
        })
        .then((res) => {
          console.log(res);
          if (res.data.success) {
            this.$message.success("审批成功");
            this.$router.back(-1);
          } else {
            this.$message.error("审批失败");
          }
        })
        .catch((res) => {
          this.$message.error(res);
        });
    },
    download(val) {
      console.log(val);
    },
    get_service_info() {
      this.$http
        .get(
          `/apaas/service/v3/service/approval/applied?apply_id=${this.$route.params.id}`
        )
        .then((response) => {
          console.log(response.data.data);
          if (!response.data.success) {
            this.$message.error(response.data.errMsg);
            return;
          }
          let data = response.data.data;
          this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id
          this.$set(this.service_header_arr, "workflows_id", data.workflows_id); // 时空服务id
          this.$set(
            this.service_header_arr,
            "isMap",
            data.data_service_type1 === 6
          );
          this.$set(
            this.service_header_arr,
            "isProcess",
            data.data_service_type2 === 24
          );
          this.$set(this.service_header_arr, "name", data.name);
          this.$set(
            this.service_header_arr["first"][0],
            "text",
            data.data_service_type1_name
          );
          this.$set(
            this.service_header_arr["first"][1],
            "text",
            data.sectors_name
          );
          this.$set(
            this.service_header_arr["first"][2],
            "text",
            data.service_apply_info.approval_status == 0
              ? "待审批"
              : data.service_apply_info.approval_status == 1
              ? "审批通过"
              : "审批未通过"
          );
          this.$set(
            this.service_header_arr["first"][2],
            "color",
            this.color_arr[data.service_apply_info.approval_status + 1]
          );
          this.$set(
            this.service_header_arr["second"][0],
            "text",
            data.service_apply_info.apply_time.replace("T", " ").split("+")[0]
          );
          this.$set(this.service_header_arr, "url", data.cover);
          this.$set(
            this.list_arr[0],
            "info",
            data.service_apply_info.apply_user_info.department_name
          );
          this.$set(
            this.list_arr[1],
            "info",
            data.service_apply_info.apply_user_info.user_name
          );
          this.$set(
            this.list_arr[2],
            "info",
            data.service_apply_info.apply_user_info.phone
          );
          this.$set(
            this.list_arr[3],
            "info",
            data.service_apply_info.business_name
          );
          this.$set(
            this.list_arr[4],
            "info",
            data.service_apply_info.business_url
          );
          this.$set(this.list_arr[5], "info", data.descript);
          this.$set(
            this.list_arr[6],
            "info",
            data.service_apply_info.apply_file.split("/")[
              data.service_apply_info.apply_file.split("/").length - 1
            ]
          );
          this.$set(
            this.list_arr[6],
            "url",
            data.service_apply_info.apply_file
          );
          this.$set(
            this.list_arr[8],
            "info",
            data.service_apply_info.spcs_type == 1
              ? "不限时长"
              : data.service_apply_info.duration + "月"
          );
          this.$set(
            this.list_arr[9],
            "info",
            data.service_apply_info.spcs_type == 1
              ? data.service_apply_info.single_money +
                  "金币/" +
                  data.service_apply_info.spcs_count +
                  "次"
              : data.service_apply_info.single_money + "金币/月"
          );
          this.$set(
            this.list_arr[10],
            "info",
            data.service_apply_info.total_money + "金币"
          );
          // console.log(data)
          if (data.data_service_type1 == 36) {
            this.list_arr.splice(6, 2);
            this.service_arr = ["产品申请信息", "产品审批"]
          }
          this.id = data.service_apply_info.id;
          if (data.service_apply_info.approval_status !== 0) {
            this.servicead_arr[this.now_user].splice(1, 1);
          }
          if (
            !(
              (this.now_user == 1 &&
                this.service_header_arr["first"][2].text !== "待审批") ||
              this.now_user == 2
            )
          ) {
            this.servicead_arr[this.now_user].splice(0, 1);
          }
          if (data.service_apply_info.approval_process) {
            data.service_apply_info.approval_process.forEach((e) => {
              this.approval_arr[this.now_user].push({
                title: e.level == 1 ? "一级审批" : "二级审批",
                result:
                  e.status == -1
                    ? "审批未通过"
                    : e.status == 0
                    ? "审批中"
                    : "审批通过",
              });
              if (e.status !== 0) {
                this.approval_arr[this.now_user][
                  this.approval_arr[this.now_user].length - 1
                ]["arr"] = [
                  {
                    title: "审批时间：",
                    info: e.approval_time.split("+")[0].replace("T", " "),
                  },
                  {
                    title: "审批单位：",
                    info: e.user_info.department_name
                      ? e.user_info.department_name
                      : "无",
                  },
                  {
                    title: "审批人：",
                    info: e.user_info.user_name,
                  },
                  {
                    title: "审批意见：",
                    info: e.comments,
                  },
                ];
              }
            });
          }
          console.log(this.approval_arr);
          this.zd_table_arr = data.service_apply_info.res_fields
            ? JSON.parse(data.service_apply_info.res_fields)
            : [];
          if (data.data_service_type1 != 5) {
            this.list_arr.splice(7, 1)
          }
        })
        .catch(function (response) {
          this.$message.error("请求失败");
        });
    },
  },
};
</script>


<style>
.type_box_select .el-form {
  width: 1022px;
}
.info_contain1 .el-input__inner {
  background-color: #f7f8f9;
  width: 1022px;
}
.info_contain1 .el-input {
  width: 1022px;
}

.btnsty .el-button {
  background-color: #c3caf8;
  color: #0f2683;
}
.btnsty .el-button:nth-of-type(1) {
  background-color: #0f2683;
  color: #f8f9fd;
}
</style>
<style scoped>
.detail_contain {
  width: 100%;
  height: calc(100% - 55px);
  padding: 0 20px;
}
.info_contain {
  padding: 25px 20px;
  background-color: #fff;
  width: 100%;
  min-height: calc(100% - 20px);
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
  margin-bottom: 20px;
  position: relative;
}
.now_page_title {
  margin: 15px 0;
  color: #898d9e;
}
.now_page_title span {
  color: #242c43;
}
.type_box {
  width: 100%;
}
.type_title {
  width: 100%;
  height: 65px;
  line-height: 65px;
  border-bottom: 2px solid #f4f7fc;
}
.type_select {
  float: left;
  width: auto;
  margin-right: 40px;
  height: 65px;
  cursor: pointer;
}
.type_box_select {
  padding: 30px 10px 10px 10px;
  width: 100%;
}
.formname {
  color: #58617a;
}
.right {
  float: right;
  margin-left: 20px;
}
.btnsty {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.info_contain1 {
  margin-bottom: 70px;
}
</style>
