<template>
  <div class="app-container" style="padding: 0 20px 20px 20px">
    <!-- 筛选项 -->
    <div class="filter-container">
      <div class="filter-control">
        <span>标签词:</span>
        <el-input
          v-model="listQuery.remarks"
          placeholder="标签词"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>咨询类别:</span>
        <el-select v-model="listQuery.consult" clearable @change="getList">
          <el-option value="" label="请选择" />
          <el-option v-for="(item, index) in categoryList" :key="index" :label="item.className" :value="item.id" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>添加日期:</span>
        <el-date-picker
          v-model="time"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="getList"
        />
      </div>
      <div class="filter-control">
        <el-button type="primary" @click="getList"> 查询 </el-button>
      </div>
    </div>
    <div class="filter-container">
      <template v-if="isLoading">
        <div class="list-loading">
          <p style="color: #ffffff"><i class="el-icon-loading"></i></p>
        </div>
      </template>
      <template v-else>
        <div v-if="list.length === 0" class="list-main-empty">
          <p style="color: #999999">暂无咨询记录</p>
        </div>
        <div v-for="(item, index) in list" v-else :key="index" class="list-main">
          <div class="list-main-item unreg">
            <span class="list-times">{{ item.addTime }}</span>
            <el-row :gutter="24" class="box-row">
              <el-col :span="6"><b>咨询人：</b> {{ item.questionMan }}</el-col>
              <el-col v-if="item.contractMobile" :span="12"><b>手机号：</b> {{ item.contractMobile }}</el-col>
            </el-row>
            <template v-if="item.product && item.product.length > 0">
              <el-row :gutter="24" class="box-row">
                <el-col :span="6"><b>咨询商品：</b></el-col>
              </el-row>
              <el-row :gutter="24" class="box-row">
                <el-col :span="24">
                  <el-table :data="item.product" border width="1000">
                    <el-table-column prop="mainImage" label="商品图片" align="center" width="100">
                      <template slot-scope="{ row }">
                        <el-popover placement="top-start" title="" width="180" trigger="hover">
                          <img :src="row.mainImage" alt="" style="width: 150px; height: 150px" />
                          <img slot="reference" :src="row.mainImage" alt="" style="width: 30px; height: 30px" />
                        </el-popover>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="商品名称" align="center" />
                    <el-table-column prop="shopName" label="供应商名称" align="center" />
                  </el-table>
                </el-col>
              </el-row>
            </template>
            <template v-if="item.reports && item.reports.length > 0">
              <el-row :gutter="24" class="box-row">
                <el-col :span="6"><b>咨询报备：</b></el-col>
              </el-row>
              <el-row :gutter="24" class="box-row">
                <el-col :span="24">
                  <el-table :data="item.reports" border width="1000">
                    <el-table-column prop="mainImage" label="商品图片" align="center" width="100">
                      <template slot-scope="{ row }">
                        <el-popover placement="top-start" title="" width="180" trigger="hover">
                          <img :src="row.mainImage" alt="" style="width: 150px; height: 150px" />
                          <img slot="reference" :src="row.mainImage" alt="" style="width: 30px; height: 30px" />
                        </el-popover>
                      </template>
                    </el-table-column>
                    <el-table-column prop="productName" label="商品名称" align="center" />
                    <el-table-column prop="reportText" label="报备事由" align="center" />
                    <el-table-column prop="status" label="审核状态" align="center" width="100">
                      <template slot-scope="{ row }">
                        <el-tag v-if="row.status === 1" type="warning" size="small">待审核</el-tag>
                        <el-tag v-else-if="row.status === 2" type="success" size="small">已审核</el-tag>
                        <el-tag v-else type="danger" size="small">审核未通过</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="auditName" label="审核人" align="center" width="100">
                      <template slot-scope="{ row }">
                        {{ row.auditName ? row.auditName : '---' }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="auditTime" label="审核时间" align="center">
                      <template slot-scope="{ row }">
                        {{ row.auditTime ? row.auditTime : '---' }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="auditText" label="备注" align="center">
                      <template slot-scope="{ row }">
                        {{ row.auditText ? row.auditText : '---' }}
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </template>
            <el-row :gutter="24" class="box-row">
              <el-col :span="6">
                <b>沟通情况：</b>
                <el-tag v-if="item.communicationSituation === 1" type="danger" size="small"> 联系不上 </el-tag>
                <el-tag v-else type="success" size="small">
                  已沟通
                  <template v-if="item.communicationMethods === '1'"> (电话) </template>
                  <template v-if="item.communicationMethods === '2'"> (微信) </template>
                  <template v-if="item.communicationMethods === '1,2' || item.communicationMethods === '2,1'">
                    (电话，微信)
                  </template>
                </el-tag>
              </el-col>
              <el-col v-if="item.customerSource !== null" :span="6">
                <b>客户来源：</b>
                <el-tag type="success" size="small">
                  {{ item.customerSource | sourceActionsFilters }}
                </el-tag>
              </el-col>
              <el-col v-if="item.customerGender !== null" :span="6">
                <b>客户性别：</b>
                <el-tag v-if="item.customerGender === 0" type="success" size="small"> 男 </el-tag>
                <el-tag v-if="item.customerGender === 1" type="success" size="small"> 女 </el-tag>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="box-row">
              <el-col v-if="item.customerAge" :span="6">
                <b>客户年龄：</b>
                <el-tag type="success" size="small"> {{ item.customerAge }} </el-tag>
              </el-col>
              <el-col v-if="item.groupAddition !== ''" :span="6">
                <b>加群情况：</b>
                <el-tag v-if="item.groupAddition === 0" type="success" size="small"> 已加群 </el-tag>
                <el-tag v-else type="danger" size="small"> 未加群 </el-tag>
              </el-col>
              <el-col v-if="item.consultType" :span="12">
                <b>咨询类别：</b>
                <el-tag
                  v-for="(consultType, consultTypeIndex) in handleFormatStr(item.consultType)"
                  :key="consultTypeIndex"
                  style="margin: 0 1px"
                  type="info"
                  size="small"
                  effect="dark"
                >
                  {{ consultType }}
                </el-tag>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="box-row">
              <el-col v-if="item.satisfied" :span="6">
                <b>意向程度：</b>
                <el-tag type="success" size="small"> {{ (item.satisfied * 1) | intenActionsFilters }} </el-tag>
              </el-col>
              <el-col v-if="item.pinceSensitve" :span="6">
                <b>价格敏感度：</b>
                <el-tag type="success" size="small"> {{ (item.pinceSensitve * 1) | pinceFilters }} </el-tag>
              </el-col>
              <el-col v-if="item.followup" :span="6">
                <b>跟进状态：</b>
                <el-tag type="success" size="small"> {{ (item.followup * 1) | followupFilters }} </el-tag>
              </el-col>
            </el-row>
            <el-row v-if="item.remarks" :gutter="24" class="box-row">
              <el-col :span="24">
                <b>标签词：</b>
                <el-tag
                  v-for="(remarks, remarksIndex) in handleFormatStr(item.remarks)"
                  :key="remarksIndex"
                  style="margin: 0 1px"
                  type="success"
                  size="small"
                  effect="dark"
                >
                  {{ remarks }}
                </el-tag>
              </el-col>
            </el-row>
            <el-row v-if="item.extra" :gutter="24" class="box-row">
              <el-col :span="24">
                <b>额外说明：</b>
                {{ item.extra }}
              </el-col>
            </el-row>
            <el-row v-if="item.imageList.length > 0" :gutter="24" class="box-row">
              <el-col :span="24">
                <b>图片：</b>
              </el-col>
              <el-col :span="24">
                <a
                  v-for="(image, imageIndex) in item.imageList"
                  :key="imageIndex"
                  :href="image"
                  class="item-image"
                  target="_blank"
                  style="width: 100px; height: 100px; margin: 5px; float: left"
                >
                  <el-popover placement="top-start" title="" width="180" trigger="hover">
                    <img :src="image" alt="" style="width: 150px; height: 150px" />
                    <img slot="reference" :src="image" alt="" style="width: 100px; height: 100px" />
                  </el-popover>
                </a>
              </el-col>
            </el-row>
            <el-row v-if="item.fileList.length > 0" :gutter="24" class="box-row">
              <el-col :span="24">
                <b>文件：</b>
              </el-col>
              <el-col :span="24">
                <div v-for="(file, fileIndex) in item.fileList" :key="fileIndex" class="item-file">
                  <el-tag type="warning" size="small"> {{ file.fileName }} </el-tag>
                  <el-button type="primary" size="mini" style="margin: 5px 10px" @click="handlePreview(file)">
                    预览
                  </el-button>
                  <el-button type="primary" size="mini" style="margin: 5px 10px" @click="handleDownload(file)">
                    下载
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </template>
    </div>
    <!-- 页码 -->
    <pagination
      :total="total"
      :page-sizes="[10, 20, 30, 100]"
      :page-size="20"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="remarksList"
    />
  </div>
</template>

<script>
import { downloadWithUrl } from '@/utils'
import openWindow from '@/utils/open-window'
import { getClassName, remarksList } from '@/api/user/consult/consult'
import pickerOptions from '@/utils/time-picker.js'
export default {
  name: 'UnregDetail',
  filters: {
    followupFilters(value) {
      // 跟进状态
      const map = {
        1: '跟进中',
        2: '跟进完成',
        3: '已放弃'
      }
      return map[value]
    },
    pinceFilters(value) {
      // 价格敏感度
      const map = {
        1: '敏感',
        2: '适中',
        3: '不敏感',
        4: '不明确'
      }
      return map[value]
    },
    intenActionsFilters(value) {
      // 意向
      const map = {
        1: '意向强烈',
        2: '意向一般',
        3: '意向平淡',
        4: '随便看看'
      }
      return map[value]
    },
    sourceActionsFilters(value) {
      // 客户来源
      const map = {
        0: '搜索引擎',
        1: '小程序',
        2: '公众号',
        3: '小红书',
        4: '微博',
        5: '搜狐',
        7: '抖音',
        8: '视频号',
        9: '朋友推荐',
        6: '其他'
      }
      return map[value]
    }
  },
  data() {
    return {
      pickerOptions,
      time: '',
      isLoading: true,
      listQuery: {
        clubId: '', // 机构Id
        questionManId: '', // 咨询人Id
        remarks: '', // 标签词
        consult: '', // 咨询类别
        startAddTime: '', // 时间
        endAddTime: '', // 时间
        pageNum: 1,
        pageSize: 20
      },
      list: [],
      total: 0,
      categoryList: [],
      queryType: ''
    }
  },
  computed: {},
  created() {
    this.queryType = this.$route.query.type
    if (this.queryType === 1) {
      this.listQuery.clubId = this.$route.query.clubId
    } else {
      this.listQuery.questionManId = this.$route.query.questionManId
    }
    this.getClassName()
    this.getList()
  },
  mounted() {},
  methods: {
    // 获取行为记录列表
    getList() {
      this.listQuery.pageNum = 1
      if (this.time && this.time.length > 0) {
        this.listQuery.startAddTime = this.time[0]
        this.listQuery.endAddTime = this.time[1]
      } else {
        this.listQuery.startAddTime = ''
        this.listQuery.endAddTime = ''
      }
      this.remarksList()
    },
    // 获取咨询类别选项
    async getClassName() {
      try {
        const res = await getClassName()
        this.categoryList = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 未注册用户已同步数据详情
    async remarksList() {
      try {
        this.isLoading = true
        const res = await remarksList(this.listQuery)
        this.list = res.data.results
        this.total = res.data.totalRecord
        this.isLoading = false
      } catch (error) {
        console.log(error)
      }
    },
    // 预览文件
    handlePreview(file) {
      const fileName = file.fileName
      let url = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(file.fileUrl)}`
      if (fileName.endsWith('.pdf') || fileName.endsWith('.doc')) {
        url = file.fileUrl
      }
      openWindow(url, `${file.fileName}`, 800, 460)
    },
    // 下载文件
    async handleDownload(file) {
      const params = `fileName=${encodeURIComponent(file.fileName)}&ossName=${encodeURIComponent(file.ossName)}`
      const url = process.env.VUE_APP_BASE_API + `/user/remarks/remarks/download?${params}`
      downloadWithUrl(url, file.fileName)
    },
    handleFormatStr(data) {
      return data.split(',')
    }
  }
}
</script>

<style>
.filter-container {
  padding: 10px;
  background: #f7f7f7;
  margin: 10px 0;
}
.span-labels {
  font-size: 14px;
  color: #666666;
  margin-right: 50px;
}
.list-loading {
  width: 100%;
  height: 300px;
  padding: 40px;
  line-height: 220px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
  background: #ffffff;
}
.list-loading .el-icon-loading {
  font-size: 40px;
  color: #409eff;
}
.list-main-empty {
  width: 100%;
  height: 300px;
  padding: 40px;
  line-height: 220px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}
.list-main {
  width: 100%;
  height: auto;
  padding: 24px 16px 24px 160px;
  box-sizing: border-box;
  position: relative;
}
.list-main::before {
  content: '';
  height: 100%;
  border-left: 2px dashed #e1e1e1;
  position: absolute;
  left: 120px;
  top: 0;
}
.list-main-item {
  width: 94%;
  min-height: 200px;
  box-sizing: border-box;
  padding: 24px 35px;
  background: #e1e1e1;
  background-size: cover;
  position: relative;
  border-radius: 16px;
}
.list-main-item::before {
  content: '';
  width: 20px;
  height: 20px;
  background: #999999;
  border-radius: 50%;
  background-size: cover;
  position: absolute;
  top: 30px;
  left: -49px;
}
.list-main-item::after {
  content: '';
  width: 0;
  height: 0;
  border-width: 30px;
  border-style: solid;
  border-color: transparent #e1e1e1 transparent transparent;
  position: absolute;
  left: -55px;
  top: 10px;
}
.list-main-item.unreg .list-times {
  display: inline-block;
  font-size: 20px;
  color: #333333;
  position: absolute;
  top: 7px;
  left: -164px;
  font-weight: bold;
  width: 120px;
  text-align: center;
}
.box-row {
  margin-bottom: 14px;
}
</style>
