<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">
          <!-- <mavon-editor v-model="list_arr" :boxShadow="false" :toolbarsFlag="false" :subfield="false" defaultOpen="preview" :editable="false" v-if="now_service == 0"/> -->
          <info-list :list_arr="now_service==0?list_arr:servicead_arr[now_user]">
            <process-card type="approval" :data="approval_arr" slot="sp_card"></process-card>
            <div class="info_contain1" slot="sp_result">
                <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="back_page">取消</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 {getRole} from "@/utils/common"
import { mapGetters,mapState } from 'vuex'
export default {
  props: {},
  components: {
    serviceHeader,
    infoList,
    tableUm,
    processCard
  },
  data() {
    return {
      form:{
          result:'',
          option:''
      },
      now_user: 1, //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:'2020-02-28 15:23:45'
        //                 },
        //                 { 
        //                     title:'审批单位：',
        //                     info:'某某某城管局'
        //                 },
        //                 {
        //                     title:'审批人：',
        //                     info:'张先生'
        //                 },
        //                 {
        //                     title:'审批意见：',
        //                     info:'同意'
        //                 },
        //             ]
        //         },       
      ],
      header_arr: [
        {
          prop: "zdmc",
          label: "字段名称",
          minWidth: "20%",
          align: "left"
        },
        {
          prop: "zdbm",
          label: "字段编码",
          width: "100px",
          align: "center"
        },
        {
          prop: "zdlx",
          label: "字段类型",
          width: "100px",
          align: "center"
        },
        {
          prop: "zdsm",
          label: "字段说明",
          minWidth: "30%",
          align: "left"
        },
        {
          prop: "zdsl",
          label: "字段示例数值",
          width: "120px",
          align: "left"
        }
      ],

      service_header_arr: {
        name: "",
        url:"",
        first: [
          {
              "name": "应用类型",
              "text": ""
          },
          {
              "name": "业务领域",
              "text": ""
          },
          {
              "name": "审批状态",
              "text": "",
              "color":"#ef9433"
          }
        ],
        second: [
          {
              "name": "在线状态",
              "text": ""
          },
          {
              "name": "申请类型",
              "text": ""
          },
          {
              "name":"所属组织",
              "text":""
          }
        ],
      },
      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: "",
          url:"",
          type: "down"
        },
        {
          title: "申请时间：",
          info: ""
        },
        {
          title: "订单总价：",
          info: ""
        }
      ]
    };
  },
  watch: {},
  computed: {
    ...mapGetters([
      'level',
    ]),
    ...mapState(['userInfo']),
  },
  created() {
    console.log(this.level);
    if(this.userInfo){
      this.now_user = this.level
      this.getheaderinfo();
      this.getapplyinfo();
      this.get_approval_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.getheaderinfo();
          this.getapplyinfo();
          this.get_approval_info();
          console.log(this.level);
        } else {
          console.log(data.errMsg);
        }
      });
    },
      get_approval_info(){
        this.$http
        .get(`/apaas/hubApi/market/approvalInfo/${this.$route.params.id}`)
        .then((response) => {
          let data = response.data.data;
          if(!(data&&data.length)){
            if(this.now_user==2){
              
            }else{
              this.servicead_arr[1].splice(0,1)
            }
            return
          }
          if(this.now_user==2){
            if(data.length>=2){
              this.servicead_arr[2].splice(1,1)
            }
          }else{
            this.servicead_arr[1].splice(1,1)
          }
          data.forEach(e => {
            this.approval_arr.push({
              title: e.level==1?"一级审批":'二级审批',
              result: e.apply_type_name,
              arr: [
                {
                  title: "审批时间：",
                  info: e.created.split('.')[0].replace('T',' '),
                },
                {
                  title: "审批单位：",
                  info: e.department_name,
                },
                {
                  title: "审批人：",
                  info: e.user_name,
                },
                {
                  title: "审批意见：",
                  info: e.comments,
                }
              ]
            })
          });
        }).catch(function(response) {});
      },
      getapplyinfo(){
        this.$http
        .get("/apaas/hubApi/market/applyDetailInfo/"+this.$route.params.id)
        .then((response) => {
          let data = response.data.data;
          this.$set(this.list_arr[0], "info", data.department_name);
          this.$set(this.list_arr[1], "info", data.contact_person);
          this.$set(this.list_arr[2], "info", data.contact_number);
          this.$set(this.list_arr[3], "info", data.scene);
          this.$set(this.list_arr[4], "info", data.apply_file.split('/')[0]);
          this.$set(this.list_arr[4], "url", data.apply_file);
          this.$set(this.list_arr[5], "info", data.apply_time.replace('Z',' ').replace('T',' '));
          this.$set(this.list_arr[6], "info", data.total_money);

        })
        .catch(function(response) {});
      },
      getheaderinfo(){
        this.$http
        .get("/apaas/hubApi/market/applyInfo/"+this.$route.params.id)
        .then((response) => {
          let data = response.data.data;
          this.$set(this.service_header_arr, "name", data.app_name+' '+data.version);
          this.$set(this.service_header_arr, "url", data.logo);
          this.$set(this.service_header_arr.first[0], "text", data.type_name);
          this.$set(this.service_header_arr.first[1], "text", data.ywly_name);
          this.$set(this.service_header_arr.first[2], "text", data.apply_status);
          this.$set(this.service_header_arr.first[2], "color", data.apply_status=="审批中"||data.apply_status=="待审批"?'#ef9433':data.apply_status=="审批通过"||data.apply_status=="已审批"?'#515fe7':'#e15260');
          this.$set(this.service_header_arr.second[0], "text", data.online_state_name);
          this.$set(this.service_header_arr.second[1], "text", data.apply_type_name);
          this.$set(this.service_header_arr.second[2], "text", data.department_name);
        })
        .catch(function(response) {});
      },
      back_page(){
        this.$router.back(-1)
      },
      post_result(){
        var temp = {
          "app_id":parseInt(this.$route.params.app_id),  // 申请的应用的id
          "apply_id":parseInt(this.$route.params.id), // 申请id
          "status": this.form.result, // 是否通过，-1 不通过   1 通过
          "comments":this.form.option   // 审批意见
        }
        this.$http
        .post("/apaas/hubApi/market/approval/"+this.$route.params.id,temp)
        .then((response) => {
          if(response.data.success){
            this.$message.success('审批成功')
            this.back_page()
          }else{
            this.$message.error(errMsg)
          }
        }).catch(function(response) {});
      },
      onSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.post_result()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
  }
};
</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>
