
<template>
  <div class="do-task">
    <div class="mb12">
      <el-button @click="backFn">后退</el-button>
    </div>
    <div>
      <span class="f18 fwb clr_333">提交任务</span> - <span>商业推广会</span>
    </div>
    <div class="form-wrapper">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="160px">
        <el-form-item label="关联企业包：" prop="packageId">
          <el-select class="w100" v-model="formData.packageId" placeholder="请选择">
            <el-option v-for="item in relatedEntPackList" :key="item.id" :label="item.scorePackageName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推广产品名称：" prop="productName">
          <el-input v-model="formData.productName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="会议时间：" prop="meetingTime">
          <el-date-picker
            v-model="formData.meetingTime"
            class="w100"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="会议地点：" prop="meetingPlace">
          <el-input v-model="formData.meetingPlace" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="会议计划表：" prop="meetingPlanUrl">
          <uploadCom @updateInfo='(list) => updateInfo(list, "meetingPlanUrl")' :info="formData.meetingPlanUrl"  key="meetingPlanUrl" />
        </el-form-item>
        <el-form-item label="会议通知/邀请函：" prop="meetingInvitationUrl">
          <uploadCom @updateInfo='(list) => updateInfo(list, "meetingInvitationUrl")' :info="formData.meetingInvitationUrl"  key="meetingInvitationUrl" />
        </el-form-item>
        <el-form-item label="签到表：" prop="meetingCheckInUrl">
          <uploadCom @updateInfo='(list) => updateInfo(list, "meetingCheckInUrl")' :info="formData.meetingCheckInUrl"  key="meetingCheckInUrl" />
        </el-form-item>
        <el-form-item label="会议照片：" prop="meetingPhotosUrl">
          <uploadCom @updateInfo='(list) => updateInfo(list, "meetingPhotosUrl")' :info="formData.meetingPhotosUrl" :show="true" tip="请上传有会议名称标志、引导牌的会场照片、主席台照片、参会者照片" key="meetingPhotosUrl" />
        </el-form-item>
        <el-form-item label="宣传资料使用清单：" prop="promotionalMaterialsUrl">
          <uploadCom @updateInfo='(list) => updateInfo(list, "promotionalMaterialsUrl")' :info="formData.promotionalMaterialsUrl"  key="promotionalMaterialsUrl" />
        </el-form-item>
        <el-form-item label="发票上传：" prop="invoiceUrl">
          <uploadCom @updateInfo='(list) => updateInfo(list, "invoiceUrl")' :info="formData.invoiceUrl"  key="invoiceUrl" />
        </el-form-item>
        <el-form-item label="会议纪要或总结:" prop="summary">
          <el-input type="textarea" v-model="formData.summary" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="saveFn">保 存</el-button>
        <el-button type="primary" size="small" @click="submitFn">提 交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getRelatedEntPackList, saveTemp, getDeptTaskApi, saveBusinessMeeting } from "@/api/enterpriseTask"
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { getDictType } from "@/api/common";
import uploadCom from "./uploadCom.vue";

export default {
  name: "doTaskBusinessMeeting",
  components: { ElImageViewer, uploadCom },
  data() {
    return {
      taskTypeId: 68,
      formData: {
        packageId: '',
        productName: '',
        meetingTime: '',
        meetingPlace: '',
        meetingPlanUrl: [],
        meetingInvitationUrl: [],
        meetingCheckInUrl: [],
        meetingPhotosUrl: [],
        promotionalMaterialsUrl: [],
        invoiceUrl: [],


      },
      formRules: {
        packageId: [{ required: true, message: '请选择关联积分包', trigger: 'blur' }],
        productName: [{ required: true, message: '请输入推广名称', trigger: 'blur' }],
        meetingTime: [{ required: true, message: '请选择会议时间', trigger: 'blur' }],
        meetingPlace: [{ required: true, message: '请选择会议时间', trigger: 'blur' }],
        meetingPlanUrl: [{ required: true, message: '请上传招标计划书' }],
        meetingInvitationUrl: [{ required: true, message: '请上传会议通知/邀请函' }],
        meetingCheckInUrl: [{ required: true, message: '请上传签到表' }],
        meetingPhotosUrl: [{ required: true, message: '请上传会议照片' }],
        promotionalMaterialsUrl: [{ required: true, message: '请上传宣传资料使用清单' }],
        invoiceUrl: [{ required: true, message: '请上传发票' }],

      },
      relatedEntPackList: [], // 关联企业包
      hospitalLevel: []
    }
  },
  methods: {
    async getDeptTask() {
      const res = await getDeptTaskApi(68)
      if (res.data.code === 0 && res.data.data) {
        this.formData = res.data.data
      }
    },

    // 返回
    backFn() {
      this.$emit('back')
    },
    getDict() {
      getRelatedEntPackList().then(res => this.relatedEntPackList = res.data.data)
      getDictType({ type: 'tasktype66_hospital_level' }).then(res => this.hospitalLevel = res.data.data)
    },
    async saveFn() {
      const res = await saveTemp(this.formData, 68)
      if (res.data.code === 0) {
        this.$message.success('保存成功')
        this.backFn()
      }
    },
    submitFn() {
      this.$refs.formRef.validate(async val => {
        if (val) {
          const res = await saveBusinessMeeting(this.formData)
          if (res.data.code === 0) {
            this.$message.success('提交成功')
            this.backFn()
          }
        }
      })

    },
    updateInfo(list, type) {
      this.formData[type] = list
      this.$refs.formRef.validateField(type)
    },

  },

  mounted() {
    this.getDict()
    this.getDeptTask()
  }
}
</script>

<style lang="scss" scoped>
.do-task {
  position: relative;

  .form-wrapper {
    margin-top: 36px;

    .input-num-box {
      ::v-deep .el-input__inner {
        text-align: left;
      }
    }
  }
}</style>
