<template>
  <div class="message">
    <div class="search-bar">
      <el-input v-model="search.nameAndId" @change="onSearch" style="width: 260px" type="text" placeholder="请输入话术名称/ID" prefix-icon="el-icon-search" clearable></el-input>
      <el-select v-model="search.status" @change="onSearch" style="margin-left: 10px;width: 160px" placeholder="全部状态" clearable>
        <el-option v-for="el in statusList" :key="el.value" :value="el.value" :label="el.label"></el-option>
      </el-select>
      <el-alert title="若需要增加话术，请联系运营经理" style="margin-left: 10px; width: 264px" show-icon :closable="false"></el-alert>
    </div>
    <div class="temp-list">
      <div class="temp-item" v-for="el in tempList" :key="el.aiTemplateId">
        <div class="temp-title">{{ el.name }}</div>
        <div class="temp-info">
          <p class="temp-info-text">话术ID：{{ el.aiTemplateId }}</p>
          <p class="temp-info-text">更新时间：{{ formatDateTimeByType(el.updateTime) || '--' }}</p>
          <el-button class="temp-check-btn" type="text" @click="showTempDetail(el)">查看</el-button>
        </div>
        <div :class="['temp-status', { publish: el.status == -1 || el.status == 0 || el.status == 1 || el.status == 2 || el.status == 3 }, { reject: el.status == 4 }, { published: el.status == 5 }]">
          {{ el.status | formatStatus(statusList) }}
        </div>
      </div>
    </div>
    <dm-pagination v-if="total > 0" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total" :current-page="search.pageNum" :page-size="search.pageSize" :page-sizes="[20, 40, 60, 80]" layout="total, sizes, prev, pager, next"></dm-pagination>
    <div v-if="tempList.length == 0" class="no-data">
      <svg aria-hidden="true" width="100" height="100">
        <use xlink:href="#icon-zanwuhuashu"></use>
      </svg>
      <div class="no-data-text">还未创建话术，请联系运营经理创建话术</div>
    </div>
    <el-dialog :visible.sync="tempDetail.show" @closed="onClosed" custom-class="temp-detail" width="760px" title="查看话术">
      <div v-if="!Array.isArray(tempDetail.tempData) || tempDetail.tempData.length == 0" class="no-temp-data">
        <svg class="no-temp-icon" aria-hidden="true">
          <use xlink:href="#icon-zanwuhuashu"></use>
        </svg>
        暂无话术内容
      </div>
      <div class="temp-detail-list" v-else>
        <div class="temp-detail-item" v-for="el in tempDetail.tempData" :key="el.decisionId">
          <div class="temp-detail-content">
            <div class="temp-detail-title">{{ el.decisionNodeType | formatNodeType }}</div>
            <div v-if="!Array.isArray(el.decisionItemRecordDTOList) || el.decisionItemRecordDTOList.length == 0" class="no-temp-data">暂无录音</div>
            <template v-else>
              <div v-for="item in el.decisionItemRecordDTOList" :key="item.id" class="sound-record">
                <div class="temp-detail-desc">{{ item.knowledge || '--' }}</div>
                <template v-if="item.realKnowledgeOssUrl">
                  <el-button type="text" @click="onPlay(item, `player-${el.decisionId}-${item.id}`)" :loading="item.playing">{{ item.playing ? '播放中...' : '播放' }}</el-button>
                  <audio :id="`player-${el.decisionId}-${item.id}`" :src="item.ttsKnowledgeOssUrl"></audio>
                </template>
              </div>
            </template>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { tempPageStatistics, tempDetail } from '@/service/api/aiApi.js';
import { formatDateTimeByType } from '@/utils/index.js';
export default {
  name: 'Message',
  data() {
    return {
      formatDateTimeByType,
      tempList: [],
      total: 0,
      search: {
        nameAndId: '', //话术ID/话术名称
        brandNames: '', //品牌名称
        status: '', //话术状态 0：待发布 1：待审核 2：待录音 3：待上线 4：审核不通过 5：已上线
        commonFlag: '', //通用话术 0否 1是 -1 未配置
        pageNum: 1,
        pageSize: 20
      },
      statusList: [
        { label: '待发布', value: 0 },
        { label: '待审核', value: 1 },
        { label: '待录音', value: 2 },
        { label: '待上线', value: 3 },
        { label: '审核不通过', value: 4 },
        { label: '已上线', value: 5 }
      ],
      tempDetail: {
        show: false,
        aiTemplateId: '',
        tempData: []
      }
    };
  },
  filters: {
    formatStatus(status, statusList) {
      const list = [{ label: '三方删除', value: -1 }, ...statusList];
      const state = list.find(el => el.value == status);
      return state ? state.label : '--';
    },
    formatNodeType(type) {
      const types = ['普通节点', '跳转节点', 'IVR节点', '数据采集节点', '条件判断节点'];
      return types[type] || '--';
    }
  },
  created() {
    this.getTempList();
  },
  methods: {
    getTempList() {
      tempPageStatistics(this.search).then(res => {
        const { list, pageNum, total } = res.result || {};
        this.tempList = list;
        this.search.pageNum = pageNum;
        this.total = total;
      });
    },
    getTempDetail() {
      tempDetail({ aiTemplateId: this.tempDetail.aiTemplateId }).then(res => {
        this.tempDetail.tempData = res.result.list;
      });
    },
    onSearch() {
      this.handleCurrentChange(1);
    },
    handleSizeChange(pageSize) {
      this.search.pageSize = pageSize;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(pageNum) {
      this.search.pageNum = pageNum;
      this.getTempList();
    },
    showTempDetail(temp) {
      this.tempDetail.show = true;
      this.tempDetail.aiTemplateId = temp.aiTemplateId;
      this.getTempDetail();
    },
    onClosed() {
      this.tempDetail.aiTemplateId = '';
      this.tempDetail.tempData = [];
    },
    onPlay(data, playerId) {
      const handleError = () => {
        this.$message.error('资源错误');
        handleEnded(this);
      };
      const handleEnded = () => {
        this.$set(data, 'playing', false);
        player.removeEventListener('error', handleError);
        player.removeEventListener('ended', handleEnded);
      };
      this.$set(data, 'playing', true);
      const player = document.getElementById(playerId);
      player.addEventListener('error', handleError);
      player.addEventListener('ended', handleEnded);
      player.play().catch(handleError);
    }
  }
};
</script>

<style lang="scss" scoped>
.message {
  padding: 5px 20px 20px;
  .search-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .no-data {
    padding-top: 110px;
    text-align: center;
    .no-data-text {
      margin-top: 32px;
      font-size: 14px;
      font-weight: 400;
      color: #606266;
      line-height: 20px;
    }
  }
  .temp-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .temp-item {
      position: relative;
      margin-top: 20px;
      margin-right: 20px;
      margin-bottom: 10px;
      width: 276px;
      height: 150px;
      background: #ebecf0;
      border-radius: 4px;
      .temp-title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 48px;
        padding: 0 16px;
        background: rgba(47, 84, 235, 0.9);
        border-radius: 4px 4px 0px 0px;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        line-height: 22px;
      }
      .temp-info {
        padding: 10px 16px 14px;
        text-align: center;
        .temp-info-text {
          + .temp-info-text {
            margin-top: 4px;
          }
          text-align: left;
          font-size: 14px;
          font-weight: 400;
          color: #303133;
          line-height: 20px;
        }
      }
      .temp-check-btn {
        margin-top: 14px;
      }
      .temp-status {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        display: inline-block;
        padding: 2px 8px;
        border-radius: 0px 4px 0px 4px;
        font-size: 12px;
        font-weight: 500;
        line-height: 17px;
        &.publish {
          color: #2f54eb;
          background: #dee3fc;
        }
        &.published {
          color: #33af4a;
          background: #d6f4dc;
        }
        &.reject {
          color: #f5222d;
          background: #fddbdd;
        }
      }
    }
  }
}
.no-temp-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #606266;
  line-height: 20px;
  .no-temp-icon {
    margin-bottom: 18px;
    width: 44px;
    height: 44px;
  }
}
.temp-detail-item {
  padding-bottom: 10px;
  + .temp-detail-item {
    padding-top: 10px;
    border-top: 1px solid #e4e7ed;
  }
  .temp-detail-content {
    .temp-detail-title {
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #303133;
      line-height: 20px;
    }
    .sound-record {
      display: flex;
      justify-content: space-between;
      align-items: center;
      + .sound-record {
        margin-top: 10px;
        .temp-detail-desc {
          padding-top: 10px;
          border-top: 1px solid #e4e7ed;
        }
      }
      .temp-detail-desc {
        width: 650px;
        font-size: 14px;
        font-weight: 400;
        color: #303133;
        line-height: 20px;
      }
    }
  }
}
</style>
<style lang="scss">
.temp-detail {
  .el-dialog__body {
    padding-right: 0;
    padding-left: 0;
  }
  .temp-detail-list {
    padding: 0 20px;
    max-height: 50vh;
    overflow-y: auto;
  }
}
</style>
