<template>
  <div class="app-container">
    <div class="flex">
      <div class="content">
        <div class="line"></div>
        <div class="all-text">问题总数</div>
        <div class="all-num">{{ total_list.total }}</div>
      </div>
      <div class="content header-center">
        <div class="line"></div>
        <div class="flex">
          <div class="all-text">
            已处理
            <span class="all-num font-size32">{{
              total_list.finishedNum
            }}</span>
          </div>
          <div class="all-text margin-left1">
            待处理
            <span class="all-num font-size32">{{
              total_list.preparedNum
            }}</span>
          </div>
        </div>
        <div class="flex">
          <div class="all-text">
            处理中
            <span class="all-num font-size32">{{ total_list.handledNum }}</span>
          </div>
          <div class="all-text margin-left1">
            已关闭
            <span class="all-num font-size32">{{ total_list.closedNum }}</span>
          </div>
        </div>
      </div>
      <div class="content header-right">
        <div class="line"></div>
        <div class="user-satisfaction">用户满意度</div>
        <div class="star">
          <span>五星级</span>
          <el-progress
            :percentage="total_list.fiveStarPercentage"
            :stroke-width="6"
            color="#C4CDFB"
            :show-text="false"
          ></el-progress
          >{{ total_list.fiveStarNum }} <br />
          <span>四星级</span
          ><el-progress
            :percentage="total_list.fourStarPercentage"
            :stroke-width="6"
            color="#C4CDFB"
            :show-text="false"
          ></el-progress
          >{{ total_list.fourStarNum }} <br />
          <span>三星级</span
          ><el-progress
            :percentage="total_list.threeStarPercentage"
            :show-text="false"
            :stroke-width="6"
            color="#C4CDFB"
          ></el-progress
          >{{ total_list.threeStarNum }} <br />
          <span>二星级</span
          ><el-progress
            :percentage="total_list.twoStarPercentage"
            :show-text="false"
            :stroke-width="6"
            color="#C4CDFB"
          ></el-progress
          >{{ total_list.twoStarNum }} <br />
          <span>一星级</span
          ><el-progress
            :percentage="total_list.oneStarPercentage"
            :show-text="false"
            :stroke-width="6"
            color="#C4CDFB"
          ></el-progress
          >{{ total_list.oneStarNum }} <br />
        </div>
      </div>
    </div>
    <el-input
      v-model="page.data.username"
      placeholder="请输入姓名"
      class="margin-left input"
    ></el-input>
    <el-input
      v-model="page.data.mobile"
      placeholder="请输入手机号"
      class="margin-left input"
    ></el-input>
    <el-input
      v-model="page.data.idNumber"
      placeholder="请输入身份证"
      class="margin-left input"
    ></el-input>
    <el-input
      v-model="page.data.descKeywords"
      placeholder="请输入问题详情"
      class="margin-left input"
    ></el-input>
    <el-date-picker
      v-model="page.data.reportStartDate"
      type="datetime"
      placeholder="选择上报开始时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left"
    >
    </el-date-picker>
    <el-date-picker
      v-model="page.data.reportEndDate"
      type="datetime"
      placeholder="选择上报结束时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left"
    >
    </el-date-picker>
    <el-select
      filterable
      clearable
      v-model="page.data.status"
      placeholder="请选择状态"
      class="margin-left input"
    >
      <el-option
        v-for="item in status_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-button
      type="primary"
      icon="el-icon-search"
      class="margin-left"
      @click="fetchData"
      >搜索</el-button
    >
    <!--主表格-->
    <el-table
      class="table"
      ref="table_form"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column label="上报人信息" align="center" width="300px">
        <template slot-scope="scope">
          <div
            class="flex"
            v-if="scope.row.userInfo && !scope.row.anonymityFlag"
          >
            <el-image
              style="width: 60px; height: 70px"
              :src="scope.row.userInfo.avatar"
              :preview-src-list="[scope.row.userInfo.avatar]"
            >
            </el-image>
            <div class="user-msg table-user-msg">
              <p>姓名：{{ scope.row.userInfo.username }}</p>
              <p>手机号：{{ scope.row.userInfo.phone }}</p>
              <p>身份证：{{ scope.row.userInfo.idNumber }}</p>
            </div>
          </div>
          <div v-if="scope.row.anonymityFlag">匿名</div>
        </template>
      </el-table-column>
      <el-table-column label="上报时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.reportTime }}
        </template>
      </el-table-column>
      <el-table-column label="问题详情" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.desc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="照片" align="center" width="370px">
        <template slot-scope="scope">
          <div v-if="scope.row.pictures.length > 0">
            <el-image
              v-for="(item, index) in scope.row.pictures"
              :key="index"
              class="user-img"
              :src="item.url"
              :preview-src-list="[item.url]"
            >
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="视频" align="center" width="180px">
        <template slot-scope="scope">
          <video
            v-if="scope.row.video.url"
            id="player"
            playsinline
            controls
            :data-poster="scope.row.video.url"
          >
            <source :src="scope.row.video.url" type="video/mp4" />
          </video>
        </template>
      </el-table-column>
      <el-table-column label="处理时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.handleTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="处理结果" align="center">
        <template slot-scope="scope">
          {{ scope.row.handleResult }}
        </template>
      </el-table-column>
      <el-table-column label="评价时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.evaluateTime }}
        </template>
      </el-table-column>
      <el-table-column label="评价结果" align="center">
        <template slot-scope="scope">
          {{
            scope.row.evaluateWorkpoint
              ? scope.row.evaluateWorkpoint + "星"
              : null
          }}<br />
          {{ scope.row.evaluateContent }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 3" effect="plain" type="info"
            >已处理
          </el-tag>
          <el-tag v-else-if="scope.row.status == 4" effect="plain" type="info"
            >关闭
          </el-tag>
          <el-tag v-else-if="scope.row.status == 2" effect="plain"
            >处理中
          </el-tag>
          <el-tag
            v-else-if="scope.row.status == 1"
            type="warning"
            effect="plain"
            >待处理
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="操作区" width="120">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="update(scope.row)">{{
            scope.row.status == 3 || scope.row.status == 4 ? "查看详情" : "编辑"
          }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!--对话框-->
    <el-dialog
      title="编辑问题上报记录"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <div>
        <div class="title">
          <div class="line"></div>
          <span>上报人基本信息</span>
          <span class="bule" v-if="form.anonymityFlag">（已匿名）</span>
        </div>
        <div class="flex" v-if="form.userInfo && !form.anonymityFlag">
          <el-image
            class="user-img"
            style="width: 100px; height: 120px"
            :src="form.userInfo.avatar"
            :preview-src-list="[form.userInfo.avatar]"
          >
          </el-image>
          <div class="user-msg">
            <p>姓名：{{ form.userInfo.username }}</p>
            <p>手机号：{{ form.userInfo.phone }}</p>
            <p>身份证：{{ form.userInfo.idNumber }}</p>
          </div>
        </div>
      </div>
      <div>
        <div class="title">
          <div class="line"></div>
          <span>上报问题描述</span>
        </div>
        <div class="user-msg">
          <p>详情：{{ form.desc }}</p>
          <p class="flex">
            照片：
            <el-image
              v-for="(item, index) in form.pictures"
              :key="index"
              class="list-item-img"
              :src="item.url"
              :preview-src-list="[item.url]"
            >
            </el-image>
          </p>
          <p class="flex">
            视频：
            <video
              v-if="form.video && form.video.url"
              id="player"
              playsinline
              controls
              src="form.video.url"
              :data-poster="form.video.url"
            >
              <!-- <source :src="form.video.url" type="video/mp4" /> -->
            </video>
          </p>
        </div>
      </div>
      <div>
        <div class="title">
          <div class="line"></div>
          <span>问题处理</span>
        </div>
        <div v-if="row && (row.status == 3 || row.status == 4)">
          <p>
            处理状态：
            <el-tag effect="plain">
              {{
                row.status == 3
                  ? "已处理"
                  : row.status == 4
                  ? "关闭"
                  : row.status == 2
                  ? "处理中"
                  : "待处理"
              }}
            </el-tag>
          </p>
          <p v-if="row.handleResult">处理结果：{{ row.handleResult }}</p>
        </div>
        <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="120px"
          label-position="left"
        >
          <el-form-item
            label="处理状态："
            prop="status"
            v-if="row && (row.status == 1 || row.status == 2)"
          >
            <el-radio v-model="form.status" :label="1">待处理</el-radio>
            <el-radio v-model="form.status" :label="2">处理中</el-radio>
            <el-radio v-model="form.status" :label="3">已处理</el-radio>
            <el-radio v-model="form.status" :label="4">关闭</el-radio>
          </el-form-item>
          <el-form-item
            v-if="form.status === 3 && row.status != 3"
            label="处理结果："
            prop="handleResult"
          >
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请填写处理结果"
              v-model="form.handleResult"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="sure"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  updateProblemReport,
  getProblemReportDetailById,
  getProblemReportPage,
  getProblemReportData,
} from "@/api/xiaosha";
import Pagination from "@/components/Pagination";
import { checkRole } from "@/utils/checkRole";

export default {
  components: { Pagination },
  filters: {},
  data() {
    return {
      list: [], // 主表格&
      listLoading: true, //主表格加载状态
      total_list: [], //上报数据报表
      // detail_list:[],//详情
      // 分页参数
      page: {
        data: {
          username: null,
          mobile: null,
          idNumber: null,
          descKeywords: null,
          reportStartDate: null,
          reportEndDate: null,
          status: null,
          adminIds: null,
        },
        pageNum: 1,
        pageSize: 5,
      },
      total: 0,
      dialogVisible: false,
      dialogVisibleUpload: false,
      dialogTitle: "添加",
      // 状态
      status_list: [
        { id: 2, name: "处理中" },
        { id: 1, name: "待处理" },
        { id: 4, name: "关闭" },
        { id: 3, name: "已处理" },
      ],
      form: {
        status: "1",
        handleResult: "",
      },
      form_copy: {},
      // 验证规则
      rules: {
        handleResult: [
          { required: true, message: "请填写处理结果", trigger: "blur" },
        ],
      },
      row: null,
    };
  },
  created() {
    this.form_copy = JSON.parse(JSON.stringify(this.form));
    this.fetchData();
  },
  methods: {
    // 查询权限
    checkRole,
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      getProblemReportPage(this.page).then((res) => {
        this.list = res.data.list;
        this.total = res.data.total;
        this.listLoading = false;
      });
      getProblemReportData().then((res) => {
        this.total_list = res.data;
      });
    },
    update(row) {
      // getProblemReportDetailById(row.id).then(res=>{
      //   console.log(res);
      //   thia.detail_list=res.data
      // })
      this.row = row;
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    // 确认编辑
    sure() {
      if (this.row.status == 1 || this.row.status == 2) {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            updateProblemReport(this.form).then((res) => {
              this.dialogVisible = false;
              this.fetchData();
              this.$message({
                type: "success",
                message: "编辑成功!",
              });
            });
          }
        });
      } else {
        this.dialogVisible = false;
      }
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>
<style scoped lang="scss">
.table {
  margin-top: 15px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.margin-left {
  margin: 10px 0 0 10px;
}

.input {
  width: 200px;
}
/*批量导入按钮*/
.file {
  position: relative;
  background: #d0eeff;
  border: 1px solid #99d3f5;
  border-radius: 4px;
  padding: 10px 20px;
  box-sizing: border-box;
  overflow: hidden;
  color: #1e88c7;
  text-decoration: none;
  text-indent: 0;
}
.margin-sm {
  margin: 10px 0 0 10px;
}

.file input {
  position: absolute;
  font-size: 14px;
  width: 106px;
  height: 40px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}

.file:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
.title {
  // margin-top: 25px;
  margin-bottom: 25px;
  .line {
    width: 4px;
    height: 14px;
    background: #409eff;
    border-radius: 13px;
    display: inline-block;
    margin-right: 8px;
  }
  span {
    // font-weight: 700;
    font-size: 16px;
    color: #606266;
  }
}

.content {
  width: 330px;
  min-width: 200px;
  height: 148px;
  margin-right: 40px;
  // background: url("../../assets/problem-bg.png");
  background: linear-gradient(90.98deg, #fdfeff 2.74%, #f9fbff 99.88%);
  border: 1px solid #dbe6ff;
  box-shadow: 0px 2px 5px rgba(210, 223, 255, 0.5);
  border-radius: 8px;
  // background-size: 100% 100%;
  padding-top: 21px;
  padding-left: 48px;
  line-height: 47px;
  position: relative;
}
.line{
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 146px;
  background: #80A7FF;
border-radius: 8px 0px 0px 8px;

}
.header-center {
  width: 550px;
  min-width: 400px;
}
.header-right {
  width: 669px;
  min-width: 600px;
  color: #4b5d8a;
}
.user-msg {
  margin-left: 10px;
  text-align-last: left;
}
.table-user-msg {
  line-height: 12px;
  margin-left: 8px;
}
.user-img {
  margin: 16px 14px 32px 10px;
  width: 60px;
  height: 70px;
}
.all-text {
  font-size: 20px;
  color: #4b5d8a;
}
.all-num {
  font-weight: 700;
  font-size: 48px;
  color: #3a568e;
}
.font-size32 {
  font-size: 32px;
}
.margin-left1 {
  margin-left: 88px;
}
.user-satisfaction {
  font-size: 24px;
  float: left;
  margin-top: 23px;
}
.el-progress {
  width: 220px;
  display: inline-block;
  margin: 0 19px;
}
.star {
  line-height: 22px;
  float: right;
  margin-right: 70px;
  font-size: 13px;
}
.star > span {
  font-size: 15px;
}
video {
  width: 60px;
  height: 70px;
}
.bule {
  color: #3e9dff !important;
}
.list-item-img {
  width: 100px;
  height: 120px;
  margin-right: 10px;
}
video {
  width: 100px;
  height: 120px;
}
::v-deep .el-progress {
  .el-progress-bar {
    .el-progress-bar__outer {
      background: linear-gradient(91.5deg, #fdfeff 3.25%, #f9fbff 105.17%);
    }
  }
}
</style>
