<template>
  <div class="basic-content">
    <cy-info-title style="margin-top: 10px;">基础信息</cy-info-title>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <el-form-item
        label="是否使用标准合同模版"
        prop="templateType"
      >
        <el-select
          v-model="ruleForm.templateType"
          placeholder="请选择是否使用标准合同模版"
          :disabled="disabled"
        >
          <el-option
            v-for="item in constant.sys_yes_no"
            :key="item.dictCode"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="ruleForm.templateType === 'N'" label="销售合同编号" prop="contractNo">
        <el-input
          v-model="ruleForm.contractNo"
          placeholder="请输入销售合同编号"
        />
      </el-form-item>
      <el-form-item label="销售合同名称" prop="contractName">
        <el-input
          v-model="ruleForm.contractName"
          :disabled="disabled"
          placeholder="请输入销售合同名称"
        />
      </el-form-item>
      <el-form-item label="进口商名称" prop="importerEnterpriseName">
        <el-select
          v-model="ruleForm.importerEnterpriseName"
          placeholder="请选择进口商名称"
          :disabled="disabled"
          @change="importerEnterpriseNameChange"
        >
          <el-option
            v-for="item in commodityList"
            :key="item.entityName"
            :label="item.entityName"
            :value="item.entityName"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="ruleForm.exportType === 'proxy_export'" label="代理公司名称" prop="agencyEnterpriseName">
        <el-select
          v-model="ruleForm.agencyEnterpriseName"
          placeholder="请选择代理公司名称"
          :disabled="disabled"
          @change="agencyEnterpriseNameChange"
        >
          <el-option
            v-for="item in platformList"
            :key="item.platformName"
            :label="item.platformName"
            :value="item.platformName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="贸易术语" prop="tradeTerms">
        <el-select
          v-model="ruleForm.tradeTerms"
          placeholder="请选择贸易术语"
          :disabled="disabled"
        >
          <el-option
            v-for="item in constant.trade_terms"
            :key="item.dictCode"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="起运港" prop="portDeparture">
        <el-input
          v-model="ruleForm.portDeparture"
          :disabled="disabled"
          placeholder="请输入起运港"
        />
      </el-form-item>
      <el-form-item label="目的港" prop="portDestination">
        <el-input
          v-model="ruleForm.portDestination"
          :disabled="disabled"
          placeholder="请输入目的港"
        />
      </el-form-item>
      <el-form-item v-if="ruleForm.templateType === 'N'" label="销售合同" prop="contractFile">
        <span slot="label" class="required-label">销售合同</span>
        <cy-upload
          ref="saleContractRef"
          :upload-params="{}"
          :file-data="ruleForm.contractFile"
          :upload-from-orange-status="true"
          placeholder="请上传销售合同文件"
          :disabled="disabled"
          :limit="1"
          :file-size="20"
          :file-type="'pdf'"
        />
      </el-form-item>
      <el-form-item v-if="ruleForm.templateType === 'N'" label="签署日期" prop="signDate">
        <el-date-picker v-model="ruleForm.signDate" value-format="yyyy-MM-dd" type="date" placeholder="选择签署日期" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="成交汇率 (美元)" prop="exchangeRate">
        <el-input
          v-model="ruleForm.exchangeRate"
          placeholder="请输入成交汇率 (美元)"
          :disabled="disabled"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getMyEnterprise,
  getTradePlatform,
  getCommodityByEnterpriseId
} from '@/api/myTrade/salesContract'

export default {
  components: {
  },
  props: {
    detailsInfo: {
      type: Object,
      default: () => {}
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ruleForm: {
        templateType: '',
        contractNo: '',
        contractName: '',
        importerEnterpriseName: '',
        agencyCertNo: '',
        agencyEnterpriseName: '',
        tradeTerms: '',
        portDeparture: '',
        portDestination: '',
        signDate: '',
        exchangeRate: '',
        exportType: '',
        contractFile: []
      },
      rules: {
        templateType: [
          { required: true, message: '请选择是否使用标准模板', trigger: 'change' }
        ],
        contractNo: [
          { required: true, message: '请输入合同编号', trigger: 'blur' }
        ],
        contractName: [
          { required: true, message: '请输入销售合同名称', trigger: 'blur' }
        ],
        importerEnterpriseName: [
          { required: true, message: '请选择进口商名称', trigger: 'blur' }
        ],
        agencyEnterpriseName: [
          { required: true, message: '请选择代理公司名称', trigger: 'blur' }
        ],
        tradeTerms: [
          { required: true, message: '请选择代理公司名称', trigger: 'blur' }
        ],
        portDeparture: [
          { required: true, message: '请输入起运港', trigger: 'blur' }
        ],
        portDestination: [
          { required: true, message: '请输入目的港', trigger: 'blur' }
        ],
        signDate: [
          { required: true, message: '请选择签署日期', trigger: 'blur' }
        ],
        exchangeRate: [
          { required: true, message: '请输入成交汇率', trigger: 'blur' }
        ]
      },
      platformList: [], // 代理商
      commodityList: [] // 进口商list
    }
  },
  computed: {
    ...mapGetters([
      'constant'
    ])
  },
  watch: {
    detailsInfo: {
      handler(newV) {
        this.queryTradePlatform()
        if (newV && Object.keys(newV).length) {
          const {
            templateType,
            contractNo,
            contractName,
            importerCertNo,
            importerEnterpriseName,
            agencyEnterpriseName,
            tradeTerms,
            portDeparture,
            portDestination,
            signDate,
            exchangeRate,
            contractFile,
            agencyCertNo
          } = newV
          this.ruleForm = {
            templateType: templateType && templateType === true ? 'Y' : 'N',
            contractNo,
            contractName,
            importerEnterpriseName,
            importerCertNo,
            agencyEnterpriseName,
            tradeTerms,
            portDeparture,
            portDestination,
            signDate,
            exchangeRate,
            agencyCertNo
          }
          console.log(this.platformList)
          const find = this.platformList.find(el => el.platformName === agencyEnterpriseName)
          if (find) {
            this.ruleForm.agencyCertNo = find.certNo
          }

          if (contractFile) {
            if (Object.keys(contractFile).length && contractFile.id !== null) {
              const arr = []
              arr.push(contractFile)
              this.ruleForm.contractFile = arr
            }
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['sys_yes_no', 'trade_terms'])
    this.queryMyEnterprice()
    this.queryTradePlatform()
  },
  methods: {
    // 查询企业
    async queryMyEnterprice() {
      const res = await getMyEnterprise()
      // exportType proxy_export --代理 区域中国大陆+代理出口
      if (res.success) {
        if (this.$route.query.type === 'add' && res.data.proxyDistrictCode === 'CN_MAINLAND' && res.data.exportType === 'proxy_export') {
          this.ruleForm.templateType = 'Y'
        }
        this.ruleForm.exportType = res.data.exportType
        this.$emit('exportType', res.data.exportType, res.data.enterpriseType)
        this.queryCommodityByEnterpriseId(res.data.customerId)
      }
    },
    // 查询贸易平台(代理公司)
    async queryTradePlatform() {
      const res = await getTradePlatform()

      if (res.success) {
        this.platformList = res.data
      }
    },
    // 根据企业id查询进口商
    async queryCommodityByEnterpriseId(id) {
      const res = await getCommodityByEnterpriseId({ userId: id })

      if (res.success) {
        this.commodityList = res.data
      }
    },
    importerEnterpriseNameChange(val) {
      const find = this.commodityList.find(el => el.entityName === val)
      this.ruleForm.importerCertNo = find.certNo
    },
    agencyEnterpriseNameChange(val) {
      const find = this.platformList.find(el => el.platformName === val)
      if (find) {
        this.ruleForm.agencyCertNo = find.certNo
      }
    },
    async getParams(type) {
      var params = {
        ...this.ruleForm
      }
      return new Promise((resolve, reject) => {
        if (type === 'submit') {
          this.$refs.ruleFormRef.validate(valid => {
            if (valid) {
              if (this.ruleForm.templateType === 'N') {
                const saleContractFiles = this.$refs.saleContractRef.getFileLists
                if (!saleContractFiles.length) {
                  this.$message.warning('请上传销售合同')
                  return
                } else {
                  params.fileId = saleContractFiles[0].id
                }
              }
              delete params.contractFile
              return resolve(params)
            } else {
              reject()
              return false
            }
          })
        } else {
          if (this.ruleForm.templateType === 'N') {
            const saleContractFiles = this.$refs.saleContractRef.getFileLists
            if (saleContractFiles.length) {
              console.log()
              params.fileId = saleContractFiles[0].id
            }
          }
          delete params.contractFile
          resolve(params)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.basic-content {
    // padding: 10px 20px;
}
</style>
