<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
    <el-row>
      <el-col :span="24">
        <el-form-item label="线下接待人员" prop="offlineReceiver">
          <el-input v-if="form.offlineReceiverName" v-model="form.offlineReceiverName" disabled />+
          <el-select v-model="form.offlineReceiver" multiple filterable placeholder="请选择" style="width:97%; padding-top:5px;">
            <el-option v-for="dict in options.userOptions.filter(item => !options.offlineReceiver || !options.offlineReceiver.includes(item.id))" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注" prop="memo">
          <el-input v-model="form.memo" type="textarea" :rows="4" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col v-if="distributeRecord != undefined && distributeRecord.length > 0" :span="24">
        <el-form-item label="甩单记录">
          <el-timeline style="max-height:260px;overflow-y:auto;">
            <el-timeline-item v-for="item in distributeRecord" :key="item.record" :timestamp="item.operateTime" placement="top" style="padding:5px !important;">
              <el-card>
                <span style="display:block;font-weight: bold; font-size:13px;">用户 {{ item.operateUserName }}</span>
                <span style="display:block;padding-left: 10px; font-size:13px;" v-html="item.centent" />
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getDistributeRecord } from '@/api/zs/clue'
export default {
  name: 'DistributeForm',
  model: {
    prop: 'info',
    event: 'update',
  },
  props: {
    info: {
      type: Object,
      default: () => { },
    },
    options: {
      type: Object,
      default: () => ({
        userOptions: [],
        offlineReceiver: [],
      }),
    },
  },
  data() {
    return {
      form: JSON.parse(JSON.stringify(this.info)),
      rules: {
        offlineReceiver: {
          required: true,
          message: '线下接待人员不为空',
          trigger: 'change',
        },
      },
      distributeRecord: [],
    }
  },
  watch: {
    form: {
      handler(val) {
        this.$emit('update', val)
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.handleDistribute()
  },
  methods: {
    validate() {
      return this.$refs.form.validate()
    },
    handleDistribute() {
      // 甩单
      getDistributeRecord({ clueId: this.form.clueId }).then((resp) => {
        if (resp.code === 200) {
          this.distributeRecord = resp.data
        }
      })
    },
  },
}
</script>
