<template>
  <div class="business-create-content">
    <div class="info-title">业务信息</div>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" label-position="left" class="rule-form">
      <el-form-item label="核心企业名称：" prop="enterpriseCustomerInfoId">
        <el-select
          v-model="ruleForm.enterpriseCustomerInfoId"
          :disabled="disabled || editDisable"
          placeholder="请选择核心企业名称"
          clearable
          filterable
          style="width: 100%"
        >
          <el-option v-for="item in companyList" :key="item.id"
          :label="item.enterpriseName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="贸易平台：" prop="tradingPlatformId">
        <el-select
          v-model="ruleForm.tradingPlatformId"
          :disabled="disabled || editDisable"
          placeholder="请选择贸易平台"
          clearable
          filterable
          style="width: 100%"
        >
          <el-option v-for="item in platformList" :key="item.id"
          :label="item.platformName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业务名称：" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入业务名称"
          :disabled="disabled"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item label="履约保证金上限：" prop="depositLimit">
        <cy-amount-input
          v-model="ruleForm.depositLimit"
          placeholder="请输入履约保证金上限"
          :disabled="disabled"
          :is-unit="true"
          unit-name="元"
        >
        </cy-amount-input>
      </el-form-item>
      <el-form-item label="是否投标：" prop="bidding">
        <el-select
          v-model="ruleForm.bidding"
          :disabled="disabled"
          placeholder="请选择是否投标"
          clearable
          style="width: 100%"
          @change="biddingChange"
        >
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目经理：">
        <el-input
          v-model="managerName"
          placeholder="请输入项目经理"
          disabled
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item
        label="资格预审："
        v-if="ruleForm.bidding"
        prop="prequalification"
        style="width: 100%"
        :rules="[
            { required: ruleForm.bidding, message: '请输入资格预审', trigger: 'change' }
        ]"
      >
        <el-select
          v-model="ruleForm.prequalification"
          :disabled="disabled"
          placeholder="请选择资格预审"
          clearable
          style="width: 100%"
          @change="prequalificationChange"
        >
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="预审材料说明："
        prop="descriptionOfPrequalificationMaterials"
        style="width: 100%"
        v-if="ruleForm.prequalification"
        :rules="[
            { required: ruleForm.prequalification, message: '请输入预审材料说明', trigger: 'change' }
        ]"
      >
        <el-input
          v-model="ruleForm.descriptionOfPrequalificationMaterials"
          placeholder="请输入预审材料说明"
          :disabled="disabled"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item label="项目内容：" prop="contents" style="width: 100%">
        <el-input
          v-model="ruleForm.contents"
          placeholder="请输入项目内容"
          :disabled="disabled"
          clearable
        >
        </el-input>
      </el-form-item>
      <div class="info-title">供应商列表</div>
      <div class="table-box" style="width: 100%">
        <el-table :data="tableData">
          <el-table-column type="index" label="序号"  width="200"></el-table-column>
          <el-table-column prop="customerName" label="供应商名称" label-class-name="rule-required" >
            <template slot-scope="{row}">
              <el-select
                v-model="row.supplierId"
                :disabled="disabled"
                placeholder="请选择核心企业"
                clearable
                filterable
                style="width: 100%"
              >
                <el-option v-for="item in supplierList" :key="item.id"
                :label="item.enterpriseName" :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作"  width="300" v-if="!disabled">
            <template slot-scope="scope">
              <el-button type="text" @click="supplierOptions('add')">增加</el-button>
              <el-button type="text" v-if="tableData.length > 1"  @click="supplierOptions('delete', scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="info-title" v-if="ruleForm.bidding">招投标文件</div>
      <div class="form-upload-box" v-if="ruleForm.bidding">
        <div class="form-upload-name form-required" style="width: 150px;">
          投标文件：
        </div>
        <cy-upload
          :disabled="disabled"
          ref="fileStorage"
          :upload-params="uploadParams"
          :file-data="ruleForm.fileStorage"
          :upload-from-status="true"
        >
        </cy-upload>
      </div>
    </el-form>
  </div>
</template>

<script>
module.exports = {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    deatailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        enterpriseCustomerInfoId: '',
        tradingPlatformId: '',
        name: '',
        depositLimit: '',
        bidding: '',
        prequalification: '',
        descriptionOfPrequalificationMaterials: '',
        contents: '',
        businessSupplierInfos: [],
        fileStorage: [],
        businessNumber: ''
      },
      managerName: '',
      rules: {
        enterpriseCustomerInfoId: [
          { required: true, message: '请选择核心企业名称', trigger: 'change' }
        ],
        tradingPlatformId: [
          { required: true, message: '请选择贸易平台', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入业务名称', trigger: 'blur' }
        ],
        depositLimit: [
          { required: true, message: '请输入履约保证金上限', trigger: 'blur' }
        ],
        contents: [
          { required: true, message: '请输入项目内容', trigger: 'blur' }
        ],
        bidding: [
          { required: true, message: '请选择是否投标', trigger: 'change' }
        ]
      },
      tableData: [{ supplierId: '' }],
      uploadParams: {
        mouldName: 'BusinessManagement',
      },
      companyList: [],
      supplierList: [],
      platformList: [],
      editDisable: false
    }
  },
  watch: {
    deatailsInfo: {
      handler(newV) {
        const { type } = this.$route.query
        // if(type === 'edit' || type === 'see' ||  type === 'history') {
          const { businessSupplierInfos, enterpriseCustomerInfoId, tradingPlatformId, name, depositLimit,bidding, prequalification, descriptionOfPrequalificationMaterials, contents, fileStorage, businessNumber, userName } = newV
          const { id, taskId } = this.$route.query
          if(Object.keys(newV).length) {
            this.ruleForm = {
              id: newV.id,
              enterpriseCustomerInfoId,
              tradingPlatformId,
              name,
              depositLimit,
              bidding,
              prequalification,
              descriptionOfPrequalificationMaterials,
              contents,
              fileStorage,
              businessKey: id,
              taskId,
              businessNumber
            }
            this.tableData = businessSupplierInfos.map(item => { return { supplierId: item.supplierId }})
            this.managerName = userName
          }
        // }

      },
      immediate: true,
      deep: true
    },
  },
  created() {
    this.getCompany(0)
    this.getCompany(1)
    this.getPlatform()
    const { type } = this.$route.query
    if(type === 'edit') {
      this.editDisable = true
    }else if(type === 'create') {
      this.getUserInfo()
    }
  },
  methods: {
    getCompany(supplier) {
      this.$api.businessManage.getBusinessManageCoreCompany({ supplier }).then(({ data }) => {
        if(supplier){
          this.supplierList = data
        }else {
          this.companyList = data
        }
      })
    },
    getPlatform() {
      this.$api.businessManage.getBusinessManagePlatform().then(({ data }) => {
        this.platformList = data
      })
    },
    getUserInfo() {
      this.$api.dictionary.getUserInfo().then(({ data }) => {
        this.managerName = data.name
      })
    },
    biddingChange() {
      this.ruleForm.prequalification = ''
      this.ruleForm.descriptionOfPrequalificationMaterials = ''
    },
    prequalificationChange() {
      this.ruleForm.descriptionOfPrequalificationMaterials = ''
    },
    supplierOptions(type, index) {
      if(type === 'add') {
        this.tableData.push({ supplierId: '' })
      }else {
        this.tableData.splice(index, 1)
      }
    },
    getParams() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate(valid => {
          if(valid) {
            let params =  {
              Loading: true,
              ...this.ruleForm,
              businessSupplierInfos: this.tableData,
            }
            if(this.ruleForm.bidding) {
              if(this.tableData.length > 1) {
                this.$message.warning('投标为是时仅可绑定唯一个供应商')
                return
              }
              for (let i = 0; i < this.tableData.length; i++) {
                const { supplierId } = this.tableData[i];
                if(!supplierId) {
                  this.$message.warning('供应商名称不能为空')
                  return
                }
              }
              if(!this.$refs.fileStorage.getFileLists.length) {
                this.$message.warning('请上传招标文件模板')
                return
              }
              const fileStorage = this.$refs.fileStorage.getFileLists
              params.fileStorage = fileStorage.map(item => { return { id: item.id }})
            }
            resolve(params)
          }else {
            reject()
            return false
          }
        })
      })
    },
  },
}
</script>

<style scoped>

</style>
