<template>
  <div>
    <el-dialog :title="title" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="800px"
      @close="closeDialog" style="min-height: 400px;">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="邀约信息" name="first">
          <el-table v-loading="loading" :data="invitationRecords" border>
            <el-table-column label="操作时间" prop="createTime" width="140" />
            <el-table-column label="邀约场地" prop="placeName" min-width="200" />
            <el-table-column label="约定时间" prop="invitationTime" width="120" />
            <el-table-column label="备注" prop="remark" min-width="200" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="分发信息" name="second">
          <el-table v-loading="loading" :data="distributeRecords" border>
            <el-table-column label="操作时间" prop="distributeTime" width="140" />
            <el-table-column label="分发场地" prop="placeName" min-width="200" />
            <!-- <el-table-column label="接待人" prop="invitationTime" min-width="120" /> -->
            <el-table-column label="接待人" prop="coachName" min-width="120" />
            <el-table-column label="操作" fixed="right" min-width="100">
              <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>
                <el-button size="mini" type="text"
                  @click="handleFeedback(scope.row)">反馈信息</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer" >
        <el-button v-jclick type="primary" :disabled="!isAdd" @click="handleAdd()">新增</el-button>
        <el-button plain @click="(visible = false)">取消</el-button>
      </span>
    </el-dialog>
    <DistributeFormDialog ref="DistributeFormDialog" @refreshDataList="getFeedbackOrder" />
    <FeedbackDialog ref="FeedbackDialog" />

  </div>
</template>
<script>
import { listFeedbackOrder } from '@/api/zs/feedbackOrder';
import { getInvitationByClue } from '@/api/zs/invitation';
import DistributeFormDialog from './DistributeFormDialog.vue';
import FeedbackDialog from './FeedbackDialog.vue';

export default {
  name: 'DistributeDialog',
  components: {
    DistributeFormDialog, FeedbackDialog
  },
  data() {
    return {
      visible: false,
      canSubmit: true,
      loading: false,
      placeOptions: [],
      coachOptions: [],
      feedbackDetail: [],
      activeTab: 'first',
      invitationRecords: [],
      clueInfo: undefined,
      distributeRecords: [],
      isAdd: false,
      isEdit: true,
      title: '分发'
    };
  },
  methods: {
    init(info = undefined) {
      this.activeTab = 'first';
      // this.getPlaces();
      this.visible = true;
      this.isAdd = false;
      this.isEdit = true;
      this.title = '邀约';
      this.$nextTick(() => {
        if (info) {
          this.clueInfo = info;
          if (info.feedbackStatus > 2) {
            this.isEdit = false;
          }
          if (info.feedbackStatus == 1 || info.feedbackStatus == 5 || info.feedbackStatus == 6) {
            this.isAdd = true;
          }
          // 查询线索的邀约情况
          this.getInvitationByClue();
          // 查询该线索的分发a情况
          this.getFeedbackOrder();
          this.title = this.title + '【' + (info.name == null ? '' : info.name) + '  ' + info.phone + '】';
        }
      });
    },
    closeDialog() {
      this.$emit('update:dialog.batchUpdateVisible', false);
    },
    getInvitationByClue() {
      getInvitationByClue({ clueId: this.clueInfo.clueId }).then(resp => {
        if (resp.code == 200 && resp.data) {
          this.invitationRecords = resp.data;
        }
      });
    },
    getFeedbackOrder() {
      listFeedbackOrder({ clueId: this.clueInfo.clueId }).then(resp => {
        if (resp.code == 200 && resp.rows && resp.rows.length > 0) {
          this.distributeRecords = resp.rows.filter(item => item.feedbackStatus != 0);
        }
      });
    },
    handleFeedback(item) {
      this.$nextTick(() => {
        this.$refs.FeedbackDialog.init(item.orderId);
      });
    },
    handleAdd() {
      const item = {
        placeId: undefined,
        clueId: this.clueInfo.clueId,
        coachId: undefined,
        copyUserList: []
      };
      this.handleEdit(item);
    },
    handleEdit(item) {
      this.$nextTick(() => {
        this.$refs.DistributeFormDialog.init(item);
      });
    }
  }
};
</script>

