<template>
  <div>
    <el-dialog :title="$t('新建潜在客户信息')" :visible.sync="dialogTableVisible" :close-on-click-modal=false>
      <el-form ref="form" :rules="rules" :model="form" label-width="100px" style="padding: 0 20px;">
        <el-form-item prop="name" :label="$t('姓名')">
          <el-input v-model="form.name" :placeholder="$t('请输入姓名')"></el-input>
        </el-form-item>
        <el-form-item required :label="$t('联系方式')">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item prop="customerContacts[0].areaCode">
                <area-code-selector v-model="form.customerContacts[0].areaCode"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="customerContacts[0].phoneNew">
                <el-input style="width:100%;" v-model="form.customerContacts[0].phoneNew" maxlength="11"
                          :placeholder="$t('请输入联系方式')"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="社交软件">
              <el-select v-model="form.customerContacts[0].social" :placeholder="$t('请选择社交软件')" size="mini">
                <el-option v-for="dict in getDictDatas(DICT_TYPE.SOCIAL)"
                           :key="dict.value" :label=" $l(dict,'label')" :value="parseInt(dict.value)"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="社交软件号码">
              <el-input v-model="form.customerContacts[0].socialNumber" :placeholder="$t('请输入社交软件号码')"
                        size="mini"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱">
              <el-input v-model="form.customerContacts[0].email" :placeholder="$t('请输入邮箱')" size="mini"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="source" :label="$t('来源')">
          <el-select v-model="form.source" :placeholder="$t('请选择来源')">
            <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_SOURCE)"
                       :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('类别')" prop="type">
          <dict-selector v-model="form.type" :type="DICT_TYPE.CUSTOMER_TYPE" form-type="checkbox"
                         multiple></dict-selector>
        </el-form-item>

        <el-form-item :label="$t('角色')">
          <dict-selector :type="DICT_TYPE.CUSTOMER_ROLE" form-type="checkbox" multiple v-model="form.roles"></dict-selector>
        </el-form-item>

        <el-form-item prop="customerService" :label="$t('客户经理')">
          <el-select v-model="form.customerService" :placeholder="$t('请选择客户经理')">
            <el-option v-for="item in serviceUserList"
                       :key="item.id" :label="item.nickname" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('公司名称')">
          <el-input v-model="form.company"></el-input>
        </el-form-item>
        <el-form-item :label="$t('公司英文名称')">
          <el-input v-model="form.companyEn"></el-input>
        </el-form-item>

<!--        <el-form-item :label="$t('主营类别')" prop="productType">-->
<!--          <el-row :gutter="10">-->
<!--            <el-col :span="11">-->
<!--              <el-select v-model="form.productType" style="width: 100%" @change="getProductListFn"-->
<!--                         :placeholder="$t('请选择产品类别')">-->
<!--                <el-option :label="item.titleZh" :value="item.id" v-for="(item) in productTypeList" :key="item.id"/>-->
<!--              </el-select>-->
<!--            </el-col>-->
<!--            <el-col :span="11">-->
<!--              <el-select v-model="form.productId" style="width: 100%" :placeholder="$t('请选择')">-->
<!--                <el-option :label="item.titleZh" :value="parseInt(item.id)" v-for="(item) in productList"-->
<!--                           :key="item.id"/>-->
<!--              </el-select>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </el-form-item>-->

        <el-form-item :label="$t('主营类别')" prop="products">
          <div style="overflow: hidden">
            <div style="margin-bottom: 10px" v-for="(ITEM, INDEX) in form.products" :key="INDEX">
              <el-row :gutter="2">
                <el-col :span="9" style="width: auto">
                  <el-select @change="change(INDEX, $event)" v-model="form.products[INDEX].typeId" filterable :placeholder="$t('请选择产品类别')">
                    <el-option :label="isChinese ? item.titleZh : item.titleEn" :value="item.id" v-for="item in productTypeList" :key="item.id" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select @change="productIdsChange(INDEX, $event)" multiple filterable clearable v-model="form.products[INDEX].productIds" :placeholder="$t('请选择')">
                    <el-option :label="`${item.titleZh}`" :value="parseInt(item.id)" v-for="item in form.products[INDEX].productList" :key="item.id" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-button type="danger" @click="form.products.splice(INDEX, 1)" style="padding: 10px" :disabled="!INDEX"><i class="el-icon-minus"></i></el-button>
                  <el-button type="primary" @click="handleAddProduct" style="padding: 10px" v-if="INDEX === form.products.length - 1"><i class="el-icon-plus"></i></el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form-item>

        <el-form-item :label="$t('图片')" prop="picture">
          <upload v-model="form.picture" :limit="1"></upload>
        </el-form-item>
        <el-form-item :label="$t('询盘信息')">
          <el-input
              v-model="form.inquiry"
              type="textarea"
              :rows="3"
              :placeholder="$t('请输入内容')">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">{{ $t('取 消') }}</el-button>
        <el-button type="primary" @click="submit">{{ $t('确 定') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import AreaCodeSelector from "@/components/AreaCodeSelector/index.vue";
import {listServiceUser} from "@/api/system/user";
import {getProductTypeList} from "@/api/ecw/productType";
import {getProductList} from "@/api/ecw/product";
import {createPotential} from "@/api/ecw/customer";
import upload from '@/components/ImageUpload'

export default {
  name: "addPotentialCustom",
  methods: {
    getDictDatas,
    change(INDEX, val) {
      this.form.products[INDEX].productIds = []
      this.getProductListFn(INDEX, [val])
      this.$refs["form"].validateField("products")
    },
    getProductListFn(INDEX, val) {
      getProductList({ typeIds: !val[0] ? [] : val }).then((r) => {
        this.form.products[INDEX].productList = r.data
      })
    },
    handleAddProduct() {
      this.form.products.push({ typeId: undefined, productIds: [], productList: [] })
      this.getProductListFn(this.form.products.length - 1, [undefined])
    },
    productIdsChange(INDEX, val) {
      let typeIds = this.form.products[INDEX].productList.filter((item) => val.indexOf(item.id) > -1).map((item) => item.typeId)
      typeIds = [...new Set(typeIds)]
      let typeId = undefined
      if (typeIds.length) {
        typeId = typeIds[0]
      }
      if (typeId !== this.form.products[INDEX].typeId) {
        this.form.products[INDEX].typeId = typeId
        this.getProductListFn(INDEX, [typeId])
      }
    },
    productsValidator(rule, value, callback) {
      let r = this.form.products.some((item) => {
        if (!item.typeId) {
          callback(new Error(this.$t("主营类别不能为空")))
          return true
        }
      })
      let typeIds = this.form.products.map((item) => item.typeId)
      if (new Set(typeIds).size !== typeIds.length) {
        callback(new Error(this.$t("主营类别不能重复")))
        return
      }
      if (!r) {
        callback()
      }
    },
    reset() {
      this.form = {
        name: undefined,
        customerContacts: [{
          areaCode: '',
          phoneNew: undefined,
          name: undefined,
          isDefault: 1,
          social: undefined,
          socialNumber: undefined,
          email: undefined,
        }],
        source: undefined,
        type: [],
        customerService: undefined,
        company: undefined,
        companyEn: undefined,
        inquiry: undefined,
        productTypes: [],
        productIds: [],
        products: [],
        picture: undefined,
      }
    },
    submit() {
      this.$refs.form.validate((valId) => {
        if (valId) {
          let p = {...this.form}
          p.type = p.type.join(',')
          p.roles = (p.roles || [])?.join(",")
          p.productIds = (p.productIds || [])?.join(",")
          p.productTypes = (p.productTypes || [])?.join(",")
          p.customerContacts[0].name = p.name
          createPotential(p).then(r => {
            if (r.code === 0) {
              this.$emit('change');
              this.dialogTableVisible = false;
              this.$message(this.$t('创建成功'));
              this.reset()
              this.$refs.form.resetFields()
            }
          })
        }
      })

    },
  },
  components: {AreaCodeSelector, upload},
  created() {
    this.reset()
    listServiceUser().then(r => {
      this.serviceUserList = r.data
    })
    getProductTypeList().then(r => {
      this.productTypeList = r.data
    })

    this.form.products.push({ typeId: undefined, productIds: [], productList: [] })
    this.getProductListFn(0, [undefined])
  },
  computed: {
    isChinese() {
      return this.$i18n.locale === "zh_CN"
    },
    DICT_TYPE() {
      return DICT_TYPE
    },
    rules() {

      return {
        // products: [
        //   {
        //     required: true,
        //     trigger: "blur",
        //     validator: this.productsValidator
        //   }
        // ],
        name: {required: true, message: this.$t('请输入名称'), target: 'blur'},
        customerService: {required: true, message: this.$t('请选择客户经理。'), target: ['blur'], type: 'number'},
        customerContacts: [{
          areaCode: {required: true, message: this.$t('请输入区号。'), target: 'blur'},
          phoneNew: {required: true, message: this.$t('请输入电话号码。'), target: 'blur'}
        },],
        type: {type: 'array', message: this.$t('请输入类别。'), required: true, target: ['blur', 'change']},
        source: {message: this.$t('前请输入来源'), required: true, target: 'change', type: 'number'}
      }
    }
  },

  data() {
    return {
      dialogTableVisible: false,
      serviceUserList: [],
      productTypeList: [],
      productList: [],
      form: {}
    }
  },
  watch: {
    dialogTableVisible(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
