<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" url="params_arr" slot="zd_table"></table-um>
            <process-card type="approval" :data="approval_arr[now_user]" 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="请输入审批意见，不少于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 {getRole} from "@/utils/common"
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: 10, message: '长度大于10个字符', trigger: 'blur'
              }
          ]
      },
      resultvalue: "",
      resultoptions: [
        {
          label: "通过",
          value: 1
        },
        {
          label: "不通过",
          value: 0
        }
      ],
      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: "",
        pic:"",
        first: [],
        second: [],
      },
      service_arr: ["应用申请信息", "应用审批"],
      now_service: 0,
      servicead_arr: [
        [],
        [
            {
            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: ""
        }
      ]
    };
  },
  watch: {},
  computed: {},
  created() {
    this.now_user = this.$store.state.role;
    getRole().then((data) => {
      this.now_user = data;
      console.log(data);
      this.$store.commit("rolefun", data);
      this.getheaderinfo();
      this.getapplyinfo();
    });
  },
  mounted() {},
  methods: {
      download(val){
          console.log(val);
      },
      getapplyinfo(){
        this.$http
        .get("./static/approvalappdetail.json")
        .then((response) => {
          let data = response.data.data;
          this.$set(this.list_arr[0], "info", data.appbaseinfo.company);
          this.$set(this.list_arr[1], "info", data.appbaseinfo.person);
          this.$set(this.list_arr[2], "info", data.appbaseinfo.phone);
          this.$set(this.list_arr[3], "info", data.appbaseinfo.desc);
          this.$set(this.list_arr[4], "info", data.appbaseinfo.filename);
          this.$set(this.list_arr[4], "url", data.appbaseinfo.fileurl);
          this.$set(this.list_arr[5], "info", data.appbaseinfo.time);
        })
        .catch(function(response) {});
      },
      getheaderinfo(){
        this.$http
        .get("./static/approvalappdetail.json")
        .then((response) => {
          let data = response.data.data;
          this.$set(this.service_header_arr, "name", data.appInfo.name);
          this.$set(this.service_header_arr, "first", data.appInfo.first);
          this.$set(this.service_header_arr, "second", data.appInfo.second);
        })
        .catch(function(response) {});
      },
      onSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } 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>
