<template>
  <el-dialog append-to-body :title="title" :visible.sync="dialogFormVisible" @close="close">
    <el-form ref="form" label-width="120px" :model="form" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目标题" prop="nboName">
            <el-input v-model="form.nboName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关联客户" prop="custName">
            <el-input v-model="form.custName" readonly @focus="handleSelectCustomer" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="获取日期" prop="title">
            <el-date-picker v-model="form.value1" placeholder="选择日期" style="width: 100%" type="datetime" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目来源" prop="nboSource">
            <el-input v-model="form.nboSource" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主要联系人" prop="contactName">
            <el-input v-model="form.contactName" readonly @focus="handleSelectContact" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职位" prop="contactPostion">
            <el-input v-model="form.contactPostion" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="contactTelephone">
            <el-input v-model="form.contactTelephone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人员" prop="makerName">
            <el-input v-model="form.makerName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售模式" prop="salesModel">
            <el-input v-model="form.salesModel" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经销商名称" prop="distributorName">
            <el-input v-model="form.distributorName" readonly @focus="handleSelectDistributor" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经销商负责人" prop="title">
            <el-input v-model="form.title" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经销商联系方式" prop="title">
            <el-input v-model="form.title" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注信息" prop="remark">
            <el-input v-model="form.remark" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--      <el-row :gutter="20">-->
      <!--        <el-col :span="24">-->
      <!--          <div style="margin: -10px 0 10px 120px">-->
      <!--            <el-checkbox v-model="form.checked">创建跟进任务</el-checkbox>-->
      <!--          </div>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row :gutter="20">-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item label="开始时间" prop="title">-->
      <!--            <el-date-picker v-model="form.value1" placeholder="选择时间" style="width: 100%" type="datetime" />-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item label="结束时间" prop="title">-->
      <!--            <el-date-picker v-model="form.value1" placeholder="选择时间" style="width: 100%" type="datetime" />-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item label="负责人员" prop="title">-->
      <!--            <el-input v-model="form.title" />-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item label="跟进内容" prop="followContent">-->
      <!--            <el-input v-model="form.followContent" />-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item label="任务提醒" prop="title">-->
      <!--            <el-input v-model="form.title" />-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item label="提醒方式" prop="title">-->
      <!--            <el-checkbox v-model="form.checked">系统消息</el-checkbox>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="产品(含版本)" prop="title">
            <el-button size="mini" type="primary" @click="handleSelectProduct">添加产品</el-button>

            <el-table>
              <el-table-column align="center" label="产品名称" prop="custCode" />
              <el-table-column align="center" label="产品类别" prop="custName" />
              <el-table-column align="center" label="单位" prop="abbrName" />
              <el-table-column align="center" label="价格" prop="custLocation" />
              <el-table-column align="center" label="数量" prop="custIndustry" />
              <el-table-column align="center" label="操作" width="80">
                <template #default="{ row }">
                  <el-button type="text">删除{{ row }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">提 交</el-button>
      <el-button @click="close">重 置</el-button>
    </div>
    <!-- 选择客户弹窗 -->
    <select-customer ref="selectCustomer" @save="selectCustomer" />
    <!-- 选择客户弹窗 -->
    <select-contact ref="selectContact" :query-params="queryContact" @save="selectContact" />
    <!-- 选择经销商弹窗 -->
    <select-distributor ref="selectDistributor" @save="selectDistributor" />
    <!-- 选择产品弹窗 -->
    <select-product ref="selectProduct" @save="selectProduct" />
  </el-dialog>
</template>

<script>
  import businessApi from '@/api/proj/business'
  import SelectContact from '@/components/select/SelectContact'
  import SelectCustomer from '@/components/select/SelectCustomer'
  import SelectDistributor from '@/components/select/SelectDistributor'
  import SelectProduct from '@/components/select/SelectProduct'

  export default {
    name: 'BusinessEdit',
    components: { SelectContact, SelectProduct, SelectDistributor, SelectCustomer },
    data() {
      return {
        form: {
          title: '',
          custId: undefined,
          custName: undefined,
          contactName: undefined,
          distributorName: undefined,
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
        queryContact: {},
      }
    },
    created() {},
    methods: {
      handleSelectCustomer() {
        this.$refs.selectCustomer.open()
      },
      handleSelectContact() {
        if (!this.queryContact.custId) {
          this.$message.warning('请选择联系人')
        }
        this.$refs.selectContact.open()
      },
      handleSelectDistributor() {
        this.$refs.selectDistributor.open()
      },
      handleSelectProduct() {
        this.$refs.selectProduct.open()
      },
      selectCustomer(val) {
        if (val && val.length > 0) {
          this.queryContact.custId = val[0].id
        }
        this.form.custName = val.map((item) => item.custName).join()
        console.log(this.form.custName)
        console.log(val)
      },
      selectContact(val) {
        this.form.contactName = val.map((item) => item.cuctName).join()
        console.log(this.form.contactName)

        console.log(val)
      },
      selectDistributor(val) {
        this.form.distributorName = val.map((item) => item.distName).join()
        console.log(this.form.distributorName)

        console.log(val)
      },
      selectProduct(val) {
        console.log(val)
      },
      showEdit(row) {
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '编辑'
          this.form = Object.assign({}, row)
        }
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { msg } = await businessApi.doEdit(this.form)
            this.$baseMessage(msg, 'success')
            this.$emit('fetch-data')
            this.close()
          } else {
            return false
          }
        })
      },
    },
  }
</script>
