<template>
  <div class="container search-customer-dlg">
    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="搜索流失客户" :visible.sync="searchCustomer" :before-close="searchCancelHandle" width="529px">
      <div>
        <p style="margin: 10px 0 10px">搜索有线上参会记录的流失客户</p>
        <el-autocomplete
          class="inline-input"
          style="width: 100%"
          v-model="clientName"
          clearable
          :fetch-suggestions="querySearch"
          placeholder="请输入客户名称"
          :trigger-on-focus="false"
        >
        <template slot-scope="scope">
           <div v-if="scope.item.CompanyName">
            {{ scope.item.CompanyName }}
          </div>
          <div v-else style="text-align: center">暂无数据</div>
        </template>
        </el-autocomplete>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button style="width: 224px; margin-right: 20px" type="primary" @click="searchConfirmHandle">确 定</el-button>
        <el-button style="width: 224px" @click="searchCancelHandle">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="搜索结果" :visible.sync="resultCustomer" :before-close="resultCancelHandle" width="529px">
      <div class="result-table">
        <div class="result-text">
          <p>客户名称：{{ resultDate.CompanyName }}</p>
          <p>所属销售：{{ resultDate.SellerName }}</p>
        </div>
        <el-table :data="resultDateList" content border height="300">
          <el-table-column v-for="item in searchResultTable" :key="item.key" :label="item.label" :width="item.widthsty" align="center">
            <template slot-scope="{ row }">
              <span @click="handleRowClick(row, item.key)" :class="item.key == 'TotalMeeting' ? 'editsty' : ''">
                {{ handleRowContent(row, item.key) }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="参会明细" :visible.sync="detailedVisibleDlg" :before-close="detaileCancelHandle" width="1242px">
      <div style="margin-bottom: 30px">
        <div style="margin-bottom: 20px">
          <span style="margin-right: 30px">姓名：{{ detailedDate.RealName }}</span>
          <span>手机号：{{ detailedDate.Mobile }}</span>
        </div>
        <el-table :data="detailedDateList" content border height="350">
          <el-table-column v-for="item in detailedTable" :key="item.key" :label="item.label" :width="item.widthsty" :min-width="item.minwidthsty" align="center">
            <template slot-scope="{ row }">
              <span> {{ row[item.key] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";

import { SearchResultTable, DetailedTable } from "./applyTableColums";
export default {
  name: "",
  components: {},
  props: {
    searchCustomer: {
      default: false,
    },
  },
  data() {
    return {
      clientName: "", //无相关流失客户
      clientList: "", //
      //结果
      resultCustomer: false,
      resultDateList: [],
      resultDate: {},
      //明细
      detailedVisibleDlg: false,
      detailedDateList: [],
      detailedDate: {},
    };
  },
  computed: {
    searchResultTable() {
      return SearchResultTable;
    },
    detailedTable() {
      return DetailedTable;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //搜索的确定
    async searchConfirmHandle() {
      if (!this.clientName) return this.$message.error("请输入客户名称");
      if (!this.clientList.length) return this.$message.error("无相关流失客户");
      const res = await raiInterface.getActivityLossUser({ CompanyName: this.clientName });
      if (res.Ret === 200) {
        this.resultDate = res.Data;
        this.resultDateList = res.Data.List || [];
        this.resultCustomer = true;
      }
    },
    //搜索的联想
    async querySearch(queryString, cb) {
      cb([]);
      if (queryString) {
        const res = await raiInterface.getActivityLossCompany({ KeyWord: queryString });
        if (res.Ret === 200) {
          this.clientList = res.Data.List || [];
          if (res.Data && res.Data.List.length > 0) {
            let arr = res.Data.List.map((item) => {
              return { value: item.CompanyName, ...item };
            });
            cb(arr);
          } else {
            cb([{}]);
          }
        }
      }
    },

    handleRowContent(row, key) {
      return row[key];
    },
    async handleRowClick(row, key) {
      if (key == "TotalMeeting") {
        const res = await raiInterface.getActivityLossMeet({
          Mobile: row.Mobile,
        });
        if (res.Ret === 200) {
          this.detailedDate = res.Data;
          this.detailedDateList = res.Data.List || [];
           this.detailedVisibleDlg = true;
        }
      }
    },

    //搜索的取消
    searchCancelHandle() {
      this.$emit("update:searchCustomer", false);
      this.clientName = "";
    },
    //搜索结果的取消
    resultCancelHandle() {
      this.resultCustomer = false;
      this.resultDateList = [];
    },
    //参会明细的取消
    detaileCancelHandle() {
      //明细
      this.detailedVisibleDlg = false;
      this.detailedDateList = [];
    },
  },
};
</script>
<style scoed lang="scss">
.search-customer-dlg {
  .el-dialog .el-input {
    width: 100% !important;
  }
  .dialog-footer {
    margin: 20px 0 0;
  }

  .result-table {
    margin-bottom: 30px;
    .result-text {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
  }
}
</style>
