<template>
  <el-row>
    <form-col :span="24" label="图片" :prop="propPrefix + 'picture'">
      <image-upload v-model="form.picture" />
    </form-col>
    <form-col :span="span" label="客户" prop="customerId" v-if="!isHide('customerId')">
      <customer-input v-model="form.customerId" :text.sync="form.customerName" :disabled="isDisabled('customerId')"/>
    </form-col>
    <form-col :span="span" label="跟进方式" :prop="propPrefix + 'type'">
      <el-select v-model="form.type" placeholder="请选择跟进方式" style="width: 100%;">
        <el-option
          v-for="dict in dict.type.customer_follow_type"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        ></el-option>
      </el-select>
    </form-col>
    <form-col :span="24" label="跟进内容" :prop="propPrefix + 'content'">
      <el-input v-model="form.content" type="textarea" placeholder="请输入跟进内容" maxlength="1000" show-word-limit :autosize="{ minRows: 4 }"/>
    </form-col>
    <form-col :span="span" label="跟进时间" :prop="propPrefix + 'followTime'">
      <el-date-picker clearable
        style="width: 100%;"
        v-model="form.followTime"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        default-time="09:00:00"
        :picker-options="DatePickerOptions.DISABLE_FUTURE"
        placeholder="请选择跟进时间">
      </el-date-picker>
    </form-col>
    <form-col :span="span" label="下次跟进" :prop="propPrefix + 'nextFollowTime'">
      <el-date-picker clearable
        style="width: 100%;"
        v-model="form.nextFollowTime"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        default-time="09:00:00"
        :picker-options="DatePickerOptions.DISABLE_PAST"
        placeholder="请选择下次跟进时间">
      </el-date-picker>
    </form-col>
  </el-row>
</template>

<script>
import { DatePickerOptions } from '@/utils/constants.js';
import FormCol from '@/components/FormCol/index.vue';
import CustomerInput from '@/components/Business/Customer/CustomerInput.vue';
export default {
  name: 'CustomerFollowForm',
  components: { FormCol, CustomerInput },
  dicts: ['customer_follow_type'],
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
    hide: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Array,
      default: null,
    },
    span: {
      type: Number,
      default: 12
    },
    propPrefix: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      DatePickerOptions,
    }
  },
  computed: {
    isHide() {
      return (key) => {
        return this.hide.includes(key);
      }
    },
    isDisabled() {
      return (key) => {
        return this.disabled.includes(key);
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>