<template>
  <div class="content">
    <div class="content-left">
      <div class="content-header"><span></span>投诉信息填报</div>
      <div class="content-box">
        <a-form ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item ref="name" label="投诉内容" prop="content">
            <a-input type="textarea" :rows="8" v-model:value="form.content"></a-input>
          </a-form-item>
          <a-form-item ref="name" label="附件" >
            <a-upload
                :multiple="true"
                :file-list="fileList"
                :headers="header"
                :remove="handleRemove"
                :before-upload="beforeUpload">
              <a-button> <a-icon type="upload" /> 选择文件 </a-button>
            </a-upload>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 8 }">
            <a-button type="primary" @click="onSubmit">提交</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div class="content-right">
      <div class="content-header"><span></span>投诉信息列表</div>
      <div class="content-box">
        <div class="content-params">
           <span>投诉时间：</span><a-range-picker style="width:200px;" v-model="selectDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" separator="至" allow-clear/>
           <span>有效投诉：</span>
           <a-select v-model:value="params.isHave" placeholder="有效投诉" allow-clear style="width:120px;margin-left:10px;margin-right:15px">
              <a-select-option value="1">是</a-select-option>
              <a-select-option value="2">否</a-select-option>
           </a-select>
           <span>发送预警：</span>
           <a-select  v-model:value="params.isWarn" placeholder="发送预警" allow-clear style="width:120px;margin-left:10px;margin-right:15px">
              <a-select-option value="1">是</a-select-option>
              <a-select-option value="2">否</a-select-option>
           </a-select>
           <a-button type="primary">查询</a-button>
        </div>
        <div class="content-t">
          <a-table bordered :data-source="dataSource" :columns="columns" :pagination="pagination" @change="handleTableChange">
            <template slot="isHave" slot-scope="text, record">
              {{record.isHave===1?'是':'否'}}
            </template>
            <template slot="isWarn" slot-scope="text, record">
              {{record.isWarn===1?'是':'否'}}
            </template>
            <template slot="operation" slot-scope="text, record">
               <span style="color:#00b2ff;" @click="showDetail(record)">详情</span>
            </template>
          </a-table>
        </div>
      </div>
    </div>
    <a-modal
        title="投诉信息详情"
        v-model="open"
        @cancel="open = false"
        :footer="null"
        width="1300px">
        <div style="height:700px">
         <tsdetail v-if="open" :id="new Date().getTime()"></tsdetail>
        </div>
    </a-modal>
  </div>
</template>

<script>
import request from '../../utils/gw_ajax_request.js';
import tsdetail from './tsdetail.vue';
export default {
  components: {
    tsdetail,
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      form: {
        content: '',
      },
      selectDate: [],
      params: {
        sttm: '',
        entm: '',
        isHave: '',
        isWarn: '',
      },
      pagination: {
        current: 1, // 当前页码
        pageSize: 10, // 每页条数
        total: 0, // 总条数
        // showSizeChanger: true, // 显示每页条数选择器
        // pageSizeOptions: ['10', '20', '30', '40'], // 可选的每页条数
        // showTotal: total => `共 ${total} 条数据`, // 显示总数
      },
      open: false,
      rules: {
        content: [{ required: true, message: '请输入内容', trigger: 'change' }],
      },
      fileList: [],
      header: {
        persId: localStorage.getItem('persId'),
        accessToken: localStorage.getItem('accessToken'),
      },
      bizId: '21111111111111',
      dataSource: [
        // {name:"111111111",content:"22222222222",tm:"2025-05-11",isHave:2,isWarn:1}
      ],
      columns: [
        {
          align: 'center',
          title: '投诉人名称',
          dataIndex: 'name',
        },
        {
          align: 'center',
          title: '投诉内容',
          dataIndex: 'content',
        },
        {
          align: 'center',
          title: '投诉时间',
          dataIndex: 'tm',
        },
        {
          width: '100px',
          align: 'center',
          title: '有效投诉',
          dataIndex: 'isHave',
          dataIndex: 'isHave',
        },
        {
          width: '100px',
          align: 'center',
          title: '推送预警',
          dataIndex: 'isWarn',
          dataIndex: 'isWarn',
        },
        {
          width: '100px',
          align: 'center',
          title: '操作',
          dataIndex: 'operation',
          dataIndex: 'operation',
        },
      ],
    };
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
    hasPriv() {
      return this.ownPriv('manage');
    },
    organCode() {
      return localStorage.getItem('currentRlcode')
        ? localStorage.getItem('currentRlcode')
        : '';
    },
    organNm() {
      return localStorage.getItem('currentOrgNm')
        ? localStorage.getItem('currentOrgNm')
        : '';
    },
    orgId() {
      return localStorage.getItem('currentOrgId')
        ? localStorage.getItem('currentOrgId')
        : '';
    },
  },
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    showDetail(row) {
      this.open = true;
    },
    initData() {
      this.params.pageNum = this.pagination.current;
      this.params.pageSize = this.pagination.pageSize;
      request
        .post(`/getList`, this.params)
        .then((res) => {
          if (res.success) {
            this.pagination.total = res.data.total;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(() => {
          this.$message.error('上传文件失败!');
        });
    },
    handleTableChange(pagination) {
      this.initData();
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.fileList && this.fileList.length > 0) {
            request
              .post(`/save`, this.params)
              .then((res) => {
                if (res.success) {
                  this.bizId = res.data.id;
                  this.$message.success('保存成功');
                  this.handleUpload();
                } else {
                  this.$message.error(res.message);
                }
              })
              .catch(() => {
                this.$message.error('上传文件失败!');
              });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // handleChange (info) {
    //   this.fileList = info.fileList;
    // },
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    handleUpload() {
      const { fileList } = this;
      fileList.forEach((file) => {
        const formData = new FormData();
        formData.append('file', file);
        request
          .post(`/file/insert?bizId=${this.bizId}`, formData)
          .then((res) => {
            if (res.success) {
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(() => {
            this.$message.error('上传文件失败!');
          });
      });
      this.ruleForm.resetFields();
      this.fileList = [];
    },
  },
};
</script>

<style lang='less' scoped>
   .content{
     width: 100%;
     height:100%;
     display: flex;
     padding: 10px;
   }
   .content-left{
     width: 30%;
     height:100%;
     border:1px solid #f1f1f1;
   }
   .content-right{
     width: 70%;
     height:100%;
     border:1px solid #f1f1f1;
   }
   .content-header{
     width: 100%;
     height:40px;
     text-indent: 10px;
     border-bottom:1px solid #f1f1f1;
     font-size: 15px;
     font-weight: bold;
     display: flex;
     align-items: center;
     span{
       display: block;
       width: 10px;
       height:20px;
       background: #00A3EF;
       margin-left: 10px;
       margin-right: 10px;
     }
   }
   .content-box{
     width: 100%;
     height:calc(100% - 41px);
     padding: 10px;
   }
   .content-params{
     display: flex;
     align-items: center;
     padding: 5px;
     span{
       margin-left: 10px;
     }
   }
</style>
