<template>
  <div>
    <el-form ref="basicInfoForm" label-position="top" :model="info" :rules="rules" label-width="150px">
      <div class="fomebox">
        <div class="ftop flexc">
          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
          <div class="flex1 tit">开工前相关手续办理情况</div>
          <el-button type="primary" plain>保存</el-button>
        </div>
        <div class="rowbox">
          <el-row  :gutter="22">
            <el-col :span="6">
              <el-form-item label="建设用地规划许可证取得时间" prop="ykzTime">
                <el-date-picker
                      v-model="info.ykzTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="年 / 月 / 日">
                    </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="土地摘牌时间" prop="tdzpTime">
                <el-date-picker
                      v-model="info.tdzpTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="年 / 月 / 日">
                    </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="环评批复时间" prop="hppfTime">
                <el-date-picker
                      v-model="info.hppfTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="年 / 月 / 日">
                    </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="fomebox">
        <div class="ftop flexc">
          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
          <div class="flex1 tit">开工信息</div>
          <el-button type="primary" plain>保存</el-button>
        </div>
        <div class="rowbox">
          <el-row  :gutter="22">
            <el-col :span="6">
              <el-form-item label="施工许可证办理时间" prop="sgxkTime">
                <el-date-picker
                      v-model="info.sgxkTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="年 / 月 / 日">
                    </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开工时间" prop="kgrq">
                <el-date-picker
                      v-model="info.kgrq"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="年 / 月 / 日">
                    </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="fomebox">
        <div class="ftop flexc">
          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
          <div class="flex1 tit">上传附件</div>
          <el-button type="primary" plain>保存</el-button>
        </div>
        <div class="rowbox">
            <el-table  :data="tableData" border style="width: 100%;margin-bottom: 15px;">
                <el-table-column align="center" type="index" label="序号" width="10%"></el-table-column>
                <el-table-column align="center" prop="fjlx" label="附件类型"  width="30%"> </el-table-column>
                <el-table-column align="center" label="操作" width="30%">
                  <template slot-scope="scope">
                   <div class="flexcc">
                     <div class="btna flexc coa">
              <fileUploads  v-model="info.zsyzFjList" :xmbh="xmbh" v-if="scope.row['type']==6"  :data="hppf" />
              <fileUploads  v-model="info.zsyzFjList" :xmbh="xmbh" v-if="scope.row['type']==7"  :data="kgcj" />
              <fileUploads  v-model="info.zsyzFjList" :xmbh="xmbh" v-if="scope.row['type']==8"  :data="sbzp" />
              <fileUploads  v-model="info.zsyzFjList" :xmbh="xmbh" v-if="scope.row['type']==9"  :data="sgxkz" />
              <fileUploads  v-model="info.zsyzFjList" :xmbh="xmbh" v-if="scope.row['type']==10"  :data="ydghxkz" />
              <fileUploads  v-model="info.zsyzFjList" :xmbh="xmbh" v-if="scope.row['type']==11"  :data="gytdcrht" />
              <fileUploads  v-model="info.zsyzFjList" :xmbh="xmbh" v-if="scope.row['type']==12"  :data="tdz" />
              <fileUploads  v-model="info.zsyzFjList" :xmbh="xmbh" v-if="scope.row['type']==13"  :data="zlht" />
              <fileUploads  v-model="info.zsyzFjList" :xmbh="xmbh" v-if="scope.row['type']==14"  :data="tdlzxy" />

                     </div>
                   </div>
                  </template>
                </el-table-column>
              </el-table>
        </div>
      </div>
    </el-form>
    <div class="flexcc pt7">
        <!-- <el-button type="primary" plain>暂存</el-button> -->
         <el-button type="primary" @click="getSubmit"  style="margin-left: 26px;">提交</el-button>
    </div>
  </div>

</template>

<script>
  import {addKgxx, updateKgxx, delKgxx, getKgxx,listKgxx } from "@/api/zhaoshang/kgxx"
export default {
  props: {
    info: {
      type: Object,
      default: null
    },
    xmbh:{
      type:[Number,String],
      default: null
    }
  },
  watch: {
    info: {
      handler(newVal, oldVal) {
        if(newVal.xmbh){
          var xmbh=newVal.xmbh
          this.hppf.xmbh=xmbh
          this.kgcj.xmbh=xmbh
          this.sbzp.xmbh=xmbh
          this.sgxkz.xmbh=xmbh
          this.ydghxkz.xmbh=xmbh
          this.gytdcrht.xmbh=xmbh
          this.tdz.xmbh=xmbh
          this.zlht.xmbh=xmbh
          this.tdlzxy.xmbh=xmbh
        }

      },
      deep: true
    }
  },
  data() {
    return {
      value:'',
      value1:'',
      options: [{
                value: '选项1',
                label: '黄金糕'
              }, {
                value: '选项2',
                label: '双皮奶'
              }],
      tableData: [
        {fjlx: '环评批复',type:'6',},
        {fjlx: '开工场景',bigType:'b',type:'7',},
        {fjlx: '设备照片',bigType:'b',type:'8',},
        {fjlx: '施工许可证',bigType:'b',type:'9'},
        {fjlx: '供地类项目须上传建设用地规划许可证',bigType:'b',type:'10'},
        {fjlx: '国有土地出让合同',bigType:'b',type:'11'},
        {fjlx: '土地证',bigType:'b',type:'12'},
        {fjlx: '租赁厂房或流转土地类须上传租赁合同',bigType:'b',type:'13'},
        {fjlx: '土地流转协议',bigType:'b',type:'14'},
      ],
      hppf:{xmbh:null,bigType:'b',type:6,fileName:null,},
      kgcj:{xmbh:null,bigType:'b',type:7,fileName:null},
      sbzp:{xmbh:null,bigType:'b',type:8,fileName:null},
      sgxkz:{xmbh:null,bigType:'b',type:9,fileName:null},
      ydghxkz:{xmbh:null,bigType:'b',type:10,fileName:null},
      gytdcrht:{xmbh:null,bigType:'b',type:11,fileName:null},
      tdz:{xmbh:null,bigType:'b',type:12,fileName:null},
      zlht:{xmbh:null,bigType:'b',type:13,fileName:null},
      tdlzxy:{xmbh:null,bigType:'b',type:14,fileName:null},
      rules: {
        kgrq: [
          { required: true, message: "请选择开工时间", trigger: "blur" }
        ],
      }
    }
  },
  methods:{
    getSubmit(){
      this.$refs.basicInfoForm.validate(valid => {
          if(valid){
            var params=JSON.parse(JSON.stringify(this.info))
            let regphone = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
            var id=params.id
            if(id!=-1){
              updateKgxx(params).then(res=>{
                if(res.code==200){
                  this.$message.success('修改成功');
                }
              })
            }else{
              addKgxx(params).then(res=>{
                if(res.code==200){
                  this.$message.success('保存成功');
                }
              })
            }
          }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .fomebox{
    .el-button--primary{font-size: 14px;padding: 8px 14px;}
    .el-form-item__label{padding-bottom: 0;line-height: 38px;}
    .el-form-item{margin-bottom: 15px;}
    .el-input__inner{height: 40px;line-height: 40px;}
    .el-date-editor.el-input{width: 100%;}
    .el-select{width: 100%;}
    table{width: 100% !important;}
    .el-table .el-table__header-wrapper th{background: #F6FAFD;}
   }
}
.fomebox{background: #FFFFFF;margin-bottom: 15px;border-radius: 4px;
  .ftop{padding: 10px 17px 10px 16px;border-bottom: 1px solid #E6E6E6;
    .timg{width: 20px;height: 20px;margin-right: 13px;}
    .tit{font-weight: bold;font-size: 16px;color: #222838;}
  }
  .rowbox{padding: 10px 15px 9px;}
  .ftab{font-weight: bold;font-size: 14px;color: #2777D0;padding: 7px 16px 0px;
    .line{width: 6px;margin-right: 9px;height: 20px;background: #2777D0;}
  }
  .btna{font-weight: 500;font-size: 14px;padding: 0 13px;
    .imgs{width: 15px;height: 15px;display: flex;align-items: center;justify-content: center;margin-right: 7px;
      .imga{width: 13px;height: 14px;}
      .imgb{width: 14px;height: 14px;}
      .imgc{width: 15px;height: 15px;}
      .imgd{width: 13px;height: 14px;}
    }
    &.coa{color: #1890FF;}
    &.cob{color: #FE7F0E;}
    &.coc{color: #00A854;}
    &.cod{color: #F25858;}
  }
}
</style>
