<template>
  <div class="bigScreen">
    <template v-if="!isCity">
      <div class="custome_one">
        <div>
          <el-tooltip effect="dark" :content="tipsList['Push触达率']" placement="top">
            <h2 class="h2_title">Push触达率<img :src="explainIcon" /></h2>
          </el-tooltip>
          <h3>{{ messageReachData.topCardData.ratePushTouch }}%</h3>
          <dl>
            <dd>
              <el-tooltip effect="dark" :content="tipsList['Push发送条数']" placement="top">
                <p>Push发送条数<img :src="explainIcon" /></p>
              </el-tooltip>
              <span>{{ messageReachData.topCardData.cntPushSendPv }}条</span>
            </dd>
            <dd>
              <el-tooltip effect="dark" :content="tipsList['Push发送人数']" placement="top">
                <p>Push发送人数<img :src="explainIcon" /></p>
              </el-tooltip>
              <span>{{ messageReachData.topCardData.cntPushSendUv }}人</span>
            </dd>
            <dd>
              <el-tooltip effect="dark" :content="tipsList['Push触达人数']" placement="top">
                <p>Push触达人数<img :src="explainIcon" /></p>
              </el-tooltip>
              <span>{{ messageReachData.topCardData.cntPushTouchUv }}人</span>
            </dd>
          </dl>
        </div>
        <div style="margin: 0 16px;">
          <el-tooltip effect="dark" :content="tipsList['短信发送成功率']" placement="top">
            <h2 class="h2_title">短信发送成功率<img :src="explainIcon" /></h2>
          </el-tooltip>
          <h3>{{ messageReachData.topCardData.rateSmsTouch }}%</h3>
          <dl>
            <dd>
              <el-tooltip effect="dark" :content="tipsList['短信发送条数']" placement="top">
                <p>短信发送条数<img :src="explainIcon" /></p>
              </el-tooltip>
              <span>{{ messageReachData.topCardData.cntSmsSendPv }}条</span>
            </dd>
            <dd>
              <el-tooltip effect="dark" :content="tipsList['短信发送人数']" placement="top">
                <p>短信发送人数<img :src="explainIcon" /></p>
              </el-tooltip>
              <span>{{ messageReachData.topCardData.cntSmsSendUv }}人</span>
            </dd>
            <dd>
              <el-tooltip effect="dark" :content="tipsList['短信发送成功人数']" placement="top">
                <p>短信发送成功人数<img :src="explainIcon" /></p>
              </el-tooltip>
              <span>{{ messageReachData.topCardData.cntSmsTouchUv }}人</span>
            </dd>
          </dl>
        </div>
        <div class="customer_ivr">
          <div>
            <el-tooltip effect="dark" :content="tipsList['阿里云语音有效接听人数']" placement="top">
              <h2 class="h2_title">阿里云语音有效接听人数<img :src="explainIcon" /></h2>
            </el-tooltip>
            <el-tooltip effect="dark" :content="tipsList['阿里云语音有效接听率']" placement="top">
              <h2 class="h2_title">阿里云语音有效接听率<img :src="explainIcon" /></h2>
            </el-tooltip>
          </div>
          <div>
            <h3>{{ messageReachData.topCardData.cntIvrPickUv }}人</h3>
            <h3>{{ messageReachData.topCardData.rateIvrPick }}%</h3>
          </div>
          <dl>
            <dd>
              <el-tooltip effect="dark" :content="tipsList['语音发送条数']" placement="top">
                <p>语音发送条数<img :src="explainIcon" /></p>
              </el-tooltip>
              <span>{{ messageReachData.topCardData.cntIvrSendPv }}条</span>
            </dd>
            <dd>
              <el-tooltip effect="dark" :content="tipsList['语音外呼人数']" placement="top">
                <p>语音外呼人数<img :src="explainIcon" /></p>
              </el-tooltip>
              <span>{{ messageReachData.topCardData.cntIvrSendUv }}人</span>
            </dd>
            <dd>
              <el-tooltip effect="dark" :content="tipsList['语音外呼成功人数']" placement="top">
                <p>语音外呼成功人数<img :src="explainIcon" /></p>
              </el-tooltip>
              <span>{{ messageReachData.topCardData.cntIvrSendSucUv }}人</span>
            </dd>
            <dd>
              <el-tooltip effect="dark" :content="tipsList['语音成功接起人数']" placement="top">
                <p>语音成功接起人数<img :src="explainIcon" /></p>
              </el-tooltip>
              <span>{{ messageReachData.topCardData.cntIvrPickSucUv }}条</span>
            </dd>
          </dl>
        </div>
      </div>
      <!-- 消息触达城市排行 -->
      <div class="bigScreen_four">
        <div class="bigScreen_scrollbar">
          <h2>消息触达城市排行<img :src="explainTwoIcon" class="export-icon" @click="exportTable('realtime_push_city_rank')" /></h2>
          <el-table
            v-if="messageReachData.listCardData&&messageReachData.listCardData.length>=0"
            :data="messageReachData.listCardData"
            style="width: 100%;"
            height="400"
            :default-sort="{prop: 'cntPushSendPv', order: 'descending'}"
            :cell-style="{ background: '#212948' }">
            <el-table-column  width="100" prop="city"  fixed="left" label="排名/城市" >
              <template slot-scope="scope">
                <span style="cursor: pointer;" @click="changeCityRank(scope.row.adcode)">{{ `${scope.$index + 1} ${scope.row.city}` }}</span>
              </template>
            </el-table-column>
            <!-- push相关 -->
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="cntPushSendPv" label="Push发送条数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="cntPushSendUv" label="Push发送人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="cntPushTouchUv" label="Push触达人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="ratePushTouch" label="Push触达率" sortable>
              <template slot-scope="scope">
                <span>{{ `${scope.row.ratePushTouch}%` }}</span>
              </template>
            </el-table-column>
            <!-- 短信相关 -->
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="cntSmsSendPv" label="短信发送条数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="cntSmsSendUv" label="短信发送人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="200" prop="cntSmsTouchUv" label="短信发送成功人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="180" prop="rateSmsTouch" label="短信发送成功率" sortable>
              <template slot-scope="scope">
                <span>{{ `${scope.row.rateSmsTouch}%` }}</span>
              </template>
            </el-table-column>
            <!-- 语音相关 -->
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="cntIvrSendPv" label="语音发送条数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="cntIvrSendUv" label="语音外呼人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="210" prop="cntIvrSendSucUv" label="语音外呼成功人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="220" prop="cntIvrPickSucUv" label="语音成功接起人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="230" prop="cntIvrPickUv" label="阿里云语音有效接听人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="230" prop="rateIvrPick" label="阿里云语音有效接听率" sortable>
              <template slot-scope="scope">
                <span>{{ `${scope.row.rateIvrPick}%` }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </template>
    <template v-else>
      <!-- push消息列表 -->
      <div class="bigScreen_four">
        <div class="bigScreen_scrollbar">
          <h2>push消息列表<img :src="explainTwoIcon" class="export-icon" @click="exportTable('realtime_push_list')" /></h2>
          <el-table
            :data="messageReachData.cityDetailData.pushList"
            style="width: 100%;"
            height="400"
            :cell-style="{ background: ' #212948' }">
            <el-table-column align="left" width="100" label="消息排名" fixed>
              <template slot-scope="scope">
                <span>{{ scope.$index + 1  }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" width="150" prop="pushId" label="消息ID" />
            <el-table-column align="center" width="150" prop="messageTitle" label="消息标题" />
            <el-table-column align="center" width="150" prop="targetUsers" label="发送人群" />
            <el-table-column align="center" width="150" prop="sendTime" label="发送时间" />
            <el-table-column align="center" width="150" prop="expireTime" label="有效期" />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="cntPushSendUv" label="Push发送人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="cntPushTouchUv" label="Push触达人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="cntPushTouchPv" label="Push触达次数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="ratePushTouch" label="Push触达率" sortable>
              <template slot-scope="scope">
                <span>{{ `${scope.row.ratePushTouch}%` }}</span>
              </template>
            </el-table-column>
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="cntPushClickUv" label="Push打开人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="cntPushClickPv" label="Push打开次数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="ratePushClick" label="Push打开率" sortable>
              <template slot-scope="scope">
                <span>{{ `${scope.row.ratePushClick}%` }}</span>
              </template>
            </el-table-column>
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="180" prop="rateTouchClick" label="Push触达打开率" sortable>
              <template slot-scope="scope">
                <span>{{ `${scope.row.rateTouchClick}%` }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 短信消息列表 -->
      <div class="bigScreen_four">
        <div class="bigScreen_scrollbar">
          <h2>短信消息列表<img :src="explainTwoIcon" class="export-icon" @click="exportTable('realtime_sms_list')" /></h2>
          <el-table
            :data="messageReachData.cityDetailData.messageList"
            style="width: 100%;"
            height="400"
            :cell-style="{ background: ' #212948' }">
            <el-table-column align="left" width="100" prop="city" label="消息排名" fixed>
              <template slot-scope="scope">
                <span>{{ scope.$index + 1  }}</span>
              </template>
            </el-table-column>
            <el-table-column key="msgId" align="center" width="150" prop="messageId" label="消息ID" />
            <el-table-column key="msgTitle" align="center" width="150" prop="messageTitle" label="短信标识" />
            <el-table-column key="targetUsers" align="center" width="150" prop="targetUsers" label="发送人群" />
            <el-table-column key="msgSentTime" align="center" width="150" prop="sendTime" label="发送时间" />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" min-width="170" prop="cntSmsSendUv" label="短信发送人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" min-width="200" prop="cntSmsTouchUv" label="短信发送成功人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" min-width="180" prop="rateSmsTouch" label="短信发送成功率" sortable>
              <template slot-scope="scope">
                <span>{{ `${scope.row.rateSmsTouch}%` }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 语音外呼列表 -->
      <div class="bigScreen_four">
        <div class="bigScreen_scrollbar">
          <h2>语音外呼列表<img :src="explainTwoIcon" class="export-icon" @click="exportTable('realtime_ivr_list')" /></h2>
          <el-table
            :data="messageReachData.cityDetailData.irvList"
            style="width: 100%;"
            height="400"
            :cell-style="{ background: ' #212948' }">
            <el-table-column align="left" prop="city" label="外呼排名" width="100" fixed>
              <template slot-scope="scope">
                <span>{{ scope.$index + 1  }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" width="150" prop="messageId" label="外呼ID" />
            <el-table-column align="center" width="150" prop="messageTitle" label="模板" />
            <el-table-column align="center" width="150" prop="targetUsers" label="发送人群" />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="170" prop="cntIvrSendUv" label="语音外呼人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="210" prop="cntIvrSendSucUv" label="语音外呼成功人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="210" prop="cntIvrPickSucUv" label="语音成功接起人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="180" prop="rateIvrPickSuc" label="语音成功接起率" sortable>
              <template slot-scope="scope">
                <span>{{ `${scope.row.rateIvrPickSuc}%` }}</span>
              </template>
            </el-table-column>
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="220" prop="cntMissOnThenPhoneUv" label="未接起且正在通话中人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="150" prop="cntMissUv" label="未接听人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="210" prop="cntMissHangUpUv" label="未接听直接挂断人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="180" prop="cntMissOtherUv" label="其他未接通人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="130" prop="rateHangUp" label="挂断率" sortable>
              <template slot-scope="scope">
                <span>{{ `${scope.row.rateHangUp}%` }}</span>
              </template>
            </el-table-column>
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="210" prop="cntMiss5sUv" label="接听5秒内挂断人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="220" prop="cntMiss6sUv" label="接听6-10秒内挂断人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="220" prop="cntMiss11sUv" label="接听11-20秒内挂断人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="220" prop="cntMiss21sUv" label="接听21秒及以上挂断人数" sortable />
            <el-table-column :sort-orders="['ascending', 'descending']" :render-header="renderHeader" align="center" width="230" prop="cntIvrPickUv" label="阿里云语音有效接听人数" sortable />
          </el-table>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import explainIcon from "./assets/icon_explain@2x.png";
import exportIcon from "./assets/icon_daochu@3x.png";
import explainTwoIcon from './assets/icon_daochu@2x.png'


import tipsList from './tipsList'

export default {
  name:'ScreenCustomer',
  props: {
    messageReachData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isCity: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tipsList: tipsList,
      explainIcon:explainIcon,
      exportIcon:exportIcon,
      explainTwoIcon:explainTwoIcon
    };
  },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background-color:#1a213e')
  },
  beforeDestroy() {
    document.querySelector('body').setAttribute('style','background:#FFFFFF')
  },
  methods: {
    renderHeader(h, { column }) {
      return h('el-tooltip', {
        props: {
          content: (function() {
            const label = column.label
            return tipsList[label]
          })(),
          placement: 'top'
        },
        domProps: {
          innerHTML: column.label + '<img style="margin-left:5px;" src="' + explainIcon +'" />'
        }
      }, [h('span')])
    },
    changeCityRank(adcode) {
      this.$emit('changeCityRank', +adcode)
    },
    exportTable(name) {
      this.$emit('exportTable', name)
    }
  }
}
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
dl,
ul,
dd {
  padding: 0;
  margin: 0;
}
h2,
h3,
p {
  padding: 0;
  margin: 0;
}
.export-icon {
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.bigScreen {
  width: 100%;
  padding: 0 16px;
  color: #ffffff;
  height: 100%;
  padding-bottom: 100px;
  background-color: #1a213e;
}
.custome_one {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}
.custome_one > div {
  height: 200px;
  flex-grow: 1;
  text-align: center;
  background: #212948;
  border-radius: 8px;
  padding: 20px 0;
}
.custome_one h2 {
  height: 33%;
  font-size: 18px;
  color: #fff !important;
}
.custome_one h3 {
  height: 33%;
  font-size: 32px;
  color: #f57c58 !important;
}
.custome_one dl {
  display: flex;
  justify-content: space-around;
}
.custome_one dl p {
  font-size: 12px;
  margin-bottom: 20px;
}
.custome_one img {
  margin-left: 8px;
}
.custome_one .h2_title {
  color: #ffffff;
}
dd span:nth-child(2) {
  font-size: 16px;
  color: #407bf2;
}
dd span:nth-child(3) {
  font-size: 8px;
  color: #407bf2;
}
.customer_ivr div {
  height: 33%;
}
.customer_ivr div:first-child {
  display: flex;
  justify-content: space-around;
}
.customer_ivr div:nth-child(2) {
  display: flex;
  justify-content: space-around;
}

.bigScreen_four h2 {
  font-size: 18px;
  color: #ff9b00;
  text-align: left;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.bigScreen_four {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
}
.bigScreen_four div {
  text-align: center;
  background: #212948;
  width: 100%;
}
.bigScreen_fourUl {
  overflow-y: auto;
  width: 100% !important;
  height: 329px !important;
}
.bigScreen_four li {
  display: flex;
  justify-content: space-between;
  margin: 15px 10px 20px 0;
}
.bigScreen_four li > span {
  flex: 1;
  font-size: 14px;
}
.bigScreen_fourColomn {
  font-size: 14px;
  font-weight: 500;
}
.bigScreen_four ul div {
  width: 80%;
  margin-left: 40px;
  height: 4px;
  background-image: linear-gradient(270deg, #31afff 0%, #1677ff 100%);
  border-radius: 8px;
}
.bigScreen_fourOne {
  padding: 20px;
  border-radius: 8px;
}
.bigScreen_scrollbar {
  overflow-x: auto;
  padding: 20px;
  border-radius: 8px;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 6px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /* background: rgba(0, 0, 0, 0.1); */
  background: rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  /* background: rgba(255, 0, 0, 0.4); */
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
}
/* // 滚动条的宽度 */
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-button {
  background: rgba(255, 255, 255, 0.3);
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track-piece {
  background: #212948;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-corner {
  background: #212948;
}
/deep/ .el-table__body-wrapper::-webkit-resizer {
  background: rgba(255, 255, 255, 0.3);
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
/deep/ .el-table th > .cell{
  font-size: 14px;
}
/deep/.el-table td,
.el-table th {
  border: none;
}
/deep/.el-table td {
  border: none;
}
/deep/.el-table th.is-leaf {
  border: none;
}
/deep/.el-table th,
tr {
  background: #212948;
}
/deep/.el-table tr {
  background: #212948;
}
/deep/ .el-table__row > td {
  border: none !important;
}
/deep/.el-table--border,
/deep/ .el-table--group {
  border: none;
}
/deep/.el-table__body,
.el-table__footer,
.el-table__header {
  color: #fff;
}
/deep/ .el-table th > .cell {
  color: #fff;
}
/deep/ .el-table::before {
  height: 0px;
}
/deep/.el-table tbody tr:hover > td {
  background-color: #212948 !important;
}
/deep/ .el-table__fixed {
  border: none !important;
  /* background-color:  #212948 !important; */
}
/deep/.el-table__fixed-right::before,
/deep/.el-table__fixed::before {
  height: 0 !important;
}
</style>
