

<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="170px">
        <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-select class="w100" v-model="formData.productName" placeholder="请选择">
              <el-option v-for="item in listDrug" :key="item.drug_name" :label="item.drug_name" :value="item.drug_name">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="产品规格：" prop="productSpecifications">
          <el-select class="w100" v-model="formData.productSpecifications"  filterable allow-create placeholder="请选择">
            <el-option v-for="item in guige" :key="item.label" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维护周期：" prop="dateRange">
          <el-date-picker
           @change="dateChange"
            v-model="formData.dateRange"
            type="daterange"
            range-separator="-"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="进量：" prop="purchaseNumber">
          <el-input v-model="formData.purchaseNumber" />
        </el-form-item>
        <el-form-item label="销量：" prop="salesNumber">
          <el-input v-model="formData.salesNumber" />
        </el-form-item>
        <el-form-item label="存量：" prop="stockNumber">
          <el-input v-model="formData.stockNumber" />
        </el-form-item>
        <el-form-item label="本产品信息搜集表：" prop="productInformationUrl">
          <uploadCom @updateInfo='(list) => updateInfo(list, "productInformationUrl")' :info="formData.productInformationUrl"
            key="productInformationUrl" />
        </el-form-item>
        <el-form-item label="商业流向数据表：" prop="businessFlowDataUrl">
          <uploadCom @updateInfo='(list) => updateInfo(list, "businessFlowDataUrl")' :info="formData.businessFlowDataUrl"
            key="businessFlowDataUrl" />
        </el-form-item>
        <el-form-item label="竞品信息搜集表：" prop="competitorInformationUrl">
          <uploadCom @updateInfo='(list) => updateInfo(list, "competitorInformationUrl")' :info="formData.competitorInformationUrl"
            key="competitorInformationUrl" />
        </el-form-item>
        <el-form-item label="竞品商业数据流向表：" prop="competitorBusinessDataFlowUrl">
          <uploadCom @updateInfo='(list) => updateInfo(list, "competitorBusinessDataFlowUrl")' :info="formData.competitorBusinessDataFlowUrl"
            key="competitorBusinessDataFlowUrl" />
        </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, getListDrugApi,  saveTemp, getDeptTaskApi, saveChannelMaintenance } 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: "doTaskChannelMaintenance",
  components: { ElImageViewer, uploadCom },
  data() {
    return {
      taskTypeId: 69,
      formData: {
        packageId: '',
        productName: '',
        productSpecifications: '',
        dateRange: [],
        maintenanceIntervals: '',
        purchaseNumber: '',
        salesNumber: '',
        stockNumber: '',
        productInformationUrl: [],
        businessFlowDataUrl: [],
        competitorInformationUrl: [],
        competitorBusinessDataFlowUrl: [],
        summary: ''
      },
      formRules: {
        packageId: [{ required: true, message: '请选择关联积分包', trigger: 'blur' }],
        productName: [{ required: true, message: '请输入推广名称', trigger: 'blur' }],
        productSpecifications: [{ required: true, message: '请选择产品规格', trigger: 'blur' }],
        dateRange: [{ required: true, message: '请选择维护周期', trigger: 'blur' }],
        purchaseNumber: [{ required: true, message: '请输入进量', trigger: 'blur' }],
        salesNumber: [{ required: true, message: '请输入销量', trigger: 'blur' }],
        stockNumber: [{ required: true, message: '请输入存量', trigger: 'blur' }],
        productInformationUrl: [{ required: true, message: '请上传'}],
        businessFlowDataUrl: [{ required: true, message: '请上传'}],
        competitorInformationUrl: [{ required: true, message: '请上传'}],
        competitorBusinessDataFlowUrl: [{ required: true, message: '请上传'}],
      },
      relatedEntPackList: [], // 关联企业包 // 所有上传文件
      hospitalLevel: [],
      listDrug: [],
      guige: []
    }
  },
  methods: {
    async getDeptTask() {
      const res = await getDeptTaskApi(69)
      if (res.data.code === 0 && res.data.data) {
        this.formData = res.data.data
        if(res.data.data.maintenanceIntervals) {
          this.formData.dateRange = res.data.data.maintenanceIntervals.split('至')
        }
      }
    },

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

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

    }
  },

  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>
