<template>
  <div>
    <xy-dialog ref="dialog" :width="70" :is-show.sync="isShow" :type="'form'"
      :title="type === 'add' ? '新增报名信息' : '编辑报名信息'" :form="form" :rules='rules' @submit="submit">
      <template v-slot:show>
        <div class="flex-content">
          <div v-for="(item,index) in fieldForm" :style="item.edit_input==='files'?'flex-basis:100%':'flex-basis:50%'">
            <div class="xy-table-item">
              <div class="xy-table-item-label" style="font-weight: bold">
                <span v-if="!base.isNull(item.rule) && item.rule.indexOf('required')!=-1"
                  style="color: red;font-weight: bold;padding-right: 4px;">*</span>{{item.name}}：
              </div>
              <div class="xy-table-item-content">
                <!-- 输入框 -->
                <div v-if="item.edit_input==='text'">
                  <el-input v-model="item.value" :placeholder="item.help" clearable
                    style="width: 100%;"></el-input>
                </div>
                <!-- 单选 -->
                <div v-else-if="item.edit_input==='radio'">
                  <el-select v-model="item.value" :placeholder="item.help" clearable style="width: 100%;">
                    <el-option v-for="(item1,index1) in item.select_item" :key="index1" :label="item1.key"
                      :value="item1.value">
                    </el-option>
                  </el-select>
                </div>
                <!-- 多选 -->
                <div v-else-if="item.edit_input==='checkbox'">
                  <el-select multiple v-model="item.valueArr" :placeholder="item.help" clearable
                    style="width: 100%;">
                    <el-option v-for="(item1,index1) in item.select_item" :key="index1" :label="item1.key"
                      :value="item1.value">
                    </el-option>
                  </el-select>
                </div>
                <!-- 日期 -->
                <div v-else-if="item.edit_input==='date'">
                  <el-date-picker style="width: 100%;" v-model="item.value" type="date"
                    :placeholder="item.help" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
                  </el-date-picker>
                </div>
                <!-- 日期时间 -->
                <div v-else-if="item.edit_input==='datetime'">
                  <el-date-picker style="width: 100%;" v-model="item.value" type="datetime"
                    :placeholder="item.help" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </div>
                <!-- 多附件上传 -->
                <div v-else-if="item.edit_input==='files'">
                  <el-upload class="upload-demo" :action="action" list-type="picture-card"
                    accept=".PNG,.jpg,.jpeg,.bmp,.svg"
                    :on-success="(response, file, fileList)=>{uploadSuccess(response, file, fileList,item)}"
                    :on-remove="(file, fileList)=>{uploadRemove(file, fileList,item)}" :file-list="item.fileList">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </div>
                <!-- 没有的 -->
                <div v-else>
                  <el-input v-model="item.value" :placeholder="item.help" clearable
                    style="width: 100%;"></el-input>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
  import formMixin from "@/mixin/formMixin.js";
  import {
    save
  } from '@/api/student/index.js'
  import {
    save as saveData
  } from '@/api/apply/index.js'

  export default {
    mixins: [formMixin],
    data() {
      return {
        isShow: false,
        type: 'add',
        rules: {},
        row: {},
        typeList: [],
        companyTypeList: [],
        fieldForm: [], //  自定义表单提交的内容
        formList:[],  //自定义表单内容
        form: {
          show: ''
        },
        action: `${process.env.VUE_APP_UPLOAD_API}`,
        baseUrl:`${process.env.VUE_APP_BASE_API}`
      }
    },
    methods: {
      uploadSuccess(response, file, fileList,item){
        console.log("succ",fileList)
        this.$set(item,'fileList',fileList)
        console.log("item",item.fileList)
      },
      uploadRemove(file, fileList,item){
        console.log("remove",fileList)
        this.$set(item,'fileList',fileList)
        console.log("item",item.fileList)
      },
      submit() {
        let user = {}
        this.fieldForm.map(item => {
          // 多选的 改为 string
          if (item.edit_input === 'checkbox') {
            item.value= item.valueArr.join(",")
          }else if(item.edit_input === 'files'){
            let values = []
            if(item.fileList && item.fileList.length>0){
              item.fileList.map(file=>{
                if(file.response){
                  values.push(file.response.url.replace(this.baseUrl, ''))
                }else{
                  values.push(file.url.replace(this.baseUrl, ''))
                }
              })
              item.value = values.join(",")
            }
          }else{
            if(item.value==null){
              item.value = ''
            }
          }
          // 个人信息
          if(!this.base.isNull(item.belong_user_table)){
            user[item.belong_user_table] = item.value
          }
          //
        })
        console.log("this.fieldForm",this.fieldForm)

        //  更新个人信息


        //  提交报名信息
        saveData({
          ...this.row,
          data:this.fieldForm
        }).then(res=>{
          save({
            id:this.row.user_id,
            ...user
          }).then(res=>{
            this.$message({
              type:'success',
              message:'更新成功'
            })
            this.isShow = false
            this.$emit("refresh")
          })
        })
      },
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            console.log("row", this.row,this.formList)
            let _obj = {}
            if (this.row.data && this.row.data.length > 0) {
              this.row.data.map(item => {
                this.formList.map(item1=>{
                  if(item.field===item1.field){
                    // 多选的改为 数组
                    if (item1.edit_input === 'checkbox') {
                      console.log(item.value)
                      item1.valueArr = item.value?item.value.split(","):[]
                    }else{
                      item1.value = item.value
                    }
                  }
                })
              })
              this.fieldForm = this.base.deepCopy(this.formList)
            }else{
              this.fieldForm = []
            }
            // this.submitForm = this.base.deepCopy(_obj)
          }
        } else {
          this.id = ''
          this.type = 'add'
          this.form = {show:''}
          this.row = {}
          this.typeList = []
          this.companyTypeList = []
          this.$refs['dialog'].reset()
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .show {
    flex-basis: 100%;
  }

  ::v-deep .flex-content {
    display: flex;
    flex-wrap: wrap;

    &>div {
      flex-basis: 50%;
    }
  }
</style>
