<template>
  <section class="eval-newest dm-wrap" v-loading="loading">
    <div class="clearfix pb22">
      <store-group width="240" class="pr5" :model="storeGroupData" @commit-store="getStoreGroup"></store-group>
      <el-date-picker v-if="$route.meta.type !== 'bad'" class="w250" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh"></el-date-picker>
      <el-input v-model="listParams.searchName" class="w350" placeholder="订单号/门店名称/会员姓名/卡号/导购名称" clearable @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-button icon="iconfont icon-icon_yunxiazai fz14" v-if="$getButtonLimit($buttonCode.marketingEvaluationDownload) && $route.meta.type !== 'bad'" :limit-code="$buttonCode.marketingEvaluationDownload" class="fr" type="primary" @click="exportLatestEvaluate"> 下载Excel</el-button>
      <el-button v-if="$getButtonLimit($buttonCode.marketingEvaluationNewestAuto)" :limit-code="$buttonCode.marketingEvaluationNewestAuto" icon="el-icon-setting fz14" class="fr mr10 setting" @click="auto.visible = true" type="primary"></el-button>
    </div>
    <div class="filter--box">
      <el-select size="small" v-if="$route.meta.type === 'bad'" class="vertical-middle pl10 w150" v-model="badStatus" placeholder="选择差评类型" @change="$router.push('/evaluation/bad/' + badStatus)">
        <el-option v-for="item in badOptions" :key="item.msg" :label="item.msg" :value="item.msg"></el-option>
      </el-select>
      <el-select size="small" class="vertical-middle pl10 w150" v-model="listParams.visiteStatus" placeholder="选择发送状态" @change="refresh">
        <el-option v-for="item in visiteStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-checkbox class="vertical-middle" size="small" border v-if="$route.meta.type !== 'bad'" :true-label="1" :false-label="0" v-model="listParams.isBad" @change="refresh">不良评价</el-checkbox>
      <el-checkbox class="vertical-middle" size="small" border v-if="$route.meta.type !== 'bad'" :true-label="1" :false-label="0" v-model="listParams.isContent" @change="refresh">有评语</el-checkbox>
      <el-checkbox class="vertical-middle" size="small" border v-if="$route.meta.type !== 'bad'" :true-label="1" :false-label="0" v-model="listParams.hasReply" @change="refresh">有追评</el-checkbox>
    </div>
    <el-table tooltipEffect="light" :data="tableList" style="width: 100%" element-loading-text="拼命加载中">
      <template v-if="$getButtonLimit($buttonCode.marketingEvaluationNewestShow)">
        <el-table-column :show-overflow-tooltip="false" width="90" align="left" prop="showStatus" fixed="left" label="服务号显示">
          <template slot-scope="scope">
            <el-switch :limit-code="$buttonCode.marketingEvaluationNewestShow" v-model="scope.row.showStatus" :active-value="1" :inactive-value="0" @change="changeShow(scope.row)"> </el-switch>
          </template>
        </el-table-column>
      </template>
      <el-table-column :show-overflow-tooltip="false" width="160" align="left" prop="createTime" label="首次评价时间">
        <template slot-scope="scope">
          <p>{{ formatDateTimeByType(scope.row.createTime, 'yyyy-MM-dd-HH-mm') }}</p>
          <p class="fz13 gray">订单号:{{ scope.row.orderNumber }}</p>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="false" :min-width="140" align="left" prop="storeName" label="门店">
        <template slot-scope="scope">
          <p>{{ scope.row.storeName || '--' }}</p>
          <p class="fz13 gray">{{ scope.row.areaName || '--' }}</p>
        </template>
      </el-table-column>

      <el-table-column min-width="140" header-align="left" align="left" prop="clerkId" label="导购信息">
        <template slot-scope="scope">
          <div class="ellipsis-100">
            <img class="vertical-middle table__avatar--40" :src="filterAvatar(scope.row.clerkImage)" width="60" height="60" />
            <div class="inline-block vertical-middle">
              <p class="table-name--ellipsis">{{ scope.row.clerkName || '--' }}</p>
              <p class="fz13 gray">{{ scope.row.storeName || '--' }}</p>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column min-width="140" header-align="left" align="left" prop="memberId" label="会员信息">
        <template slot-scope="scope">
          <a class="ellipsis-100" :href="`${window.location.origin}/member/#/wechatmemberDetail?memberId=${scope.row.memberId}`" target="_blank">
            <img class="vertical-middle table__avatar--40" :src="filterAvatar(scope.row.thirdImgUrl)" width="60" height="60" />
            <div class="inline-block vertical-middle">
              <p class="table-name--ellipsis">{{ scope.row.memberName || '--' }}</p>
              <p class="fz13 gray">{{ scope.row.cardNum || '--' }}</p>
            </div>
          </a>
        </template>
      </el-table-column>

      <el-table-column :show-overflow-tooltip="false" min-width="120" align="left" prop="fwtd" label="服务/专业/门店">
        <template slot-scope="scope">
          {{ scope.row.fwtd + '/' + scope.row.zycd + '/' + scope.row.mdhj }}
        </template>
      </el-table-column>

      <el-table-column :show-overflow-tooltip="false" width="80" align="center" prop="content" label="评语">
        <template slot-scope="scope">
          <el-popover class="item" trigger="hover" v-if="scope.row.content" :content="scope.row.content" placement="top-start">
            <i slot="reference" class="el-icon-message fz20 blue"></i>
          </el-popover>
        </template>
      </el-table-column>
      <template v-if="$getButtonLimit($buttonCode.marketingEvaluationNewestReply)">
        <el-table-column :show-overflow-tooltip="false" width="80" align="center" prop="replyStatus" label="回复">
          <template slot-scope="scope">
            <el-button :limit-code="$buttonCode.marketingEvaluationNewestReply" type="text" @click="replyData(scope.row)">
              <template v-if="scope.row.replyStatus !== 1 && scope.row.content">
                立即回复
              </template>
              <i v-if="scope.row.replyStatus === 1" class="el-icon-message fz20 danger-color cursor"></i>
            </el-button>
          </template>
        </el-table-column>
      </template>

      <el-table-column label="操作" align="left" width="140px" fixed="right">
        <template slot-scope="scope">
          <span class="fz13" v-if="scope.row.isBad === 0">好评</span>
          <span class="fz13" v-if="$getButtonLimit($buttonCode.marketingEvaluationNewestAssign) && scope.row.visiteStatus === 0 && scope.row.isBad === 1">
            <el-button :limit-code="$buttonCode.marketingEvaluationNewestAssign" type="text" @click="allocateData(scope.row)">分配</el-button>
            <el-button :limit-code="$buttonCode.marketingEvaluationNewestAssign" type="text" @click="disAllocateData(scope.row)">不分配</el-button>
          </span>
          <span class="fz13" v-if="scope.row.visiteStatus === 1">已分配</span>
          <span class="fz13" v-if="scope.row.visiteStatus === 2">回访结束 <el-button type="text" @click="teleData(scope.row)">查看话务分配</el-button></span>
          <span class="fz13" v-if="scope.row.visiteStatus === 3">回访逾期</span>
          <span class="fz13" v-if="scope.row.visiteStatus === 4">不分配</span>
          <span class="fz13" v-if="scope.row.visiteStatus === 5">无需回访</span>
          <el-popover v-if="scope.row.visiteStatus === 6" placement="left" width="300" trigger="click">
            <div>{{ scope.row.delTaskReason || '暂无记录' }}</div>
            <el-button type="text" slot="reference">回访取消</el-button>
          </el-popover>
          <span class="fz13" v-if="scope.row.visiteStatus === 7">
            分配失败&nbsp;&nbsp;
            <el-button type="text" @click="allocateData(scope.row)">重新分配</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <dm-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
    <reply :show.sync="replyShow" :id="replyId" @refresh="getTableList"></reply>
    <vue-gic-export-excel :dialogVisible.sync="dialogVisible" :dataArr="tableList" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel>
    <el-dialog title="配置" :visible.sync="auto.visible" width="400px" @close="handleClose">
      <div class="pb20">
        <p class="mb20">是否启用不良评价话务回访自动分配功能</p>
        <el-radio-group v-model="auto.autoAllocationStatus">
          <el-radio :label="0">不启用</el-radio>
          <el-radio :label="1">启用</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="setEvaluateSetting" :loading="auto.loading">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<script>
import { latestEvaluationList, evaluateBad, evaluationStoreExists, allocateEvaluation, changeShowStatus, exportLatestEvaluate, setEvaluateSetting, getEvaluateSetting } from '@/service/api/evaluationApi.js';
import { formatDateTimeByType } from '@/utils/index.js';
import reply from './reply';
import storeGroup from '@/components/storeGroup';
import tableMethods from '@/mixins/tableMethods.js';
import filterAvater from '@/mixins/filterAvater.js';
export default {
  name: 'newest',
  mixins: [tableMethods, filterAvater],
  data() {
    return {
      window: window,
      storeGroupData: {},
      formatDateTimeByType,
      loading: false,
      dateTime: [Date.now() - 30 * 24 * 60 * 60 * 1000, Date.now()],
      tableList: [],
      listParams: { searchName: '', currentPage: 1, pageSize: 20, isBad: 0, isContent: 0, hasReply: 0, currentStoreGroupId: '', visiteStatus: -1, beginTime: '', endTime: '' },
      visiteStatusOptions: [{ value: -1, label: '所有' }, { value: 0, label: '待分配' }, { value: 1, label: '已分配' }, { value: 2, label: '回访结束' }, { value: 3, label: '回访逾期' }, { value: 5, label: '无需回访' }, { value: 6, label: '回访取消' }], // eslint-disable-line
      total: 0,
      replyShow: false,
      replyId: '',
      badStatus: this.$route.params.type,
      badOptions: [],
      projectName: 'marketing', // 当前项目名
      dialogVisible: false,
      excelUrl: '', // 下载数据的地址
      params: {}, // 传递的参数
      auto: {
        loading: false,
        info: {},
        visible: false, // 配置dialog
        autoAllocationStatus: 0
      }
    };
  },
  created() {
    this.getTableList();
    if (this.$route.params.type) {
      this.$store.commit('mutations_breadcrumb', [{ name: '企业管理', path: '' }, { name: '服务监督', path: '/evaluation' }, { name: '评价概览', path: '/evaluation/index/charts' }, { name: '差评详情', path: '' }]); // eslint-disable-line
    } else {
      this.$store.commit('mutations_breadcrumb', [{ name: '企业管理', path: '' }, { name: '服务监督', path: '/evaluation' }, { name: '最新评价', path: '' }]); // eslint-disable-line
    }
  },
  beforeDestroy() {
    this.$store.commit('mutations_layoutTips', '');
  },
  mounted() {
    this.getEvaluateSetting();
    this.$store.commit(
      'mutations_layoutTips',
      `<div class="layout--tips">
                      <i class="el-icon-info"></i>最新评价会在评价时间的隔天展示在小程序端附近门店的门店详情处
                  </div>`
    );
  },
  watch: {
    $route(val) {
      this.getTableList();
    }
  },
  components: {
    reply,
    storeGroup
  },
  methods: {
    // 设置配置
    setEvaluateSetting() {
      this.auto.loading = true;
      setEvaluateSetting({ autoStatus: this.auto.autoAllocationStatus }).then(res => {
        this.auto.loading = false;
        this.$tips({ message: '设置成功', type: 'success' });
        this.handleClose();
        this.getEvaluateSetting();
      });
    },
    // 获取配置详情
    getEvaluateSetting() {
      getEvaluateSetting().then(res => {
        this.auto.info = res.result || {};
        this.auto.autoAllocationStatus = res.result.autoAllocationStatus || 0;
      });
    },
    handleClose() {
      this.auto.visible = false;
      this.auto.autoAllocationStatus = this.auto.info.autoAllocationStatus || 0;
    },
    getStoreGroup(val) {
      this.listParams.currentStoreGroupId = val.storeGroupId || '';
      this.storeGroupData = { ...val };
      this.getTableList();
    },
    //回复
    replyData(row) {
      this.replyShow = true;
      this.replyId = row.evaluateId;
    },
    //分配 提示
    allocateData(row) {
      this.$confirm('确定将该评价回访任务分配给会员消费所在的门店店长？', '提示', {
        confirmButtonText: '确定',
        cancelBUttonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.allocateStore(row);
        })
        .catch(() => {
          this.$tips({ type: 'info', message: '已取消操作' });
        });
    },
    //分配 请求
    async allocateStore(row) {
      let resStore = await evaluationStoreExists({ storeId: row.storeId });
      if (resStore.errorCode === 0 && resStore.result) {
        let res = await allocateEvaluation({
          evaluateId: row.evaluateId,
          visiteStatus: 1,
          memberId: row.memberId,
          storeId: row.storeId,
          createTime: formatDateTimeByType(row.createTime, 'yyyy-MM-dd-HH-mm-ss'),
          evaluatedId: row.evaluatedId
        });
        if (res.errorCode === 0) {
          this.$tips({ type: 'warning', message: '分配成功' });
        }
        this.getTableList();
      } else {
        this.$tips({ type: 'warning', message: '门店不存在，不能执行分配操作' });
      }
    },
    //不分配 提示 请求
    disAllocateData(row) {
      this.$confirm('确定不分配该话务任务吗?', '提示', {
        confirmButtonText: '确定',
        cancelBUttonText: '取消',
        type: 'warning'
      })
        .then(() => {
          allocateEvaluation({
            evaluateId: row.evaluateId,
            visiteStatus: 4
          }).then(res => {
            if (res.errorCode === 0) {
              this.$tips({ type: 'warning', message: '操作成功' });
              this.getTableList();
            }
          });
        })
        .catch(() => {
          this.$tips({ type: 'info', message: '已取消操作' });
        });
    },
    //服务号显示隐藏
    async changeShow(row) {
      await changeShowStatus({ evaluateId: row.evaluateId, showStatus: row.showStatus });
      this.getTableList();
    },
    async getTableList(val) {
      if (this.$route.meta.type === 'bad') {
        try {
          this.loading = true;
          this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
          console.log(this.badStatus, this.$route.params.type);
          let res = await evaluateBad(Object.assign({ badStatus: this.$route.params.type }, this.listParams));
          if (res.errorCode === 0 && res.result) {
            this.tableList = res.result.page.result || [];
            this.total = res.result.page.totalCount;
            this.badOptions = res.result.badList;
          } else {
            this.tableList = [];
            this.total = 0;
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
        }
      } else {
        try {
          this.loading = true;
          this.formatterTimeFunc();
          let res = await latestEvaluationList(this.listParams);
          if (res.errorCode === 0 && res.result) {
            this.tableList = res.result.page.result || [];
            this.total = res.result.page.totalCount;
          } else {
            this.tableList = [];
            this.total = 0;
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
        }
      }
    },
    teleData(row) {
      this.$router.push('/calllog');
    },
    exportLatestEvaluate() {
      this.formatterTimeFunc();
      if (!this.listParams.beginTime || !this.listParams.endTime) {
        this.$tips({ type: 'warning', message: '时间不能为空' });
        return;
      }
      this.dialogVisible = true;
      this.excelUrl = exportLatestEvaluate;
      this.params = {
        searchName: this.listParams.searchName,
        visiteStatus: this.listParams.visiteStatus,
        isContent: this.listParams.isContent,
        isBad: this.listParams.isBad,
        currentStoreGroupId: this.listParams.currentStoreGroupId,
        beginTime: this.listParams.beginTime,
        endTime: this.listParams.endTime,
        requestProject: 'marketing'
      };
    },
    formatterTimeFunc() {
      if (!this.dateTime) {
        this.listParams.beginTime = this.listParams.endDate = '';
      } else {
        this.listParams.beginTime = formatDateTimeByType(this.dateTime[0], 'yyyy-MM-dd');
        this.listParams.endTime = formatDateTimeByType(this.dateTime[1], 'yyyy-MM-dd');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.setting {
  width: 33px;
  height: 33px;
  line-height: 33px;
  padding: 0;
}
</style>
