<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-08-15 22:08:21
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2023-09-25 15:19:10
 * @FilePath: \xld-gis-admin\src\views\resource\map\SourceDetail.vue
 * @Description: 地图资源明细界面
-->
<template>
  <div class="source-detail">
    <a-form ref="formRef" :model="formState" :rules="rules" style="width: 100%">
      <div class="compontents">
        <div class="title">基本信息</div>
        <a-row class="form-container">
          <!-- <a-col :span="12" class="form-col">
            <a-form-item ref="code" label="资源编码" name="code" class="label-form-item">
              <a-input v-model:value="formState.code" :disabled="isView" />
            </a-form-item>
          </a-col> -->
          <a-col :span="12" class="form-col">
            <a-form-item ref="servicename" label="资源名称" name="servicename" class="label-form-item">
              <a-input v-model:value="formState.servicename" placeholder="请输入资源名称" :disabled="isView" />
            </a-form-item>
          </a-col>

          <a-col :span="12" class="form-col">
            <a-form-item ref="servicealiasname" label="资源别名" name="servicealiasname" class="label-form-item">
              <a-input v-model:value="formState.servicealiasname" placeholder="请输入资源别名" :disabled="isView" />
            </a-form-item>
          </a-col>

          <a-col :span="12" class="form-col">
            <a-form-item ref="keywords" label="资源标签" name="keywords" class="label-form-item">
              <a-select v-model:value="formState.keywords" placeholder="请选择资源标签" mode="multiple" :disabled="isView">
                <template v-for="tag in serviceTags" :key="tag.code">
                  <a-select-option :value="tag.value">{{ tag.label }}</a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="24" class="form-col">
            <a-form-item ref="description" label="资源描述" name="description" class="label-form-item" :disabled="isView">
              <a-textarea v-model:value="formState.description" placeholder="请输入资源描述" :rows="2" :disabled="isView" />
            </a-form-item>
          </a-col>

          <a-col :span="24" class="form-col">
            <a-form-item ref="thumbnail" label="缩略图" name="thumbnail" class="label-form-item">
              <a-upload :custom-request="customUpload" v-model:file-list="fileList" :disabled="isView">
                <a-button style="background-color: #0671dd; color: #fff; border-radius: 4px" :disabled="isView">
                  <upload-outlined></upload-outlined>
                  文件上传
                </a-button>
              </a-upload>
              <span class="updateImg" @click="imgBut" v-if="!isView"></span>
            </a-form-item>
          </a-col>
        </a-row>
      </div>

      <div class="compontents">
        <div class="title">描述信息</div>
        <a-row class="form-container">
          <a-col :span="12" class="form-col">
            <a-form-item ref="servicetype" label="资源类型" name="servicetype" class="label-form-item">
              <a-select v-model:value="formState.servicetype" :disabled="isView" placeholder="请选择资源类型">
                <template v-for=" tag  in  serviceTypes " :key="tag.value">
                  <a-select-option :value="tag.value">{{ tag.label }}</a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="12" class="form-col">
            <a-form-item ref="coordinate" label="坐标系" name="coordinate" class="label-form-item">
              <a-select v-model:value="formState.coordinate" :disabled="isView" placeholder="请选择坐标系">
                <template v-for=" tag  in  sysCoors " :key="tag.GEOMNAME">
                  <a-select-option :value="tag.GEOMNAME">{{ tag.GEOMTITLE }}</a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24" class="form-col">
            <a-form-item ref="mapingurl" label="服务地址" name="mapingurl" class="label-form-item">
              <a-input v-model:value="formState.mapingurl" placeholder="请输入服务地址" :disabled="isView" />
            </a-form-item>
          </a-col>
          <a-col :span="12" class="form-col">
            <a-form-item ref="dataScope" label="数据范围" name="dataScope" class="label-form-item">
              <a-input v-model:value="formState.dataScope" placeholder="请输入数据范围" :disabled="isView" />
            </a-form-item>
          </a-col>
          <a-col :span="12" class="form-col">
            <a-form-item ref="source" label="数据来源" name="source" class="label-form-item">
              <a-input v-model:value="formState.source" placeholder="请输入数据来源" :disabled="isView" />
            </a-form-item>
          </a-col>

          <a-col :span="12" class="form-col">
            <a-form-item ref="restype" label="密级" name="secrets" class="label-form-item">
              <a-select v-model:value="formState.secrets" :disabled="isView" placeholder="请选择密级">
                <template v-for=" tag  in  secrets " :key="tag.code">
                  <a-select-option :value="tag.code">{{ tag.name }}</a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12" class="form-col">
            <a-form-item ref="sourcetable" label="数据表" name="sourcetable" class="label-form-item">
              <a-input v-model:value="formState.formdatabase" placeholder="请输入数据表" :disabled="isView" />
            </a-form-item>
          </a-col>

          <a-col :span="12" class="form-col">
            <a-form-item ref="collect" label="管理部门" name="collect" class="label-form-item">
              <a-select v-model:value="formState.collect" :disabled="isView" placeholder="请选择管理部门">
                <template v-for=" tag  in  collectDept " :key="tag.code">
                  <a-select-option :value="tag.code">{{ tag.name }}</a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12" class="form-col">
            <a-form-item ref="respUnit" label="责任科室" name="respUnit" class="label-form-item">
              <a-select v-model:value="formState.respUnit" :disabled="isView" placeholder="请选择责任科室">
                <template v-for=" tag  in  respDept " :key="tag.code">
                  <a-select-option :value="tag.code">{{ tag.name }}</a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12" class="form-col">
            <a-form-item ref="source" label="发布日期" name="source" class="label-form-item">
              <!-- <a-input v-model:value="formState.publishtime" disabled /> -->
              <a-date-picker v-model:value="formState.publishtime" format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
                disabled show-time :disabled="isView">
                <template #renderExtraFooter>extra footer</template>
              </a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :span="12" class="form-col">
            <a-form-item ref="source" label="发布者" name="source" class="label-form-item">
              <a-input v-model:value="formState.publisher" placeholder="请输入发布者" disabled :disabled="isView" />
            </a-form-item>
          </a-col>

          <a-col :span="12" class="form-col">
            <a-form-item ref="updatetype" label="更新方式" name="updatetype" class="label-form-item">
              <a-input v-model:value="formState.updateType" placeholder="请输入更新方式" :disabled="isView" />
            </a-form-item>
          </a-col>
          <a-col :span="12" class="form-col">
            <a-form-item ref="updatetime" label="更新时间" name="updatetime" class="label-form-item">
              <a-date-picker v-model:value="formState.updatetime" format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
                disabled show-time>
                <template #renderExtraFooter>extra footer</template>
              </a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :span="12" class="form-col">
            <a-form-item ref="epsgcode" label="EPSGCode" name="epsgcode" class="label-form-item">
              <a-select v-model:value="formState.epsgcode" :disabled="isView" placeholder="请选择EPSGCode">
                <template v-for=" tag  in  EPSGCodes " :key="tag.code">
                  <a-select-option :value="tag.code">{{ tag.name }}</a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </a-col>

          <!-- <a-col :span="12" class="form-col">
            <a-form-item ref="shsqlc" label="适合申请流程" name="shsqlc" class="label-form-item">
              <a-select v-model:value="formState.shsqlc" :disabled="isView">
                <template v-for="appl in ApplProcesses" :key="appl.value">
                  <a-select-option :value="appl.value">{{ appl.label }}</a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </a-col> -->

          <a-col :span="5" class="form-col">
            <a-form-item ref="runtimestatus" label="运行状态" name="runtimestatus" class="label-form-item">
              <!-- <a-switch checked-children="" un-checked-children="" v-model:checked="formState.runtimestatus"
                :disabled="isView" /> -->
              <a-radio-group v-model:value="formState.runtimestatus" button-style="solid" :disabled="isView">
                <a-radio-button :value="true">是</a-radio-button>
                <a-radio-button :value="false">否</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :span="5" class="form-col">
            <a-form-item ref="public" label="是否公开" name="public" class="label-form-item">
              <!-- <a-switch checked-children="" un-checked-children="" v-model:checked="formState.public"
                :disabled="isView" /> -->
              <a-radio-group v-model:value="formState.public" button-style="solid" :disabled="isView">
                <a-radio-button :value="true">是</a-radio-button>
                <a-radio-button :value="false">否</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="5" class="form-col">
            <!-- <a-form-item ref="searched" label="是否共享" name="searched" class="label-form-item">
              <a-switch checked-children="" un-checked-children="" v-model:checked="formState.searched" :disabled="isView" /> -->
            <a-form-item ref="searched" label="是否共享" name="searched" class="label-form-item">
              <!-- <a-switch checked-children="" un-checked-children="" v-model:checked="formState.share" :disabled="isView" /> -->
              <a-radio-group v-model:value="formState.searched" button-style="solid" :disabled="isView">
                <a-radio-button :value="true">是</a-radio-button>
                <a-radio-button :value="false">否</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="5" class="form-col">
            <a-form-item ref="externalApply" label="是否外部申请" name="externalApply" class="label-form-item">
              <!-- <a-switch checked-children="" un-checked-children="" v-model:checked="formState.externalApply"
                :disabled="isView" /> -->
              <a-radio-group v-model:value="formState.externalApply" button-style="solid" :disabled="isView">
                <a-radio-button :value="true">是</a-radio-button>
                <a-radio-button :value="false">否</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="4" class="form-col">
            <!-- <a-form-item ref="share" label="是否展示" name="share" class="label-form-item">
              <a-switch checked-children="" un-checked-children="" v-model:checked="formState.share" :disabled="isView" /> -->
            <a-form-item ref="share" label="是否展示" name="share" class="label-form-item">
              <!-- <a-switch checked-children="" un-checked-children="" v-model:checked="formState.searched"
                :disabled="isView" /> -->
              <a-radio-group v-model:value="formState.share" button-style="solid" :disabled="isView">
                <a-radio-button :value="true">是</a-radio-button>
                <a-radio-button :value="false">否</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <!-- <a-col :span="6" class="form-col">
            <a-form-item
              ref="searched"
              label="立即发起审核"
              name="searched"
              class="label-form-item"
            >
              <a-switch
                checked-children=""
                un-checked-children=""
                v-model:checked="formState.immExaim"
                :disabled="isView"
              />
            </a-form-item>
          </a-col> -->
        </a-row>
      </div>
    </a-form>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  toRefs,
  reactive,
  UnwrapRef,
  onMounted,
  watch,
} from 'vue';
import { BasicForm } from '/@/components/Form/index';
import { UploadOutlined } from '@ant-design/icons-vue';
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { useMessage } from '/@/hooks/web/useMessage';
// 加载菜单数据
import Moment from 'moment';
import { insertService, updateService } from '/@/api/resource/map';
import { getFlowConfigByBusinessName, submitExamine } from '/@/api/resource/examine';
import { update, getImgUrl } from '/@/api/dataAdmin/assembly';
import { img } from '/@/api/resource/plat';
import {
  serviceTypes,
  serviceTags,
  secrets,
  sysCoors,
  respDept,
  collectDept,
  EPSGCodes,
  ApplProcesses,
} from '../sysDic';
import { session } from '/@/utils/Memory.js';
import { message } from 'ant-design-vue';
const props = {
  formData: { type: Object, default: ref(null) },
  isUpdate: { type: Boolean, default: ref(false) },
  isView: { type: Boolean, default: ref(false) },
  flowName: { type: String, default: '' },
};
interface FormState {
  code: string;
  servicename: string;
  servicealiasname: string;
  keywords: string[];
  description: string;
  servicetype: string;
  coordinate: string;
  mapingurl: string;
  dataScope: string;
  source: string;
  secrets: string;
  formdatabase: string;
  collect: string;
  respUnit: string;
  publishtime: string;
  publisher: string;
  updateType: string;
  updatetime: string;
  epsgcode: string;
  runtimestatus: boolean;
  public: boolean;
  share: boolean;
  searched: boolean;
  externalApply: boolean;
  date1: undefined;
  immExaim: boolean; //是否立即发起审核
  shsqlc: string;
}
export default defineComponent({
  name: 'SourceDetail',
  components: { BasicForm, UploadOutlined },
  props,
  setup(props, { emit }) {
    const data = reactive({
      detail: props.formData,
      isUpdate: props.isUpdate,
      isView: props.isView,
      flowName: props.flowName,
      fileList: [],
      serviceTags: serviceTags,
      secrets: secrets, //密级
      sysCoors: sysCoors, //坐标系
      serviceTypes: serviceTypes, //资源类型
      respDept: respDept, //责任科室
      collectDept: collectDept, //保管部门
      EPSGCodes: EPSGCodes, //EPSGCode
      ApplProcesses: ApplProcesses, //适合申请流程
    });
    const formRef = ref();
    const formState: UnwrapRef<FormState> = reactive({
      code: '',
      servicename: '',
      servicealiasname: '',
      keywords: [],
      description: '',
      servicetype: undefined,
      coordinate: undefined,
      mapingurl: '',
      dataScope: '',
      source: '',
      secrets: undefined,
      formdatabase: '',
      collect: undefined,
      respUnit: undefined,
      publishtime: '',
      publisher: '',
      thumbnail: '',
      updateType: '',
      updatetime: '',
      epsgcode: undefined,
      runtimestatus: true,
      public: true,
      share: true,
      searched: true,
      externalApply: true,
      date1: undefined,
      immExaim: false,
      shsqlc: '',
    });
    const moment = Moment;
    const rules = {
      servicename: [
        { required: true, message: '请填写资源名称', trigger: 'blur' },
        { min: 3, max: 20, message: '长度必须在3到20个字符', trigger: 'blur' },
      ],
      keywords: [
        { type: 'array', required: true, message: '请选择资源标签', trigger: 'change' },
      ],
      servicealiasname: [
        { required: true, message: '请输入资源别名', trigger: 'blur' },
        { min: 3, max: 20, message: '长度必须在3到20个字符', trigger: 'blur' },
      ],
      systag: [{ required: true, message: '请选择系统标签', trigger: 'change' }],
      servicetype: [{ required: true, message: '请选择资源类型', trigger: 'change' }],
      coordinate: [{ required: true, message: '请选择坐标系', trigger: 'change' }],
      mapingurl: [{ required: true, message: '请输入服务地址', trigger: 'blur' }],

      date1: [{ required: true, message: 'Please pick a date', trigger: 'change', type: 'object' }],
      type: [
        {
          type: 'array',
          required: true,
          message: 'Please select at least one activity type',
          trigger: 'change',
        },
      ],
      resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
      desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
    };
    const { createMessage } = useMessage();
    watch(
      () => props.formData,
      (obj) => {
        data.detail = obj;
        console.log('查询数据', data.detail);
        if (data.isUpdate) setFormData();
      }
    );
    watch(
      () => props.isUpdate,
      (obj) => {
        data.isUpdate = obj;
      }
    );
    watch(
      () => props.isView,
      (obj) => {
        data.isView = obj;
      }
    );

    watch(
      () => props.flowName,
      (val) => {
        data.flowName = val;
      }
    );

    const submitForm = () => {
      if (data.isView) {
        return emit('closeModal');
      }
      try {
        formRef.value
          .validate()
          .then(async () => {
            const params = setSubmitForm();
            if (params) {
              console.log("地图资源上传提交参数:", params);
              if (data.isUpdate) {
                //params['serviceid'] = data.detail.serviceid;
                const res = await updateService(params);
                if (res && res?.status !== '-1') {
                  createMessage.success('修改地图资源成功！');
                  resetForm();
                  emit('RtnMain', true);
                } else createMessage.error('修改地图资源失败！,失败原因：' + res?.message, 1);
              } else {
                const res = await insertService(params);
                if (res && res?.status === '0') {
                  //立即发起审核
                  if (formState.immExaim) {
                    const result = JSON.parse(res['result']);
                    console.log('发起流程审核工作', result);
                    const serviceid = result.sucList[0].servicebase.serviceid;
                    //console.log('业务id', serviceid);
                    submitExam(serviceid);
                  }
                  createMessage.success('新增地图资源成功！');
                  resetForm();
                  emit('RtnMain', true);
                } else createMessage.error('新增地图资源失败！,失败原因：' + res?.message, 1);
              }
            }
          })
          .catch((error: ValidateErrorEntity<FormState>) => {
            createMessage.error('请完成必填信息！', 1);
            console.log('error', error);
          });
      } catch (ex) {
        console.log(ex);
      }
    };
    const resetForm = () => {
      formState.updateType = "";
      formState.formdatabase = "";
      data.fileList = [];
      formRef.value.resetFields();
    };

    /**
     * 设置提交数据
     */
    const setSubmitForm = () => {
      const userinfo = session.getItem('userInfo');
      const collect = collectDept.find((i) => (i.code === formState.collect || i.codeName === formState.collect));
      const rboffices = respDept.find((i) => (i.code === formState.respUnit || i.codeName === formState.respUnit));
      const secretlevels = secrets.find((i) => (i.code === formState.secrets || i.codeName === formState.secrets));
      const coor = sysCoors.find((i) => (i.GEOMNAME === formState.coordinate || i.GEOMNAME === formState.coordinate));
      const EPSGCode = EPSGCodes.find((i) => (i.code === formState.epsgcode || i.codeName === formState.epsgcode));
      let servicebase = {
        publisher: userinfo?.EMPLOYEE?.NAME, //'系统管理员',
        username: userinfo?.EMPLOYEE?.NAME, //'系统管理员',
        userid: userinfo?.EMPLOYEE?.EMPLOYEE_ID, //'27AF004A-8BDN-885T-30FU-89DE3388762B',
        servicealiasname: formState.servicealiasname, //资源别名
        description: formState.description, //资源描述
        ispublic: formState.public ? '1' : '0', //是否公开
        searched: formState.searched ? '1' : '0', //是否展示
        servicetype: formState.servicetype, //资源类型
        externalApply: formState.externalApply ? '1' : '0', //外部申请
        runtimestatus: formState.runtimestatus ? '1' : '0', //运行状态
        servicename: formState.servicename, //资源名
        mapingurl: formState.mapingurl, //服务地址
        otherService: '',
        thumbnail: formState.thumbnail,
      };
      let metadata = {
        mapingurl: formState.mapingurl, //服务地址
        name: formState.servicename, //资源名
        servicealiasname: formState.servicealiasname, //资源别名
        thumbnail: formState.thumbnail,
        description: formState.description,
        keywords: formState.keywords,
        servicetype: formState.servicetype, //资源类型
        dataScope: formState.dataScope, //数据范围
        updateType: formState.updateType, //更新方式
        source: formState.source, //数据来源
        formdatabase: formState.formdatabase, //数据表
        rboffice: rboffices ? rboffices.codeName : '', //责任单位
        keepingunit: collect ? collect.codeName : '', //保管单位
        secretlevel: secretlevels ? secretlevels.codeName : '',
        crs: coor ? coor.GEOMNAME : '',
        epsgCode: EPSGCode ? EPSGCode.codeName : '',
        workSpace: '',
        runtimestatus: formState.runtimestatus ? '1' : '0', //运行状态
        ishistory: '0',
        shsqlc: formState.shsqlc,
        urlInfo: '',
        otherService: '',
        bz: '',
        ispublic: formState.public ? '1' : '0', //是否公开
        searched: formState.searched ? '1' : '0', //是否展示
        externalApply: formState.externalApply ? '1' : '0', //外部申请
        isShow: formState.share ? '1' : '0',
        publisher: userinfo?.EMPLOYEE?.NAME, //'系统管理员',
        username: userinfo?.EMPLOYEE?.NAME, //'系统管理员',
        userid: userinfo?.EMPLOYEE?.EMPLOYEE_ID, //'27AF004A-8BDN-885T-30FU-89DE3388762B',
      };
      if (data.isUpdate) {
        Object.assign(servicebase, { serviceid: data.detail.serviceid });
        Object.assign(metadata, {
          serviceid: data.detail.serviceid,
          id: data.detail.id,
        });
      }
      return {
        type: 'MR',
        servicebase,
        metadata,
        sourcetraces: [],
        dataVersionConf: {},
      };
    };
    function getImg(i) {
      img(i).then(r => {
        if (r && r.length) {
          r.map(i => {
            if (i.thumbnail && i.thumbnail.indexOf(',') > -1) {
              var arr = i.thumbnail.split(',')
              getImgUrl(arr[0], arr[1]).then(res => {
                console.log("tup:", res)
                var name = res.match(/\/([^/]+)\?/)[1];
                data.fileList = [{
                  uid: '1',
                  name: name,
                  status: 'done',
                  url: res,
                }];
              })
            }
          })
        }
      })
    }
    /**
     * 设置表单数据
     */
    const setFormData = () => {
      formState.public = data.detail.ispublic === '1' ? true : false;
      formState.servicename = data.detail?.servicename;
      formState.publishtime = data.detail?.publishdate
        ? moment(data.detail?.publishdate).format('YYYY-MM-DD HH:mm:ss')
        : '';
      formState.publisher = data.detail?.publisher;
      formState.runtimestatus = data.detail.runtimestatus == '0' ? false : true;
      formState.servicealiasname = data.detail?.servicealiasname;
      formState.code = data.detail?.serviceid;
      formState.servicetype = data.detail?.servicetype;
      formState.updatetime = data.detail?.updatedate
        ? moment(data.detail?.updatedate).format('YYYY-MM-DD HH:mm:ss')
        : '';
      formState.coordinate = data.detail?.crs;
      formState.searched = data.detail.searched == '0' ? false : true;
      formState.keywords = data?.detail?.keywords ? JSON.parse(data.detail?.keywords) : '';
      formState.description = data.detail?.description;
      formState.mapingurl = data.detail?.mapingurl;
      formState.dataScope = data.detail?.dataScope;
      formState.source = data.detail?.source;
      formState.secrets = data.detail?.secretlevel;
      formState.formdatabase = data.detail?.formdatabase;
      formState.collect = data.detail?.keepingunit;
      formState.respUnit = data.detail?.rboffice;
      formState.updateType = data.detail?.updateType;
      formState.epsgcode = data.detail?.epsgCode;
      formState.shsqlc = data.detail?.shsqlc;
      formState.thumbnail = data.detail?.thumbnail;
      formState.share = data.detail.isShow == '0' ? false : true;
      formState.externalApply = data.detail.externalApply == '0' ? false : true;
      //formState.immExaim = data.detail.ishistory === '0' ? false : true;
      getImg(data.detail?.serviceid)
    };

    /**
     * 发起审核
     */
    const submitExam = async (serviceid) => {
      const res = (await getFlowConfigByBusinessName(data.flowName)) as any;
      if (res && res.flowInfo) {
        const param = {
          bussInfo: {
            bussname: res.flowInfo['FLOWNAME'], //流程名称
            flowid: res.flowInfo['ID'], //流程id
            serverids: serviceid, //服务id
          },
        };
        const result = await submitExamine(param) as any
        if (result) {
          console.log('已提交审核', result)
          createMessage.success('已提交审核，请及时关注审核信息！')
        }
      }
      else {
        createMessage.error('未查到【' + data.flowName + '，请配置完成在提交审核');
        return
      }
    };

    /**
     * 上传缩略图改变
     */
    const customUpload = ({ file, onSuccess, onError }) => {
      const formData = new FormData();
      formData.append('file', file);
      update(formData, session.getItem('sysFild').dirId).then(r => {
        if (r && r.resp_code == 0 && r.resp_msg == "OK") {
          formState.thumbnail = `${r.datas.id},${r.datas.dirId}`;
          onSuccess()
        } else {
          onError()
        }
      })
    };

    function imgBut() {
      if (data.fileList.length) {
        return message.error('只能上传一个文件,请先删除之前的文件！')
      } else if (data.fileList.length == 0) {
        document.getElementById("thumbnail").click()
      }
    }

    onMounted(async () => {
      resetForm();
    });



    return {
      imgBut,
      ...toRefs(data),
      formRef,
      moment,
      rules,
      formState,
      submitForm,
      resetForm,
      createMessage,
      setSubmitForm,
      submitExam,
      setFormData,
      customUpload,
    };
  },
});
</script>
  
<style scoped lang="less">
.updateImg {
  top: 0px;
  display: inline-block;
  background-color: rgb(6, 113, 221);
  color: rgb(255, 255, 255);
  border-radius: 4px;
  width: 110px;
  height: 32px;
  position: absolute;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.source-detail {
  height: 100%;
  width: 100%;
  padding: 0 20px;

  .compontents {
    width: 100%;
    height: auto;

    .title {
      height: 19px;
      line-height: 18px;
      padding-left: 6px;
      margin-bottom: 20px;
      border-left: 3px solid #0671dd;
      font-family: Source Han Sans CN;
      font-size: 16px;
      font-weight: 350;
      letter-spacing: 0px;
    }

    .form-container {
      width: 100%;
      height: auto;

      .form-col {
        height: 100%;
      }

      .form-col-left {
        padding-right: 20px;
      }
    }
  }
}

.label-form-item {
  :deep(.ant-form-item-label) {
    width: 90px;
  }

  :deep(.ant-form-item-control) {
    width: calc(100% - 90px);
  }
}
</style>
  