<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
      <el-form-item label="评价日期">
        <el-date-picker
          v-model="searchDate"
          type="daterange"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="left"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          size="small"
          style="width: 260px;x"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="商家ID/个体户ID" prop="merchantId" label-width="130px">
        <el-input
          v-model="queryParams.merchantId"
          placeholder="请输入ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="店铺名称/个体户姓名" prop="merchantName" label-width="150px">
        <el-input
          v-model="queryParams.merchantName"
          placeholder="请输入名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="服务ID" prop="goodsId">
        <el-input
          v-model="queryParams.goodsId"
          placeholder="请输入服务ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="服务主题" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入服务主题"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="服务人员手机号" prop="serverPhone" label-width="120px">
        <el-input
          v-model="queryParams.serverPhone"
          placeholder="请输入服务人员手机号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="顾客手机号" prop="memberPhone" label-width="100px">
        <el-input
          v-model="queryParams.memberPhone"
          placeholder="请输入顾客手机号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="服务类型">
        <el-cascader
          :options="categoryList"
          :props="optionProps"
          size="small"
          clearable
          @change="handleCategory"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="评分">
        <div>
          <el-input
            style="width: 90px"
            size="small"
            v-model="queryParams.scoreStart"
            clearable
            @keyup.native="isNumber"
            @keyup.enter.native="handleQuery"
          />
          <span style="margin: 0 4px;" >-</span>
          <el-input
            style="width: 90px"
            size="small"
            v-model="queryParams.scoreEnd"
            clearable
            @keyup.native="isNumber"
            @keyup.enter.native="handleQuery"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="handleQuery"
          plain
        >搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
        >重置</el-button>

      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="dataList" border stripe>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form
            ref="form"
            :model="props.row"
            label-width="120px"
          >
            <el-form-item label="评价内容：">
              <div>{{props.row.content}}</div>
            </el-form-item>
            <el-form-item label="视频图片：">
              <template v-for="(item, index) in props.row.resourceList">
                <!--002视频-->
                <span
                  v-if="item.type === '002'"
                  @click="playVideo(item.url)"
                  :key="index"
                >
                  <el-image
                    style="width: 100px; height: 100px; margin-right: 10px"
                    :src="item.faceImg"
                    fit="fit"
                  >
                    <div slot="error">
                      <img src="../../../assets/images/image_placeholder.png" style="width: 100px; height: 100px; margin-right: 10px" />
                    </div>
                  </el-image>
                </span>
                <!--001图片-->
                <span v-if="item.type == '001'" :key="index">
                  <el-image
                    style="width: 100px; height: 100px; margin-right: 10px"
                    :src="item.url"
                    fit="fit"
                    :preview-src-list="[item.url]"
                  >
                    <div slot="error">
                      <img src="../../../assets/images/image_placeholder.png" style="width: 100px; height: 100px; margin-right: 10px"/>
                    </div>
                  </el-image>
                </span>
              </template>
              <template v-if="props.row.resourceList == undefined || props.row.resourceList == null || props.row.resourceList.length == 0">
                无
              </template>
            </el-form-item>
            <el-form-item label="追评：">
              <template v-if="props.row.reContent == undefined"> 无 </template>
              <span>{{ props.row.reContent }}   {{ props.row.reContentTime }} </span>
            </el-form-item>
            <el-form-item label="商家回复：">
              <template v-if="props.row.reply == undefined"> 无 </template>
              <span>{{ props.row.reply }}  {{ props.row.replyTime }}</span>
            </el-form-item>

          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="商家ID/个体户ID"
        align="center"
        prop="merchantId"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="店铺名称/个体户姓名"
        align="center"
        prop="merchantName"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="服务ID"
        align="center"
        prop="goodsId"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="服务主题"
        align="center"
        prop="goodsName"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="服务类型"
        align="center"
        prop="categoryName"
        width="150"
        show-overflow-tooltip
      />

      <el-table-column
        label="服务人员手机号"
        align="center"
        prop="serverPhone"
        width="150"
      />
      <el-table-column
        label="服务人员姓名"
        align="center"
        prop="serverName"
        width="100"
      />
      <el-table-column
        label="顾客手机号"
        align="center"
        prop="phone"
        width="120"
      />

      <el-table-column
        label="评分"
        align="center"
        prop="score"
        width="100"
      />
      <el-table-column
        label="各维度评分"
        align="center"
        prop="gradeList"
        width="300"
      >
        <template slot-scope="scope">
          <span>{{ parseDimension(scope.row.gradeList) }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="评价时间"
        align="center"
        prop="createTime"
        width="160"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>




      <el-table-column label="操作" align="center" width="110" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-delete"
            @click="deleteComment(scope.row)"
            v-hasPermi="['shop:audit:audit']"
          >删除
          </el-button>


        </template>
      </el-table-column>
    </el-table>

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

    <el-dialog
      title="视频播放"
      :visible.sync="dialogPlay"
      width="50%"
      @close="closeDialog"
    >
      <video
        :src="videoUrl"
        controls
        autoplay
        class="video"
        width="100%"
      ></video>
    </el-dialog>
  </div>
</template>

<script>
import { commentList, deleteComment } from "@/api/comment/adminComment";
import { categoryTree } from "@/api/basic/category";

export default {
  name: "adminMember",
  data() {
    return {
      showSearch: true,
      loading: true,
      total: 0,
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        beginTime: "",
        endTime: "",
        merchantId: "",
        merchantName: "",
        goodsId: "",
        name: "",
        serverPhone: "",
        memberPhone: "",
        categoryId: "",
        scoreStart: "",
        scoreEnd: "",

      },
      form: {},
      // 弹出层标题
      title: "",
      open: false,
      dialogPlay: false,
      videoUrl: "",
      searchDate: "",
      categoryList: [],
      optionProps: {
        value: "categoryId",
        label: "categoryName",
        children: "childrenCategory"
      }
    };
  },
  created() {
    this.getList();
    this.categoryTree();
  },
  methods: {
    /** 查询待审核列表 */
    getList() {
      if (this.queryParams.scoreStart != '' && this.queryParams.scoreEnd != '' && this.queryParams.scoreEnd < this.queryParams.scoreStart) {
        this.$message.error("评分最大值不能小于最小值");
        return;
      }
      this.loading = true;
      this.loading = true;
      if(this.searchDate == null){
        this.searchDate = ''
      }
      const [searchBegin, searchEnd] = this.searchDate;
      let sBegin = searchBegin;
      let sEnd = searchEnd;
      if (typeof searchBegin == "undefined") {
        sBegin = "";
      }
      if (typeof searchEnd == "undefined") {
        sEnd = "";
      }
      this.queryParams.beginTime = sBegin;
      this.queryParams.endTime = sEnd;
      commentList(this.queryParams)
        .then((response) => {
          console.log(response)
          this.dataList = response.rows;

          this.total = parseInt(response.total);
        }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.loading = false;
      });
    },
    categoryTree() {
      categoryTree().then(res => {
        if (res.code == 200) {
          this.categoryList = res.data
        } else {
          this.$message.error("获取分类列表失败")
        }
        console.log(res)
      }).catch(err => {
        this.$message.error("获取分类列表失败")
        console.log(err)
      })
    },
    handleCategory(value) {
      console.log(value)
      this.queryParams.categoryId = value[value.length - 1]
      console.log(this.queryParams.categoryId)
    },
    // 表单重置
    reset() {
      this.form = {
        orderId: null,
        refundMoney: null,
        refundReason: null,
        refundResult: null,
        status: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.searchDate = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        beginTime: "",
        endTime: "",
        merchantId: "",
        merchantName: "",
        goodsId: "",
        name: "",
        serverPhone: "",
        memberPhone: "",
        categoryId: "",
        merchantType: "",
        isAdd: "",
        status: "",

      };
      this.handleQuery();
    },

    deleteComment(row) {
      let name = row.content == null ? "" : row.content
      this.$confirm(
        '确认删除评论: <span style="font-weight: bold">' +
        name +
        "</span> 吗?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          dangerouslyUseHTMLString: true,
          type: "warning",
        }
      ).then(() => {
        deleteComment(row.commontId).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message.success("删除成功")
            this.getList();
          } else {
            this.$message.error(res.msg)

          }
        }).catch(err => {
          console.log(err)
          this.$message.error("操作失败")
        })
      }).catch(() => {

      });

    },
    parseDimension(gradeList) {
      if (gradeList == null || gradeList.length == 0) {
        return "--"
      }
      let text = '';
      for(let i = 0; i < gradeList.length; i++) {
        text += gradeList[i].name + ":" + gradeList[i].score + ";"
      }
      return text;
    },
    playVideo(url) {
      this.dialogPlay = true;
      this.videoUrl = url;
    },
    closeDialog() {
      this.videoUrl = ""; //清空数据 关闭视频播放
    },
    isNumber(e) {
      // 输入框中只允许输入数字
      e.target.value = e.target.value.replace(/[^\d]/g, '')
    },

  },
};
</script>

<style>
</style>
