<template>
  <div>
    <a-card title="查询条件">
      <a-form
        :form="commentForm"
        layout="inline"
        class="search-box"
      >
        <a-form-item
          label="开始时间"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-date-picker
            v-model="commentForm.startDate"
            :show-time="{defaultValue: moment('2017-09-09 00:00:00')}"
            placeholder="选择时间"
          />
        </a-form-item>

        <a-form-item
          label="结束时间"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-date-picker
            v-model="commentForm.endDate"
            :show-time="{defaultValue: moment('2017-09-09 23:59:59')}"
            placeholder="选择时间"
          />
        </a-form-item>
        <a-form-item
          label="微信订单号"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input allowClear v-model="commentForm.orderNo" />
        </a-form-item>

        <a-form-item
          label="评价星级"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-select v-model="commentForm.scores">
            <a-select-option value="">不限</a-select-option>
            <a-select-option v-for="score in [1, 2, 3, 4, 5]" :key="score" :value="score">{{ score }}星</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="审核状态"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <!-- 0未审核，1审核驳回，2审核通过 -->
          <a-select v-model="commentForm.status">
            <a-select-option value="">不限</a-select-option>
            <a-select-option value="0">未审核</a-select-option>
            <a-select-option value="1">审核驳回</a-select-option>
            <a-select-option value="2">审核通过</a-select-option>
          </a-select>
        </a-form-item>

        <div class="btn-wrap">
          <a-button
            type="primary"
            html-type="button"
            @click="handleSearch"
          >
            搜索
          </a-button>
        </div>
      </a-form>
    </a-card>

    <a-card title="订单列表">
      <a-spin :spinning="loading">
        <a-table
          :columns="columns"
          :data-source="commentList"
          :pagination="pagination"
          :row-key="record => record.id"
          @change="handleTableChange"
        >
          <template
            slot="status"
            slot-scope="text, record"
          >
            <a-tag :color="record.status | statusColor">
              {{ record.status | statusName }}
            </a-tag>
          </template>
          <template
            slot="addTime"
            slot-scope="text, record"
          >
            {{ moment(record.addTime).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
          <template
            slot="status"
            slot-scope="text, record"
          >
            <a-tag :color="record.status==='WAIT_SALE'?'blue':'green'">
              {{ record.status === 2 ? '通过' : (record.status === 1 ? '驳回' : '未审核') }}
            </a-tag>
          </template>
          <template
            slot="operation"
            slot-scope="text, record"
          >
            <a-button
              size="small"
              type="primary"
              @click="showCheck(record.id)"
            >
              审核
            </a-button>
            <a-popconfirm
              title="确定取消此预约订单？"
              @confirm="cancelOrder(record.id)"
            >
              <a-button
                size="small"
                type="primary"
                v-if="record.status === 'WAIT_USE'"
              >
                取消预约
              </a-button>
            </a-popconfirm>
          </template>
        </a-table>
      </a-spin>
    </a-card>
    <a-modal v-model="checkModalvisible" title="审核评价" @ok="handleCheckOk" @cancel="handleCheckCancel">
      <a-form :form="form" ref="form" style="width: 100%;">
        <a-form-item label="审核状态处理">
          <a-select v-model="checkForm.status">
            <a-select-option value="1">驳回</a-select-option>
            <a-select-option value="2">通过</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="审核回复内容">
          <a-input v-model="checkForm.handleContent" type="textarea" :rows="4"></a-input>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button key="back" @click="handleCheckCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="handleCheckOkWrapper">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { getEvaluateList, checkEvaluate } from '@/api/orderSetting/comment'
import OrderDetail from './OrderDetail'
import moment from 'moment'

const columns = [
  {
    title: '微信订单号',
    dataIndex: 'orderNo',
    key: 'orderNo',
    width: 160
  },
  {
    title: '订单id',
    dataIndex: 'orderId',
    key: 'orderId',
    width: 80
  },
  {
    title: '评价星级',
    dataIndex: 'scores',
    key: 'scores',
    width: 80
  },
  {
    title: '评价内容',
    dataIndex: 'evaluation',
    key: 'evaluation',
    width: 450
  },
  {
    title: '添加时间',
    dataIndex: 'addTime',
    key: 'addTime',
    scopedSlots: { customRender: 'addTime' },
    width: 140
  },
  /*
  {
    title: '处理人',
    dataIndex: 'managerId	',
    key: 'managerId	'
  },
  */
  {
    title: '审核意见',
    dataIndex: 'handleContent',
    key: 'handleContent	'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  created () {
    this.getEvaluateList()
  },
  components: {
    OrderDetail
  },
  data () {
    return {
      commentForm: {
        startDate: moment().startOf('day'), // startDate => 评价开始日期
        endDate: moment().endOf('day'), // endDate => 评价结束日期
        orderNo: '', // orderNo => 订单编号
        status: '', // status => 状态
        scores: '' // scores => 评分等级
      },
      checkForm: {
        id: 0,
        status: '',
        handleContent: ''
      },
      commentList: [],
      columns,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      layout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      loading: true,
      checkModalvisible: false
    }
  },
  methods: {
    moment,
    showCheck (id) {
      this.checkModalvisible = true
      this.checkForm.id = id
      this.checkForm.status = ''
      this.checkForm.handleContent = ''
    },
    handleSearch () {
      this.pagination.current = 1
      this.getEvaluateList()
    },
    handleTableChange (page) {
      this.pagination.current = page.current
      this.getEvaluateList()
    },
    getEvaluateList () {
      this.loading = true
      console.log(this.commentForm)
      const params = { ...this.commentForm, pageNo: this.pagination.current, pageSize: 10 }
      getEvaluateList(params).then(res => {
        this.pagination.total = res.extraInfo.total
        this.commentList = res.extraInfo.list
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    handleCheckOkWrapper () {
      this.$confirm({
        title: '确认提交审核意见',
        content: '确定要提交审核意见吗？',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          // 执行提交审核操作
          this.handleCheckOk()
        },
        onCancel: () => {
          // 取消提交审核操作
        }
      })
    },
    handleCheckOk () {
      // 执行审核操作
      this.checkModalvisible = false
      checkEvaluate(this.checkForm).then(res => {
        this.$message.success('提交审核意见成功')
        // 提交审核后刷新
        this.getEvaluateList()
      }).catch(() => {
        this.$message.error('提交审核意见失败')
      })
    },
    handleCheckCancel () {
      this.checkModalvisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  position: relative; padding-left: 80px;  margin-bottom: 15px; font-size: 14px;
  b {
    position: absolute; top: 0; left: 0;  margin-right: 10px;
  }
}
.ant-form-item {
  width: 264px;
}
::v-deep .ant-input,.select-input,.ant-input-affix-wrapper{
  width: 185px;
}
.checkbox-wrap {
  display: flex;  width: 100%; align-items: center;
  .ant-form-item-label{
    flex-grow: 0; flex-shrink: 0;
  }
  ::v-deep .ant-checkbox-group {
    display: inline;
  }
  .ant-checkbox-wrapper{
    margin-right: 5px;
  }
  .ant-checkbox-wrapper + .ant-checkbox-wrapper {
    margin-left: 0;
  }
}
</style>
