<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="请输入审批意见，不少于10个字"></el-input>
                </el-form-item>
                <el-form-item class="btnsty">
                    <el-button @click="onSubmit('form')" class="right">提交</el-button>
                    <el-button class="right">取消</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: 10, message: '长度应大于10个字符', 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,
        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: ""
        }
      ]
    };
  },
  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) {
          console.log("--- user info ---");
          console.log(data.data);
          console.log("--- user info ---");
          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;
          }
        });
      },
      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, "id", data.id); // TODO: 时空服务预览
            this.$set(this.service_header_arr, "isMap", data.data_service_type1 === 6);
            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.descript);
            this.$set(this.list_arr[4], "info", data.service_apply_info.business_name);
            this.$set(this.list_arr[5], "info", data.service_apply_info.business_url);
            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.duration+(data.service_apply_info.duration_unit==1?'月':'年'));
            this.$set(this.list_arr[9], "info",  "访问次数："+(data.service_apply_info.request_spcs&&data.service_apply_info.request_spcs.pv||'-')+"/日 访问量："+(data.service_apply_info.request_spcs&&data.service_apply_info.request_spcs.count||'-')+"/日");
            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
                              },
                              {
                                  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):[]
          })
          .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>
