<template>
  <div v-loading="helpLoading" class="helpMain">
     


    <!-- 留言提交部分 -->
    <div class="message">
      <!-- <el-row>
        <el-col :span="18" class="titlte">{{ $t("login.feedback") }}</el-col>
        <el-col :span="6"> <span>帮助中心后台</span> </el-col>
      </el-row> -->
      
      <el-row>
        <el-form class="registeredForm" :model="from">
          <!-- 用户名 -->
          <el-form-item>
            <div style="width: 100%">
              <span class="mandatory">*</span>{{ $t("login.userName") }}
            </div>
            <el-input
              v-model="userName"
              size="small"
              autocomplete="off"
              style="width: 73%"
              disabled
            ></el-input>
          </el-form-item>
          <!-- 标题 -->
          <el-form-item>
            <div style="width: 100%">
              <span class="mandatory">*</span>{{ $t("login.title") }}
            </div>
            <el-input
              v-model="from.title"
              type="text"
              :maxlength="inputLimit"
              show-word-limit           
              size="small"
              autocomplete="off"
              style="width: 73%"
              :placeholder="$t(`login.placeholderTitle`)"
            ></el-input>
          </el-form-item>
          <!-- 问题种类 -->
          <el-form-item>
            <div style="width: 100%">
              <span class="mandatory">*</span>{{ $t("login.kinds") }}
            </div>
            <el-select
              v-model="from.type"
              filterable
              size="small"
              :placeholder="$t(`login.placeholderTitle`)"
              @change="handelKinds"
            >
              <el-option
                v-for="item in kindsList"
                :key="item.id"
                :label="item.type"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
 
          <!-- 描述 -->
          <el-form-item>
            <div style="width: 100%">
              <span class="mandatory">*</span>{{ $t("login.description") }}
            </div>
            <!-- :autosize="{ minRows: 10, maxRows: 10}" -->
            <el-input
              resize="none"
              rows="10"
              style="width: 73%"
              type="textarea"
              v-model="from.desc"
              maxlength="630"
              show-word-limit
            ></el-input>
            <p class="description1">{{ $t("login.description1") }}</p>
          </el-form-item>
          <!-- 附件 -->
          <el-form-item>
            <div style="width: 100%">
              {{ $t("login.attachment") }}
            </div>           
              <!-- action="https://jsonplaceholder.typicode.com/posts/"  :auto-upload="false" :on-change="handelChange" :http-request="uploadFile"-->
            <el-upload
              class="upload-demo"
              ref="upload"
              drag   
              action         
              multiple
              :limit="fileLimit"             
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
              :before-upload="beforeUpload"
              :file-list="fileList"              
              :on-change="handelChange" 
              show-file-list
              :auto-upload="false"
            
           
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                {{ $t("login.Upload") }}<em> {{ $t("login.Upload1") }}</em>
              </div>
          
            </el-upload>
          </el-form-item>

          <el-button  @click="handelSubmit" type="warning" style="width: 200px">{{
            $t("login.submit")
          }}</el-button>
        </el-form>
      </el-row>

        <!-- 工单提交历史列表 -->
      <el-row >
        <el-col>
        <h5>{{$t(`help.historyTable`)}}</h5>
        <el-table class="table" :data="tableData" style="width: 80%" max-height="250"  >
           <el-table-column fixed prop="id" :label="$t(`help.num`)" width="80">
          </el-table-column>
          <!-- 提交时间 -->
          <el-table-column fixed prop="date" :label="$t(`help.submissionTime`)">
            <!-- <template  slot-scope="scope">
                {{handelTime(scope.row.date)}}
            </template> -->
          </el-table-column>
           <!-- 问题分类 -->
          <el-table-column prop="type" :label="$t(`help.problem`)" >
          </el-table-column>
           <!-- 问题标题 -->
          <el-table-column prop="title" :label="$t(`help.problemTitle`)" >
          </el-table-column>  
             <!-- 处理状态 -->
            <el-table-column prop="status" :label="$t(`help.dealWith`)" >
             
          </el-table-column>  
             <!-- 详情 -->
           <el-table-column fixed="right" :label="$t(`help.details`)" >
            <template slot-scope="scope">
              <el-button
                @click="handelDetails(scope.row)" 
                type="text"
                size="small"
              >
               {{$t(`help.details`)}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

     <!-- 确认提交 -->
    <el-dialog
      title="确认工单信息"
      :visible.sync="helpDialogVisible"
      width="60%"
     
    >
      <div class="paymentBox"> 
      <p>{{$t("login.userName")}} : <span>{{userName}}</span></p>
      <p>{{ $t("login.title") }} : <span>{{from.title}}</span></p>
      <p>{{ $t("login.kinds") }} : <span>{{ handelType(from.type) ||""}}</span></p>
      <p>{{ $t("login.description") }} : <span>{{from.desc}}</span></p>
      <div class="file">
      <h4>{{ $t("login.attachment") }}</h4>
      <div v-for="item in fileName" :key="item">        
        <span class="fileName">{{item}}</span>
      </div>
      </div>

      </div>
  
      <span slot="footer" class="dialog-footer">
        <el-button @click="helpDialogVisible = false">取 消</el-button>
        <el-button type="warning" @click="handelConfirm"
          > 确认提交</el-button
        >
      </span>
    </el-dialog>

    

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

<script>
import axios from "axios";
import IndexJs from "../help/index";
export default {
  mixins: [IndexJs],
  metaInfo: {
    meta: [
      {
        name: 'keywords',
        content: '帮助中心、工单提交、问题处理,Help Center, Work Order Submission, Problem Handling'
      },
      {
        name: 'description',
        // content:window.vm.$t(`seo.help`),
        content:window.vm.$t(`seo.help`)
        
      }
    ]
  },
  mounted() {},
  methods: {
  
  },
};
</script>

<style lang="scss" scope>

//头部显示页面

.header {
  height: 40px;
  line-height: 40px;
  padding-left: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  //  outline: 1px solid red;
  .navTitle {
    //  outline: 1px solid red;
    display: flex;
    align-items: center;
  }
}
.img {
  width: 20px;
  object-fit: cover;
}
.navLabel {
  color: rgba(0, 0, 0, 0.6);
}

.timeList {
  display: flex;
  // outline: 1px solid red;
  width: 100%;
  height: 35px;
  font-size: 12px;
  background: #100c2a;
  color: #848e9c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  align-items: center;
  margin-left: -5px;
  padding-left: 240px;
}
.timeList li {
  width: 50px;
  text-align: center;
  cursor: pointer;
}
.timeList li:hover {
  color: #f0b90b;
}
.timeBox {
  position: relative;
  margin: 0px;
  padding: 0px 10px;
}
//留言部分
.message {
  // outline: 1px solid red;
  padding: 50px 200px;
  .titlte {
    font-size: 18px;
    font-weight: 600;
    // outline: 1px solid red;
    line-height: 40px;
  }
  //from表单
  .registeredForm {
    //  outline: 1px solid red;

    .mandatory {
      color: red;
    }
  }
}
.table{
  outline: 1px solid rgba(0, 0, 0, 0.3);
}
.description1{
  color: #12a62b;
  line-height: 5px;
}
.paymentBox{
  border: 1px solid rgba(0, 0, 0, 0.3);
  padding: 10px;
  font-weight: 600;
  font-size: 15px;
  p{
    display: flex;    
    overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
  text-align: right;
  justify-content: right;
    span{
      // border: 1px solid red;
      text-align: left;
      width: 85%;
      padding-left: 10px;
      font-weight: 400;
       font-size: 14px;
    }
  }
}
.file{
  // border: 1px solid red;
  padding-left: 113px;
}
.fileName{
  display: inline-block ;
  height: 30px;
  font-weight: 360;
}
</style>
<style >
 .el-breadcrumb{
    /* outline: 1px solid red; */
    font-size: 15px;
    padding: 10px 20px;
  }
</style>