<template>
  <div>
    <el-form :inline="true" :model="query" @keyup.enter.native="getDataList()">
      <el-form-item label="账户名">
        <el-input
          v-model="query.account"
          placeholder="请输入账户名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="工单类型">
        <!-- <el-input
          v-model="query.type"
          placeholder="出版社名称"
          clearable
        ></el-input> -->
        <el-select v-model="query.type" placeholder="请选择" clearable @change="selectChange">
          <el-option
            v-for="item in typeLIst"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单状态" >
        <!-- <el-input
          v-model="query.status"
          placeholder="作者姓名"
          clearable
        ></el-input> -->
        <el-select v-model="query.status" placeholder="请选择" clearable @change="selectChange">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;"
    >
      <el-table-column
        prop="type" width="150"
        header-align="center"
        align="center"
        label="工单类型"
      >
        <template slot-scope="scope">
          {{ scope.row.type | getType }}
        </template>
      </el-table-column>
      <el-table-column
        prop="account" width="150"
        header-align="center"
        align="center"
        label="用户账户"
      >
      </el-table-column>
      <el-table-column
        prop="content"
        header-align="center"
        align="left"
        label="问题描述"
      >
      <template slot-scope="scope">
        <div>问题描述：{{scope.row.content}}</div>
        <div>提交时间：{{scope.row.createTime}}</div>
        <div v-if="scope.row.type == '3'">关联订单号：{{scope.row.relation}}</div>
      </template>
      </el-table-column>
      <el-table-column width="150"
        prop="contactInformation"
        header-align="center"
        align="center"
        label="联系电话"
      >
      </el-table-column>
      <el-table-column       
        header-align="center"
        align="center"
        label="问题截图"
      >
      <template slot-scope="scope"> 
        <div v-if="scope.row.images && scope.row.images.length > 0">         
          <img @click="clickImg(item)" :src="item" v-for="(item, index) in scope.row.images" :key="index" style="width:60px; cursor: pointer;"/>
        </div>      
        
      </template>
    </el-table-column>
    <el-table-column width="160" v-if="query.status == 1"
        prop="updateTime"
        header-align="center"
        align="center"
        label="处理时间"
      >
      </el-table-column>
      <el-table-column header-align="center" align="center" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button v-show="query.status == 0"
            type="primary" plain
            size="small"
            @click="changeHandle(scope.row)"
            >标记为已处理</el-button
          >
          <el-button  
            type="danger" style="margin-top:15px"
            size="small" plain
            @click="deleteHandle(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <img-prev-vue v-if="showImg" :url="curImg" @close="closeImg"></img-prev-vue>  
  </div>
</template>

<script>
import imgPrevVue from '../../components/imgPrev.vue';

export default {
  data() {
    return {
      query: {
        account: "",
        type: "",
        status: "0"
      },
      showImg:false,
      curImg:'',
      dataList: [],
      dataListLoading: false,
      statusList: [
        // { value: 0, text: "请选择" },
        {
          value: "0",
          text: "未处理"
        },
        {
          value: "1",
          text: "已处理"
        }
      ],
      // pageIndex
      typeLIst: [
        // { value: 0, text: "请选择" },
        {
          value: 1,
          text: "登陆相关问题"
        },
        {
          value: 2,
          text: "账号相关问题"
        },
        {
          value: 3,
          text: "订单相关问题"
        },
        {
          value: 4,
          text: "购买相关问题"
        },
        {
          value: 5,
          text: "VIP相关问题"
        },
        {
          value: 6,
          text: "充值相关问题"
        },
        {
          value: 7,
          text: "网络暴力举报"
        },
        {
          value: 8,
          text: "其他"
        }
      ]
    };
  },
  created() {
    this.getDataList();
  },
  filters: {
    getType: function(value) {
      var _str = "";
      switch (value) {
        case "1":
          _str = "登陆相关问题";
          break;

        case "2":
          _str = "账号相关问题";
          break;

        case "3":
          _str = "订单相关问题";
          break;

        case "4":
          _str = "购买相关问题";
          break;

        case "5":
          _str = "VIP相关问题";
          break;

        case "6":
          _str = "充值相关问题";
          break;

        case "7":
          _str = "网络暴力举报";
          break;

        case "8":
          _str = "其他";
          break;
      }

      return _str;
    }
  },
  components:{
    imgPrevVue
  },
  methods: {
    selectChange(){
      this.getDataList()
    },
    closeImg(){      
      this.showImg = false
      this.curImg = ''
    },
    clickImg(url){
      console.log('url',url)
      this.curImg = url
      this.showImg = true
    },
    changeHandle(val){
      this.$http({
        url: this.$http.adornUrl("/common/sysFeedback/editStatusById"),
        method: "post",
        data: this.$http.adornData({ sysFeedbackId: val.id })
      })
        .then(({ data }) => {
          this.$message.success('设置成功')
          this.getDataList()
        }).catch(e => {          
          this.$message.error("设置失败");
        });
    },
    deleteHandle(val){
      this.$http({
        url: this.$http.adornUrl("/common/sysFeedback/delById"),
        method: "post",
        data: this.$http.adornData({ sysFeedbackId: val.id })
      })
        .then(({ data }) => {
          this.$message.success('删除成功')
          this.getDataList()
        }).catch(e => {          
          this.$message.error("删除失败");
        });
    },
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/common/sysFeedback/getList"),
        method: "post",
        data: this.$http.adornData({ ...this.query })
      })
        .then(({ data }) => {
          if (data.code == 0) {
            let _list = []
            if(data.res.length > 0){
              _list = data.res
              _list.forEach(item => {                
                if(item.image && item.image != ''){
                  item.images = item.image.split(",");
                  // console.log('item.image',item.images)
                }               
              })              
            }
            console.log('_list',_list)
              this.dataList = _list;
          }
          this.$nextTick(() => {
            this.dataListLoading = false;
          });
        })
        .catch(e => {
          this.dataList = [];
          this.dataListLoading = false;
          this.$message.error("获取数据失败");
          // console.log("表单提交报错");
        });
    }
  }
};
</script>

<style lang="less" scoped></style>
