<!--
 * @Descripttion: 销售线索-门店任务-任务详情-完成详细信息
 * @version: 1.0.0
 * @Author: 阿羽
 * @Date: 2021-04-13 17:57:01
 * @LastEditors: 阿羽
 * @LastEditTime:  2021-04-13 17:57:01
 -->
<!--
  <salesleads-taskinfo :item="item"></salesleads-taskinfo>
  import salesleadsTaskinfo from '@/components/review/salesleads-task-info.vue';
 -->
<template>
  <el-dialog title="完成详情" :visible.sync="dialogVisible" width="600px" @close="close">
    <div>
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane :label="`${tab.label}（${countList[tab.type]}）`" :name="tab.name" v-for="tab in tabsList" :key="tab.name"></el-tab-pane>
      </el-tabs>
      <el-tooltip content="导出结果中会员姓名、手机号等敏感信息将进行加密，实现隐私保护" placement="top">
        <i class="el-icon-warning-outline font-14 p-l-6 icon" v-show="enableDownloadCompleteData == 0"></i>
      </el-tooltip>
      <el-button :loading="loadingBtn" type="primary" class="btn" @click="beforeExportExcel">导出</el-button>
      <el-table :data="tableData" style="width: 100%" height="200" v-loading="loading">
        <el-table-column prop="memberName" label="会员姓名" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="sendStatus" label="发送状态" width="176">
          <template slot-scope="scope"><i :class="['dot', statusClassName[scope.row.sendStatus]]"></i>{{ statusLabel[scope.row.sendStatus] }}</template>
        </el-table-column>
        <el-table-column prop="failReasonDescription" label="原因" show-overflow-tooltip> </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageParams.pageSize" style="text-align:right;" @current-change="handlePageChange"> </el-pagination>
    </div>
    <export-dialog :dialogVisible="exportDialog" @export="exportExcel" @update:dialogVisible="changeExportDialog" />
  </el-dialog>
</template>
<script>
import { getRequest, postExcel } from '@/api/api';
import exportDialog from '@/components/common/export-dialog.vue';
import errMsg from '@/common/js/error';
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      }
    },
    enableDownloadCompleteData: {
      type: [Number, String],
      default() {
        return 0;
      }
    },
    date: {
      type: [Array],
      default() {
        return [];
      }
    },
    storeId: '',
    ecmPlanName: ''
  },
  components: {
    exportDialog
  },
  data() {
    return {
      loading: false,
      dialogVisible: true,
      activeName: '0',
      pageParams: {
        pageNum: 1,
        pageSize: 5,
        enterpriseId: '',
        taskId: ''
      },
      total: 0,
      tabsList: [
        {
          label: '全部',
          name: '0',
          params: null,
          type: 'totalCount'
        },
        {
          label: '待发送',
          name: '1',
          params: 0,
          type: 'waitSendCount'
        },
        {
          label: '已发送',
          name: '2',
          params: 1,
          type: 'successCount'
        },
        {
          label: '发送失败',
          name: '3',
          params: 2,
          type: 'failCount'
        }
      ],
      countList: {
        totalCount: 0,
        waitSendCount: 0,
        successCount: 0,
        failCount: 0
      },
      tableData: [],
      // 0未发送 1已发送 2发送失败
      statusClassName: ['bg-C0C4CC', 'bg-33AF4A', 'bg-F5222D'],
      statusLabel: ['未发送', '已发送', '发送失败'],
      loadingBtn: false,
      exportDialog: false
    };
  },
  methods: {
    beforeExportExcel() {
      if (this.enableDownloadCompleteData == 1) {
        this.exportDialog = true;
      } else {
        this.exportExcel(0);
      }
    },
    changeExportDialog() {
      this.exportDialog = false;
      this.multipleSelection = [];
    },
    /**
     * 导出
     */
    exportExcel(type) {
      this.loadingBtn = true;
      let url = '/haoban-task-manage-web/market/clue/export/store-view-task-detail-comp-detail';
      let para = {
        enterpriseId: sessionStorage.getItem('userInfoBrandId'),
        dataType: type,
        pageNum: this.pageParams.pageNum,
        pageSize: this.pageParams.pageSize,
        taskId: this.pageParams.taskId,
        storeId: this.storeId
      };
      let fileName = this.date.length ? `群发任务-门店视图-任务详情-完成详情_${this.date[0]}至${this.date[1]}.xls` : `群发任务-门店视图-任务详情-完成详情.xls`;
      if (this.ecmPlanName) {
        para.ecmPlanName = this.ecmPlanName;
        url = '/haoban-task-manage-web/market/clue/export/plan-view-task-store-task-comp-detail';
        fileName = this.date.length ? `群发任务-计划视图-任务门店详情-任务详情-完成详情_${this.date[0]}至${this.date[1]}.xls` : `群发任务-计划视图-任务门店详情-任务详情-完成详情.xls`;
      }
      this.tabsList[this.activeName].params == null ? '' : (para.sendStatus = this.tabsList[this.activeName].params);
      postExcel(url, para)
        .then(res => {
          this.loadingBtn = false;
          if (!res.data) {
            errMsg.errorMsg('暂无数据');
            return false;
          }
          // let resData = res.data;
          const blob = new Blob([res.data], {
            type: 'application/vnd.ms-excel'
          });
          const elink = document.createElement('a');
          elink.download = fileName;
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
          // errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          this.loadingBtn = false;
          this.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    close() {
      this.$emit('close');
    },
    handleTabClick(tab, event) {
      this.pageParams.pageNum = 1;
      this.getTableList();
    },
    handlePageChange(pageNum) {
      this.pageParams.pageNum = pageNum;
      this.getTableList();
    },
    getNum() {
      const that = this;
      const para = { ...that.pageParams };
      getRequest('/haoban-task-manage-web/market/clue/web/member-send-count', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1 && resData.result) {
            this.countList = Object.assign(this.countList, resData.result);
          } else {
            errMsg.errorMsg(resData);
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    getTableList() {
      const that = this;
      that.loading = true;
      const para = Object.assign({}, that.pageParams, { sendStatus: that.tabsList[this.activeName].params });
      getRequest('/haoban-task-manage-web/market/clue/web/task-member-list', para)
        .then(res => {
          let resData = res.data;
          that.tableData = [];
          if (resData.errorCode == 1 && resData.result) {
            that.tableData = Array.isArray(resData.result.list) ? resData.result.list : [];
            that.total = resData.result.pageInfo.total || 0;
          } else {
            errMsg.errorMsg(resData);
          }
          that.loading = false;
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    item(newData) {
      const that = this;
      if (Object.keys(newData).length) {
        that.$nextTick(() => {
          that.pageParams = Object.assign({}, that.pageParams, JSON.parse(JSON.stringify(newData)));
          that.getNum();
          that.getTableList();
        });
      }
    }
  },
  mounted() {
    const that = this;
    if (Object.keys(that.item).length) {
      that.$nextTick(() => {
        that.pageParams = Object.assign({}, that.pageParams, JSON.parse(JSON.stringify(that.item)));
        that.getNum();
        that.getTableList();
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.bg-C0C4CC {
  background: #c0c4cc;
}
.bg-33AF4A {
  background: #33af4a;
}
.bg-F5222D {
  background: #f5222d;
}

>>> .el-dialog__header {
  padding: 19px 28px;
}
>>> .el-dialog__body {
  padding-top: 10px;
}
>>> .el-table__empty-block {
  min-height: 150px;
}
.btn {
  height: 32px;
  margin-bottom: 20px;
  float: right;
}
.icon {
  float: right;
  margin: 10px 0 0 5px;
}
</style>
