<template>
  <div class="app-container">
    <el-steps :space="200" :active="formData.stage" finish-status="success">
      <el-step title="基本信息"></el-step>
      <el-step title="申请内容"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>

    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" v-if="formData.stage==0" style="margin-top:10px">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="申请信息" name="1">
          <el-col :span="8">
                      <el-form-item label="项目级别" prop="level" >
              <el-select
                v-model="formData.level"
                placeholder="请选择项目级别"
                filterable
                allow-create
                :style="{width: '100%'}"
              >
                <el-option
                  v-for="(item, index) in levelOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="受理日期" prop="apply_date" required>
              <el-date-picker
                v-model="formData.apply_date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{width: '100%'}"
                placeholder="受理日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="材料接收日期" prop="accept_date" required>
              <el-date-picker
                v-model="formData.accept_date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{width: '100%'}"
                placeholder="材料接收日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-collapse-item>
        <el-collapse-item title="申请方" name="2">
          <el-form-item label="申请方" prop="applicant">
            <el-button @click="choose" type="primary">选择</el-button>
          </el-form-item>
          <div v-if="formData.applicant">
            <el-form-item label="企业名">
              <template>{{ formData.applicant_v.name }}</template>
            </el-form-item>
            <div style="display:flex">
              <el-form-item label="联系人">
                <template>{{ formData.applicant_v.linkman_name }}</template>
              </el-form-item>
              <el-form-item label="手机">
                <template>{{ formData.applicant_v.linkman_mobile }}</template>
              </el-form-item>
              <el-form-item label="职务">
                <template>{{ formData.applicant_v.linkman_duty }}</template>
              </el-form-item>
            </div>
            <el-form-item label="地址" prop="applicant_v.address" >
              <el-select
                v-model="formData.applicant_v.address"
                placeholder="请选择地址"
                filterable
                allow-create
                :style="{width: '100%'}"
              >
                <el-option
                  v-for="(item, index) in addressOptions"
                  :key="index"
                  :label="item.address"
                  :value="item.address"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-collapse-item>
      </el-collapse>
</el-form>
<div v-if="formData.stage==1" style="margin-bottom:10px;margin-top:10px">
  <el-button type="primary" icon="el-icon-plus" v-for="(item, index) in field_list" :key="'field_list' + index" @click="CreateSub(item,index)" size="mini">{{item.name}}</el-button>
</div>
<el-row :gutter="10" v-if="formData.stage==1">
  <el-col :span="6" v-for="(item, index) in subitems" :key="'subitems' + index" style="margin-bottom:6px">
    <el-card class="box-card" :style="{height:'280px'}" shadow="hover">
  <div slot="header" >
    <span>{{item.cert_field_.name}}</span>
    <el-checkbox style="float: right; padding: 3px 0"></el-checkbox>
    <!-- <el-checkbox style="float: right; padding: 3px 0" ></el-checkbox> -->
    <!-- <input type="checkbox" @click="checked(item.id)" :id="item.id" style="float: right; padding: 3px 0"> -->
  </div>
  <el-button size="mini" type="primary" style="margin-bottom:2px">操作按钮</el-button>
 <div>
   <span>申请领域:</span><span> {{item.cert_field_.name}}</span>
 </div>
 <div v-if="item.cccpv_class">
   <span>产品分类:</span><el-tag> {{item.cccpv_class_.name}}</el-tag>
 </div>
 <div v-if="item.cnas_scopes.length">
   <span>CNAS分类:</span><el-tag v-for="(item, index) in item.cnas_scopes_" :key="'cnas_scope' + index"> {{item.name}}</el-tag>
 </div>
 <div >
   <span>申请方:</span><span> {{formData.applicant_v.name}}</span>
 </div>
 <div v-if="item.manufacture">
   <span>制造商:</span><span> {{item.manufacture_v.name}}</span>
 </div>
 <div v-if="item.factory">
   <span>生产厂:</span><span> {{item.factory_v.name}}</span>
 </div>
 <div v-if="item.pattern">
   <span>申请模式:</span><span> {{item.pattern}}</span>
 </div>
 
</el-card>
  </el-col>
</el-row>
      <div style="margin-top: 12px;text-align:center">
        <el-button @click="previous" v-if="formData.stage>0">上一步</el-button>
        <el-button @click="submitForm1" v-if="formData.stage==0">保存并进行下一步</el-button>
        <el-button @click="next" v-else>下一步</el-button>
      </div>
    

    <el-dialog title="选择企业" :visible.sync="dgVisiable" :close-on-click-modal="false" width="80%">
      <Enterprisechose ref="Enterprisechose" @handleChose="chooseComplete"></Enterprisechose>
    </el-dialog>
    <el-dialog :title="dgTitle" :visible.sync="dgVisiableSub" :close-on-click-modal="false" width="90%">
      <CCCform ref="CCCform" @closeDg="subComplete" :origindata="formData" :addressOptions="addressOptions" v-if="subitem&&subitem.code=='CCC'" :cert_field="subitem.id"></CCCform>
      <PVform ref="PVform" @closeDg="subComplete" :origindata="formData" :addressOptions="addressOptions" v-if="subitem&&subitem.code=='PV'" :cert_field="subitem.id"></PVform>
      <QMSform ref="QMSform" @closeDg="subComplete" :origindata="formData"  v-if="subitem&&subitem.code=='QMS'" :cert_field="subitem.id"></QMSform>
    </el-dialog>
  </div>
</template>
<style >
.el-card__body{
  font-size:16px
}
</style>
<script>
import Enterprisechose from "@/views/enterprise/enterprisechoose"
import CCCform from "@/views/application/cccform"
import PVform from "@/views/application/pvform"
import QMSform from "@/views/application/qmsform"
import { createApplication, updateApplication, getApplication, getSubApplicationList } from "@/api/application"
import { getAddressList } from "@/api/enterprise"
import { genTree } from "@/utils";
import router from '../../router';
import { getDictList } from "@/api/dict"
export default {
  components: { Enterprisechose, CCCform, PVform, QMSform },
  data() {
    return {
      checksubList:[],
      field_list:[],
      activeNames: ["1", "2"],
      formData: {
        apply_date: this.getDefaultDate(1),
        accept_date: this.getDefaultDate(1),
        applicant: null,
        applicant_v: {
          address:null
        },
        stage:0
      },
      rules: {
        apply_date: [
          {
            required: true,
            message: "请选择受理日期",
            trigger: "change",
          },
        ],
        accept_date: [
          {
            required: true,
            message: "请选择材料接收日期",
            trigger: "change",
          },
        ],
        applicant: [
          {
            required: true,
            message: "请选择申请方",
            trigger: "change",
          },
        ],
        level: [
          {
            required: true,
            message: "请选择级别",
            trigger: "change",
          },
        ],
        // 'applicant_v.address': [
        //   {
        //     required: true,
        //     message: "请输入地址",
        //     trigger: "blur",
        //   },
        // ],
      },
      dgVisiable: false,
      addressOptions: [],
      dgTitle:'申请',
      dgVisiableSub:false,
      levelOptions:[],
      subitems:[],
      subitem:null
    };
  },
  created(){
    this.getLevelList()
    this.getfields()
    
    if(this.$route.query.id){
      this.getApplication_(this.$route.query.id)
    }
    this.getSubApplication_()
  },
  watch:{
    // 'formData.stage':'stageChange'
  },
  methods: {
    previous() {
      if (this.formData.stage-- < 0) this.formData.stage = 0;
    },
    next() {
      if (this.formData.stage++ > 2) this.formData.stage = 2;
    },
    choose() {
      this.dgVisiable = true;
    },
    getDefaultDate(val) {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      var day = now.getDay(); //得到周几
      var hour = now.getHours(); //得到小时
      var minu = now.getMinutes(); //得到分钟
      var sec = now.getSeconds(); //得到秒
      month = month + 1;
      if (month < 10) month = "0" + month;
      if (date < 10) date = "0" + date;
      if (hour < 10) hour = "0" + hour;
      if (minu < 10) minu = "0" + minu;
      if (sec < 10) sec = "0" + sec;
      var time = "";
      //精确到天
      if (val == 1) {
        time = year + "-" + month + "-" + date;
      }
      //精确到分
      else if (val == 2) {
        time =
          year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
      }
      return time;
    },
    submitForm1() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return 
        // TODO 提交表单
        if(this.formData.id){
          this.formData.stage++
          updateApplication(this.formData.id, this.formData).then(res=>{
            
            this.$message.success('成功')
          })
        }else{
          this.formData.stage++
        createApplication(this.formData).then(res=>{
          this.formData.id = res.data.id
          this.$message.success('成功')
        })
        }
        
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    chooseComplete(val) {
      this.dgVisiable = false;
      if (val) {
        this.formData.applicant = val.id;
        this.formData.applicant_v = {
          name: val.name,
          linkman_name: val.linkman1_name,
          linkman_mobile: val.linkman1_mobile,
          linkman_duty: val.linkman1_duty,
          person_count:val.person_count
        };
        this.getAddressList_(val.id);
      }
    },
    getAddressList_(id) {
      getAddressList({ enterprise: id }).then((res) => {
        if(res.data){
        this.addressOptions = genTree(res.data)
        this.formData.applicant_v.address = this.addressOptions[0].address
        }

      });
    },
    getApplication_(id) {
      getApplication(id).then(res=>{
        this.formData = res.data
      })
    },
    CreateSub(item, index){
      this.subitem = item
      this.dgVisiableSub = true
      this.dgTitle = item.name + '认证申请'
      
    },
    subComplete(val){
      this.dgVisiableSub = false,
      this.getSubApplication_()
    },
    getLevelList() {
      getDictList({type__code:'project_level'}).then(res=>{
        this.levelOptions = genTree(res.data)
      })
    },
    getfields(){
      getDictList({type__code:'cert_field'}).then(res=>{
        let fields = []
        for(var i=0;i<res.data.length;i++){
          if(res.data[i].parent!=null){
            fields.push({id:res.data[i].id, name:res.data[i].name, code:res.data[i].code})
          }
        }
        this.field_list = fields
      })

    },
    getSubApplication_(){
      let query = {application:this.$route.query.id}
      getSubApplicationList(query).then(res=>{
        this.subitems = res.data
      })
    },
  },
};
</script>