<template>
  <el-dialog title="保存为分群" :visible.sync="visible" width="400px" append-to-body>
    <el-form :inline="true" ref="formObj" :model="formObj" class="grouping-wrap-form" label-width="100px"
      :rules="formRules">
      <el-form-item label="分群名称" prop="name">
        <el-input size="small" v-model="formObj.name" placeholder="请输入分群名称" @blur="onInputBlur" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="客户类型">
        <el-select size="small" v-model="formObj.uploadClientType" disabled placeholder="请选择客户类型" clearable>
          <el-option v-for="(item, index) in clientTypeOptions" :key="index" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">保存并跳转</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { importDataBySelect, isGroupNameRepeat } from '@/api/grid/anchor.js'
import { clientTypeOptions } from './../constant-info'

export default {
  props: {
    defaultUploadClientType: {
      type: String,
      default: ''
    },
    checkedArr: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    visible(val) {
      val && this.getInitData()
    }
  },
  data() {
    return {
      custTypeMap: {
        个人: '0',
        商户: '1',
        企业: '2'
      },
      visible: false,
      clientTypeOptions,
      formObj: {
        uploadClientType: '',
        name: ''
      },
      formRules: {
        name: [
          { required: true, message: '分群名称不能为空' },
          {
            min: 2,
            max: 20,
            message: '分群名称长度必须介于 2 和 20 之间'
          }
        ]
      }
    }
  },
  methods: {
    getInitData() {
      this.formObj.uploadClientType = this.defaultUploadClientType
    },
    async onInputBlur() {
      const res = await isGroupNameRepeat({
        groupName: this.formObj.name
      })
      if (res !== true) {
        this.formObj.name = ''
        this.$message.error('分群名称不能重复，请重新填写')
      }
    },
    onClose() {
      this.visible = false
      this.resetForm()
      setTimeout(() => {
        this.clearValidate()
      }, 0)
    },
    onSubmit() {
      this.$refs.formObj.validate((valid) => {
        if (valid) {
          this.doSave()
        }
      })
    },
    async doSave() {
      const newArr = this.getResultArr()
      const res = await importDataBySelect({
        custType: this.formObj.uploadClientType,
        groupName: this.formObj.name,
        customerSelects: newArr
      })
      if (res.code === 200) {
        this.$message.success(res.message)
        this.visible = false
        this.$router.push('/grid/create/segmentation')
      }
    },
    getResultArr() {

      if (['1', '2'].includes(this.formObj.uploadClientType)) {
        return this.checkedArr?.map((ot) => ({
          custName: ot.anchorName,
          socialCreditCode: ot.legalId
        }))
      } else if (this.formObj.uploadClientType === '0') {
        return this.checkedArr?.map((ot) => ({
          custName: ot.anchorName,
          custIdc: ot.legalId
        }))
      }
    },
    onOpen() {
      this.visible = true
    },
    resetForm() {
      Object.assign(this.formObj, this.$options.data().formObj)
    },
    clearValidate() {
      this.$refs.formObj.clearValidate()
    }
  }
}
</script>

<style lang="scss" scoped></style>