<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="日期">
            <el-date-picker
                v-model="dateRange"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期" clearable
                format="yyyy-MM-dd" style="width: 220px"
                :picker-options="pickerOptions" >
            </el-date-picker> 
        </el-form-item>
        <el-form-item label="投诉建议">
            <el-input v-model="queryParams.content" placeholder="请输入投诉建议" maxlength="20" clearable style="width: 220px"/>
        </el-form-item> 
        <el-form-item label="所属食堂" prop="canteenId">
            <el-select v-model="queryParams.canteenId" clearable placeholder="请选择所属食堂" style="width: 220px">
                <el-option v-for="item in canteenOptions"
                    :key="item.canteenId"
                    :label="item.canteenName"
                    :value="item.canteenId"
                ></el-option>
            </el-select> 
        </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> 
      <el-row :gutter="10" class="mb8">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row> 
      <el-table v-loading="loading" :data="tableListData" height="800">
        <el-table-column label="序号" align="center" width="80" type="index">
            <template scope="scope"> 
                <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
            </template> 
        </el-table-column> 
        <el-table-column label="投诉人" align="center" prop="createBy" :show-overflow-tooltip="true"/>
        <el-table-column label="用户手机号" align="center" prop="contactTel" :show-overflow-tooltip="true"/>
        <el-table-column label="投诉日期" align="center" prop="createTime" :show-overflow-tooltip="true"/>
        <!-- <el-table-column label="所属区域" align="center" prop="areaName" :show-overflow-tooltip="true"/> -->
        <el-table-column label="所属食堂" align="center" prop="canteenName" :show-overflow-tooltip="true"/>
        <!-- <el-table-column label="来源" align="center" prop="sourceName" :show-overflow-tooltip="true"/> -->
        <el-table-column label="投诉建议内容" align="center" prop="content" :show-overflow-tooltip="true"/>
        <!-- <el-table-column label="图片" align="center" prop="complaintPicture" :show-overflow-tooltip="true" width="100">
            <template slot-scope="scope">
                <img :src="scope.row.complaintPicture" alt="" v-if="scope.row.complaintPicture" style="width: 80px;height: 40px;" @click="openImg(scope.row)">
                <span v-else>无</span>
            </template>
        </el-table-column> -->
        <el-table-column label="回复内容" align="center" prop="replyContent" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text" 
              @click="handleView(scope.row)" 
            >详情</el-button>
            <el-button
              size="mini"
              type="text" 
              @click="handleUpdate(scope.row)" 
            >回复</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="open" width="700px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="投诉人" prop="createBy">
                <el-input v-model="form.createBy" disabled style="width: 100%"/>
            </el-form-item>
            <el-form-item label="用户手机号" prop="contactTel">
                <el-input v-model="form.contactTel" disabled style="width: 100%"/>
            </el-form-item> 
            <el-form-item label="投诉建议内容" prop="content">
                <el-input
                    type="textarea"
                    :rows="3" style="width: 100%;margin: 0 auto;"
                    placeholder="投诉建议内容" disabled
                    v-model="form.content">
                </el-input>
            </el-form-item>
            <el-form-item label="投诉建议图片" v-if="form.suggestionPictures&&form.suggestionPictures.length>0">
              <div style="width: 100%;display: flex;">
                <div v-for="(item,index) in form.suggestionPictures" :key="index" style="width: 100px;height: 100px;margin-right: 10px;">
                  <img :src="item.imgUrl" alt="" style="width: 80px;height: 80px;" @click="openImg(item)">
                </div> 
              </div> 
            </el-form-item>
            <el-form-item label="回复" prop="replyContent">
                <el-input
                    type="textarea"
                    :rows="3" style="width: 100%;margin: 0 auto;"
                    placeholder="请输入回复内容" maxlength="150"
                    v-model="form.replyContent">
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      
      <el-dialog title="投诉建议内容" :visible.sync="contentVisible" width="600px" append-to-body>
        <div style="font-weight: 600;margin-bottom: 10px;" v-if="suggestionPictures.length>0">投诉建议图片</div>
        <div style="width: 100%;display: flex;" v-if="suggestionPictures.length>0">
          <div v-for="(item,index) in suggestionPictures" :key="index" style="width: 100px;height: 100px;margin-right: 10px;">
            <img :src="item.imgUrl" alt="" style="width: 80px;height: 80px;" @click="openImg(item)">
          </div> 
        </div> 
        <div style="font-weight: 600;margin-bottom: 10px;">投诉建议内容</div>
        <el-input
            type="textarea"
            :rows="5" style="width: 100%;margin: 0 auto;"
            placeholder="投诉建议内容" readonly="true" maxlength="150"
            v-model="dialogContent">
        </el-input>
        <div slot="footer" class="dialog-footer"> 
          <el-button @click="contentVisible=false">取 消</el-button>
        </div>
      </el-dialog>
      
      <el-dialog :visible.sync="dialogVisible" width="700px">
        <img style="width: 100%;height: 100%;" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
  </template>
  
  <script> 
  import { getCanteenByAreaApi } from "@/api/base/stall";
  import { getPlaintByPageApi,replyComplaintApi } from "@/api/base/mobile";
  import { decryptWithSM4,encryptWithSM4 } from '@/utils/sm';
  export default {
    name: "",
    dicts: [],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        //表格数据
        tableListData: [], 
        // 是否显示弹出层
        open: false, 
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          content:null, 
          canteenId:null, 
        },
        dateRange:[],
        pickerOptions: {
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                const start = new Date();
                const end = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
                picker.$emit('pick', [start, end]);
                }
            },{
                text: '最近一个月',
                onClick(picker) {
                const start = new Date();
                const end = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
                }
            },{
                text: '最近三个月',
                onClick(picker) {
                const start = new Date();
                const end = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
                picker.$emit('pick', [start, end]);
                }
            }]
        },
        treeAreaOptions:[],//区域树
        canteenOptions:[],//查询-食堂下拉选
        sourceTypesOptions:[],//查询-来源下拉选
        dialogVisible:false,//图片弹窗
        dialogImageUrl:"",//图片弹窗
        contentVisible:false,//详情内容弹窗
        dialogContent:"",//详情内容
        suggestionPictures:[],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          replyContent: [
            { required: true, message: "回复内容不能为空", trigger: "blur" }
          ]
        }
      };
    },
    created() { 
    //   this.getAreaTreeData();
      this.handleAreaChange();
      this.getList();
    },
    methods: {
        //区域树
        // getAreaTreeData() {
        //     systemAreaTreeApi({}).then((response) => {
        //         this.treeAreaOptions = response.data; 
        //     });
        // },
        handleAreaChange(){ 
            let param= {
                "canteenType": 1
            }
            getCanteenByAreaApi(param).then((response) => {
                this.canteenOptions=response.rows||[]
                this.queryParams.canteenId=null
            });
        },
        
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() { 
            this.dateRange=[]
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                content:null, 
                canteenId:null, 
            }
            this.resetForm("queryForm"); 
            this.handleQuery();
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            let param = { 
                    content:this.queryParams.content, 
                    canteenId:this.queryParams.canteenId, 
                    startTime:null,
                    endTime:null,  
                    "pageNum": this.queryParams.pageNum, 
                    "pageSize": this.queryParams.pageSize,   
            }
            console.log(param)
            if(this.dateRange.length>0){
                param.startTime = this.formatDate(this.dateRange[0])
                param.endTime = this.formatDate(this.dateRange[1])
            }
            getPlaintByPageApi(param).then(response => {
                this.tableListData = response.rows;
                this.total = Number(response.total);
                this.tableListData.forEach(item=>{
                    this.$set(item,"contactTel",decryptWithSM4(item.contactTel))
                })  
                this.loading = false;
            });
        },
        /** 回复按钮操作 */
        handleUpdate(row) {
            this.reset();
            this.form = Object.assign({}, row)   
            this.open = true;  
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {};
            this.resetForm("form");
        }, 
        /** 提交按钮 */
        submitForm: function() {
            this.$refs["form"].validate(valid => {
            if (valid) { 
                    let param = {
                        suggestionId:this.form.suggestionId,
                        replyContent:this.form.replyContent
                    } 
                    replyComplaintApi(param).then(response => {
                        this.$modal.msgSuccess("回复成功");
                        this.open = false;
                        this.getList();
                    }); 
            }
            });
        },
        /** 详情按钮操作 */
        handleView(row) {
            this.dialogContent = row.content||'';
            this.suggestionPictures = row.suggestionPictures||[];
            this.contentVisible = true;
        },
        openImg(row) {
          this.dialogImageUrl = row.imgUrl;
          this.dialogVisible = true;
        },
        //日期
        formatDate(date) {
            // 格式化为 YYYY-MM-DD
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        } 
    }
  };
  </script>
  