<template>
  <!-- 上传 -->
  <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
      <el-form ref="form" :model="form" :rules="rules" label-width="82px">
        <el-row :gutter="15">
          <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
            <el-form-item prop="code" label="证照编号">
              <el-input
                placeholder="请输入"
                v-model="form.code"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
             <el-form-item prop="type" label="证件类型">
                <DictSelection v-model="form.type" dictName="证件类型"></DictSelection>
             </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
            <el-form-item prop="status" label="状态">
               <DictSelection v-model="form.status" dictName="规则状态"></DictSelection>
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
             <el-form-item prop="holder" label="持证人">
               <el-input
                 placeholder="请输入"
                 v-model="form.holder"
               ></el-input>
             </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
            <el-form-item label="颁发时间">
              <el-date-picker
                style="width:100%"
                v-model="form.enactorTime"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
             <el-form-item prop="date" label="有效期至">
                <el-date-picker
                  style="width:100%"
                  v-model="form.date"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-time="['00:00:00', '23:59:59']"
                >
                </el-date-picker>
             </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { sm: 24 } : { span: 24 }">
             <el-form-item prop="imageObj" label="证照图片">
               <fileUpload
                 v-model="form.imageObj"
                 module="main"
                 :showLib="true"
                 :limit='1'
               />
             </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { sm: 24 } : { span: 24 }">
            <el-form-item prop="remark" label="备注">
               <el-input
                 placeholder="请输入"
                 v-model="form.remark"
                 type="textarea"
                 :rows="3"
                 :resize="`none`"
               ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="submit" type="primary">提 交</el-button>
      <el-button size="small" @click="close">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { saveOrEdit , getPhotoInfo } from '@/api/documentManagement';
  import fileUpload from '@/components/upload/fileUpload';
  import imgUpload from '@/components/upload/imgUpload';
  import { getCode  } from '@/api/ruleManagement/matter'
  export default {
    components: {
      fileUpload,
      imgUpload
    },
    //注册组件
    data () {
      const defaultForm = {
        code:'',
        date:[],
        imageObj:[]
      };
      return {
        dialogVisible: false,
        rules: {
          code: [{ required: true, trigger: 'blur', message: '请输入证照编号' }],
          type: [{ required: true, trigger: 'change' , message: '请选择证件类型'}],
          date: [{ required: true, trigger: 'change', message: '请选择有效期' }],
          holder: [{ required: true, trigger: 'blur', message: '请输入持证人' }],
          status: [{ required: true, trigger: 'change', message: '请选择状态' }],
          imageObj: [{ required: true, trigger: 'change' , message: '请选择证照图片'}]
        },
        form: {...defaultForm },
        title:"新增"
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created () {},
    methods: {
      open (row) {
        this.$refs.form && this.$refs.form.clearValidate();
        this.dialogVisible = true;
        if(row){
           this.title = '修改'
           this.getInfo(row.id)
        }else{
          this.title = '新增'
          this.$refs.form.resetFields()
          this.form = {...this.defaultForm};
          this.getOrderCode()
        }
      },
      async getOrderCode () {
        const data = await getCode('license_code');
        this.$set(this.form, 'code', data);
      },

      async getInfo(id){
        const data = await getPhotoInfo(id)
        this.form = {
          ...data,
          date:[data.validityStartTime,data.validityEndTime]
        }
        this.$set(this.form,'imageObj',[data.fileObj])
      },

      close(){
         this.dialogVisible = false
         // this.$refs.form.resetFields()
      },

      submit(){
         this.$refs.form.validate((valid) => {
           if (!valid) {
             return false;
           }
           this.loading = true;
           if(this.form.date?.length){
              this.form.validityStartTime = this.form.date[0];
              this.form.validityEndTime = this.form.date[1];
           }
           if(this.form.imageObj.length){
              this.form.fileObj = this.form.imageObj[0]
           }
           const data = {
             ...this.form,
             fileId:this.form.fileObj.id
           };
           delete data.date
           delete data.imageObj
           saveOrEdit(data)
             .then((msg) => {
               this.loading = false;
               this.$message.success(msg);
               this.dialogVisible = false;
               this.$emit('success');
             })
             .catch((e) => {
               this.loading = false;
             });
         });

      }
    }
  };
</script>

<style lang="scss">
 .el-form-item{
    margin-bottom:20px!important;
 }
</style>
