<template>
  <div>
    <div class="serch-wrap">
      <el-row :gutter="20">
        <el-form ref="form" :model="form" label-width="60px" label-position="left">
          <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1">
            <el-form-item label="问题类型">
              <el-select v-model="form.region" placeholder="请选择问题类型">
                <el-option label="问题类型1" value="1"/>
                <el-option label="问题类型2" value="2"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1">
            <el-form-item label="状态">
              <el-select v-model="form.region" placeholder="请选择状态">
                <el-option label="状态1" value="11"/>
                <el-option label="状态2" value="22"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="16" :sm="6" :md="3" :lg="3" :xl="1">
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-col>
        </el-form>
      </el-row>
    </div>

    <el-card shadow="always" class="card-second-top">
      <div slot="header" class="clearfix" style="line-height: 32px;">
        <span>详细记录</span>
        <el-button type="primary" size="small"  style="float: right" @click="dialogFormVisible = true">评价</el-button>
      </div>
      <el-table
        :data="orderData"
        style="width: 100%;"
        :show-overflow-tooltip="true">
        <el-table-column
          prop="parkName"
          label="问题类型"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="license"
          label="问题内容"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="inTime"
          label="提交时间"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        :pager-count="11"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </el-card>

    <el-dialog title="提交问题" :visible.sync="dialogFormVisible">
      <el-form :model="problemform">
        <el-form-item label="">
          <el-radio-group v-model="problemform.resource" size="">
            <el-radio border label="APP问题"></el-radio>
            <el-radio border label="支付问题"></el-radio>
            <el-radio border label="车场问题"></el-radio>
            <el-radio border label="服务投诉"></el-radio>
            <el-radio border label="改进建议"></el-radio>
            <el-radio border label="其他问题"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="问题内容">
          <el-input type="textarea" v-model="problemform.desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        problemform: {
          desc: ''
        },
        dialogFormVisible: false,
        total: 55,
        currentPage: 1,
        pageSize: 10,
        orderData: [
          {
            parkName: 'APP问题',
            license: '任你停APP闪退',
            inTime: '2019/03/07',
            status: '已受理'
          },
          {
            parkName: '支付问题',
            license: '建议开通银联支付',
            inTime: '2019/06/02',
            status: '已受理'
          },
          {
            parkName: '改进建议',
            license: '建议减免电动车停车费',
            inTime: '2019/06/02',
            status: '未受理'
          },
        ]
      }
    },
    methods: {
      onSubmit() {
        this.$message('提交!')
      },
      problemonSubmit() {
        this.$message('提交成功!')
      },
      onCancel() {
        this.$message({
          message: 'cancel!',
          type: 'warning'
        })
      },
    }
  }
</script>

<style lang="scss">
  .serch-wrap{
    background-color: #FFF;
    padding: 15px;
  }
  .card-second-top{
    margin-top: 15px;
  }
  .el-card__header{
    padding: 10px 20px;
  }
  .el-radio{
    margin-right: 80px;
  }
  .el-radio.is-bordered+.el-radio.is-bordered{
    margin-left: 0px;
    margin-top: 15px;
  }
</style>

