<template>
  <div>
    <el-dialog :title="title" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="800px"
      @close="closeDialog">
      <div>
        <el-table v-loading="loading" :data="invitationRecords" border>
          <el-table-column label="操作时间" prop="createTime" width="140" />
          <el-table-column label="邀约场地" prop="placeName" width="200" />
          <el-table-column label="约定时间" prop="invitationTime" width="120" />
          <el-table-column label="备注" prop="remark" width="200" />
          <el-table-column label="操作" fixed="right" width="80">
            <template slot-scope="scope">
              <el-button size="mini" v-if="scope.$index == 0 && isEdit" type="text" icon="el-icon-edit"
                @click="handleEdit(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-jclick type="primary" :disabled="!isAdd" @click="handleAdd()">新增</el-button>
        <el-button plain @click="closeDialog">关闭</el-button>
      </span>
    </el-dialog>
    <InvitationFormDialog ref="InvitationFormDialog" @refreshDataList="getInvitationRecord" />
  </div>
</template>
<script>
import { getInvitationByClue } from '@/api/zs/invitation';
import InvitationFormDialog from './InvitationFormDialog.vue';

export default {
  name: 'InvitationDialog',
  components: {
    InvitationFormDialog
  },
  data() {
    return {
      visible: false,
      canSubmit: true,
      placeOptions: [],
      isEdit: true,
      invitationRecords: [],
      clueId: undefined,
      loading: false,
      title: undefined,
      clueInfo: undefined,
      isAdd: false
    };
  },
  methods: {
    init(info = undefined) {
      this.visible = true;
      this.title = "邀约";
      this.isAdd = false;
      this.isEdit = true;
      this.clueInfo = undefined;
      this.$nextTick(() => {
        if (info) {
          this.clueInfo = info;
          if (info.feedbackStatus >= 2) {
            this.isEdit = false;
          }
          if (info.feedbackStatus == 0 || info.feedbackStatus == 5 || info.feedbackStatus == 6) {
            this.isAdd = true;
          }
          if (info.clueId) {
            this.clueId = info.clueId;
            this.getInvitationRecord();
          }
          this.title = this.title + '【' + (info.name == null ? '' : info.name) + '  ' + info.phone + '】';
        }
      });
    },
    closeDialog() {
      this.visible = false;
      // this.$emit('update:dialog.batchUpdateVisible', false);
      this.$emit('refreshDataList');
    },
    getInvitationRecord() {
      getInvitationByClue({ clueId: this.clueId }).then(resp => {
        if (resp.data) {
          this.invitationRecords = resp.data;
          if (this.invitationRecords && this.invitationRecords.length > 0) {
            this.dialogForm = this.invitationRecords[0];
          }
        }
      });
    },
    handleAdd() {
      const invitation = {
        invitationId: undefined,
        clueId: this.clueInfo.clueId,
        name: this.clueInfo.name,
        phone: this.clueInfo.phone,
        address: this.clueInfo.address,
        placeId: undefined,
        invitationTime: undefined,
        remark: undefined
      };
      this.handleEdit(invitation);
    },
    handleEdit(item) {
      this.$nextTick(() => {
        this.$refs.InvitationFormDialog.init(item)
      });
    }
  }
};
</script>

<style scoped>
.el-divider--vertical {
  height: 15em !important;
}
</style>
    
    