<template>
  <div style="background-color:  rgb(240 242 245)">
    <div style="display: flex;flex-wrap: nowrap;background-color: rgb(240 242 245);height: 500px;">
      <div style="background-color: #FFFFFF;width: 100%" class="app-container">
<!--        <span style="font-size: 15px">基础信息</span>-->
        <div  class="desct">
          基础信息
        </div>
<!--        <el-divider></el-divider>-->
        <div style="display: flex;flex-wrap: nowrap">
          <div style="width: 500px">
            <el-descriptions :column="1" size="medium" >
              <el-descriptions-item label="规则名称">
                <span>{{groupIndexFrom.ruleName}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="打标签方式">
                <span>分时段加好友打标签</span>
              </el-descriptions-item>
              <el-descriptions-item label="创建者">
                <span>{{groupIndexFrom.createName}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="生效成员">
              <span v-for="userId in groupIndexFrom.applyUsers" :key="userId" style="display: inline;width: 300px">
                      <el-tag :disable-transitions="false"  v-for="list in userList" :key="list.id" style="margin: 3px;" v-if="list.id==userId">{{list.nickName}}</el-tag>
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="添加的标签" labelStyle="width: 80px">
                <span v-for="tagId in groupIndexFrom.tagsSet" :key="tagId" style="display: inline;width: 300px">
                      <el-tag :disable-transitions="false"  v-for="list in tagList" :key="list.id" style="margin: 3px;" v-if="list.tagId==tagId">{{list.name}}</el-tag>
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间">{{groupIndexFrom.createTime}}</el-descriptions-item>
              <el-descriptions-item label="规则状态">
                <el-switch
                  v-model="groupIndexFrom.isApply"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  inactive-value="2"
                  disabled>
                </el-switch>
                <span v-if="groupIndexFrom.isApply == '1'" style="margin-left: 10px;color: #13ce66">已启用</span>
                <span v-if="groupIndexFrom.isApply == '2'" style="margin-left: 10px;color: #ff4949">已关闭</span>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div style="background-color: #fbfbfb;padding: 10px;  border: 1px solid #e6e6e6; margin-bottom: 20px;;width: 100%;height: 350px;overflow:auto">
            <div >
              <span class="spanSize">规则设置：共 {{groupIndexFrom.rulesTags.length}} 条规则</span>
              <div v-for="(rtList,index) in groupIndexFrom.rulesTags">
                <div style="margin-left: 10%;margin-top: 1%">
                  <span class="spanSize">|规则 {{index +1}} </span>
                  <div class="spanSize">客户在 每
                    <span v-for="id in rtList.week" :key="id" style="display: inline;">
                      <el-tag :disable-transitions="false"  v-for="list in weekOptions" :key="list.value" style="margin: 3px;" v-if="list.value==id">{{list.label}}</el-tag>
                    </span>
                    <span>【{{rtList.startTime}}~{{rtList.endTime}}】</span>
                    时，打上标签
                    <span v-for="tagId in rtList.tags" :key="tagId" style="display: inline;">
                      <el-tag :disable-transitions="false"  v-for="list in tagList" :key="list.id" style="margin: 3px;" v-if="list.tagId==tagId">{{list.name}}</el-tag>
                    </span>
                  </div>
                  <div class="spanSize">并备注上：
                    <span>【{{rtList.remarks}}】</span>

                  </div>
                </div>

              </div>
            </div >
          </div>
        </div>
      </div>
    </div>

    <div class="contentx">
      <div class="desct">
        数据分析
      </div>
      <div class="statistics-container">
        <el-row :gutter="20" type="flex">
          <el-col :span="6"  >
            <el-card style="height: 100px">
              <div class="statistic-item">
                <h2>{{ groupIndexFrom.totalNumTagsCount }} </h2>
                <p>打标签总数</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6" >
            <el-card style="height: 100px">
              <div class="statistic-item">
                <h2>{{ groupIndexFrom.numTagsTadayCount }} </h2>
                <p>今日打标签数</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <div  style="background-color:  rgb(240 242 245);padding-bottom: 15px">
      <div style="margin: 15px;  padding:15px;  background-color: #fff;">
          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="120px">
            <el-form-item label="所属员工" prop="qwUserid">
              <el-input
                v-model="queryParams.qwUserid"
                placeholder="请输入所属员工名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="搜索客户" prop="externalUserId">
              <el-input
                v-model="queryParams.externalUserId"
                placeholder="请输入客户名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="添加好友时间" prop="addTime">
              <el-date-picker
                v-model="queryParams.addTime"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                :default-time="['00:00:00', '23:59:59']">
              </el-date-picker>
            </el-form-item>


            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

          <el-table v-loading="loading" :data="autoTagsLogsList">
            <el-table-column label="客户名称" align="center" prop="externalUserName" />
            <el-table-column label="所属员工" align="center" prop="qwUsername" />
            <el-table-column label="添加的标签" align="center" prop="effectiveRules" >
              <template slot-scope="scope">
                   <span v-for="tagId in JSON.parse(scope.row.effectiveRules)" :key="tagId" style="display: inline;">
                    <el-tag :disable-transitions="false"  v-for="list in tagList" :key="list.id" style="margin: 3px;" v-if="list.tagId==tagId">{{list.name}}</el-tag>
                  </span>
              </template>
            </el-table-column>
            <el-table-column label="添加好友时间" align="center" prop="addTime" width="180"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button v-if="scope.row.customerId"
                           size="mini"
                           type="text"
                           icon="el-icon-paperclip"
                           @click="handleShow(scope.row)"
                >查看客户</el-button>
                <el-tag  v-else type="danger"  size="mini">未绑定CRM客户</el-tag>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />

        </div>
      </div>

    <el-drawer size="75%" :title="show.title" :visible.sync="show.open" append-to-body >
      <customer-details  ref="customerDetails" />
    </el-drawer>

</div>



</template>

<script>
import { listAutoTagsLogs, exportAutoTagsLogs } from "@/api/qw/autoTagsLogs";
import CustomerGroupDetails from '@/views/qw/groupMsg/customerGroupDetails.vue'
import { listTag } from '@/api/qw/tag'
import { listUser } from '@/api/qw/user'
import customerDetails from '@/views/qw/externalContact/customerDetails.vue'

export default {
  name: "AutoTagsLogs",
  components: { CustomerGroupDetails ,customerDetails},
  props:{
    groupIndexFrom:{},
  },
  watch:{
    groupIndexFrom:{
      handler(newVal){
        //当表单发生变化时
        this.getList(newVal.id)
      },
      deep:true
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 导出遮罩层
      exportLoading: false,

      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 自动打标签的日志表格数据
      autoTagsLogsList: [],

      //所有的标签
      tagList:[],

      //成员信息
      userList:[],

      weekOptions: [{
        value: 1,
        label: '星期一'
      }, {
        value: 2,
        label: '星期二'
      }, {
        value: 3,
        label: '星期三'
      }, {
        value: 4,
        label: '星期四'
      }, {
        value: 5,
        label: '星期五'
      }
        , {
          value: 6,
          label: '星期六'
        }
        , {
          value: 7,
          label: '星期天'
        }],

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        autoTagId: null,
        type: 3,
        qwUserid: null,
        externalUserId: null,
        effectiveRules: null,
        addTime: [],
        chatId: null,
        joinScene: null,
        companyId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      show:{
        title:"客户详情",
        open:false,
      },
      //日期快捷选择
      pickerOptions: {
        shortcuts: [
          {
            text: '最近三天',
            onClick(picker) {
              const end = new Date();
              end.setHours(23, 59, 59, 999);
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              start.setHours(0, 0, 0, 0);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              end.setHours(23, 59, 59, 999);
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              start.setHours(0, 0, 0, 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              end.setHours(23, 59, 59, 999);
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              start.setHours(0, 0, 0, 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              end.setHours(23, 59, 59, 999);
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              start.setHours(0, 0, 0, 0);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
    };
  },
  created() {

    //所有的标签
    listTag().then(response => {
      this.tagList = response.rows;
    });
    listUser().then(res=>{
      this.userList=res.rows;
    })

    this.getList(this.groupIndexFrom);
  },
  methods: {
    /** 查询自动打标签的日志列表 */
    getList() {
      this.queryParams.autoTagId =  this.groupIndexFrom.id;
      this.loading = true;
      listAutoTagsLogs(this.queryParams).then(response => {
        this.autoTagsLogsList = response.rows;

        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        autoTagId: null,
        type: 3,
        qwUserid: null,
        externalUserId: null,
        effectiveRules: null,
        addTime: [],
        chatId: null,
        joinScene: null,
        companyId: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 查看客户详情 */
    handleShow(row){
      this.show.open=true;
      var that=this;
      const tab = "visit";
      setTimeout(() => {
        that.$refs.customerDetails.getDetails(row.customerId);
        that.$refs.customerDetails.handleClick(tab);
      }, 200);
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有自动打标签的日志数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportAutoTagsLogs(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    }
  }
};
</script>
<style scoped>

.contentx{
  height: 100%;
  background-color: #fff;
  padding: 0px 20px 20px;
  margin:0 15px;
}
.desct{
  padding-top: 20px;
  padding-bottom: 20px;
  color: #524b4a;
  font-weight: bold;
}

.spanSize{
  font-size: 15px;
  font-weight: normal;
}
.statistics-container {
  padding: 0 20px;
}
.statistic-item {
  text-align: center;
  margin-top: 5%;
}
.statistic-item h2 {
  font-size: 15px;
  margin: 0;
  font-weight: normal;
}
.statistic-item p {
  margin: 5px 0 0;
  font-size: 15px;
  color: #666;
  font-weight: normal;
}
</style>
